sea-dev 1.0.0

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

@@ -0,0 +1,1485 @@
+import { SubmissionGroupWrapper } from "@/components/data-display/group-wrapper";
+import { Container } from "@/components/header/container";
+import { DocList } from "@/components/side-panel/doc-list";
+import { SidebarRight } from "@/components/sidebar/sidebar-right";
+import { membershipMiddleware } from "@/middleware";
+import { downloadDocumentFn } from "@/routes/_authed/_app/deals/$dealId/-fns";
+import type { ExtractionInfo } from "@sea/core/data-extraction/types";
+import { getSubmissionWithFormAndExtractions } from "@sea/dal/submission";
+import type {
+  DocumentCitation,
+  PipelineRunStepWithDetails,
+  PipelineRunTimeline,
+} from "@sea/db/types";
+import type { ApiReconciliation } from "@sea/schemas/core/submission";
+import { PdfViewer } from "@sea/ui/components/doc-viewers/pdf";
+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, CardContent } from "@sea/ui/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@sea/ui/components/ui/dialog";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@sea/ui/components/ui/resizable";
+import { H3 } from "@sea/ui/components/ui/typography";
+import { convertItemsToRecord, groupBy } from "@sea/util/data-transform";
+import { createFileRoute, useRouter } from "@tanstack/react-router";
+import { createServerFn, useServerFn } from "@tanstack/react-start";
+import {
+  DownloadIcon,
+  FileTextIcon,
+  PlayIcon,
+  RotateCcwIcon,
+  XCircleIcon,
+  XIcon,
+} from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { toast } from "sonner";
+import { DAGView } from "../-components/dag-view";
+import {
+  getRunBlockersFn,
+  replayPipelineRunFn,
+  replayPipelineRunStepFn,
+  resolveBlockerWithManualInputFn,
+  startPipelineRunFn,
+} from "../../-fns";
+import { BlockersPanel } from "./-components/blockers-panel";
+import { SubmissionSelectorModal } from "./-components/submission-selector-modal";
+import { UploadDocForPipeline } from "./-components/upload-doc";
+
+// Helper functions for artifact download
+function downloadBlob(blob: Blob, filename: string) {
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename;
+  link.click();
+  URL.revokeObjectURL(url);
+}
+
+function escapeHtml(text: string) {
+  return text
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
+}
+
+// Server functions for loader
+const getRunTimelineServerFn = createServerFn({ method: "GET" })
+  .middleware([membershipMiddleware])
+  .validator((data: { runId: string }) => data)
+  .handler(async ({ context: { member }, data: { runId } }) => {
+    const { getRunTimeline } = await import("@sea/dal/pipeline");
+    return await getRunTimeline({ member, runId });
+  });
+
+const getPipelineServerFn = createServerFn({ method: "GET" })
+  .middleware([membershipMiddleware])
+  .validator((data: { pipelineId: string }) => data)
+  .handler(async ({ context: { member }, data: { pipelineId } }) => {
+    const { getPipelineDetail } = await import("@sea/dal/pipeline");
+    const result = await getPipelineDetail({ member, pipelineId: pipelineId });
+    if (!result.ok) return null;
+    return result.data;
+  });
+
+const getSubmissionDataFn = createServerFn({ method: "GET" })
+  .middleware([membershipMiddleware])
+  .validator((data: { submissionId: string }) => data)
+  .handler(async ({ context: { member }, data: { submissionId } }) => {
+    return await getSubmissionWithFormAndExtractions({ member, submissionId });
+  });
+
+const getAvailableSubmissionsFn = createServerFn({ method: "GET" })
+  .middleware([membershipMiddleware])
+  .validator((data: Record<string, never>) => data)
+  .handler(async ({ context: { member } }) => {
+    // Get all submissions in the organization
+    const { getSubmissions } = await import("@sea/dal/submission");
+    return await getSubmissions({ member, typeFilter: "all" });
+  });
+
+const getRunOutputSubmissionsFn = createServerFn({ method: "GET" })
+  .middleware([membershipMiddleware])
+  .validator((data: { runId: string }) => data)
+  .handler(async ({ context: { member }, data: { runId } }) => {
+    const { getRunOutputSubmissions } = await import("@sea/dal/pipeline");
+    const result = await getRunOutputSubmissions({ member, runId });
+    if (!result.ok) return {};
+    // Convert Map to plain object for serialization
+    return Object.fromEntries(result.data);
+  });
+
+const getSubmissionsByIdsFn = createServerFn({ method: "GET" })
+  .middleware([membershipMiddleware])
+  .validator((data: { submissionIds: string[] }) => data)
+  .handler(async ({ context: { member }, data: { submissionIds } }) => {
+    const results = await Promise.all(
+      submissionIds.map((id) => getSubmissionWithFormAndExtractions({ member, submissionId: id })),
+    );
+    return results;
+  });
+
+export const Route = createFileRoute("/_authed/_app/pipelines/$pipelineId/$runId/")({
+  loader: async ({
+    params: { pipelineId, runId },
+  }): Promise<{
+    timeline: PipelineRunTimeline;
+    pipeline: Awaited<ReturnType<typeof getPipelineServerFn>>;
+    inputSubmissionData: Map<string, Awaited<ReturnType<typeof getSubmissionDataFn>>>;
+    outputSubmissionData: Map<string, Awaited<ReturnType<typeof getSubmissionDataFn>>[]>;
+    blockers: Awaited<ReturnType<typeof getRunBlockersFn>>;
+    availableSubmissions: Awaited<ReturnType<typeof getAvailableSubmissionsFn>>;
+  }> => {
+    const timelineResult = await getRunTimelineServerFn({ data: { runId } });
+    if (!timelineResult.ok) {
+      throw new Error("Failed to load run timeline");
+    }
+    const timeline = timelineResult.data;
+
+    // Fetch pipeline data
+    const pipeline = await getPipelineServerFn({ data: { pipelineId } });
+
+    // Load output submissions for each run step
+    const outputSubmissionIdsObj = await getRunOutputSubmissionsFn({ data: { runId } });
+    const outputSubmissionData = new Map<
+      string,
+      Awaited<ReturnType<typeof getSubmissionDataFn>>[]
+    >();
+
+    // Load submission data for all output submissions
+    for (const [runStepId, submissionIds] of Object.entries(outputSubmissionIdsObj)) {
+      if (submissionIds.length > 0) {
+        const submissions = await Promise.all(
+          submissionIds.map((submissionId) => getSubmissionDataFn({ data: { submissionId } })),
+        );
+        outputSubmissionData.set(runStepId, submissions);
+      }
+    }
+
+    // TODO: Load input submissions from pipeline run trigger data
+    // Input submissions architecture is still being determined
+    const inputSubmissionData = new Map<string, Awaited<ReturnType<typeof getSubmissionDataFn>>>();
+
+    // Fetch blockers for the run
+    const blockers = await getRunBlockersFn({ data: { runId } });
+
+    // Fetch available submissions for manual inputs
+    const availableSubmissions = await getAvailableSubmissionsFn({ data: {} });
+
+    return {
+      timeline,
+      pipeline,
+      inputSubmissionData,
+      outputSubmissionData,
+      blockers,
+      availableSubmissions,
+    };
+  },
+  component: RouteComponent,
+});
+
+type ProcessFlowStepData = PipelineRunStepWithDetails;
+
+// Helper component for the process flow
+function ProcessFlowStep({
+  step,
+  isSelected,
+  isFirst,
+  isLast,
+  stepNumber,
+  onClick,
+}: {
+  step: ProcessFlowStepData;
+  isSelected: boolean;
+  isFirst: boolean;
+  isLast: boolean;
+  stepNumber: number;
+  onClick: () => void;
+}) {
+  const isCompleted = step.status === "completed" || step.status === "success";
+  const isFailed = step.status === "failed" || step.status === "error";
+  const isRunning = step.status === "running";
+  const isPending = !isCompleted && !isFailed && !isRunning;
+
+  const getStatusIcon = () => {
+    if (isCompleted)
+      return (
+        <svg
+          viewBox="0 0 24 24"
+          fill="currentColor"
+          aria-hidden="true"
+          className="size-6 text-white"
+        >
+          <path
+            d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z"
+            clipRule="evenodd"
+            fillRule="evenodd"
+          />
+        </svg>
+      );
+    if (isFailed) return <XCircleIcon className="size-6 text-white" />;
+    if (isRunning) return <PlayIcon className="size-5 text-white" />;
+    return (
+      <span className="text-gray-500 dark:text-gray-400">
+        {stepNumber.toString().padStart(2, "0")}
+      </span>
+    );
+  };
+
+  const getDescription = () => {
+    if (step.startedAt && step.completedAt) {
+      const durationMs = new Date(step.completedAt).getTime() - new Date(step.startedAt).getTime();
+      if (durationMs > 0) {
+        return `${(durationMs / 1000).toFixed(1)}s`;
+      }
+    }
+    return "Processing step";
+  };
+
+  return (
+    <li className="relative overflow-hidden lg:flex-1">
+      <div className="overflow-hidden">
+        <button
+          type="button"
+          onClick={onClick}
+          className="group w-full text-left"
+          aria-current={isSelected ? "step" : undefined}
+        >
+          {/* Active indicator bar */}
+          <span
+            aria-hidden="true"
+            className={`absolute top-0 left-0 h-full w-1 lg:top-auto lg:bottom-0 lg:h-1 lg:w-full ${
+              isSelected
+                ? isCompleted
+                  ? "bg-indigo-600 dark:bg-indigo-500"
+                  : isFailed
+                    ? "bg-red-600 dark:bg-red-500"
+                    : isRunning
+                      ? "bg-blue-600 dark:bg-blue-500"
+                      : "bg-gray-300 dark:bg-white/15"
+                : "bg-transparent group-hover:bg-gray-200 dark:group-hover:bg-white/20"
+            }`}
+          />
+
+          <span
+            className={`flex items-start px-6 py-5 text-sm font-medium ${!isFirst ? "lg:pl-9" : ""}`}
+          >
+            <span className="shrink-0">
+              {isCompleted ? (
+                <span className="flex size-10 items-center justify-center rounded-full bg-indigo-600 dark:bg-indigo-500">
+                  {getStatusIcon()}
+                </span>
+              ) : isFailed ? (
+                <span className="flex size-10 items-center justify-center rounded-full bg-red-600 dark:bg-red-500">
+                  {getStatusIcon()}
+                </span>
+              ) : isRunning ? (
+                <span className="flex size-10 items-center justify-center rounded-full bg-blue-600 dark:bg-blue-500">
+                  {getStatusIcon()}
+                </span>
+              ) : isSelected ? (
+                <span className="flex size-10 items-center justify-center rounded-full border-2 border-indigo-600 dark:border-indigo-500">
+                  <span className="text-indigo-600 dark:text-indigo-400">{getStatusIcon()}</span>
+                </span>
+              ) : (
+                <span className="flex size-10 items-center justify-center rounded-full border-2 border-gray-300 dark:border-white/15">
+                  {getStatusIcon()}
+                </span>
+              )}
+            </span>
+            <span className="mt-0.5 ml-4 flex min-w-0 flex-col">
+              <span
+                className={`text-sm font-medium ${
+                  isSelected
+                    ? isCompleted || isRunning
+                      ? "text-indigo-600 dark:text-indigo-400"
+                      : isFailed
+                        ? "text-red-600 dark:text-red-400"
+                        : "text-indigo-600 dark:text-indigo-400"
+                    : "text-gray-500 dark:text-gray-400"
+                }`}
+              >
+                Step {stepNumber}
+              </span>
+              <span className="text-sm font-medium text-gray-500 dark:text-gray-400">
+                {getDescription()}
+              </span>
+            </span>
+          </span>
+        </button>
+
+        {/* Chevron Separator */}
+        {!isFirst && (
+          <div aria-hidden="true" className="absolute inset-0 top-0 left-0 hidden w-3 lg:block">
+            <svg
+              viewBox="0 0 12 82"
+              fill="none"
+              preserveAspectRatio="none"
+              className="size-full text-gray-300 dark:text-white/15"
+            >
+              <path
+                d="M0.5 0V31L10.5 41L0.5 51V82"
+                stroke="currentcolor"
+                vectorEffect="non-scaling-stroke"
+              />
+            </svg>
+          </div>
+        )}
+      </div>
+    </li>
+  );
+}
+
+// Component to display submission data
+function SubmissionDataDisplay({
+  submission,
+  activeCitationId,
+  onAnnotationSelect,
+  boundingKey,
+  setBoundingKey,
+}: {
+  submission: Awaited<ReturnType<typeof getSubmissionDataFn>> | null;
+  activeCitationId: string | undefined;
+  onAnnotationSelect: (id: string | undefined) => void;
+  boundingKey: string | undefined;
+  setBoundingKey: (key: string | undefined) => void;
+}) {
+  // Transform groups to match the structure expected by SubmissionGroupWrapper
+  const groups = useMemo(() => {
+    if (!submission?.groups) return [];
+
+    return submission.groups.map((group) => {
+      const items = group.items.map((item) => {
+        // Use selectedVersion from DAL instead of versions[0]
+        // The DAL attaches transformationSource to selectedVersion
+        const version = item.selectedVersion ?? item.versions[0];
+
+        return {
+          ...item,
+          selectedVersion: version ?? null,
+        };
+      });
+
+      return {
+        ...group,
+        items: [...items].sort((a, b) => a.formField.order - b.formField.order),
+        itemsMap: convertItemsToRecord(items, "formFieldId"),
+        derivedMap: convertItemsToRecord(group.derived, "formDerivedId"),
+      };
+    });
+  }, [submission]);
+
+  const grouped = useMemo(() => {
+    if (!submission?.form?.groups) return [];
+
+    const groupObj = groupBy(groups, "formGroupId");
+
+    return submission.form.groups.map((formGroup) => ({
+      formGroup,
+      groups: groupObj[formGroup.id] ?? [],
+    }));
+  }, [submission, groups]);
+
+  const noop = () => {};
+
+  if (!submission) {
+    return (
+      <div className="p-4">
+        <p className="text-muted-foreground text-sm">Submission data not available</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {grouped.length > 0 ? (
+        <div className="space-y-4">
+          {grouped.map(({ formGroup, groups }) => (
+            <SubmissionGroupWrapper
+              key={formGroup.id}
+              formGroup={formGroup}
+              groups={groups}
+              setUnsaved={noop}
+              disableInput={false}
+              annotationId={activeCitationId}
+              setAnnotationId={onAnnotationSelect}
+              boundingKey={boundingKey}
+              setBoundingKey={setBoundingKey}
+              submissionId={submission.id}
+            />
+          ))}
+        </div>
+      ) : (
+        <div className="p-4">
+          <p className="text-muted-foreground text-sm">No data available</p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// Helper component for step details
+function StepDetails({
+  step,
+  allStepsForThisStep,
+  outputSubmissionData,
+  onReplay,
+  isReplaying,
+  activeCitationId,
+  onAnnotationSelect,
+  boundingKey,
+  setBoundingKey,
+}: {
+  step: PipelineRunStepWithDetails;
+  allStepsForThisStep: PipelineRunStepWithDetails[];
+  outputSubmissionData: Map<string, Awaited<ReturnType<typeof getSubmissionDataFn>>[]>;
+  onReplay: (stepId: string) => void;
+  isReplaying: boolean;
+  activeCitationId: string | undefined;
+  onAnnotationSelect: (id: string | undefined) => void;
+  boundingKey: string | undefined;
+  setBoundingKey: (key: string | undefined) => void;
+}) {
+  const [selectedSubmissionId, setSelectedSubmissionId] = useState<string | undefined>(undefined);
+
+  // Collect all submission items to display (from all run steps)
+  const submissionItems = allStepsForThisStep.flatMap((runStep, runStepIdx) => {
+    const submissions = outputSubmissionData.get(runStep.id) ?? [];
+    return submissions.map((submission, submissionIdx) => ({
+      runStep,
+      runStepIdx,
+      submission,
+      submissionIdx,
+      key: `${runStep.id}-${submission?.id ?? submissionIdx}`,
+      label:
+        allStepsForThisStep.length > 1
+          ? submissions.length > 1
+            ? `Instance ${runStepIdx + 1} - ${submission?.form?.name ?? `Form ${submissionIdx + 1}`}`
+            : `Instance ${runStepIdx + 1}`
+          : submissions.length > 1
+            ? (submission?.form?.name ?? `Form ${submissionIdx + 1}`)
+            : null,
+    }));
+  });
+
+  // If there are multiple submissions (from multiple run steps OR multiple forms), show accordion
+  const isMulti = submissionItems.length > 1;
+
+  if (isMulti) {
+    return (
+      <div className="space-y-4">
+        <div className="text-muted-foreground mb-2 text-sm">
+          {submissionItems.length} output{submissionItems.length !== 1 ? "s" : ""}
+        </div>
+        <Accordion
+          type="single"
+          collapsible
+          className="space-y-2"
+          value={selectedSubmissionId}
+          onValueChange={setSelectedSubmissionId}
+        >
+          {submissionItems.map((item, idx) => {
+            return (
+              <AccordionItem key={item.key} value={item.key} className="rounded-lg border">
+                <AccordionTrigger className="px-4 hover:no-underline">
+                  <div className="flex min-w-0 flex-1 items-center justify-between gap-3">
+                    <div className="flex min-w-0 flex-1 items-center gap-3">
+                      <div className="flex size-8 shrink-0 items-center justify-center rounded-full bg-indigo-600 text-sm font-medium text-white dark:bg-indigo-500">
+                        {idx + 1}
+                      </div>
+                      <div className="min-w-0 flex-1 text-left">
+                        <div className="truncate font-medium">
+                          {item.label ?? `Entry ${idx + 1}`}
+                        </div>
+                        {item.submission && (
+                          <div className="text-muted-foreground truncate text-xs">
+                            {item.submission.form.name}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                    <Badge
+                      variant={
+                        item.runStep.status === "completed"
+                          ? "green"
+                          : item.runStep.status === "failed"
+                            ? "destructive"
+                            : "secondary"
+                      }
+                      className="ml-2"
+                    >
+                      {item.runStep.status}
+                    </Badge>
+                  </div>
+                </AccordionTrigger>
+                <AccordionContent className="px-4 pb-4">
+                  {item.submission ? (
+                    <SubmissionDataDisplay
+                      submission={item.submission}
+                      activeCitationId={activeCitationId}
+                      onAnnotationSelect={onAnnotationSelect}
+                      boundingKey={boundingKey}
+                      setBoundingKey={setBoundingKey}
+                    />
+                  ) : (
+                    <div className="text-muted-foreground py-4 text-center text-sm">
+                      No submission data available
+                    </div>
+                  )}
+                </AccordionContent>
+              </AccordionItem>
+            );
+          })}
+        </Accordion>
+      </div>
+    );
+  }
+
+  // Single submission - show directly
+  const singleItem = submissionItems[0];
+  const submission = singleItem?.submission ?? null;
+
+  return (
+    <div>
+      <SubmissionDataDisplay
+        submission={submission}
+        activeCitationId={activeCitationId}
+        onAnnotationSelect={onAnnotationSelect}
+        boundingKey={boundingKey}
+        setBoundingKey={setBoundingKey}
+      />
+    </div>
+  );
+}
+
+function RouteComponent() {
+  const { pipelineId, runId } = Route.useParams();
+  const {
+    timeline: initialTimeline,
+    pipeline,
+    inputSubmissionData: initialInputSubmissionData,
+    outputSubmissionData: initialOutputSubmissionData,
+    blockers: initialBlockers,
+    availableSubmissions: initialAvailableSubmissions,
+  } = Route.useLoaderData();
+  const router = useRouter();
+  const downloadDocument = useServerFn(downloadDocumentFn);
+  const replayRun = useServerFn(replayPipelineRunFn);
+  const replayStep = useServerFn(replayPipelineRunStepFn);
+  const startRun = useServerFn(startPipelineRunFn);
+  const [selectedStepId, setSelectedStepId] = useState<string | undefined>(undefined);
+  const [timeline, setTimeline] = useState(initialTimeline);
+  const [inputSubmissionData, setInputSubmissionData] = useState(initialInputSubmissionData);
+  const [outputSubmissionData, setOutputSubmissionData] = useState(initialOutputSubmissionData);
+  const [blockers, setBlockers] = useState(initialBlockers);
+  const [availableSubmissions, setAvailableSubmissions] = useState(initialAvailableSubmissions);
+  const [isReplaying, setIsReplaying] = useState(false);
+  const [isStarting, setIsStarting] = useState(false);
+  const [viewMode, setViewMode] = useState<"flow" | "dag">("flow");
+  const crumbs = [
+    { href: "/pipelines", label: "Pipelines" },
+    { href: `/pipelines/${pipelineId}`, label: pipeline?.name ?? pipelineId },
+    { href: `/pipelines/${pipelineId}/${runId}`, label: runId.slice(0, 12) + "..." },
+  ];
+
+  // Create unique steps for process flow (one per stepId), ordered by execution level
+  const allSteps = useMemo<ProcessFlowStepData[]>(() => {
+    if (!timeline?.steps || !pipeline?.steps) return [];
+
+    // Group by stepId and take the first run step for each
+    const uniqueSteps = new Map<string, PipelineRunStepWithDetails>();
+    for (const runStep of timeline.steps) {
+      if (runStep.stepId && !uniqueSteps.has(runStep.stepId)) {
+        uniqueSteps.set(runStep.stepId, runStep);
+      }
+    }
+
+    // Pipeline steps are already sorted by execution level in getPipelineDetail
+    // Map pipeline step order to get the correct ordering
+    const steps: PipelineRunStepWithDetails[] = [];
+    for (const pipelineStep of pipeline.steps) {
+      const runStep = uniqueSteps.get(pipelineStep.id);
+      if (runStep) {
+        steps.push(runStep);
+      }
+    }
+
+    return steps;
+  }, [timeline, pipeline]);
+
+  // Sync loader data when it changes (but don't reset selected step on polls)
+  useEffect(() => {
+    setTimeline(initialTimeline);
+    setInputSubmissionData(initialInputSubmissionData);
+    setOutputSubmissionData(initialOutputSubmissionData);
+    setBlockers(initialBlockers);
+    setAvailableSubmissions(initialAvailableSubmissions);
+  }, [
+    initialTimeline,
+    initialInputSubmissionData,
+    initialOutputSubmissionData,
+    initialBlockers,
+    initialAvailableSubmissions,
+  ]);
+
+  // Set initial selected step when steps load
+  useEffect(() => {
+    if (allSteps.length > 0 && !selectedStepId) {
+      setSelectedStepId(allSteps[0]?.stepId ?? undefined);
+    }
+  }, [allSteps, selectedStepId]);
+
+  // Poll for updates if run is not complete
+  const isRunActive = timeline?.status === "pending" || timeline?.status === "running";
+
+  useEffect(() => {
+    if (!isRunActive) return;
+
+    const interval = setInterval(() => {
+      router.invalidate();
+    }, 1000); // Poll every second
+
+    return () => clearInterval(interval);
+  }, [isRunActive, router]);
+
+  // Group run steps by their stepId
+  const stepsByStepId = useMemo(() => {
+    if (!timeline?.steps) return new Map<string, PipelineRunStepWithDetails[]>();
+    const grouped = new Map<string, PipelineRunStepWithDetails[]>();
+    for (const runStep of timeline.steps) {
+      const stepId = runStep.stepId;
+      if (!stepId) continue;
+      if (!grouped.has(stepId)) {
+        grouped.set(stepId, []);
+      }
+      grouped.get(stepId)!.push(runStep);
+    }
+    return grouped;
+  }, [timeline]);
+
+  // Find the first run step for the selected stepId (for display purposes)
+  const selectedStep = timeline?.steps?.find((s) => s.stepId === selectedStepId);
+  // Get all run steps for the selected stepId (for multi-step display)
+  const allStepsForSelected = selectedStepId ? (stepsByStepId.get(selectedStepId) ?? []) : [];
+
+  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 getDuration = () => {
+    if (!timeline?.completedAt) return null;
+    return new Date(timeline.completedAt).getTime() - new Date(timeline.startedAt).getTime();
+  };
+
+  const formatDuration = (ms: number | null) => {
+    if (!ms) return null;
+    const seconds = ms / 1000;
+    if (seconds < 60) return `${seconds.toFixed(1)}s`;
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = (seconds % 60).toFixed(0);
+    return `${minutes}m ${remainingSeconds}s`;
+  };
+
+  const handleStartRun = async () => {
+    if (!timeline || isStarting) return;
+    setIsStarting(true);
+    try {
+      await startRun({ data: { runId, pipelineId } });
+      // Invalidate to refresh the page and show updated status
+      router.invalidate();
+    } catch (error) {
+      console.error("Failed to start run:", error);
+      alert("Failed to start run. Please try again.");
+    } finally {
+      setIsStarting(false);
+    }
+  };
+
+  const handleReplayRun = async () => {
+    if (!timeline || isReplaying) return;
+    setIsReplaying(true);
+    try {
+      const result = await replayRun({ data: { runId } });
+      // Navigate to the new run
+      // router.navigate({
+      //   to: "/pipelines/$pipelineId/$runId",
+      //   params: { pipelineId, runId: result.runId },
+      // });
+    } catch (error) {
+      console.error("Failed to replay run:", error);
+      alert("Failed to replay run. Please try again.");
+    } finally {
+      setIsReplaying(false);
+    }
+  };
+
+  const handleReplayStep = async (stepId: string) => {
+    if (isReplaying) return;
+    setIsReplaying(true);
+    try {
+      const result = await replayStep({ data: { runStepId: stepId } });
+      // Navigate to the new run
+      // router.navigate({
+      //   to: "/pipelines/$pipelineId/$runId",
+      //   params: { pipelineId, runId: result.runId },
+      // });
+    } catch (error) {
+      console.error("Failed to replay step:", error);
+      alert("Failed to replay step. Please try again.");
+    } finally {
+      setIsReplaying(false);
+    }
+  };
+
+  const extractionInfo = useMemo<(ExtractionInfo & { extractionTrigger: "web" | "api" })[]>(() => {
+    // Collect all unique extractions from input and output submissions
+    const extractionsById = new Map<
+      string,
+      ExtractionInfo & { extractionTrigger: "web" | "api" }
+    >();
+
+    // Helper to add extractions from a submission
+    const addExtractionsFromSubmission = (
+      submission: Awaited<ReturnType<typeof getSubmissionDataFn>> | null,
+      label: string,
+    ) => {
+      if (!submission?.extractions) {
+        return;
+      }
+      submission.extractions.forEach((e) => {
+        // Filter out deleted documents and extractions
+        if (e.deletedAt || e.document.deletedAt) {
+          return;
+        }
+        if (!extractionsById.has(e.id)) {
+          extractionsById.set(e.id, {
+            documentId: e.document.id,
+            documentExtractionId: e.id,
+            url: e.document.blobUrl,
+            urlExpiry: e.document.blobUrlExpiry,
+            uploaded: e.document.uploaded,
+            name: e.document.name,
+            composite: e.document.composite,
+            parentId: e.document.parentId,
+            classificationLabel: e.document.classificationLabel,
+            status: e.status,
+            displayType: e.document.displayType,
+            extractionModel: e.extractionModel ?? undefined,
+            extractionTrigger: e.extractionTrigger,
+            extractedData: e.data,
+            reconciliationData: e.reconciliation as ApiReconciliation,
+            citations: [] as DocumentCitation[],
+          });
+        }
+      });
+    };
+
+    // Helper to add citations from a submission's groups
+    const addCitationsFromSubmission = (
+      submission: Awaited<ReturnType<typeof getSubmissionDataFn>> | null,
+      label: string,
+    ) => {
+      if (!submission?.groups) {
+        return;
+      }
+      submission.groups.forEach((group) => {
+        group.items.forEach((item) => {
+          const version = item.selectedVersion;
+          if (!version) return;
+
+          // Recursive helper to collect document citations from transformation chains
+          const collectDocumentCitations = (v: typeof version): DocumentCitation[] => {
+            const citations: DocumentCitation[] = [];
+
+            // If this version has a direct document source, add it
+            if (v.documentSource) {
+              citations.push(v.documentSource);
+            }
+
+            // If this version has transformation sources, recursively collect their citations
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const transformationSource = (v as any).transformationSource as
+              | Array<typeof version>
+              | undefined;
+            if (transformationSource && Array.isArray(transformationSource)) {
+              for (const sourceVersion of transformationSource) {
+                citations.push(...collectDocumentCitations(sourceVersion));
+              }
+            }
+
+            return citations;
+          };
+
+          const citations = collectDocumentCitations(version);
+
+          if (citations.length > 0) {
+            citations.forEach((citation) => {
+              const extraction = extractionsById.get(citation.documentExtractionId);
+              if (extraction) {
+                extraction.citations.push(citation);
+              } else {
+              }
+            });
+          }
+        });
+      });
+    };
+
+    // Add extractions from all input submissions
+    if (inputSubmissionData) {
+      let index = 0;
+      inputSubmissionData.forEach((submission, submissionId) => {
+        const label = `Input[${index}:${submissionId}]`;
+        addExtractionsFromSubmission(submission, label);
+        addCitationsFromSubmission(submission, label);
+        index++;
+      });
+    }
+
+    // Add extractions and citations from all output submissions
+    if (outputSubmissionData) {
+      let index = 0;
+      outputSubmissionData.forEach((submissions, runStepId) => {
+        submissions.forEach((submission, submissionIdx) => {
+          const label = `Output[${index}:${runStepId}:${submissionIdx}]`;
+          addExtractionsFromSubmission(submission, label);
+          addCitationsFromSubmission(submission, label);
+          index++;
+        });
+      });
+    }
+
+    return Array.from(extractionsById.values());
+  }, [inputSubmissionData, outputSubmissionData, timeline]);
+
+  const [visibleExtractionId, setDocVisible] = useState<string | undefined>(undefined);
+  const [activeCitationId, setActiveCitationId] = useState<string | undefined>(undefined);
+  const [boundingKey, setBoundingKey] = useState<string | undefined>(undefined);
+
+  // Filter extraction info to only show documents from the selected step's output submissions
+  const selectedStepExtractionInfo = useMemo(() => {
+    if (!selectedStepId) return extractionInfo;
+
+    // Get all run steps for the selected stepId
+    const runStepsForSelected = stepsByStepId.get(selectedStepId) ?? [];
+    const runStepIds = new Set(runStepsForSelected.map((s) => s.id));
+
+    // Collect extraction IDs from output submissions of these run steps
+    const allowedExtractionIds = new Set<string>();
+    runStepIds.forEach((runStepId) => {
+      const submissions = outputSubmissionData.get(runStepId) ?? [];
+      submissions.forEach((submission) => {
+        submission?.extractions?.forEach((extraction) => {
+          allowedExtractionIds.add(extraction.id);
+        });
+      });
+    });
+
+    // Filter to only include extractions from the selected step's output submissions
+    return extractionInfo.filter((ext) => allowedExtractionIds.has(ext.documentExtractionId));
+  }, [extractionInfo, selectedStepId, stepsByStepId, outputSubmissionData]);
+
+  const activeDocument = useMemo(
+    () =>
+      visibleExtractionId
+        ? extractionInfo.find((p) => p.documentExtractionId === visibleExtractionId && !!p.url)
+        : undefined,
+    [visibleExtractionId, extractionInfo],
+  );
+
+  const focusDocumentForCitation = useCallback(
+    (citationId: string | undefined) => {
+      if (citationId === undefined) return;
+      const selectedPdf = extractionInfo.find((p) => p.citations.find((c) => c.id === citationId));
+      if (!selectedPdf) return;
+      setDocVisible(selectedPdf.documentExtractionId);
+    },
+    [extractionInfo],
+  );
+
+  const setActiveAnnotation = useCallback(
+    (id: string | undefined, options: { focus?: boolean } = {}) => {
+      const { focus = true } = options;
+      setActiveCitationId(id);
+      if (focus && id) {
+        focusDocumentForCitation(id);
+      }
+    },
+    [focusDocumentForCitation],
+  );
+
+  const handleFormAnnotationSelect = useCallback(
+    (id: string | undefined) => {
+      setActiveAnnotation(id, { focus: true });
+    },
+    [setActiveAnnotation],
+  );
+
+  const handleSelectCitation = useCallback(
+    (citationId?: string, key?: string) => {
+      setBoundingKey(key);
+      setActiveAnnotation(citationId, { focus: true });
+
+      // Scroll to the form field containing this citation
+      setTimeout(() => {
+        const element = document.querySelector(`[data-citation-id="${citationId}"]`);
+        if (element) {
+          element.scrollIntoView({ behavior: "smooth", block: "center" });
+        }
+      }, 100);
+    },
+    [setActiveAnnotation],
+  );
+
+  const refreshPdfUrl = useCallback(() => {
+    if (activeDocument) {
+      return downloadDocument({ data: { documentId: activeDocument.documentId } }).then(
+        ({ blobUrl }) => {
+          // Update the URL in extractionInfo if needed
+          const extraction = extractionInfo.find(
+            (e) => e.documentExtractionId === activeDocument.documentExtractionId,
+          );
+          if (extraction) {
+            extraction.url = blobUrl;
+          }
+        },
+      );
+    }
+    return Promise.resolve();
+  }, [activeDocument, extractionInfo, downloadDocument]);
+
+  const handleDownload = async (documentId: string) => {
+    const { blobUrl } = await downloadDocument({ data: { documentId } });
+    const [domain, docPath] = blobUrl.split("/documents/");
+    if (domain && docPath) {
+      const newUrl = new URL(docPath, "https://ph.sea.dev/doc/").toString();
+      window.open(newUrl, "_blank");
+    } else {
+      window.open(blobUrl, "_blank");
+    }
+  };
+
+  // State for upload modal
+  const [uploadModalOpen, setUploadModalOpen] = useState(false);
+  const [selectedRunStepId, setSelectedRunStepId] = useState<string | null>(null);
+
+  // State for submission selector modal
+  const [submissionSelectorOpen, setSubmissionSelectorOpen] = useState(false);
+  const [selectedBlockerDetails, setSelectedBlockerDetails] = useState<{
+    blockerId: string;
+    runStepId: string;
+    stepName: string;
+    requiredFormId?: string;
+    requiredFormName?: string;
+  } | null>(null);
+
+  const handleResolveBlocker = useCallback(
+    (blockerId: string, blockerType: string, runStepId: string) => {
+      switch (blockerType) {
+        case "missing_upload":
+          // Open upload modal
+          setSelectedRunStepId(runStepId);
+          setUploadModalOpen(true);
+          break;
+        case "missing_manual_input": {
+          // Find the blocker details to get form info
+          const stepBlockers = blockers?.find((b) => b.runStepId === runStepId);
+          const blocker = stepBlockers?.blockers.find((b) => b.id === blockerId);
+          const runStep = timeline?.steps.find((s) => s.id === runStepId);
+          const pipelineStep = pipeline?.steps.find((s) => s.id === runStep?.stepId);
+
+          const details = blocker?.blockerDetails;
+          const formId =
+            details && "requiredFormId" in details ? details.requiredFormId : undefined;
+          const formName =
+            details && "requiredFormName" in details ? details.requiredFormName : undefined;
+
+          setSelectedBlockerDetails({
+            blockerId,
+            runStepId,
+            stepName: pipelineStep?.name ?? "Unknown Step",
+            requiredFormId: formId,
+            requiredFormName: formName,
+          });
+          setSubmissionSelectorOpen(true);
+          break;
+        }
+        case "missing_config":
+          // Navigate to pipeline configuration
+          toast.info("Navigate to pipeline configuration to fix the step setup", {
+            action: {
+              label: "Go to Config",
+              onClick: () => {
+                router.navigate({
+                  to: "/pipelines/$pipelineId",
+                  params: { pipelineId },
+                });
+              },
+            },
+          });
+          break;
+        default:
+          // Unknown blocker type
+          break;
+      }
+    },
+    [pipelineId, router, blockers, timeline, pipeline],
+  );
+
+  const handleSubmitManualInput = async (submissionIds: string[]) => {
+    if (!selectedBlockerDetails) return;
+
+    try {
+      await resolveBlockerWithManualInputFn({
+        data: {
+          blockerId: selectedBlockerDetails.blockerId,
+          runStepId: selectedBlockerDetails.runStepId,
+          submissionIds,
+        },
+      });
+      toast.success("Manual input added successfully");
+      router.invalidate();
+    } catch (error) {
+      console.error("Failed to add manual input:", error);
+      toast.error("Failed to add manual input");
+      throw error;
+    }
+  };
+
+  const sidebar = (
+    <SidebarRight className="border-none">
+      {activeDocument && (
+        <div className="flex h-full flex-col">
+          <div className="relative flex w-full items-center justify-between gap-4 border-b p-2">
+            <H3>{activeDocument.name}</H3>
+            <div className="flex items-center gap-1">
+              <Button
+                size="icon"
+                variant="ghost"
+                onClick={() => {
+                  setDocVisible(undefined);
+                  setBoundingKey(undefined);
+                }}
+              >
+                <XIcon />
+                <span className="sr-only">Close</span>
+              </Button>
+            </div>
+          </div>
+          <PdfViewer
+            pdfInfo={activeDocument}
+            activeAnnotationKey={boundingKey}
+            activeCitationId={activeCitationId}
+            onSelectCitation={handleSelectCitation}
+            refreshPdfUrl={refreshPdfUrl}
+          />
+        </div>
+      )}
+      {!activeDocument && (
+        <ResizablePanelGroup direction="vertical">
+          <ResizablePanel defaultSize={60}>
+            <div className="flex h-full min-h-0 flex-col gap-2 p-2">
+              <H3>Artifacts</H3>
+              <div className="h-full min-h-0 space-y-2 overflow-y-auto">
+                {timeline?.artifacts && timeline.artifacts.length > 0 ? (
+                  timeline.artifacts.map((artifact) => {
+                    const markdownContent =
+                      typeof artifact.content === "object" &&
+                      artifact.content !== null &&
+                      "markdown" in artifact.content
+                        ? String(artifact.content.markdown)
+                        : typeof artifact.content === "string"
+                          ? artifact.content
+                          : JSON.stringify(artifact.content, null, 2);
+
+                    const markdownFileName = `${artifact.title}.md`;
+                    const wordFileName = `${artifact.title}.doc`;
+
+                    return (
+                      <Dialog key={artifact.id}>
+                        <div className="group/item bg-muted/50 hover:bg-muted/70 flex items-center justify-between gap-2 rounded-md">
+                          <DialogTrigger asChild>
+                            <button className="flex grow cursor-pointer items-center justify-between gap-2 p-2 text-left">
+                              <span className="flex min-w-0 items-center gap-2">
+                                <FileTextIcon className="text-primary h-4 w-4 shrink-0" />
+                                <span className="truncate text-sm">{artifact.title}</span>
+                              </span>
+                              <Badge variant="secondary" className="shrink-0 text-xs">
+                                {artifact.type}
+                              </Badge>
+                            </button>
+                          </DialogTrigger>
+                        </div>
+                        <DialogContent className="h-[90vh] sm:max-w-6xl">
+                          <DialogHeader>
+                            <DialogTitle>{artifact.title}</DialogTitle>
+                          </DialogHeader>
+                          <div className="prose prose-sm dark:prose-invert max-h-[60vh] max-w-full overflow-y-auto">
+                            {artifact.type === "markdown" ? (
+                              <Markdown remarkPlugins={[remarkGfm]}>{markdownContent}</Markdown>
+                            ) : (
+                              <pre className="text-xs">{markdownContent}</pre>
+                            )}
+                          </div>
+                          <DialogFooter className="flex w-full flex-wrap items-center justify-between gap-2">
+                            <div className="text-muted-foreground text-xs">
+                              Created <RelDate date={artifact.createdAt} />
+                            </div>
+                            <div className="flex gap-2">
+                              <Button
+                                variant="secondary"
+                                size="sm"
+                                onClick={() =>
+                                  downloadBlob(
+                                    new Blob([markdownContent], { type: "text/markdown" }),
+                                    markdownFileName,
+                                  )
+                                }
+                              >
+                                <DownloadIcon className="mr-2 h-4 w-4" />
+                                Download Markdown
+                              </Button>
+                              <Button
+                                variant="outline"
+                                size="sm"
+                                onClick={() =>
+                                  downloadBlob(
+                                    new Blob(
+                                      [
+                                        `<!DOCTYPE html><html><head><meta charset="utf-8" /></head><body><pre>${escapeHtml(
+                                          markdownContent,
+                                        )}</pre></body></html>`,
+                                      ],
+                                      { type: "application/msword" },
+                                    ),
+                                    wordFileName,
+                                  )
+                                }
+                              >
+                                <DownloadIcon className="mr-2 h-4 w-4" />
+                                Download Word
+                              </Button>
+                            </div>
+                          </DialogFooter>
+                        </DialogContent>
+                      </Dialog>
+                    );
+                  })
+                ) : (
+                  <div className="text-muted-foreground flex items-center justify-center py-8">
+                    No artifacts yet
+                  </div>
+                )}
+              </div>
+            </div>
+          </ResizablePanel>
+          <ResizableHandle withHandle={true} />
+          <ResizablePanel defaultSize={40}>
+            <DocList
+              docs={selectedStepExtractionInfo}
+              setDocVisible={setDocVisible}
+              canExtract={true}
+              download={handleDownload}
+            />
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      )}
+    </SidebarRight>
+  );
+
+  return (
+    <Container crumbs={crumbs} sidebar={sidebar}>
+      <div className="space-y-6">
+        {/* Header with all run metadata */}
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <h1 className="font-mono text-2xl font-semibold">{runId}</h1>
+            <div className="flex items-center gap-2">
+              {/* View Mode Toggle */}
+              {timeline && allSteps.length > 0 && pipeline && (
+                <div className="flex gap-1 rounded-md border p-1">
+                  <button
+                    type="button"
+                    onClick={() => setViewMode("flow")}
+                    className={`rounded px-3 py-0.5 text-sm font-medium transition-colors ${
+                      viewMode === "flow" ? "bg-primary text-primary-foreground" : "hover:bg-muted"
+                    }`}
+                  >
+                    Flow
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setViewMode("dag")}
+                    className={`rounded px-3 py-0.5 text-sm font-medium transition-colors ${
+                      viewMode === "dag" ? "bg-primary text-primary-foreground" : "hover:bg-muted"
+                    }`}
+                  >
+                    DAG
+                  </button>
+                </div>
+              )}
+              {timeline && timeline.status === "pending" && (
+                <Button
+                  variant="default"
+                  size="sm"
+                  onClick={handleStartRun}
+                  disabled={
+                    isStarting ||
+                    (blockers?.some((b) => b.blockers.some((blocker) => !blocker.resolved)) ??
+                      false)
+                  }
+                >
+                  <PlayIcon className="mr-2 size-4" />
+                  {isStarting
+                    ? "Starting..."
+                    : (blockers?.some((b) => b.blockers.some((blocker) => !blocker.resolved)) ??
+                        false)
+                      ? "Resolve Blockers First"
+                      : "Start Run"}
+                </Button>
+              )}
+              {timeline && (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={handleReplayRun}
+                  disabled={isReplaying}
+                >
+                  <RotateCcwIcon className="size-4" />
+                </Button>
+              )}
+            </div>
+          </div>
+
+          {timeline && (
+            <div className="flex flex-wrap items-center gap-x-6 gap-y-2 text-sm">
+              <div className="flex items-center gap-2">
+                <span className="text-muted-foreground">Created</span>
+                <span>
+                  <RelDate date={timeline.createdAt} />
+                </span>
+              </div>
+              <span className="text-muted-foreground">|</span>
+              <div className="flex items-center gap-2">
+                <span className="text-muted-foreground">Started</span>
+                <span>
+                  <RelDate date={timeline.startedAt} />
+                </span>
+              </div>
+              <span className="text-muted-foreground">|</span>
+              {timeline.completedAt && (
+                <>
+                  <div className="flex items-center gap-2">
+                    <span className="text-muted-foreground">
+                      {timeline.status === "completed" ? "Succeeded" : "Finished"}
+                    </span>
+                    <span>
+                      <RelDate date={timeline.completedAt} />
+                    </span>
+                  </div>
+                  <span className="text-muted-foreground">|</span>
+                </>
+              )}
+              {getDuration() && (
+                <div className="flex items-center gap-2">
+                  <span className="text-muted-foreground">Run took</span>
+                  <span className="font-medium">{formatDuration(getDuration())}</span>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Blockers Section - Only in Flow View */}
+        {viewMode === "flow" && timeline && allSteps.length > 0 && (
+          <Accordion type="multiple">
+            <AccordionItem value="blockers">
+              <AccordionTrigger className="px-4">
+                <H3 className="text-base font-semibold">Dependencies</H3>
+              </AccordionTrigger>
+              <AccordionContent className="px-4 pb-4">
+                <BlockersPanel
+                  steps={timeline.steps.map((step) => {
+                    const pipelineStep = pipeline?.steps.find((s) => s.id === step.stepId);
+                    const stepBlockerGroup = blockers?.find((b) => b.runStepId === step.id);
+                    const stepBlockers = stepBlockerGroup?.blockers ?? [];
+                    const hasUnresolvedBlockers = stepBlockers.some((b) => !b.resolved);
+                    return {
+                      id: step.id,
+                      stepId: step.id, // Use run step ID for blocker resolution
+                      stepName: pipelineStep?.name ?? "Unknown Step",
+                      status: step.status as "pending" | "running" | "completed" | "failed",
+                      blockers: stepBlockers,
+                      hasUnresolvedBlockers,
+                    };
+                  })}
+                  onResolveBlocker={handleResolveBlocker}
+                />
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
+        )}
+
+        {/* Pipeline Visualization */}
+        {timeline && allSteps.length > 0 && pipeline && (
+          <>
+            {/* Flow View */}
+            {viewMode === "flow" && (
+              <div className="overflow-hidden rounded-lg border border-gray-200 dark:border-white/15">
+                <nav aria-label="Progress">
+                  <ol role="list" className="lg:flex">
+                    {allSteps.map((step, idx) => {
+                      const stepKey = step.stepId;
+                      return (
+                        <ProcessFlowStep
+                          key={stepKey}
+                          step={step}
+                          isSelected={selectedStepId === stepKey}
+                          isFirst={idx === 0}
+                          isLast={idx === allSteps.length - 1}
+                          stepNumber={idx + 1}
+                          onClick={() => setSelectedStepId(stepKey ?? undefined)}
+                        />
+                      );
+                    })}
+                  </ol>
+                </nav>
+              </div>
+            )}
+
+            {/* DAG View */}
+            {viewMode === "dag" && (
+              <div className="h-[500px] rounded-lg border border-gray-200 dark:border-white/15">
+                <DAGView
+                  steps={pipeline.steps.map((step) => ({
+                    id: step.id,
+                    name: step.name,
+                    description: step.description ?? "",
+                    role: step.role,
+                    type: step.type,
+                    stepOrder: 0,
+                  }))}
+                  dependencies={pipeline.steps.flatMap(
+                    (step) =>
+                      step.parentDependencies?.map((dep) => ({
+                        id: dep.id,
+                        childStepId: step.id,
+                        parentStepId: dep.parentStepId,
+                        order: undefined,
+                      })) ?? [],
+                  )}
+                  onNodeClick={(stepId) => {
+                    // Find the run step for this pipeline step
+                    const runStep = timeline.steps.find((s) => s.stepId === stepId);
+                    if (runStep) {
+                      setSelectedStepId(stepId);
+                      setViewMode("flow"); // Switch to flow view to show details
+                    }
+                  }}
+                />
+              </div>
+            )}
+          </>
+        )}
+
+        {/* Step Details - Only in Flow View */}
+        {viewMode === "flow" && selectedStep && (
+          <div>
+            <StepDetails
+              step={selectedStep}
+              allStepsForThisStep={allStepsForSelected}
+              outputSubmissionData={outputSubmissionData}
+              onReplay={handleReplayStep}
+              isReplaying={isReplaying}
+              activeCitationId={activeCitationId}
+              onAnnotationSelect={handleFormAnnotationSelect}
+              boundingKey={boundingKey}
+              setBoundingKey={setBoundingKey}
+            />
+          </div>
+        )}
+
+        {/* Loading state */}
+        {!timeline && (
+          <Card>
+            <CardContent className="py-12">
+              <p className="text-muted-foreground text-center">Loading run details...</p>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+
+      {/* Upload Documents Modal */}
+      {uploadModalOpen && selectedRunStepId && (
+        <Dialog open={uploadModalOpen} onOpenChange={setUploadModalOpen}>
+          <DialogContent className="sm:max-w-lg">
+            <DialogHeader>
+              <DialogTitle>Upload Documents</DialogTitle>
+              <DialogDescription>
+                Upload documents to resolve the blocker and continue pipeline execution
+              </DialogDescription>
+            </DialogHeader>
+            <UploadDocForPipeline
+              runId={runId}
+              runStepId={selectedRunStepId}
+              isExperimental={false}
+              onUploadComplete={() => {
+                setUploadModalOpen(false);
+                setSelectedRunStepId(null);
+              }}
+            />
+          </DialogContent>
+        </Dialog>
+      )}
+
+      {/* Submission Selector Modal */}
+      {selectedBlockerDetails && (
+        <SubmissionSelectorModal
+          open={submissionSelectorOpen}
+          onClose={() => {
+            setSubmissionSelectorOpen(false);
+            setSelectedBlockerDetails(null);
+          }}
+          onSubmit={handleSubmitManualInput}
+          availableSubmissions={availableSubmissions.map((sub) => ({
+            id: sub.id,
+            name: sub.name,
+            formId: sub.formId,
+            formName: sub.form.name,
+            status: sub.status,
+            updatedAt: sub.updatedAt,
+          }))}
+          requiredFormId={selectedBlockerDetails.requiredFormId}
+          requiredFormName={selectedBlockerDetails.requiredFormName}
+          stepName={selectedBlockerDetails.stepName}
+        />
+      )}
+    </Container>
+  );
+}