@open-mercato/core 0.7.1-develop.7193.1.910a5b0a1e → 0.7.1-develop.7195.1.b5efd1d51a

package/dist/modules/workflows/backend/instances/[id]/page.js

@@ -3,10 +3,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 import { Page, PageBody } from "@open-mercato/ui/backend/Page";
 import { Button } from "@open-mercato/ui/primitives/button";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@open-mercato/ui/primitives/tabs";
 import { FormHeader } from "@open-mercato/ui/backend/forms";
 import { Spinner } from "@open-mercato/ui/primitives/spinner";
+import { Alert, AlertDescription, AlertTitle } from "@open-mercato/ui/primitives/alert";
+import { FlaskConical, Footprints } from "lucide-react";
 import { JsonDisplay } from "@open-mercato/ui/backend/JsonDisplay";
 import { useT } from "@open-mercato/shared/lib/i18n/context";
 import { apiFetch } from "@open-mercato/ui/backend/utils/api";
@@ -15,17 +19,53 @@ import { useConfirmDialog } from "@open-mercato/ui/backend/confirm-dialog";
 import { WorkflowGraphReadOnly } from "../../../components/WorkflowGraph.js";
 import { WorkflowLegend } from "../../../components/WorkflowLegend.js";
 import { MobileInstanceOverview } from "../../../components/mobile/MobileInstanceOverview.js";
+import { RunStepInspector } from "../../../components/run/RunStepInspector.js";
+import { RunGantt } from "../../../components/run/RunGantt.js";
+import { RerunStepDialog } from "../../../components/run/RerunStepDialog.js";
+import { useLiveRunUpdates } from "../../../components/run/useLiveRunUpdates.js";
+import { AgentActivityPanel } from "../../../components/run/AgentActivityPanel.js";
+import { RunEventBadge, runEventBadgeClass } from "../../../components/run/RunEventBadge.js";
+import { InstanceStatusBadge, instanceStatusBadgeClass } from "../../../components/run/RunStatusBadge.js";
 import { useIsMobile } from "@open-mercato/ui/hooks/useIsMobile";
+import { useBackendChrome } from "@open-mercato/ui/backend/BackendChromeProvider";
+import { useGuardedMutation } from "@open-mercato/ui/backend/injection/useGuardedMutation";
+import { hasFeature } from "@open-mercato/shared/security/features";
+import { apiCall } from "@open-mercato/ui/backend/utils/apiCall";
+import { readJsonSafe } from "@open-mercato/shared/lib/http/readJsonSafe";
+import { WouldDoReport } from "../../../components/run/WouldDoReport.js";
 import { definitionToGraph } from "../../../lib/graph-utils.js";
