sea-dev 1.0.0

package/apps/main/src/routes/_authed/_app/pipelines/$pipelineId/$runId/-components/manual-input-panel.tsx

@@ -0,0 +1,301 @@
+import { Badge } from "@sea/ui/components/ui/badge";
+import { Button } from "@sea/ui/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@sea/ui/components/ui/card";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@sea/ui/components/ui/select";
+import { Separator } from "@sea/ui/components/ui/separator";
+import { ExternalLinkIcon, PlusIcon, Trash2Icon } from "lucide-react";
+import { useState } from "react";
+
+type OutputSubmission = {
+  id: string;
+  runStepId: string;
+  submissionId: string;
+  submissionName: string;
+  formId: string;
+  formName: string;
+  createdAt: Date;
+};
+
+type AvailableSubmission = {
+  id: string;
+  name: string;
+  formId: string;
+  formName: string;
+  status: string;
+  updatedAt: Date;
+};
+
+type OutputForm = {
+  id: string;
+  formId: string;
+  formName: string;
+};
+
+type StepWithManualInputs = {
+  id: string;
+  stepId: string;
+  stepName: string;
+  outputForms: OutputForm[];
+  outputSubmissions: OutputSubmission[];
+};
+
+type ManualInputPanelProps = {
+  steps: StepWithManualInputs[];
+  availableSubmissions: AvailableSubmission[];
+  onAddOutputSubmission: (runStepId: string, submissionId: string) => Promise<void>;
+  onRemoveOutputSubmission: (outputSubmissionId: string) => Promise<void>;
+  onViewSubmission?: (submissionId: string) => void;
+};
+
+function StepManualInputsCard({
+  step,
+  availableSubmissions,
+  onAddOutputSubmission,
+  onRemoveOutputSubmission,
+  onViewSubmission,
+}: {
+  step: StepWithManualInputs;
+  availableSubmissions: AvailableSubmission[];
+  onAddOutputSubmission: (runStepId: string, submissionId: string) => Promise<void>;
+  onRemoveOutputSubmission: (outputSubmissionId: string) => Promise<void>;
+  onViewSubmission?: (submissionId: string) => void;
+}) {
+  const [selectedSubmissionByForm, setSelectedSubmissionByForm] = useState<
+    Record<string, string | null>
+  >({});
+  const [isAddingByForm, setIsAddingByForm] = useState<Record<string, boolean>>({});
+
+  const handleAddInput = async (formId: string) => {
+    const selectedSubmissionId = selectedSubmissionByForm[formId];
+    if (!selectedSubmissionId) return;
+
+    setIsAddingByForm((prev) => ({ ...prev, [formId]: true }));
+    try {
+      await onAddOutputSubmission(step.id, selectedSubmissionId);
+      setSelectedSubmissionByForm((prev) => ({ ...prev, [formId]: null }));
+    } catch (error) {
+      console.error("Failed to add output submission:", error);
+    } finally {
+      setIsAddingByForm((prev) => ({ ...prev, [formId]: false }));
+    }
+  };
+
+  // Group output submissions by form
+  const outputsByForm = step.outputSubmissions.reduce(
+    (acc, output) => {
+      if (!acc[output.formId]) {
+        acc[output.formId] = [];
+      }
+      acc[output.formId]?.push(output);
+      return acc;
+    },
+    {} as Record<string, OutputSubmission[]>,
+  );
+
+  // Check which required forms are missing outputs
+  const requiredForms = step.outputForms;
+  const missingForms = requiredForms.filter((form) => !outputsByForm[form.formId]?.length);
+  const completedForms = requiredForms.filter((form) => outputsByForm[form.formId]?.length);
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-base">{step.stepName}</CardTitle>
+        <CardDescription>
+          {completedForms.length} of {requiredForms.length} required forms have inputs configured
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* Show each required output form */}
+        {requiredForms.map((outputForm) => {
+          const outputsForForm = outputsByForm[outputForm.formId] || [];
+          const availableForForm = availableSubmissions.filter(
+            (sub) =>
+              sub.formId === outputForm.formId &&
+              !step.outputSubmissions.some((output) => output.submissionId === sub.id),
+          );
+
+          const hasOutput = outputsForForm.length > 0;
+
+          return (
+            <div
+              key={outputForm.formId}
+              className={`space-y-3 rounded-lg border p-3 ${
+                hasOutput ? "border-green-200 bg-green-50/50" : "border-amber-200 bg-amber-50/50"
+              }`}
+            >
+              <div className="flex items-center justify-between">
+                <div className="space-y-1">
+                  <div className="flex items-center gap-2">
+                    <div className="text-sm font-semibold">{outputForm.formName}</div>
+                    <Badge variant={hasOutput ? "default" : "secondary"} className="text-xs">
+                      {hasOutput ? "Configured" : "Required"}
+                    </Badge>
+                  </div>
+                  <p className="text-muted-foreground text-xs">
+                    {hasOutput
+                      ? `${outputsForForm.length} submission${outputsForForm.length !== 1 ? "s" : ""} selected`
+                      : "No submission selected"}
+                  </p>
+                </div>
+              </div>
+
+              {/* Existing outputs for this form */}
+              {outputsForForm.length > 0 && (
+                <div className="space-y-2">
+                  {outputsForForm.map((output) => (
+                    <div
+                      key={output.id}
+                      className="flex items-center justify-between rounded-md border border-green-200 bg-white p-2"
+                    >
+                      <div className="flex-1 space-y-1">
+                        <div className="flex items-center gap-2">
+                          <div className="text-sm font-medium">{output.submissionName}</div>
+                          {onViewSubmission && (
+                            <button
+                              type="button"
+                              onClick={() => onViewSubmission(output.submissionId)}
+                              className="text-blue-600 hover:text-blue-800"
+                            >
+                              <ExternalLinkIcon className="size-3" />
+                            </button>
+                          )}
+                        </div>
+                        <span className="text-muted-foreground text-xs">
+                          Added {new Date(output.createdAt).toLocaleDateString()}
+                        </span>
+                      </div>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => onRemoveOutputSubmission(output.id)}
+                      >
+                        <Trash2Icon className="size-4" />
+                      </Button>
+                    </div>
+                  ))}
+                </div>
+              )}
+
+              {/* Add submission for this form */}
+              <div className="space-y-2">
+                <div className="text-xs font-medium text-slate-700">
+                  Add submission for this form
+                </div>
+                {availableForForm.length > 0 ? (
+                  <div className="flex items-center gap-2">
+                    <Select
+                      value={selectedSubmissionByForm[outputForm.formId] || ""}
+                      onValueChange={(value) =>
+                        setSelectedSubmissionByForm((prev) => ({
+                          ...prev,
+                          [outputForm.formId]: value,
+                        }))
+                      }
+                    >
+                      <SelectTrigger className="flex-1">
+                        <SelectValue placeholder="Select a submission" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {availableForForm.map((sub) => (
+                          <SelectItem key={sub.id} value={sub.id}>
+                            <div className="flex items-center gap-2">
+                              <span>{sub.name}</span>
+                              <Badge variant="outline" className="text-xs">
+                                {sub.status}
+                              </Badge>
+                            </div>
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <Button
+                      onClick={() => handleAddInput(outputForm.formId)}
+                      disabled={
+                        !selectedSubmissionByForm[outputForm.formId] ||
+                        isAddingByForm[outputForm.formId]
+                      }
+                      size="sm"
+                    >
+                      <PlusIcon className="mr-1 size-4" />
+                      {isAddingByForm[outputForm.formId] ? "Adding..." : "Add"}
+                    </Button>
+                  </div>
+                ) : (
+                  <p className="text-muted-foreground text-xs">
+                    No submissions available for this form
+                  </p>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </CardContent>
+    </Card>
+  );
+}
+
+export function ManualInputPanel({
+  steps,
+  availableSubmissions,
+  onAddOutputSubmission,
+  onRemoveOutputSubmission,
+  onViewSubmission,
+}: ManualInputPanelProps) {
+  const totalOutputs = steps.reduce((sum, step) => sum + step.outputSubmissions.length, 0);
+  const stepsWithOutputs = steps.filter((s) => s.outputSubmissions.length > 0);
+
+  return (
+    <div className="space-y-4">
+      {/* Summary Card */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Manual Inputs</CardTitle>
+          <CardDescription>
+            Configure manual input data for pipeline steps that require additional context
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-1">
+              <div className="text-muted-foreground text-sm">Total Outputs</div>
+              <div className="text-2xl font-bold">{totalOutputs}</div>
+            </div>
+            <div className="space-y-1">
+              <div className="text-muted-foreground text-sm">Steps with Outputs</div>
+              <div className="text-2xl font-bold">{stepsWithOutputs.length}</div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Separator />
+
+      {/* Per-step manual input configuration */}
+      <div className="space-y-3">
+        {steps.map((step) => (
+          <StepManualInputsCard
+            key={step.id}
+            step={step}
+            availableSubmissions={availableSubmissions}
+            onAddOutputSubmission={onAddOutputSubmission}
+            onRemoveOutputSubmission={onRemoveOutputSubmission}
+            onViewSubmission={onViewSubmission}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

package/apps/main/src/routes/_authed/_app/pipelines/$pipelineId/$runId/-components/submission-selector-modal.tsx

@@ -0,0 +1,143 @@
+import { Badge } from "@sea/ui/components/ui/badge";
+import { Button } from "@sea/ui/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@sea/ui/components/ui/dialog";
+import { Label } from "@sea/ui/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@sea/ui/components/ui/select";
+import { CheckIcon } from "lucide-react";
+import { useState } from "react";
+
+type Submission = {
+  id: string;
+  name: string | null;
+  formId: string;
+  formName: string;
+  status: string;
+  updatedAt: Date;
+};
+
+type SubmissionSelectorModalProps = {
+  open: boolean;
+  onClose: () => void;
+  onSubmit: (submissionIds: string[]) => Promise<void>;
+  availableSubmissions: Submission[];
+  requiredFormId?: string;
+  requiredFormName?: string;
+  stepName: string;
+};
+
+export function SubmissionSelectorModal({
+  open,
+  onClose,
+  onSubmit,
+  availableSubmissions,
+  requiredFormId,
+  requiredFormName,
+  stepName,
+}: SubmissionSelectorModalProps) {
+  const [selectedSubmissionId, setSelectedSubmissionId] = useState<string | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // Filter submissions by required form if specified
+  const filteredSubmissions = requiredFormId
+    ? availableSubmissions.filter((sub) => sub.formId === requiredFormId)
+    : availableSubmissions;
+
+  const handleSubmit = async () => {
+    if (!selectedSubmissionId) return;
+
+    setIsSubmitting(true);
+    try {
+      await onSubmit([selectedSubmissionId]);
+      setSelectedSubmissionId(null);
+      onClose();
+    } catch (error) {
+      console.error("Failed to submit:", error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Select Manual Input Submission</DialogTitle>
+          <DialogDescription>
+            Choose a submission to provide as manual input for step: <strong>{stepName}</strong>
+            {requiredFormName && (
+              <>
+                <br />
+                Required form: <strong>{requiredFormName}</strong>
+              </>
+            )}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          <div className="space-y-2">
+            <Label htmlFor="submission-select">Submission</Label>
+            {filteredSubmissions.length > 0 ? (
+              <Select value={selectedSubmissionId || ""} onValueChange={setSelectedSubmissionId}>
+                <SelectTrigger id="submission-select">
+                  <SelectValue placeholder="Select a submission" />
+                </SelectTrigger>
+                <SelectContent>
+                  {filteredSubmissions.map((submission) => (
+                    <SelectItem key={submission.id} value={submission.id}>
+                      <div className="flex items-center gap-2">
+                        <span>{submission.name || "Untitled"}</span>
+                        <Badge variant="outline" className="text-xs">
+                          {submission.formName}
+                        </Badge>
+                        <Badge variant="secondary" className="text-xs">
+                          {submission.status}
+                        </Badge>
+                      </div>
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            ) : (
+              <p className="text-muted-foreground text-sm">
+                No submissions available{requiredFormName && ` for form "${requiredFormName}"`}.
+                Please create a submission with the required form first.
+              </p>
+            )}
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose} disabled={isSubmitting}>
+            Cancel
+          </Button>
+          <Button
+            onClick={handleSubmit}
+            disabled={!selectedSubmissionId || isSubmitting || filteredSubmissions.length === 0}
+          >
+            {isSubmitting ? (
+              "Adding..."
+            ) : (
+              <>
+                <CheckIcon className="mr-2 size-4" />
+                Add Submission
+              </>
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/apps/main/src/routes/_authed/_app/pipelines/$pipelineId/$runId/-components/upload-doc.tsx

@@ -0,0 +1,120 @@
+import { FileUpload } from "@/components/upload/file-upload";
+import type { ReasoningEffort } from "@sea/core/data-extraction/models";
+import { invariant, useRouter } from "@tanstack/react-router";
+import { useServerFn } from "@tanstack/react-start";
+import { useCallback } from "react";
+import { toast } from "sonner";
+import {
+  insertPipelineDocumentFn,
+  linkDocumentsToRunStepFn,
+  syncRunBlockersFn,
+  uploadPipelineDocumentFn,
+} from "../../../-fns";
+
+export function UploadDocForPipeline({
+  runId,
+  runStepId,
+  isExperimental,
+  onUploadComplete,
+}: {
+  runId: string;
+  runStepId: string;
+  isExperimental?: boolean;
+  onUploadComplete?: () => void;
+}) {
+  const router = useRouter();
+  const insertPipelineDocument = useServerFn(insertPipelineDocumentFn);
+  const uploadPipelineDocument = useServerFn(uploadPipelineDocumentFn);
+  const linkDocumentsToRunStep = useServerFn(linkDocumentsToRunStepFn);
+  const syncRunBlockers = useServerFn(syncRunBlockersFn);
+
+  const handleFilesSelected = useCallback(
+    async (
+      files: { file: File; id: string; name: string; type: string }[],
+      options: {
+        model: string;
+        reasoningEffort: ReasoningEffort | null;
+        userPrompt: string;
+        composite: boolean;
+      },
+    ) => {
+      const fileMetadata = files.map(({ id, name, type }) => ({ id, name, type }));
+      try {
+        // Insert pipeline documents (no submission, no extraction)
+        const documentsWithBlobKeys = await insertPipelineDocument({
+          data: {
+            runId,
+            files: fileMetadata,
+          },
+        });
+
+        // Upload files through server to avoid CORS issues
+        const results = await Promise.allSettled(
+          documentsWithBlobKeys.map(async ({ documentId }) => {
+            const file = files.find((f) => f.id === documentId)?.file;
+            invariant(file, `File not found for document ${documentId}`);
+
+            // Upload via server function
+            const formData = new FormData();
+            formData.append("documentId", documentId);
+            formData.append("file", file);
+
+            const result = await uploadPipelineDocument({ data: formData });
+            return result;
+          }),
+        );
+
+        const failed = results.filter((r) => r.status === "rejected");
+        if (failed.length > 0) {
+          toast.error(`${failed.length} upload(s) failed`);
+          return;
+        }
+
+        // Get document IDs from successful uploads
+        const documentIds = documentsWithBlobKeys.map(({ documentId }) => documentId);
+
+        // Link documents to pipeline run step
+        await linkDocumentsToRunStep({
+          data: {
+            runStepId,
+            documentIds,
+          },
+        });
+
+        // Re-sync blockers for this run (will auto-resolve missing_upload if satisfied)
+        await syncRunBlockers({ data: { runId } });
+
+        // Refresh the page
+        router.invalidate();
+        toast.success("Documents uploaded successfully");
+
+        // Call completion callback
+        onUploadComplete?.();
+      } catch (error) {
+        console.error("[UploadDocForPipeline] Error during upload:", error);
+        toast.error(
+          `Failed to upload documents: ${error instanceof Error ? error.message : String(error)}`,
+        );
+      }
+    },
+    [
+      runId,
+      runStepId,
+      insertPipelineDocument,
+      uploadPipelineDocument,
+      linkDocumentsToRunStep,
+      syncRunBlockers,
+      router,
+      onUploadComplete,
+    ],
+  );
+
+  return (
+    <FileUpload
+      onFilesSelected={handleFilesSelected}
+      isExperimental={isExperimental}
+      processingCount={0}
+      showDialog={false}
+    />
+  );
+}