sea-dev 1.0.0

package/apps/main/src/routes/_authed/_app/pipelines/$pipelineId/index.tsx

@@ -0,0 +1,911 @@
+import { ChatMessages } from "@/components/chat/chat-messages";
+import { Container } from "@/components/header/container";
+import { FormViewerModal } from "@/components/modals/form-viewer";
+import { SidebarRight } from "@/components/sidebar/sidebar-right";
+import type { ChatModel } from "@sea/db/schema";
+import { RelDate } from "@sea/ui/components/misc/rel-date";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@sea/ui/components/ui/accordion";
+import { Badge } from "@sea/ui/components/ui/badge";
+import { Button } from "@sea/ui/components/ui/button";
+import { Card, CardDescription, CardTitle } from "@sea/ui/components/ui/card";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@sea/ui/components/ui/dialog";
+import { Input } from "@sea/ui/components/ui/input";
+import { Label } from "@sea/ui/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@sea/ui/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@sea/ui/components/ui/table";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@sea/ui/components/ui/tabs";
+import { Textarea } from "@sea/ui/components/ui/textarea";
+import { H1 } from "@sea/ui/components/ui/typography";
+import { Link, createFileRoute, useNavigate, useRouter } from "@tanstack/react-router";
+import { useServerFn } from "@tanstack/react-start";
+import {
+  CheckCircleIcon,
+  ClockIcon,
+  PencilIcon,
+  PlayIcon,
+  PlusIcon,
+  Trash2Icon,
+  XCircleIcon,
+} from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+import {
+  addStepDependencyFn,
+  createPipelineRunFn,
+  createStepFn,
+  deletePipelineFn,
+  getPipelineDataFn,
+  removeStepDependencyFn,
+  updatePipelineFn,
+  updateStepFn,
+} from "../-fns";
+import { DAGView } from "./-components/dag-view";
+import { StepConfigModal } from "./-components/step-config-modal";
+
+export const Route = createFileRoute("/_authed/_app/pipelines/$pipelineId/")({
+  loader: async ({ params: { pipelineId } }) => {
+    // Fetch both config data (forms, resources) and pipeline data (runs)
+    return getPipelineDataFn({ data: { pipelineId } });
+  },
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  const router = useRouter();
+
+  const { pipelineId } = Route.useParams();
+  const { pipeline, forms, runs, deals, conversation } = Route.useLoaderData();
+
+  // Server functions
+  const deletePipeline = useServerFn(deletePipelineFn);
+  const createPipelineRun = useServerFn(createPipelineRunFn);
+  const updatePipeline = useServerFn(updatePipelineFn);
+  const updateStep = useServerFn(updateStepFn);
+  const createStep = useServerFn(createStepFn);
+  const addDependency = useServerFn(addStepDependencyFn);
+  const removeDependency = useServerFn(removeStepDependencyFn);
+
+  // Main UI state
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [statusFilter, setStatusFilter] = useState<string>("all");
+  const [selectedFormId, setSelectedFormId] = useState<string | null>(null);
+  const [stepsViewMode, setStepsViewMode] = useState<"list" | "dag">("list");
+
+  // Step editing state
+  const [selectedStepId, setSelectedStepId] = useState<string | null>(null);
+  const [isCreatingStep, setIsCreatingStep] = useState(false);
+
+  // Deal selection for creating runs
+  const [showDealSelectionModal, setShowDealSelectionModal] = useState(false);
+  const [selectedDealId, setSelectedDealId] = useState<string | null>(null);
+
+  const navigate = useNavigate();
+
+  // Poll for updates if there are any non-complete runs
+  const hasActiveRuns = useMemo(() => {
+    return runs.some((run) => run.status === "pending" || run.status === "running");
+  }, [runs]);
+
+  useEffect(() => {
+    if (!hasActiveRuns) return;
+
+    const interval = setInterval(() => {
+      router.invalidate();
+    }, 3000); // Poll every 3 seconds
+
+    return () => clearInterval(interval);
+  }, [hasActiveRuns, router]);
+
+  const crumbs = [
+    { href: "/pipelines", label: "Pipelines" },
+    { href: `/pipelines/${pipelineId}`, label: pipeline.name },
+  ];
+
+  const sidebar = (
+    <SidebarRight className="border-none">
+      <ChatMessages
+        conversation={conversation}
+        conversationId={conversation.id}
+        chatIsLoading={false}
+        chatModel={conversation.model as ChatModel}
+      />
+    </SidebarRight>
+  );
+
+  const handleDelete = async () => {
+    if (!confirm("Are you sure you want to delete this pipeline? This action cannot be undone.")) {
+      return;
+    }
+    setIsDeleting(true);
+    try {
+      await deletePipeline({ data: { pipelineId } });
+      navigate({ to: "/pipelines" });
+    } catch (error) {
+      alert("Failed to delete pipeline");
+      setIsDeleting(false);
+    }
+  };
+
+  const filteredRuns = useMemo(() => {
+    if (statusFilter === "all") return runs;
+    return runs.filter((run) => run.status === statusFilter);
+  }, [runs, statusFilter]);
+
+  const getStatusBadgeVariant = (
+    status: string,
+  ): "default" | "secondary" | "destructive" | "green" => {
+    if (status === "completed" || status === "success") return "green";
+    if (status === "failed" || status === "error") return "destructive";
+    if (status === "running" || status === "pending") return "secondary";
+    return "default";
+  };
+
+  const getStatusIcon = (status: string) => {
+    if (status === "completed" || status === "success")
+      return <CheckCircleIcon className="size-4 text-green-500" />;
+    if (status === "failed" || status === "error")
+      return <XCircleIcon className="text-destructive size-4" />;
+    if (status === "running") return <PlayIcon className="size-4 text-blue-500" />;
+    return <ClockIcon className="text-muted-foreground size-4" />;
+  };
+
+  const getDuration = (run: (typeof runs)[0]) => {
+    if (!run.completedAt) return null;
+    return new Date(run.completedAt).getTime() - new Date(run.startedAt).getTime();
+  };
+
+  const formatDuration = (ms: number | null) => {
+    if (!ms) return "-";
+    const seconds = ms / 1000;
+    if (seconds < 60) return `${seconds.toFixed(0)}s`;
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = Math.floor(seconds % 60);
+    return `${minutes}m ${remainingSeconds}s`;
+  };
+
+  const statusCounts = useMemo(() => {
+    const succeeded = runs.filter((r) => r.status === "completed" || r.status === "success").length;
+    const running = runs.filter((r) => r.status === "running").length;
+    const failed = runs.filter((r) => r.status === "failed" || r.status === "error").length;
+    const queued = runs.filter((r) => r.status === "pending" || r.status === "queued").length;
+    return { succeeded, running, failed, queued };
+  }, [runs]);
+
+  const handleCreateRunClick = () => {
+    if (deals.length === 0) {
+      toast.error("No deals available. Please create a deal first.");
+      return;
+    }
+    setShowDealSelectionModal(true);
+  };
+
+  const handleConfirmCreateRun = async () => {
+    if (!selectedDealId) {
+      toast.error("Please select a deal");
+      return;
+    }
+
+    try {
+      // Create empty run - user will configure dependencies on run page
+      const { runId } = await createPipelineRun({
+        data: {
+          pipelineId,
+          dealId: selectedDealId,
+        },
+      });
+
+      toast.success("Pipeline run created!");
+      setShowDealSelectionModal(false);
+      setSelectedDealId(null);
+      navigate({
+        to: "/pipelines/$pipelineId/$runId",
+        params: { pipelineId, runId },
+      });
+    } catch (error) {
+      console.error("Failed to create run:", error);
+      toast.error(
+        error instanceof Error ? error.message : "Failed to create run. Please try again.",
+      );
+    }
+  };
+
+  return (
+    <Container crumbs={crumbs} sidebar={sidebar}>
+      <div className="space-y-6">
+        {/* Header */}
+        <div className="flex items-start justify-between">
+          <div className="space-y-2">
+            <div className="flex items-center gap-3">
+              <RenamePipelineModal pipeline={pipeline} />
+              <Badge variant={pipeline.isActive ? "green" : "secondary"}>
+                {pipeline.isActive ? "Active" : "Inactive"}
+              </Badge>
+            </div>
+            <p className="text-muted-foreground">{pipeline.description}</p>
+            <p className="text-muted-foreground text-sm">
+              Created <RelDate date={pipeline.createdAt} /> • Updated{" "}
+              <RelDate date={pipeline.updatedAt} />
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button variant="default" onClick={handleCreateRunClick}>
+              <PlusIcon className="mr-2 size-4" />
+              Create New Run
+            </Button>
+            <Button variant="destructive" onClick={handleDelete} disabled={isDeleting}>
+              <Trash2Icon className="mr-2 size-4" />
+              {isDeleting ? "Deleting..." : "Delete"}
+            </Button>
+          </div>
+        </div>
+
+        {/* Tabs for Steps and Runs */}
+        <Tabs defaultValue="steps" className="space-y-4">
+          <TabsList>
+            <TabsTrigger value="steps">Pipeline Steps</TabsTrigger>
+            <TabsTrigger value="runs">Runs ({runs.length})</TabsTrigger>
+          </TabsList>
+
+          {/* Pipeline Steps Tab */}
+          <TabsContent value="steps" className="space-y-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <CardTitle>Pipeline Steps</CardTitle>
+                <CardDescription>
+                  Execution workflow including data extraction and processing steps
+                </CardDescription>
+              </div>
+              <div className="flex gap-1 rounded-lg border p-0.5">
+                <button
+                  type="button"
+                  onClick={() => setStepsViewMode("list")}
+                  className={`rounded-md px-3 py-1 text-sm font-medium transition-colors ${
+                    stepsViewMode === "list"
+                      ? "bg-primary text-primary-foreground"
+                      : "hover:bg-muted"
+                  }`}
+                >
+                  List
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setStepsViewMode("dag")}
+                  className={`rounded-md px-3 py-1 text-sm font-medium transition-colors ${
+                    stepsViewMode === "dag"
+                      ? "bg-primary text-primary-foreground"
+                      : "hover:bg-muted"
+                  }`}
+                >
+                  DAG
+                </button>
+              </div>
+            </div>
+
+            {stepsViewMode === "list" ? (
+              <div className="space-y-2">
+                <Accordion type="multiple" className="rounded-lg border px-4">
+                  {/* Pipeline Steps */}
+                  {pipeline.steps.map((step, idx) => (
+                    <AccordionItem
+                      key={step.id}
+                      value={`step-${idx}`}
+                      className={idx === pipeline.steps.length - 1 ? "border-b-0" : ""}
+                    >
+                      <AccordionTrigger>
+                        <div className="flex w-full items-center gap-4">
+                          <div className="bg-primary/10 text-primary flex size-10 shrink-0 items-center justify-center rounded-lg font-semibold">
+                            {idx + 1}
+                          </div>
+                          <div className="flex flex-1 items-center gap-2">
+                            <span className="font-semibold">{step.name}</span>
+                            {step.role && (
+                              <Badge variant="outline" className="text-xs font-normal">
+                                {step.role}
+                              </Badge>
+                            )}
+                            {step.type === "multi" && (
+                              <Badge variant="secondary" className="text-xs font-normal">
+                                multi
+                              </Badge>
+                            )}
+                          </div>
+                          <div
+                            role="button"
+                            tabIndex={0}
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              setSelectedStepId(step.id);
+                            }}
+                            onKeyDown={(e) => {
+                              if (e.key === "Enter" || e.key === " ") {
+                                e.stopPropagation();
+                                e.preventDefault();
+                                setSelectedStepId(step.id);
+                              }
+                            }}
+                            className="hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring shrink-0 rounded-md p-2 transition-colors focus-visible:ring-2 focus-visible:outline-none"
+                          >
+                            <PencilIcon className="size-4" />
+                          </div>
+                        </div>
+                      </AccordionTrigger>
+                      <AccordionContent>
+                        <div className="space-y-4">
+                          <p className="text-muted-foreground text-sm">{step.description}</p>
+                          {(step.toolsAllowed ?? []).length > 0 && (
+                            <div className="flex flex-wrap gap-2">
+                              <Badge variant="secondary" className="text-xs font-normal">
+                                {(step.toolsAllowed ?? []).length} tool
+                                {(step.toolsAllowed ?? []).length === 1 ? "" : "s"} enabled
+                              </Badge>
+                            </div>
+                          )}
+                          <div>
+                            <span className="text-muted-foreground text-sm">
+                              Output Form
+                              {step.outputForms && step.outputForms.length > 1 ? "s" : ""}:{" "}
+                            </span>
+                            {step.outputForms && step.outputForms.length > 0 ? (
+                              <span className="inline-flex flex-wrap gap-2">
+                                {step.outputForms.map((outputForm) => (
+                                  <button
+                                    key={outputForm.formId}
+                                    onClick={() => setSelectedFormId(outputForm.formId)}
+                                    className="text-sm font-medium hover:underline"
+                                  >
+                                    {forms.find((f) => f.id === outputForm.formId)?.name ||
+                                      "Unknown"}
+                                  </button>
+                                ))}
+                              </span>
+                            ) : (
+                              <span className="text-muted-foreground text-sm">None</span>
+                            )}
+                          </div>
+                        </div>
+                      </AccordionContent>
+                    </AccordionItem>
+                  ))}
+                </Accordion>
+
+                {/* Add Step Button */}
+                <Button
+                  variant="outline"
+                  onClick={() => setIsCreatingStep(true)}
+                  className="w-full"
+                >
+                  <PlusIcon className="mr-2 size-4" />
+                  Add Step
+                </Button>
+              </div>
+            ) : (
+              <div className="min-h-[500px] rounded-lg border">
+                <DAGView
+                  steps={pipeline.steps.map((step) => ({
+                    id: step.id,
+                    name: step.name,
+                    description: step.description,
+                    role: step.role ?? null,
+                    type: step.type,
+                    stepOrder: 0,
+                  }))}
+                  dependencies={pipeline.steps.flatMap((step) => {
+                    const deps = step.parentDependencies ?? [];
+                    return deps.map((dep) => ({
+                      id: dep.id,
+                      childStepId: step.id,
+                      parentStepId: dep.parentStepId,
+                    }));
+                  })}
+                  onNodeClick={(stepId) => {
+                    setSelectedStepId(stepId);
+                  }}
+                />
+              </div>
+            )}
+          </TabsContent>
+
+          {/* Pipeline Runs Tab */}
+          <TabsContent value="runs" className="space-y-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <CardTitle>Pipeline Runs</CardTitle>
+                <CardDescription>Execution history for this pipeline</CardDescription>
+              </div>
+            </div>
+
+            {/* Status Badges */}
+            <div className="flex gap-2">
+              <button
+                type="button"
+                onClick={() => setStatusFilter("all")}
+                className={`flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors ${
+                  statusFilter === "all"
+                    ? "bg-primary text-primary-foreground"
+                    : "bg-muted hover:bg-muted/80"
+                }`}
+              >
+                <span className="font-medium">{runs.length}</span>
+                <span>All</span>
+              </button>
+              <button
+                type="button"
+                onClick={() => setStatusFilter("completed")}
+                className={`flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors ${
+                  statusFilter === "completed"
+                    ? "bg-green-500 text-white"
+                    : "bg-muted hover:bg-muted/80"
+                }`}
+              >
+                <span className="font-medium">{statusCounts.succeeded}</span>
+                <span>Succeeded</span>
+              </button>
+              {statusCounts.running > 0 && (
+                <button
+                  type="button"
+                  onClick={() => setStatusFilter("running")}
+                  className={`flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors ${
+                    statusFilter === "running"
+                      ? "bg-blue-500 text-white"
+                      : "bg-muted hover:bg-muted/80"
+                  }`}
+                >
+                  <span className="font-medium">{statusCounts.running}</span>
+                  <span>Running</span>
+                </button>
+              )}
+              {statusCounts.failed > 0 && (
+                <button
+                  type="button"
+                  onClick={() => setStatusFilter("failed")}
+                  className={`flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors ${
+                    statusFilter === "failed"
+                      ? "bg-destructive text-destructive-foreground"
+                      : "bg-muted hover:bg-muted/80"
+                  }`}
+                >
+                  <span className="font-medium">{statusCounts.failed}</span>
+                  <span>Failed</span>
+                </button>
+              )}
+              {statusCounts.queued > 0 && (
+                <button
+                  type="button"
+                  onClick={() => setStatusFilter("pending")}
+                  className={`flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors ${
+                    statusFilter === "pending"
+                      ? "bg-secondary text-secondary-foreground"
+                      : "bg-muted hover:bg-muted/80"
+                  }`}
+                >
+                  <span className="font-medium">{statusCounts.queued}</span>
+                  <span>Queued</span>
+                </button>
+              )}
+            </div>
+
+            {/* Runs Table */}
+            <Card>
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Run ID</TableHead>
+                    <TableHead>Status</TableHead>
+                    <TableHead>Created At</TableHead>
+                    <TableHead>Started At</TableHead>
+                    <TableHead>Finished At</TableHead>
+                    <TableHead>Duration</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {filteredRuns.length === 0 ? (
+                    <TableRow>
+                      <TableCell colSpan={6} className="h-24 text-center">
+                        <p className="text-muted-foreground text-sm">
+                          No {statusFilter !== "all" ? statusFilter : ""} runs found
+                        </p>
+                      </TableCell>
+                    </TableRow>
+                  ) : (
+                    filteredRuns.map((run) => (
+                      <TableRow key={run.id} className="hover:bg-muted/50 cursor-pointer">
+                        <TableCell className="font-mono text-sm">
+                          <Link
+                            to="/pipelines/$pipelineId/$runId"
+                            params={{ pipelineId, runId: run.id }}
+                            className="hover:underline"
+                          >
+                            {run.id}
+                          </Link>
+                        </TableCell>
+                        <TableCell>
+                          <div className="flex items-center gap-2">
+                            {getStatusIcon(run.status)}
+                            <Badge variant={getStatusBadgeVariant(run.status)}>{run.status}</Badge>
+                          </div>
+                        </TableCell>
+                        <TableCell className="text-muted-foreground text-sm">
+                          <RelDate date={run.createdAt} />
+                        </TableCell>
+                        <TableCell className="text-muted-foreground text-sm">
+                          <RelDate date={run.startedAt} />
+                        </TableCell>
+                        <TableCell className="text-muted-foreground text-sm">
+                          {run.completedAt ? <RelDate date={run.completedAt} /> : "-"}
+                        </TableCell>
+                        <TableCell className="text-muted-foreground text-sm">
+                          <div className="flex items-center gap-1">
+                            <ClockIcon className="size-3" />
+                            {formatDuration(getDuration(run))}
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    ))
+                  )}
+                </TableBody>
+              </Table>
+            </Card>
+          </TabsContent>
+        </Tabs>
+      </div>
+
+      {/* Form Viewer Modal */}
+      {selectedFormId && (
+        <FormViewerModal formId={selectedFormId} onClose={() => setSelectedFormId(null)} />
+      )}
+
+      {/* Edit Step Modal */}
+      {selectedStepId &&
+        (() => {
+          const selectedStep = pipeline.steps.find((s) => s.id === selectedStepId);
+          if (!selectedStep) return null;
+
+          return (
+            <StepConfigModal
+              stepId={selectedStep.id}
+              stepName={selectedStep.name}
+              stepDescription={selectedStep.description}
+              stepPrompt={selectedStep.prompt}
+              stepType={selectedStep.type}
+              stepRole={selectedStep.role ?? null}
+              outputFormIds={(selectedStep.outputForms ?? []).map((of) => of.formId) ?? []}
+              toolsAllowed={selectedStep.toolsAllowed ?? []}
+              integrationConfig={selectedStep.integrationConfig ?? undefined}
+              dependencies={(selectedStep.parentDependencies ?? []).map((dep) => ({
+                id: dep.id,
+                parentStepId: dep.parentStepId,
+                parentStepName:
+                  pipeline.steps.find((s) => s.id === dep.parentStepId)?.name ?? "Unknown",
+                multiFormGroupId: dep.multiFormGroupId ?? undefined,
+              }))}
+              availableParentSteps={pipeline.steps
+                .filter((s) => s.id !== selectedStep.id)
+                .map((s) => ({
+                  id: s.id,
+                  name: s.name,
+                  role: s.role ?? null,
+                  outputFormIds: (s.outputForms ?? []).map((of) => of.formId),
+                }))}
+              availableForms={forms.map((f) => ({
+                id: f.id,
+                name: f.name,
+                workflow:
+                  "workflow" in f && f.workflow
+                    ? { id: f.workflow.id, name: f.workflow.name }
+                    : undefined,
+                groups:
+                  "groups" in f && Array.isArray(f.groups)
+                    ? f.groups.map((g) => ({ id: g.id, name: g.name }))
+                    : [],
+              }))}
+              open={true}
+              onClose={() => setSelectedStepId(null)}
+              onSave={async (config) => {
+                try {
+                  // Update step properties
+                  await updateStep({
+                    data: {
+                      stepId: selectedStep.id,
+                      name: config.name,
+                      description: config.description,
+                      prompt: config.prompt,
+                      type: config.type,
+                      role: config.role as
+                        | "extraction"
+                        | "integration"
+                        | "analysis"
+                        | null
+                        | undefined,
+                      outputFormIds: config.outputFormIds,
+                      toolsAllowed: config.toolsAllowed,
+                      integrationConfig: config.integrationConfig
+                        ? {
+                            method: config.integrationConfig.method as
+                              | "GET"
+                              | "POST"
+                              | "PUT"
+                              | "DELETE",
+                            urlTemplate: config.integrationConfig.urlTemplate,
+                            headers: config.integrationConfig.headers,
+                            bodyTemplate: config.integrationConfig.bodyTemplate ?? undefined,
+                          }
+                        : null,
+                    },
+                  });
+
+                  // Update dependencies
+                  const currentDeps = selectedStep.parentDependencies ?? [];
+                  const currentDepIds = currentDeps.map((d) => d.parentStepId);
+                  const newDepIds = config.dependencies.map((d) => d.parentStepId);
+
+                  // Remove old dependencies
+                  for (const dep of currentDeps) {
+                    if (!newDepIds.includes(dep.parentStepId)) {
+                      await removeDependency({
+                        data: {
+                          dependencyId: dep.id,
+                        },
+                      });
+                    }
+                  }
+
+                  // Add new dependencies or update existing ones
+                  for (const newDep of config.dependencies) {
+                    const existingDep = currentDeps.find(
+                      (d) => d.parentStepId === newDep.parentStepId,
+                    );
+
+                    if (!existingDep) {
+                      // Add new dependency
+                      await addDependency({
+                        data: {
+                          childStepId: selectedStep.id,
+                          parentStepId: newDep.parentStepId,
+                          multiFormGroupId: newDep.multiFormGroupId || null,
+                        },
+                      });
+                    } else if (existingDep.multiFormGroupId !== newDep.multiFormGroupId) {
+                      // Update existing dependency by removing and re-adding
+                      await removeDependency({
+                        data: {
+                          dependencyId: existingDep.id,
+                        },
+                      });
+                      await addDependency({
+                        data: {
+                          childStepId: selectedStep.id,
+                          parentStepId: newDep.parentStepId,
+                          multiFormGroupId: newDep.multiFormGroupId || null,
+                        },
+                      });
+                    }
+                  }
+
+                  // Reload the page
+                  router.invalidate();
+                  setSelectedStepId(null);
+                } catch (err) {
+                  console.error("Failed to update step:", err);
+                  alert("Failed to update step. Please try again.");
+                }
+              }}
+            />
+          );
+        })()}
+
+      {/* Create Step Modal */}
+      {isCreatingStep && (
+        <StepConfigModal
+          stepId=""
+          stepName=""
+          stepDescription=""
+          stepPrompt=""
+          stepType="single"
+          stepRole={null}
+          outputFormIds={[]}
+          toolsAllowed={[]}
+          integrationConfig={undefined}
+          dependencies={[]}
+          availableParentSteps={pipeline.steps.map((s) => ({
+            id: s.id,
+            name: s.name,
+            role: s.role ?? null,
+            outputFormIds: (s.outputForms ?? []).map((of) => of.formId),
+          }))}
+          availableForms={forms.map((f) => ({
+            id: f.id,
+            name: f.name,
+            workflow:
+              "workflow" in f && f.workflow
+                ? { id: f.workflow.id, name: f.workflow.name }
+                : undefined,
+            groups:
+              "groups" in f && Array.isArray(f.groups)
+                ? f.groups.map((g) => ({ id: g.id, name: g.name }))
+                : [],
+          }))}
+          open={true}
+          onClose={() => setIsCreatingStep(false)}
+          onSave={async (config) => {
+            try {
+              // Create step
+              const result = await createStep({
+                data: {
+                  pipelineId,
+                  name: config.name,
+                  description: config.description,
+                  prompt: config.prompt,
+                  type: config.type,
+                  role: config.role as "extraction" | "integration" | "analysis" | null,
+                  outputFormIds: config.outputFormIds,
+                  toolsAllowed: config.toolsAllowed,
+                  integrationConfig: config.integrationConfig
+                    ? {
+                        method: config.integrationConfig.method as
+                          | "GET"
+                          | "POST"
+                          | "PUT"
+                          | "DELETE",
+                        urlTemplate: config.integrationConfig.urlTemplate,
+                        headers: config.integrationConfig.headers,
+                        bodyTemplate: config.integrationConfig.bodyTemplate ?? undefined,
+                      }
+                    : undefined,
+                },
+              });
+              if (!result?.id) throw new Error("Failed to create step");
+
+              // Add dependencies
+              for (const dep of config.dependencies) {
+                await addDependency({
+                  data: {
+                    childStepId: result.id,
+                    parentStepId: dep.parentStepId,
+                  },
+                });
+              }
+
+              // Reload the page
+              router.invalidate();
+              setIsCreatingStep(false);
+              toast.success("Step created successfully!");
+            } catch (err) {
+              console.error("Failed to create step:", err);
+              toast.error("Failed to create step. Please try again.");
+            }
+          }}
+        />
+      )}
+
+      {/* Deal Selection Modal */}
+      <Dialog open={showDealSelectionModal} onOpenChange={setShowDealSelectionModal}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Select a Deal</DialogTitle>
+            <DialogDescription>
+              Choose which deal this pipeline run should be associated with.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <Label htmlFor="deal-select">Deal</Label>
+              <Select value={selectedDealId ?? undefined} onValueChange={setSelectedDealId}>
+                <SelectTrigger id="deal-select">
+                  <SelectValue placeholder="Select a deal" />
+                </SelectTrigger>
+                <SelectContent>
+                  {deals.map((deal) => (
+                    <SelectItem key={deal.id} value={deal.id}>
+                      {deal.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setShowDealSelectionModal(false)}>
+              Cancel
+            </Button>
+            <Button onClick={handleConfirmCreateRun} disabled={!selectedDealId}>
+              Create Run
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </Container>
+  );
+}
+
+function RenamePipelineModal({
+  pipeline,
+}: {
+  pipeline: { id: string; name: string; description: string };
+}) {
+  const router = useRouter();
+  const updatePipeline = useServerFn(updatePipelineFn);
+
+  return (
+    <Dialog>
+      <DialogTrigger className="w-fit">
+        <H1 className="w-fit cursor-pointer hover:underline">{pipeline.name}</H1>
+      </DialogTrigger>
+      <DialogContent>
+        <form
+          onSubmit={async (event) => {
+            event.preventDefault();
+            const formData = new FormData(event.currentTarget);
+            const name = formData.get("name") as string;
+            const description = formData.get("description") as string;
+
+            await updatePipeline({
+              data: {
+                pipelineId: pipeline.id,
+                name,
+                description,
+              },
+            });
+            router.invalidate();
+          }}
+          className="grid gap-4"
+        >
+          <DialogHeader>
+            <DialogTitle>Edit pipeline</DialogTitle>
+          </DialogHeader>
+          <div className="grid gap-2">
+            <Label htmlFor="name">Name</Label>
+            <Input id="name" name="name" placeholder="Name" defaultValue={pipeline.name} />
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="description">Description</Label>
+            <Textarea
+              id="description"
+              name="description"
+              placeholder="Description"
+              defaultValue={pipeline.description}
+            />
+          </div>
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button type="button" variant="outline">
+                Cancel
+              </Button>
+            </DialogClose>
+            <DialogClose asChild>
+              <Button type="submit" variant="secondary">
+                Save
+              </Button>
+            </DialogClose>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}