+import { PRESENTATION_STEP_STYLES } from "../../../lib/status-colors.js";
+import {
+  deriveRunExecution,
+  isRouteTaken,
+  resolveNodeRunStatus
+} from "../../../lib/run-execution.js";
+import {
+  presentationToWorkflowStatus,
+  readNodeAgentId,
+  resolveStepPresentation
+} from "../../../lib/step-presentation.js";
+import { useAgentLabels } from "../../../components/run/useAgentLabels.js";
+import { formatElapsedSince, formatRunDuration } from "../../../lib/run-duration.js";
+import { isRunMilestoneEvent } from "../../../lib/run-event-tone.js";
 import { RecordNotFoundState, ErrorMessage } from "@open-mercato/ui/backend/detail";
 import { createLogger } from "@open-mercato/shared/lib/logger";
 const logger = createLogger("workflows");
 function WorkflowInstanceDetailPage({ params }) {
   const id = params?.id;
   const t = useT();
+  const router = useRouter();
   const isMobile = useIsMobile();
   const queryClient = useQueryClient();
   const { confirm: confirmDialog, ConfirmDialogElement } = useConfirmDialog();
+  const [activeTab, setActiveTab] = React.useState("flow");
+  const [selectedStepId, setSelectedStepId] = React.useState(null);
+  const [rerunOpen, setRerunOpen] = React.useState(false);
+  const [rerunPending, setRerunPending] = React.useState(false);
+  const [stepThroughPending, setStepThroughPending] = React.useState(false);
+  const { payload: chromePayload } = useBackendChrome();
+  const { runMutation, retryLastMutation } = useGuardedMutation({ contextId: "workflows.instances.rerunStep" });
+  const canRerunStep = hasFeature(chromePayload?.grantedFeatures, "workflows.instances.rerun_step");
   const { data: instance, isLoading, error } = useQuery({
     queryKey: ["workflow-instance", id],
     queryFn: async () => {
@@ -49,13 +89,74 @@ function WorkflowInstanceDetailPage({ params }) {
         `/api/workflows/events?workflowInstanceId=${instance.id}&sortField=occurredAt&sortDir=desc&pageSize=100`
       );
       if (!response.ok) {
-        throw new Error("Failed to fetch events");
+        throw new Error("[internal] Failed to fetch events");
       }
       const data = await response.json();
       return data.items || [];
     },
     enabled: !!instance?.id
   });
+  const { data: stepInstances = [], isLoading: stepsLoading } = useQuery({
+    queryKey: ["workflow-instance-steps", instance?.id],
+    queryFn: async () => {
+      const response = await apiFetch(`/api/workflows/instances/${instance.id}/steps?limit=100`);
+      if (!response.ok) {
+        throw new Error("[internal] Failed to fetch step instances");
+      }
+      const data = await response.json();
+      return data.data ?? [];
+    },
+    enabled: !!instance?.id
+  });
+  const { data: wouldDoReport } = useQuery({
+    queryKey: ["workflow-would-do", instance?.id],
+    queryFn: async () => {
+      const response = await apiFetch(`/api/workflows/instances/${instance.id}/would-do?limit=100`);
+      if (!response.ok) {
+        throw new Error("[internal] Failed to fetch the would-do report");
+      }
+      return await response.json();
+    },
+    enabled: !!instance?.id && instance?.isDryRun === true
+  });
+  const stepThroughMarker = instance?.metadata?.stepThrough ?? null;
+  const isStepping = stepThroughMarker?.enabled === true;
+  const handleStepThrough = React.useCallback(async (action) => {
+    if (!instance?.id) return;
+    setStepThroughPending(true);
+    try {
+      await runMutation({
+        operation: async () => {
+          const response = await apiFetch(`/api/workflows/instances/${instance.id}/step-through`, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ action })
+          });
+          if (!response.ok) {
+            const body = await readJsonSafe(response, null);
+            throw new Error(body?.error || t("workflows.stepThrough.failed"));
+          }
+          return response;
+        },
+        mutationPayload: { resourceId: instance.id, operation: "step-through" },
+        context: {
+          formId: "workflows.instances.stepThrough",
+          resourceKind: "workflows.instance",
+          resourceId: instance.id,
+          operation: "step-through",
+          retryLastMutation
+        }
+      });
+      await queryClient.invalidateQueries({ queryKey: ["workflow-instance", id] });
+      await queryClient.invalidateQueries({ queryKey: ["workflow-instance-steps", instance.id] });
+      await queryClient.invalidateQueries({ queryKey: ["workflow-events", instance.id] });
+      await queryClient.invalidateQueries({ queryKey: ["workflow-would-do", instance.id] });
+    } catch (error2) {
+      flash(error2 instanceof Error ? error2.message : t("workflows.stepThrough.failed"), "error");
+    } finally {
+      setStepThroughPending(false);
+    }
+  }, [instance?.id, runMutation, retryLastMutation, queryClient, id, t]);
   const { data: workflowDefinition, isLoading: definitionLoading } = useQuery({
     queryKey: ["workflow-definition-for-instance", instance?.definitionId],
     queryFn: async () => {
@@ -69,61 +170,129 @@ function WorkflowInstanceDetailPage({ params }) {
     },
     enabled: !!instance?.definitionId
   });
-  const calculateDuration = (startedAt, completedAt) => {
-    const start = typeof startedAt === "string" ? new Date(startedAt).getTime() : startedAt.getTime();
-    const end = completedAt ? typeof completedAt === "string" ? new Date(completedAt).getTime() : completedAt.getTime() : Date.now();
-    const duration = end - start;
-    if (duration < 1e3) {
-      return `${duration}ms`;
-    } else if (duration < 6e4) {
-      return `${Math.floor(duration / 1e3)}s`;
-    } else if (duration < 36e5) {
-      return `${Math.floor(duration / 6e4)}m ${Math.floor(duration % 6e4 / 1e3)}s`;
-    } else {
-      const hours = Math.floor(duration / 36e5);
-      const minutes = Math.floor(duration % 36e5 / 6e4);
-      return `${hours}h ${minutes}m`;
+  const { data: childInstances = [] } = useQuery({
+    queryKey: ["workflow-instance-children", instance?.id],
+    queryFn: async () => {
+      const response = await apiFetch(
+        `/api/workflows/instances?parentInstanceId=${encodeURIComponent(instance.id)}&limit=100`
+      );
+      if (!response.ok) return [];
+      const data = await response.json();
+      return data.data || [];
+    },
+    enabled: !!instance?.id
+  });
+  const childrenByStepId = React.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const child of childInstances) {
+      const stepId = child.metadata?.labels?.parentStepId;
+      if (!stepId) continue;
+      const existing = map.get(stepId);
+      if (existing) existing.push(child);
+      else map.set(stepId, [child]);
     }
-  };
-  const getStatusBadgeClass = (status) => {
-    switch (status) {
-      case "RUNNING":
-        return "bg-blue-100 text-blue-800";
-      case "PAUSED":
-        return "bg-yellow-100 text-yellow-800";
-      case "WAITING_FOR_ACTIVITIES":
-        return "bg-cyan-100 text-cyan-800";
-      case "COMPLETED":
-        return "bg-green-100 text-green-800";
-      case "FAILED":
-        return "bg-red-100 text-red-800";
-      case "CANCELLED":
-        return "bg-muted text-foreground";
-      case "COMPENSATING":
-        return "bg-orange-100 text-orange-800";
-      case "COMPENSATED":
-        return "bg-purple-100 text-purple-800";
-      default:
-        return "bg-muted text-muted-foreground";
+    return map;
+  }, [childInstances]);
+  const parentInstanceId = instance?.metadata?.labels?.parentInstanceId ?? null;
+  const refreshRun = React.useCallback(() => {
+    queryClient.invalidateQueries({ queryKey: ["workflow-instance", id] });
+    queryClient.invalidateQueries({ queryKey: ["workflow-instance-steps"] });
+    queryClient.invalidateQueries({ queryKey: ["workflow-events"] });
+    queryClient.invalidateQueries({ queryKey: ["workflow-instance-children"] });
+  }, [queryClient, id]);
+  useLiveRunUpdates({ instanceId: id ?? null, onRefresh: refreshRun, enabled: !!id });
+  const goToInstance = React.useCallback((targetId) => {
+    router.push(`/backend/instances/${targetId}`);
+  }, [router]);
+  const handleNodeClick = React.useCallback((_event, node) => {
+    setSelectedStepId(node.id);
+  }, []);
+  const execution = React.useMemo(
+    () => deriveRunExecution({
+      events,
+      stepInstances,
+      currentStepId: instance?.currentStepId,
+      instanceStatus: instance?.status,
+      attention: instance?.metadata?.attention
+    }),
+    [events, stepInstances, instance?.currentStepId, instance?.status, instance?.metadata?.attention]
+  );
+  const hasAgentStep = React.useMemo(
+    () => (workflowDefinition?.definition?.steps ?? []).some(
+      (step) => (step.activities ?? []).some((activity) => activity.activityType === "INVOKE_AGENT")
+    ),
+    [workflowDefinition]
+  );
+  const agentLabels = useAgentLabels(hasAgentStep);
+  const executionsByStepId = React.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const stepInstance of stepInstances) {
+      const existing = map.get(stepInstance.stepId);
+      if (existing) existing.push(stepInstance);
+      else map.set(stepInstance.stepId, [stepInstance]);
     }
-  };
-  const getEventTypeBadgeClass = (eventType) => {
-    if (eventType.includes("COMPENSATION") || eventType.includes("Compensation")) {
-      return "bg-orange-100 text-orange-800";
-    } else if (eventType.includes("STARTED") || eventType.includes("ENTERED")) {
-      return "bg-blue-100 text-blue-800";
-    } else if (eventType.includes("COMPLETED") || eventType.includes("EXITED")) {
-      return "bg-green-100 text-green-800";
-    } else if (eventType.includes("FAILED") || eventType.includes("REJECTED")) {
-      return "bg-red-100 text-red-800";
-    } else if (eventType.includes("CANCELLED")) {
-      return "bg-muted text-foreground";
-    } else if (eventType.includes("PAUSED")) {
-      return "bg-yellow-100 text-yellow-800";
-    } else {
-      return "bg-muted text-foreground";
+    return map;
+  }, [stepInstances]);
+  const { graphNodes, graphEdges } = React.useMemo(() => {
+    if (!workflowDefinition?.definition) {
+      return { graphNodes: [], graphEdges: [] };
     }
-  };
+    const { nodes, edges } = definitionToGraph(workflowDefinition.definition, { autoLayout: true });
+    const styledNodes = nodes.map((node) => {
+      const runStatus = resolveNodeRunStatus(execution, node, {
+        currentStepId: instance?.currentStepId,
+        instanceStatus: instance?.status
+      });
+      const presentation = resolveStepPresentation(
+        execution,
+        { id: node.id, status: runStatus },
+        { agentLabels, agentId: readNodeAgentId(node.data) }
+      );
+      const status = presentationToWorkflowStatus(presentation.state);
+      const state = execution.stepStates.get(node.id);
+      const duration = state ? formatRunDuration(state.startedAt, state.completedAt, state.durationMs) ?? formatElapsedSince(state.startedAt, null) : null;
+      const tooltipLines = [
+        String(node.data.label || node.id),
+        `${t("workflows.instances.fields.status", "Status")}: ${status}`
+      ];
+      if (state?.startedAt) {
+        tooltipLines.push(`${t("workflows.instances.fields.startedAt", "Started")}: ${state.startedAt.toLocaleString()}`);
+      }
+      if (state?.completedAt) {
+        tooltipLines.push(`${t("workflows.instances.fields.completedAt", "Completed")}: ${state.completedAt.toLocaleString()}`);
+      }
+      if (duration) {
+        tooltipLines.push(`${t("workflows.instances.fields.duration", "Duration")}: ${duration}`);
+      }
+      return {
+        ...node,
+        data: {
+          ...node.data,
+          status,
+          duration,
+          runReason: presentation.reason,
+          runStartedAt: presentation.startedAt,
+          tooltip: tooltipLines.join("\n"),
+          childInstanceIds: (childrenByStepId.get(node.id) ?? []).map((child) => child.id)
+        },
+        style: PRESENTATION_STEP_STYLES[presentation.state],
+        selected: node.id === selectedStepId
+      };
+    });
+    const styledEdges = edges.map((edge) => {
+      const taken = isRouteTaken(execution, {
+        transitionId: edge.id,
+        fromStepId: edge.source,
+        toStepId: edge.target
+      });
+      return taken ? { ...edge, data: { ...edge.data, state: "completed" } } : edge;
+    });
+    return { graphNodes: styledNodes, graphEdges: styledEdges };
+  }, [workflowDefinition, execution, agentLabels, instance?.currentStepId, instance?.status, childrenByStepId, selectedStepId, t]);
+  const calculateDuration = React.useCallback(
+    (startedAt, completedAt) => formatElapsedSince(startedAt, completedAt) ?? "-",
+    []
+  );
   const cancelMutation = useMutation({
     mutationFn: async () => {
       const response = await apiFetch(`/api/workflows/instances/${instance.id}/cancel`, {
@@ -138,8 +307,8 @@ function WorkflowInstanceDetailPage({ params }) {
       flash(t("workflows.instances.messages.cancelled"), "success");
       queryClient.invalidateQueries({ queryKey: ["workflow-instance", id] });
     },
-    onError: (error2) => {
-      logger.error("Error cancelling instance", { err: error2 });
+    onError: (mutationError) => {
+      logger.error("Error cancelling instance", { err: mutationError });
       flash(t("workflows.instances.cancelFailed"), "error");
     }
   });
@@ -157,8 +326,8 @@ function WorkflowInstanceDetailPage({ params }) {
       flash(t("workflows.instances.messages.retried"), "success");
       queryClient.invalidateQueries({ queryKey: ["workflow-instance", id] });
     },
-    onError: (error2) => {
-      logger.error("Error retrying instance", { err: error2 });
+    onError: (mutationError) => {
+      logger.error("Error retrying instance", { err: mutationError });
       flash(t("workflows.instances.retryFailed"), "error");
     }
   });
@@ -168,9 +337,7 @@ function WorkflowInstanceDetailPage({ params }) {
       title: t("workflows.instances.confirmCancel"),
       variant: "destructive"
     });
-    if (!confirmed) {
-      return;
-    }
+    if (!confirmed) return;
     cancelMutation.mutate();
   };
   const handleRetry = async () => {
@@ -179,160 +346,14 @@ function WorkflowInstanceDetailPage({ params }) {
       title: t("workflows.instances.confirmRetry"),
       variant: "default"
     });
-    if (!confirmed) {
-      return;
-    }
+    if (!confirmed) return;
     retryMutation.mutate();
   };
-  const { graphNodes, graphEdges } = React.useMemo(() => {
-    if (!workflowDefinition?.definition) {
-      return { graphNodes: [], graphEdges: [] };
-    }
-    const { nodes, edges } = definitionToGraph(workflowDefinition.definition, { autoLayout: true });
-    const stepStatuses = /* @__PURE__ */ new Map();
-    const stepTimings = /* @__PURE__ */ new Map();
-    for (const event of events) {
-      const stepId = event.eventData?.stepId || event.eventData?.toStepId;
-      if (!stepId) continue;
-      if (event.eventType === "STEP_ENTERED" || event.eventType === "StepEntered") {
-        stepTimings.set(stepId, { ...stepTimings.get(stepId), startedAt: new Date(event.occurredAt) });
-        if (!stepStatuses.has(stepId)) {
-          stepStatuses.set(stepId, "active");
-        }
-      } else if (event.eventType === "STEP_COMPLETED" || event.eventType === "STEP_EXITED" || event.eventType === "StepExited") {
-        stepTimings.set(stepId, { ...stepTimings.get(stepId), completedAt: new Date(event.occurredAt) });
-        stepStatuses.set(stepId, "completed");
-      } else if (event.eventType === "STEP_FAILED" || event.eventType === "StepFailed") {
-        stepTimings.set(stepId, { ...stepTimings.get(stepId), completedAt: new Date(event.occurredAt) });
-        stepStatuses.set(stepId, "failed");
-      }
-    }
-    if (instance?.currentStepId && !stepStatuses.has(instance.currentStepId)) {
-      stepStatuses.set(instance.currentStepId, "active");
-    } else if (instance?.currentStepId && stepStatuses.get(instance.currentStepId) !== "completed") {
-      stepStatuses.set(instance.currentStepId, "active");
-    }
-    for (const node of nodes) {
-      if (!stepStatuses.has(node.id)) {
-        const nodeType = node.type;
-        const isCurrentStep = instance?.currentStepId === node.id;
-        if (nodeType === "start") {
-          if (isCurrentStep) {
-            stepStatuses.set(node.id, "active");
-          } else {
-            stepStatuses.set(node.id, "completed");
-          }
-        } else if (nodeType === "end") {
-          if (isCurrentStep || instance?.status === "COMPLETED") {
-            stepStatuses.set(node.id, "completed");
-          } else {
-            stepStatuses.set(node.id, "pending");
-          }
-        } else {
-          stepStatuses.set(node.id, "pending");
-        }
-      }
-    }
-    const styledNodes = nodes.map((node) => {
-      const status = stepStatuses.get(node.id) || "pending";
-      const timing = stepTimings.get(node.id);
-      const duration = timing?.startedAt && timing?.completedAt ? calculateDuration(timing.startedAt, timing.completedAt) : timing?.startedAt ? calculateDuration(timing.startedAt, null) : null;
-      let tooltipContent = `${node.data.label || node.id}
-`;
-      tooltipContent += `Status: ${status}
-`;
-      if (timing?.startedAt) {
-        tooltipContent += `Started: ${timing.startedAt.toLocaleString()}
-`;
-      }
-      if (timing?.completedAt) {
-        tooltipContent += `Completed: ${timing.completedAt.toLocaleString()}
-`;
-      }
-      if (duration) {
-        tooltipContent += `Duration: ${duration}`;
-      }
-      let style = {};
-      switch (status) {
-        case "completed":
-          style = {
-            backgroundColor: "#10B981",
-            // green-500
-            color: "white",
-            borderColor: "#059669",
-            // green-600
-            borderWidth: "3px",
-            borderRadius: "16px"
-          };
-          break;
-        case "active":
-          style = {
-            backgroundColor: "#3B82F6",
-            // blue-500
-            color: "white",
-            borderColor: "#1D4ED8",
-            // blue-700
-            borderWidth: "3px",
-            borderRadius: "16px",
-            boxShadow: "0 0 0 3px rgba(59, 130, 246, 0.3)"
-          };
-          break;
-        case "failed":
-          style = {
-            backgroundColor: "#EF4444",
-            // red-500
-            color: "white",
-            borderColor: "#B91C1C",
-            // red-700
-            borderWidth: "3px",
-            borderRadius: "16px"
-          };
-          break;
-        case "skipped":
-          style = {
-            backgroundColor: "#FEF3C7",
-            // yellow-100
-            color: "#78350F",
-            // yellow-900
-            borderColor: "#F59E0B",
-            // yellow-500
-            borderWidth: "3px",
-            borderRadius: "16px"
-          };
-          break;
-        case "pending":
-        default:
-          style = {
-            backgroundColor: "#E5E7EB",
-            // gray-200
-            color: "#374151",
-            // gray-700
-            borderColor: "#9CA3AF",
-            // gray-400
-            borderWidth: "2px",
-            borderRadius: "8px"
-          };
-          break;
-      }
-      return {
-        ...node,
-        data: {
-          ...node.data,
-          status,
-          timing,
-          duration,
-          tooltip: tooltipContent
-        },
-        style
-      };
-    });
-    return { graphNodes: styledNodes, graphEdges: edges };
-  }, [workflowDefinition, events, instance?.currentStepId]);
   if (isLoading) {
     return /* @__PURE__ */ jsxs(Page, { children: [
       /* @__PURE__ */ jsx(PageBody, { children: /* @__PURE__ */ jsxs("div", { className: "flex h-[50vh] flex-col items-center justify-center gap-2 text-muted-foreground", children: [
         /* @__PURE__ */ jsx(Spinner, { className: "h-6 w-6" }),
-        /* @__PURE__ */ jsx("span", { children: t("workflows.instances.detail.loading") || "Loading workflow instance..." })
+        /* @__PURE__ */ jsx("span", { children: t("workflows.instances.detail.loading", "Loading workflow instance...") })
       ] }) }),
       ConfirmDialogElement
     ] });
@@ -363,42 +384,80 @@ function WorkflowInstanceDetailPage({ params }) {
       ConfirmDialogElement
     ] });
   }
-  const canCancel = ["RUNNING", "PAUSED"].includes(instance.status);
+  const canCancel = instance.status === "RUNNING" || instance.status === "PAUSED";
   const canRetry = instance.status === "FAILED";
   const actionLoading = cancelMutation.isPending || retryMutation.isPending;
+  const canOfferRerun = canRerunStep && (instance.status === "FAILED" || instance.status === "PAUSED");
+  const submitRerun = async (contextPatch) => {
+    if (!selectedStepId || !id) return;
+    setRerunPending(true);
+    try {
+      await runMutation({
+        operation: async () => {
+          const result = await apiCall(
+            `/api/workflows/instances/${id}/rerun-step`,
+            {
+              method: "POST",
+              body: JSON.stringify({ stepId: selectedStepId, contextPatch })
+            }
+          );
+          if (!result.ok) {
+            throw new Error(
+              result.result?.error ?? t("workflows.rerunStep.failed", "Could not rerun the step.")
+            );
+          }
+          return result.result;
+        },
+        context: { instanceId: id, stepId: selectedStepId },
+        mutationPayload: { stepId: selectedStepId, contextPatch }
+      });
+      flash(t("workflows.rerunStep.started", "Rerun started."), "success");
+      setRerunOpen(false);
+      refreshRun();
+    } catch (rerunError) {
+      flash(
+        rerunError instanceof Error ? rerunError.message : t("workflows.rerunStep.failed", "Could not rerun the step."),
+        "error"
+      );
+    } finally {
+      setRerunPending(false);
+    }
+  };
+  const menuActions = [
+    ...canCancel ? [{
+      id: "cancel",
+      label: t("workflows.instances.actions.cancel"),
+      onSelect: handleCancel,
+      disabled: actionLoading
+    }] : [],
+    ...canRetry ? [{
+      id: "retry",
+      label: t("workflows.instances.actions.retry"),
+      onSelect: handleRetry,
+      disabled: actionLoading
+    }] : []
+  ];
+  const header = /* @__PURE__ */ jsx(
+    FormHeader,
+    {
+      mode: "detail",
+      backHref: "/backend/instances",
+      backLabel: t("workflows.instances.backToList", "Back to instances"),
+      entityTypeLabel: t("workflows.instances.detail.type", "Workflow instance"),
+      title: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { children: instance.workflowId }),
+        /* @__PURE__ */ jsxs("span", { className: "font-mono text-sm text-muted-foreground", children: [
+          "#",
+          instance.id.slice(0, 8)
+        ] })
+      ] }),
+      menuActions
+    }
+  );
   if (isMobile) {
     return /* @__PURE__ */ jsxs(Page, { children: [
       /* @__PURE__ */ jsx(PageBody, { children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-        /* @__PURE__ */ jsx(
-          FormHeader,
-          {
-            mode: "detail",
-            backHref: "/backend/instances",
-            backLabel: t("workflows.instances.backToList", "Back to instances"),
-            entityTypeLabel: t("workflows.instances.detail.type", "Workflow instance"),
-            title: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
-              /* @__PURE__ */ jsx("span", { children: instance.workflowId }),
-              /* @__PURE__ */ jsxs("span", { className: "font-mono text-sm text-muted-foreground", children: [
-                "#",
-                instance.id.slice(0, 8)
-              ] })
-            ] }),
-            menuActions: [
-              ...canCancel ? [{
-                id: "cancel",
-                label: t("workflows.instances.actions.cancel"),
-                onSelect: handleCancel,
-                disabled: actionLoading
-              }] : [],
-              ...canRetry ? [{
-                id: "retry",
-                label: t("workflows.instances.actions.retry"),
-                onSelect: handleRetry,
-                disabled: actionLoading
-              }] : []
-            ]
-          }
-        ),
+        header,
         /* @__PURE__ */ jsx(
           MobileInstanceOverview,
           {
@@ -408,8 +467,8 @@ function WorkflowInstanceDetailPage({ params }) {
             graphEdges,
             definitionLoading,
             hasDefinition: !!workflowDefinition,
-            getStatusBadgeClass,
-            getEventTypeBadgeClass,
+            getStatusBadgeClass: instanceStatusBadgeClass,
+            getEventTypeBadgeClass: runEventBadgeClass,
             calculateDuration
           }
         )
@@ -417,41 +476,17 @@ function WorkflowInstanceDetailPage({ params }) {
       ConfirmDialogElement
     ] });
   }
+  const compensationEvents = events.filter(
+    (event) => event.eventType.includes("COMPENSATION") || event.eventType.includes("Compensation")
+  );
+  const milestoneEvents = events.filter((event) => isRunMilestoneEvent(event.eventType));
+  const selectedNode = graphNodes.find((node) => node.id === selectedStepId);
   return /* @__PURE__ */ jsxs(Page, { children: [
     /* @__PURE__ */ jsx(PageBody, { children: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
-      /* @__PURE__ */ jsx(
-        FormHeader,
-        {
-          mode: "detail",
-          backHref: "/backend/instances",
-          backLabel: t("workflows.instances.backToList", "Back to instances"),
-          entityTypeLabel: t("workflows.instances.detail.type", "Workflow instance"),
-          title: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
-            /* @__PURE__ */ jsx("span", { children: instance.workflowId }),
-            /* @__PURE__ */ jsxs("span", { className: "font-mono text-sm text-muted-foreground", children: [
-              "#",
-              instance.id.slice(0, 8)
-            ] })
-          ] }),
-          menuActions: [
-            ...canCancel ? [{
-              id: "cancel",
-              label: t("workflows.instances.actions.cancel"),
-              onSelect: handleCancel,
-              disabled: actionLoading
-            }] : [],
-            ...canRetry ? [{
-              id: "retry",
-              label: t("workflows.instances.actions.retry"),
-              onSelect: handleRetry,
-              disabled: actionLoading
-            }] : []
-          ]
-        }
-      ),
+      header,
       /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-6", children: [
-        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold mb-4", children: t("workflows.instances.sections.overview") }),
-        /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+        /* @__PURE__ */ jsx("h2", { className: "mb-4 text-lg font-semibold", children: t("workflows.instances.sections.overview") }),
+        /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [
           /* @__PURE__ */ jsxs("div", { children: [
             /* @__PURE__ */ jsx("dt", { className: "text-sm font-medium text-muted-foreground", children: t("workflows.instances.fields.workflowId") }),
             /* @__PURE__ */ jsxs("dd", { className: "mt-1 text-sm text-foreground", children: [
@@ -464,19 +499,11 @@ function WorkflowInstanceDetailPage({ params }) {
           ] }),
           /* @__PURE__ */ jsxs("div", { children: [
             /* @__PURE__ */ jsx("dt", { className: "text-sm font-medium text-muted-foreground", children: t("workflows.instances.fields.status") }),
-            /* @__PURE__ */ jsx("dd", { className: "mt-1", children: /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: `inline-flex items-center px-2 py-1 rounded text-xs font-medium ${getStatusBadgeClass(
-                  instance.status
-                )}`,
-                children: t(`workflows.instances.status.${instance.status}`)
-              }
-            ) })
+            /* @__PURE__ */ jsx("dd", { className: "mt-1", children: /* @__PURE__ */ jsx(InstanceStatusBadge, { status: instance.status }) })
           ] }),
           /* @__PURE__ */ jsxs("div", { children: [
             /* @__PURE__ */ jsx("dt", { className: "text-sm font-medium text-muted-foreground", children: t("workflows.instances.fields.currentStep") }),
-            /* @__PURE__ */ jsx("dd", { className: "mt-1 text-sm text-foreground font-mono", children: instance.currentStepId || "-" })
+            /* @__PURE__ */ jsx("dd", { className: "mt-1 font-mono text-sm text-foreground", children: instance.currentStepId || "-" })
           ] }),
           /* @__PURE__ */ jsxs("div", { children: [
             /* @__PURE__ */ jsx("dt", { className: "text-sm font-medium text-muted-foreground", children: t("workflows.instances.fields.correlationKey") }),
@@ -496,155 +523,239 @@ function WorkflowInstanceDetailPage({ params }) {
           ] }),
           /* @__PURE__ */ jsxs("div", { children: [
             /* @__PURE__ */ jsx("dt", { className: "text-sm font-medium text-muted-foreground", children: t("workflows.instances.fields.retryCount") }),
-            /* @__PURE__ */ jsx("dd", { className: "mt-1", children: /* @__PURE__ */ jsx("span", { className: instance.retryCount > 0 ? "text-orange-600 font-medium text-sm" : "text-sm text-foreground", children: instance.retryCount }) })
+            /* @__PURE__ */ jsx("dd", { className: "mt-1", children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: instance.retryCount > 0 ? "text-sm font-medium text-status-warning-text" : "text-sm text-foreground",
+                children: instance.retryCount
+              }
+            ) })
+          ] }),
+          parentInstanceId && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("dt", { className: "text-sm font-medium text-muted-foreground", children: t("workflows.instances.fields.parentInstance", "Parent instance") }),
+            /* @__PURE__ */ jsx("dd", { className: "mt-1 text-sm", children: /* @__PURE__ */ jsxs(
+              Link,
+              {
+                href: `/backend/instances/${parentInstanceId}`,
+                className: "font-mono text-primary hover:underline",
+                children: [
+                  "#",
+                  parentInstanceId.slice(0, 8)
+                ]
+              }
+            ) })
           ] })
         ] })
       ] }),
-      definitionLoading && /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card p-6", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center py-8", children: [
-        /* @__PURE__ */ jsx(Spinner, { className: "h-6 w-6" }),
-        /* @__PURE__ */ jsx("span", { className: "ml-2 text-sm text-muted-foreground", children: "Loading workflow visualization..." })
-      ] }) }),
-      !definitionLoading && workflowDefinition && graphNodes.length > 0 && /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-4 md:p-6", children: [
-        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-foreground mb-4", children: t("workflows.instances.sections.visualFlow") || "Visual Workflow Flow" }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 lg:flex-row lg:gap-6", children: [
-          /* @__PURE__ */ jsx("div", { className: "order-2 lg:order-1 lg:w-64 lg:flex-shrink-0", children: /* @__PURE__ */ jsx(WorkflowLegend, {}) }),
-          /* @__PURE__ */ jsx("div", { className: "order-1 lg:order-2 flex-1 border rounded-lg overflow-hidden h-[62svh] min-h-[360px] lg:h-[800px]", children: /* @__PURE__ */ jsx(
-            WorkflowGraphReadOnly,
-            {
-              nodes: graphNodes,
-              edges: graphEdges,
-              height: "100%"
-            }
-          ) })
-        ] })
+      instance.errorMessage && /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-destructive bg-destructive/5 p-6", children: [
+        /* @__PURE__ */ jsx("h2", { className: "mb-4 text-lg font-semibold text-destructive", children: t("workflows.instances.fields.lastError") }),
+        /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap font-mono text-sm text-destructive", children: instance.errorMessage }),
+        instance.errorDetails && /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(JsonDisplay, { data: instance.errorDetails, className: "border-destructive/20 bg-destructive/5", maxInitialDepth: 1 }) })
       ] }),
-      !definitionLoading && !workflowDefinition && instance && /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-6", children: [
-        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold mb-4", children: t("workflows.instances.sections.visualFlow") || "Visual Workflow Flow" }),
-        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-8 text-muted-foreground", children: /* @__PURE__ */ jsxs("p", { className: "text-sm", children: [
-          "Workflow definition not found (ID: ",
-          instance.definitionId,
-          ")"
-        ] }) })
+      instance.isDryRun && /* @__PURE__ */ jsxs(Alert, { status: "information", icon: /* @__PURE__ */ jsx(FlaskConical, { "aria-hidden": "true" }), children: [
+        /* @__PURE__ */ jsx(AlertTitle, { children: t("workflows.dryRun.badge") }),
+        /* @__PURE__ */ jsx(AlertDescription, { children: t("workflows.dryRun.bannerDescription") })
       ] }),
-      (instance.status === "COMPENSATING" || instance.status === "COMPENSATED") && /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-orange-300 bg-orange-50 p-6", children: [
-        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold mb-4 text-orange-800", children: t("workflows.instances.sections.compensation") || "Compensation (Saga Pattern)" }),
-        /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-sm text-orange-700", children: instance.status === "COMPENSATING" ? t("workflows.instances.compensation.inProgress") || "Workflow is currently executing compensation activities to rollback changes." : t("workflows.instances.compensation.completed") || "Compensation has been completed. All changes have been rolled back." }),
-          events.filter(
-            (e) => e.eventType.includes("COMPENSATION") || e.eventType.includes("Compensation")
-          ).length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
-            /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-orange-800 mb-2", children: t("workflows.instances.compensation.activities") || "Compensation Activities" }),
-            /* @__PURE__ */ jsx("div", { className: "space-y-2", children: events.filter((e) => e.eventType.includes("COMPENSATION") || e.eventType.includes("Compensation")).reverse().map((event) => /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 p-2 bg-card rounded border border-orange-200", children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: `inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${getEventTypeBadgeClass(
-                    event.eventType
-                  )}`,
-                  children: event.eventType
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { className: "text-xs text-orange-600", children: new Date(event.occurredAt).toLocaleTimeString() }),
-              event.eventData?.activityName && /* @__PURE__ */ jsx("span", { className: "text-xs text-orange-700 font-medium", children: event.eventData.activityName })
-            ] }, event.id)) })
+      isStepping && /* @__PURE__ */ jsxs(Alert, { status: "warning", icon: /* @__PURE__ */ jsx(Footprints, { "aria-hidden": "true" }), children: [
+        /* @__PURE__ */ jsx(AlertTitle, { children: t("workflows.stepThrough.title") }),
+        /* @__PURE__ */ jsx(AlertDescription, { children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx("p", { children: instance.status === "PAUSED" ? t("workflows.stepThrough.pausedAt", { stepId: instance.currentStepId }) : t("workflows.stepThrough.running") }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "sm",
+                disabled: stepThroughPending,
+                onClick: () => void handleStepThrough("continue"),
+                children: stepThroughPending ? /* @__PURE__ */ jsx(Spinner, { className: "h-4 w-4" }) : t("workflows.stepThrough.continue")
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "sm",
+                variant: "outline",
+                disabled: stepThroughPending,
+                onClick: () => void handleStepThrough("stop"),
+                children: t("workflows.stepThrough.stop")
+              }
+            )
           ] })
-        ] })
-      ] }),
-      instance.errorMessage && /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-destructive bg-destructive/5 p-6", children: [
-        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold mb-4 text-destructive", children: t("workflows.instances.fields.lastError") }),
-        /* @__PURE__ */ jsx("pre", { className: "text-sm text-destructive whitespace-pre-wrap font-mono", children: instance.errorMessage }),
-        instance.errorDetails && /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(
-          JsonDisplay,
-          {
-            data: instance.errorDetails,
-            className: "border-destructive/20 bg-destructive/5",
-            maxInitialDepth: 1
-          }
-        ) })
+        ] }) })
       ] }),
-      /* @__PURE__ */ jsx(
-        JsonDisplay,
-        {
-          data: instance.context,
-          title: t("workflows.instances.sections.context")
-        }
-      ),
-      instance.metadata && Object.keys(instance.metadata).length > 0 && /* @__PURE__ */ jsx(
-        JsonDisplay,
+      instance.isDryRun && /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card p-6", children: /* @__PURE__ */ jsx(WouldDoReport, { report: wouldDoReport ?? null }) }),
+      /* @__PURE__ */ jsxs(
+        Tabs,
         {
-          data: instance.metadata,
-          title: t("workflows.instances.sections.metadata")
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-6", children: [
-        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold mb-4", children: t("workflows.instances.sections.executionTimeline") || "Execution Timeline" }),
-        eventsLoading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [
-          /* @__PURE__ */ jsx(Spinner, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx("span", { className: "text-sm", children: t("common.loading") })
-        ] }) : events.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("workflows.instances.noExecutionHistory") }) : /* @__PURE__ */ jsx("div", { className: "space-y-2", children: events.filter(
-          (e) => e.eventType.includes("STEP_") || e.eventType.includes("WORKFLOW_STARTED") || e.eventType.includes("WORKFLOW_COMPLETED") || e.eventType.includes("WORKFLOW_FAILED")
-        ).reverse().map((event, idx) => /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 p-3 bg-muted rounded-lg border", children: [
-          /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 w-8 h-8 rounded-full bg-background border-2 border-border flex items-center justify-center text-xs font-medium", children: idx + 1 }),
-          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: `inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${getEventTypeBadgeClass(
-                    event.eventType
-                  )}`,
-                  children: t(`workflows.events.types.${event.eventType}`) || event.eventType
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: new Date(event.occurredAt).toLocaleTimeString() })
+          value: activeTab,
+          onValueChange: (value) => setActiveTab(value),
+          variant: "underline",
+          children: [
+            /* @__PURE__ */ jsxs(TabsList, { "aria-label": t("workflows.instances.run.tabs.label", "Run views"), children: [
+              /* @__PURE__ */ jsx(TabsTrigger, { value: "flow", children: t("workflows.instances.run.tabs.flow", "Flow") }),
+              /* @__PURE__ */ jsx(TabsTrigger, { value: "timeline", children: t("workflows.instances.run.tabs.timeline", "Timeline") }),
+              /* @__PURE__ */ jsx(TabsTrigger, { value: "context", children: t("workflows.instances.run.tabs.context", "Context") }),
+              /* @__PURE__ */ jsx(TabsTrigger, { value: "raw", count: events.length || void 0, children: t("workflows.instances.run.tabs.raw", "Raw") })
             ] }),
-            event.eventData && /* @__PURE__ */ jsxs("p", { className: "mt-1 text-xs text-muted-foreground", children: [
-              event.eventData.toStepId && `-> ${event.eventData.toStepId}`,
-              event.eventData.fromStepId && `${event.eventData.fromStepId} -> ${event.eventData.toStepId}`
-            ] })
-          ] })
-        ] }, event.id)) })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-6", children: [
-        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold mb-4", children: t("workflows.instances.sections.executionHistory") }),
-        eventsLoading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [
-          /* @__PURE__ */ jsx(Spinner, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx("span", { className: "text-sm", children: t("common.loading") })
-        ] }) : events.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("workflows.instances.noExecutionHistory") }) : /* @__PURE__ */ jsx("div", { className: "overflow-x-auto rounded-lg border", children: /* @__PURE__ */ jsxs("table", { className: "min-w-full divide-y divide-border", children: [
-          /* @__PURE__ */ jsx("thead", { className: "bg-muted", children: /* @__PURE__ */ jsxs("tr", { children: [
-            /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-muted-foreground", children: t("workflows.events.occurredAt") }),
-            /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-muted-foreground", children: t("workflows.events.eventType") }),
-            /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-muted-foreground", children: t("workflows.events.eventData") }),
-            /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-muted-foreground", children: t("workflows.events.userId") })
-          ] }) }),
-          /* @__PURE__ */ jsx("tbody", { className: "bg-background divide-y divide-border", children: events.map((event) => /* @__PURE__ */ jsxs("tr", { className: "hover:bg-muted/50", children: [
-            /* @__PURE__ */ jsx("td", { className: "px-4 py-3 whitespace-nowrap text-sm text-foreground", children: new Date(event.occurredAt).toLocaleString() }),
-            /* @__PURE__ */ jsx("td", { className: "px-4 py-3 whitespace-nowrap", children: /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: `inline-flex items-center px-2 py-1 rounded text-xs font-medium ${getEventTypeBadgeClass(
-                  event.eventType
-                )}`,
-                children: t(`workflows.events.types.${event.eventType}`) || event.eventType
-              }
-            ) }),
-            /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-sm", children: /* @__PURE__ */ jsxs("details", { className: "cursor-pointer", children: [
-              /* @__PURE__ */ jsx("summary", { className: "text-primary hover:underline", children: t("common.details") }),
-              /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(
-                JsonDisplay,
-                {
-                  data: event.eventData,
-                  showCopy: false,
-                  maxInitialDepth: 1
-                }
-              ) })
+            /* @__PURE__ */ jsx(TabsContent, { value: "flow", children: /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-4", children: [
+              definitionLoading && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2 rounded-lg border bg-card py-8 text-muted-foreground", children: [
+                /* @__PURE__ */ jsx(Spinner, { className: "h-6 w-6" }),
+                /* @__PURE__ */ jsx("span", { className: "text-sm", children: t("common.loading") })
+              ] }),
+              !definitionLoading && workflowDefinition && graphNodes.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 lg:flex-row lg:gap-6", children: [
+                /* @__PURE__ */ jsx("div", { className: "order-2 lg:order-1 lg:w-64 lg:flex-shrink-0", children: /* @__PURE__ */ jsx(WorkflowLegend, {}) }),
+                /* @__PURE__ */ jsx("div", { className: "order-1 h-[62svh] min-h-[360px] flex-1 overflow-hidden rounded-lg border lg:order-2 lg:h-[640px]", children: /* @__PURE__ */ jsx(
+                  WorkflowGraphReadOnly,
+                  {
+                    nodes: graphNodes,
+                    edges: graphEdges,
+                    height: "100%",
+                    onNodeClick: handleNodeClick
+                  }
+                ) })
+              ] }),
+              !definitionLoading && !workflowDefinition && /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card p-6 text-sm text-muted-foreground", children: t(
+                "workflows.instances.run.definitionMissing",
+                "Workflow definition not found (ID: {definitionId})",
+                { definitionId: instance.definitionId }
+              ) }),
+              /* @__PURE__ */ jsx(AgentActivityPanel, { instanceId: id ?? null, enabled: !!id }),
+              /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-4 md:p-6", children: [
+                /* @__PURE__ */ jsx("h3", { className: "mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground", children: t("workflows.instances.run.inspector.title", "Step inspector") }),
+                /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center justify-between gap-2", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: t("workflows.instances.run.inspector.hint", "Click a node on the canvas to inspect it.") }),
+                  canOfferRerun ? /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      type: "button",
+                      variant: "outline",
+                      size: "sm",
+                      disabled: !selectedStepId || (executionsByStepId.get(selectedStepId ?? "")?.length ?? 0) === 0,
+                      onClick: () => setRerunOpen(true),
+                      children: t("workflows.rerunStep.action", "Rerun from this step")
+                    }
+                  ) : null
+                ] }),
+                /* @__PURE__ */ jsx(
+                  RunStepInspector,
+                  {
+                    stepId: selectedStepId,
+                    stepLabel: selectedNode ? String(selectedNode.data?.label ?? "") : null,
+                    executions: selectedStepId ? executionsByStepId.get(selectedStepId) ?? [] : [],
+                    childInstanceIds: selectedStepId ? (childrenByStepId.get(selectedStepId) ?? []).map((child) => child.id) : [],
+                    onOpenChildInstance: goToInstance,
+                    isLoading: stepsLoading
+                  }
+                )
+              ] })
             ] }) }),
-            /* @__PURE__ */ jsx("td", { className: "px-4 py-3 whitespace-nowrap text-sm text-muted-foreground", children: event.userId || "-" })
-          ] }, event.id)) })
-        ] }) })
-      ] })
+            /* @__PURE__ */ jsx(TabsContent, { value: "timeline", children: /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-4", children: [
+              /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-4 md:p-6", children: [
+                /* @__PURE__ */ jsx("h3", { className: "mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground", children: t("workflows.instances.run.gantt.title", "Step durations") }),
+                stepsLoading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [
+                  /* @__PURE__ */ jsx(Spinner, { className: "h-4 w-4" }),
+                  /* @__PURE__ */ jsx("span", { className: "text-sm", children: t("common.loading") })
+                ] }) : /* @__PURE__ */ jsx(
+                  RunGantt,
+                  {
+                    stepInstances,
+                    instanceStartedAt: instance.startedAt,
+                    instanceCompletedAt: instance.completedAt,
+                    selectedStepId,
+                    onSelectStep: (stepId) => {
+                      setSelectedStepId(stepId);
+                      setActiveTab("flow");
+                    }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-6", children: [
+                /* @__PURE__ */ jsx("h3", { className: "mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground", children: t("workflows.instances.sections.executionTimeline", "Execution Timeline") }),
+                eventsLoading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [
+                  /* @__PURE__ */ jsx(Spinner, { className: "h-4 w-4" }),
+                  /* @__PURE__ */ jsx("span", { className: "text-sm", children: t("common.loading") })
+                ] }) : milestoneEvents.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("workflows.instances.noExecutionHistory") }) : /* @__PURE__ */ jsx("div", { className: "space-y-2", children: [...milestoneEvents].reverse().map((event, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 rounded-lg border bg-muted p-3", children: [
+                  /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full border-2 border-border bg-background text-xs font-medium", children: index + 1 }),
+                  /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsx(RunEventBadge, { eventType: event.eventType }),
+                      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: new Date(event.occurredAt).toLocaleTimeString() })
+                    ] }),
+                    event.eventData?.toStepId && /* @__PURE__ */ jsxs("p", { className: "mt-1 font-mono text-xs text-muted-foreground", children: [
+                      event.eventData.fromStepId ? `${event.eventData.fromStepId} \u2192 ` : "\u2192 ",
+                      event.eventData.toStepId
+                    ] })
+                  ] })
+                ] }, event.id)) })
+              ] })
+            ] }) }),
+            /* @__PURE__ */ jsx(TabsContent, { value: "context", children: /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-4", children: [
+              /* @__PURE__ */ jsx(JsonDisplay, { data: instance.context, title: t("workflows.instances.sections.context") }),
+              instance.metadata && Object.keys(instance.metadata).length > 0 && /* @__PURE__ */ jsx(JsonDisplay, { data: instance.metadata, title: t("workflows.instances.sections.metadata") }),
+              (instance.status === "COMPENSATING" || instance.status === "COMPENSATED") && /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-status-warning-border bg-status-warning-bg p-6", children: [
+                /* @__PURE__ */ jsx("h2", { className: "mb-4 text-lg font-semibold text-status-warning-text", children: t("workflows.instances.sections.compensation", "Compensation (Saga Pattern)") }),
+                /* @__PURE__ */ jsx("p", { className: "text-sm text-status-warning-text", children: instance.status === "COMPENSATING" ? t(
+                  "workflows.instances.compensation.inProgress",
+                  "Workflow is currently executing compensation activities to rollback changes."
+                ) : t(
+                  "workflows.instances.compensation.completed",
+                  "Compensation has been completed. All changes have been rolled back."
+                ) }),
+                compensationEvents.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
+                  /* @__PURE__ */ jsx("h3", { className: "mb-2 text-sm font-medium text-status-warning-text", children: t("workflows.instances.compensation.activities", "Compensation Activities") }),
+                  /* @__PURE__ */ jsx("div", { className: "space-y-2", children: [...compensationEvents].reverse().map((event) => /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: "flex items-start gap-2 rounded border border-status-warning-border bg-card p-2",
+                      children: [
+                        /* @__PURE__ */ jsx(RunEventBadge, { eventType: event.eventType }),
+                        /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: new Date(event.occurredAt).toLocaleTimeString() }),
+                        event.eventData?.activityName && /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-foreground", children: event.eventData.activityName })
+                      ]
+                    },
+                    event.id
+                  )) })
+                ] })
+              ] })
+            ] }) }),
+            /* @__PURE__ */ jsx(TabsContent, { value: "raw", children: /* @__PURE__ */ jsx("div", { className: "mt-4 rounded-lg border bg-card p-6", children: eventsLoading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [
+              /* @__PURE__ */ jsx(Spinner, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm", children: t("common.loading") })
+            ] }) : events.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("workflows.instances.noExecutionHistory") }) : /* @__PURE__ */ jsx("div", { className: "overflow-x-auto rounded-lg border", children: /* @__PURE__ */ jsxs("table", { className: "min-w-full divide-y divide-border", children: [
+              /* @__PURE__ */ jsx("thead", { className: "bg-muted", children: /* @__PURE__ */ jsxs("tr", { children: [
+                /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-muted-foreground", children: t("workflows.events.occurredAt") }),
+                /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-muted-foreground", children: t("workflows.events.eventType") }),
+                /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-muted-foreground", children: t("workflows.events.eventData") }),
+                /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-muted-foreground", children: t("workflows.events.userId") })
+              ] }) }),
+              /* @__PURE__ */ jsx("tbody", { className: "divide-y divide-border bg-background", children: events.map((event) => /* @__PURE__ */ jsxs("tr", { className: "hover:bg-muted/50", children: [
+                /* @__PURE__ */ jsx("td", { className: "whitespace-nowrap px-4 py-3 text-sm text-foreground", children: new Date(event.occurredAt).toLocaleString() }),
+                /* @__PURE__ */ jsx("td", { className: "whitespace-nowrap px-4 py-3", children: /* @__PURE__ */ jsx(RunEventBadge, { eventType: event.eventType }) }),
+                /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-sm", children: /* @__PURE__ */ jsxs("details", { className: "cursor-pointer", children: [
+                  /* @__PURE__ */ jsx("summary", { className: "text-primary hover:underline", children: t("common.details") }),
+                  /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(JsonDisplay, { data: event.eventData, showCopy: false, maxInitialDepth: 1 }) })
+                ] }) }),
+                /* @__PURE__ */ jsx("td", { className: "whitespace-nowrap px-4 py-3 text-sm text-muted-foreground", children: event.userId || "-" })
+              ] }, event.id)) })
+            ] }) }) }) })
+          ]
+        }
+      )
     ] }) }),
-    ConfirmDialogElement
+    ConfirmDialogElement,
+    /* @__PURE__ */ jsx(
+      RerunStepDialog,
+      {
+        open: rerunOpen,
+        onOpenChange: setRerunOpen,
+        stepId: selectedStepId,
+        stepLabel: selectedNode ? String(selectedNode.data?.label ?? "") : null,
+        isSubmitting: rerunPending,
+        onConfirm: (contextPatch) => {
+          void submitRerun(contextPatch);
+        }
+      }
+    )
   ] });
 }
 export {