@acmekit/dashboard 2.13.34 → 2.13.36

package/dist/workflow-execution-detail-3RH6EQSS.mjs

@@ -0,0 +1,1411 @@
+import {
+  STEP_ERROR_STATES,
+  STEP_INACTIVE_STATES,
+  STEP_IN_PROGRESS_STATES,
+  STEP_OK_STATES,
+  STEP_SKIPPED_STATES,
+  TRANSACTION_ACTIVE_STATES,
+  TRANSACTION_ERROR_STATES,
+  TRANSACTION_IN_PROGRESS_STATES,
+  computeIdempotencyKey,
+  formatStepDuration,
+  getFailedSteps,
+  getTransactionState,
+  getTransactionStateColor,
+  getWaitingSteps,
+  isTerminalState,
+  mergeStepEvent
+} from "./chunk-LP6CPB7N.mjs";
+import {
+  useDate
+} from "./chunk-DFFLVEZ5.mjs";
+import "./chunk-535OVBXR.mjs";
+import {
+  JsonViewSection,
+  SingleColumnPage
+} from "./chunk-RISX76YT.mjs";
+import {
+  useExtension
+} from "./chunk-C5P5PL3E.mjs";
+import {
+  ActionMenu
+} from "./chunk-S3REQHPQ.mjs";
+import "./chunk-WLRJXEKL.mjs";
+import "./chunk-5IEHCYJO.mjs";
+import "./chunk-XIP35KXF.mjs";
+import "./chunk-PFZQYK7R.mjs";
+import {
+  useCancelWorkflowExecution,
+  useRetryStep,
+  useRunWorkflow,
+  useWorkflowExecution,
+  workflowExecutionsQueryKeys
+} from "./chunk-A7ULKHDE.mjs";
+import "./chunk-FKTMBR44.mjs";
+import "./chunk-SYACY6AL.mjs";
+import {
+  SingleColumnPageSkeleton
+} from "./chunk-ITNQKZQQ.mjs";
+import "./chunk-OAHCJFG3.mjs";
+import {
+  useDocumentDirection
+} from "./chunk-S4DMV3ZT.mjs";
+import "./chunk-HHPPTD3B.mjs";
+import {
+  queryClient
+} from "./chunk-FXYH54JP.mjs";
+import "./chunk-774WSTCC.mjs";
+import {
+  backendUrl,
+  sdk
+} from "./chunk-YKIWIMJX.mjs";
+import "./chunk-QZ7TP4HQ.mjs";
+
+// src/routes/workflow-executions/workflow-execution-detail/breadcrumb.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var WorkflowExecutionDetailBreadcrumb = (props) => {
+  const { id } = props.params || {};
+  const { workflow_execution } = useWorkflowExecution(id, {
+    initialData: props.data,
+    enabled: Boolean(id)
+  });
+  if (!workflow_execution) {
+    return null;
+  }
+  const cleanId = workflow_execution.id.replace("wf_exec_", "");
+  return /* @__PURE__ */ jsxs("span", { children: [
+    workflow_execution.workflow_id,
+    /* @__PURE__ */ jsx("span", { className: "text-ui-fg-muted", children: " / " }),
+    cleanId
+  ] });
+};
+
+// src/routes/workflow-executions/workflow-execution-detail/loader.ts
+var executionDetailQuery = (id) => ({
+  queryKey: workflowExecutionsQueryKeys.detail(id),
+  queryFn: async () => sdk.admin.workflowExecution.retrieve(id)
+});
+var workflowExecutionLoader = async ({
+  params
+}) => {
+  const id = params.id;
+  const query = executionDetailQuery(id);
+  return queryClient.ensureQueryData(query);
+};
+
+// src/routes/workflow-executions/workflow-execution-detail/workflow-detail.tsx
+import { useParams } from "react-router-dom";
+import { useQueryClient } from "@tanstack/react-query";
+
+// src/hooks/use-workflow-sse.tsx
+import { useEffect, useRef, useState } from "react";
+var useWorkflowSSE = (workflowId, options) => {
+  const { enabled = true, onEvent } = options || {};
+  const [isConnected, setIsConnected] = useState(false);
+  const eventSourceRef = useRef(null);
+  const onEventRef = useRef(onEvent);
+  onEventRef.current = onEvent;
+  useEffect(() => {
+    if (!enabled || !workflowId) {
+      if (eventSourceRef.current) {
+        eventSourceRef.current.close();
+        eventSourceRef.current = null;
+        setIsConnected(false);
+      }
+      return;
+    }
+    const base = backendUrl === "/" ? "" : backendUrl;
+    const url = `${base}/admin/workflows-executions/${workflowId}/subscribe`;
+    const es = new EventSource(url, { withCredentials: true });
+    eventSourceRef.current = es;
+    es.onopen = () => {
+      setIsConnected(true);
+    };
+    es.onmessage = (e) => {
+      try {
+        const data = JSON.parse(e.data);
+        onEventRef.current?.(data);
+      } catch {
+      }
+    };
+    es.onerror = () => {
+      setIsConnected(false);
+    };
+    return () => {
+      es.close();
+      eventSourceRef.current = null;
+      setIsConnected(false);
+    };
+  }, [enabled, workflowId]);
+  const disconnect = () => {
+    if (eventSourceRef.current) {
+      eventSourceRef.current.close();
+      eventSourceRef.current = null;
+      setIsConnected(false);
+    }
+  };
+  return { isConnected, disconnect };
+};
+
+// src/routes/workflow-executions/workflow-execution-detail/components/workflow-execution-action-bar/workflow-execution-action-bar.tsx
+import { ArrowPathMini, EllipsisHorizontal, XMark } from "@acmekit/icons";
+import {
+  Badge,
+  Button,
+  Container,
+  Copy,
+  StatusBadge,
+  toast,
+  usePrompt
+} from "@acmekit/ui";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var WorkflowExecutionActionBar = ({
+  execution
+}) => {
+  const { t } = useTranslation();
+  const prompt = usePrompt();
+  const state = execution.state;
+  const stateColor = getTransactionStateColor(state);
+  const translatedState = getTransactionState(t, state);
+  const workflowId = execution.workflow_id;
+  const transactionId = execution.transaction_id;
+  const isFailed = TRANSACTION_ERROR_STATES.includes(state);
+  const isRunning = TRANSACTION_IN_PROGRESS_STATES.includes(state);
+  const waitingSteps = getWaitingSteps(execution);
+  const hasWaitingSteps = waitingSteps.length > 0;
+  const { mutateAsync: runAsync, isPending: isRunning_ } = useRunWorkflow(workflowId);
+  const { mutateAsync: cancelAsync, isPending: isCancelling } = useCancelWorkflowExecution(workflowId, transactionId);
+  const handleRetry = async () => {
+    const payload = execution?.context?.data?.payload;
+    const input = payload && typeof payload === "object" ? payload : {};
+    await runAsync(
+      { input },
+      {
+        onSuccess: () => {
+          toast.success(t("workflowExecutions.actions.retrySuccess"));
+        },
+        onError: (err) => {
+          toast.error(err.message);
+        }
+      }
+    );
+  };
+  const handleCancel = async () => {
+    const res = await prompt({
+      title: t("workflowExecutions.actions.cancelConfirmTitle"),
+      description: t("workflowExecutions.actions.cancelConfirmDescription", {
+        workflow_id: workflowId
+      }),
+      confirmText: t("workflowExecutions.actions.cancel"),
+      cancelText: t("actions.cancel")
+    });
+    if (!res) return;
+    await cancelAsync(void 0, {
+      onSuccess: () => {
+        toast.success(t("workflowExecutions.actions.cancelSuccess"));
+      },
+      onError: (err) => {
+        toast.error(err.message);
+      }
+    });
+  };
+  const handleExportJson = () => {
+    const data = JSON.stringify(execution, null, 2);
+    const blob = new Blob([data], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `workflow-${workflowId}-${execution.id}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+  const handleExportCsv = () => {
+    const steps = execution?.execution?.steps || {};
+    const rows = [["Step", "State", "Duration"]];
+    for (const [stepId, step] of Object.entries(steps)) {
+      if (stepId === "_root") continue;
+      const invokeState = step?.invoke?.state || "unknown";
+      rows.push([stepId, invokeState, ""]);
+    }
+    const csv = rows.map((r) => r.join(",")).join("\n");
+    const blob = new Blob([csv], { type: "text/csv" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `workflow-${workflowId}-${execution.id}.csv`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+  const cleanId = execution.id.replace("wf_exec_", "");
+  return /* @__PURE__ */ jsx2(Container, { className: "sticky top-14 z-10 p-0", children: /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between px-6 py-3", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-x-3", children: [
+      /* @__PURE__ */ jsx2(Copy, { content: workflowId, asChild: true, children: /* @__PURE__ */ jsx2(Badge, { size: "2xsmall", className: "cursor-pointer", children: workflowId }) }),
+      /* @__PURE__ */ jsx2(StatusBadge, { color: stateColor, children: translatedState }),
+      /* @__PURE__ */ jsx2(Copy, { content: execution.id, asChild: true, children: /* @__PURE__ */ jsx2(
+        Badge,
+        {
+          size: "2xsmall",
+          color: "grey",
+          className: "cursor-pointer text-ui-fg-muted",
+          children: cleanId
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-x-2", children: [
+      isFailed && /* @__PURE__ */ jsxs2(
+        Button,
+        {
+          variant: "secondary",
+          size: "small",
+          onClick: handleRetry,
+          isLoading: isRunning_,
+          children: [
+            /* @__PURE__ */ jsx2(ArrowPathMini, { className: "mr-1" }),
+            t("workflowExecutions.actions.retry")
+          ]
+        }
+      ),
+      isRunning && /* @__PURE__ */ jsxs2(
+        Button,
+        {
+          variant: "danger",
+          size: "small",
+          onClick: handleCancel,
+          isLoading: isCancelling,
+          children: [
+            /* @__PURE__ */ jsx2(XMark, { className: "mr-1" }),
+            t("workflowExecutions.actions.cancel")
+          ]
+        }
+      ),
+      hasWaitingSteps && /* @__PURE__ */ jsx2(Button, { variant: "secondary", size: "small", asChild: true, children: /* @__PURE__ */ jsx2(Link, { to: "complete-step", children: t("workflowExecutions.actions.completeStep") }) }),
+      /* @__PURE__ */ jsx2(
+        ActionMenu,
+        {
+          groups: [
+            {
+              actions: [
+                ...isFailed ? [
+                  {
+                    label: t(
+                      "workflowExecutions.actions.retryWithNewInput"
+                    ),
+                    icon: /* @__PURE__ */ jsx2(ArrowPathMini, {}),
+                    to: "rerun"
+                  }
+                ] : [],
+                {
+                  label: t("workflowExecutions.actions.exportJson"),
+                  icon: /* @__PURE__ */ jsx2(EllipsisHorizontal, {}),
+                  onClick: handleExportJson
+                },
+                {
+                  label: t("workflowExecutions.actions.exportCsv"),
+                  icon: /* @__PURE__ */ jsx2(EllipsisHorizontal, {}),
+                  onClick: handleExportCsv
+                }
+              ]
+            }
+          ]
+        }
+      )
+    ] })
+  ] }) });
+};
+
+// src/routes/workflow-executions/workflow-execution-detail/components/workflow-execution-error-card/workflow-execution-error-card.tsx
+import { XCircle } from "@acmekit/icons";
+import { Container as Container2, Heading, Text } from "@acmekit/ui";
+import { useTranslation as useTranslation2 } from "react-i18next";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var WorkflowExecutionErrorCard = ({
+  execution
+}) => {
+  const { t } = useTranslation2();
+  if (execution.state !== "failed" /* FAILED */) {
+    return null;
+  }
+  const failedSteps = getFailedSteps(execution);
+  if (failedSteps.length === 0) return null;
+  const firstFailure = failedSteps[0];
+  const errorMessage = firstFailure.error?.error?.message || firstFailure.error?.error || "Unknown error";
+  const handlerType = firstFailure.error?.handlerType || "invoke";
+  return /* @__PURE__ */ jsx3(Container2, { className: "border border-ui-tag-red-border bg-ui-tag-red-bg p-0", children: /* @__PURE__ */ jsxs3("div", { className: "flex items-start gap-x-3 px-6 py-4", children: [
+    /* @__PURE__ */ jsx3("div", { className: "mt-0.5", children: /* @__PURE__ */ jsx3(XCircle, { className: "text-ui-tag-red-icon" }) }),
+    /* @__PURE__ */ jsxs3("div", { className: "flex flex-1 flex-col gap-y-1", children: [
+      /* @__PURE__ */ jsx3(Heading, { level: "h3", children: t("workflowExecutions.error.failureAtStep", {
+        step: firstFailure.stepId
+      }) }),
+      /* @__PURE__ */ jsx3(Text, { size: "small", className: "text-ui-fg-subtle", children: String(errorMessage) }),
+      /* @__PURE__ */ jsxs3(Text, { size: "xsmall", className: "text-ui-fg-muted", children: [
+        handlerType === "compensate" ? "Compensation" : "Invoke",
+        " failure"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx3(
+      "a",
+      {
+        href: `#${firstFailure.stepId}`,
+        className: "text-ui-fg-interactive txt-compact-small-plus shrink-0 hover:underline",
+        children: t("workflowExecutions.error.jumpToStep")
+      }
+    )
+  ] }) });
+};
+
+// src/routes/workflow-executions/workflow-execution-detail/components/workflow-execution-waiting-banner/workflow-execution-waiting-banner.tsx
+import { ClockSolidMini } from "@acmekit/icons";
+import { Container as Container3, Copy as Copy2, Heading as Heading2, Text as Text2 } from "@acmekit/ui";
+import { useTranslation as useTranslation3 } from "react-i18next";
+import { Link as Link2 } from "react-router-dom";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var WorkflowExecutionWaitingBanner = ({
+  execution
+}) => {
+  const { t } = useTranslation3();
+  const waitingSteps = getWaitingSteps(execution);
+  if (waitingSteps.length === 0) return null;
+  const firstStep = waitingSteps[0];
+  const idempotencyKey = computeIdempotencyKey(
+    execution.workflow_id,
+    execution.transaction_id,
+    firstStep.stepId,
+    "invoke"
+  );
+  return /* @__PURE__ */ jsx4(Container3, { className: "border border-ui-tag-purple-border bg-ui-tag-purple-bg p-0", children: /* @__PURE__ */ jsxs4("div", { className: "flex items-start gap-x-3 px-6 py-4", children: [
+    /* @__PURE__ */ jsx4("div", { className: "mt-0.5", children: /* @__PURE__ */ jsx4(ClockSolidMini, { className: "text-ui-tag-purple-icon" }) }),
+    /* @__PURE__ */ jsxs4("div", { className: "flex flex-1 flex-col gap-y-1", children: [
+      /* @__PURE__ */ jsx4(Heading2, { level: "h3", children: t("workflowExecutions.asyncStep.waitingBanner") }),
+      /* @__PURE__ */ jsx4(Text2, { size: "small", className: "text-ui-fg-subtle", children: t("workflowExecutions.asyncStep.waitingDescription", {
+        step: firstStep.stepId
+      }) }),
+      /* @__PURE__ */ jsxs4("div", { className: "mt-1 flex items-center gap-x-2", children: [
+        /* @__PURE__ */ jsxs4(Text2, { size: "xsmall", className: "text-ui-fg-muted", children: [
+          t("workflowExecutions.asyncStep.idempotencyKey"),
+          ":"
+        ] }),
+        /* @__PURE__ */ jsx4(Copy2, { content: idempotencyKey, asChild: true, children: /* @__PURE__ */ jsx4("code", { className: "bg-ui-bg-base txt-compact-xsmall cursor-pointer rounded px-1.5 py-0.5", children: idempotencyKey }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx4(
+      Link2,
+      {
+        to: "complete-step",
+        className: "text-ui-fg-interactive txt-compact-small-plus shrink-0 hover:underline",
+        children: t("workflowExecutions.actions.completeStep")
+      }
+    )
+  ] }) });
+};
+
+// src/routes/workflow-executions/workflow-execution-detail/components/workflow-execution-general-section/workflow-execution-general-section.tsx
+import { Badge as Badge2, Container as Container4, Copy as Copy3, Heading as Heading3, StatusBadge as StatusBadge2, Text as Text3, clx } from "@acmekit/ui";
+import { useTranslation as useTranslation4 } from "react-i18next";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var WorkflowExecutionGeneralSection = ({
+  execution
+}) => {
+  const { t } = useTranslation4();
+  const { getFullDate } = useDate();
+  const cleanId = execution.id.replace("wf_exec_", "");
+  const translatedState = getTransactionState(
+    t,
+    execution.state
+  );
+  const stateColor = getTransactionStateColor(
+    execution.state
+  );
+  const createdAt = execution.created_at;
+  const updatedAt = execution.updated_at;
+  const allSteps = Object.values(execution.execution?.steps || {}).filter(
+    (step) => step.id !== ROOT_PREFIX
+  );
+  const totalSteps = allSteps.length;
+  const completedSteps = allSteps.filter(
+    (step) => step.invoke.state === "done" /* DONE */
+  ).length;
+  const failedSteps = allSteps.filter(
+    (step) => STEP_ERROR_STATES.includes(step.invoke.state)
+  ).length;
+  const skippedSteps = allSteps.filter(
+    (step) => STEP_SKIPPED_STATES.includes(step.invoke.state)
+  ).length;
+  const compensatedSteps = allSteps.filter(
+    (step) => step.compensate.state === "reverted" /* REVERTED */
+  ).length;
+  return /* @__PURE__ */ jsxs5(Container4, { className: "divide-y p-0", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between px-6 py-4", children: [
+      /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-x-0.5", children: [
+        /* @__PURE__ */ jsx5(Heading3, { children: cleanId }),
+        /* @__PURE__ */ jsx5(Copy3, { content: cleanId, className: "text-ui-fg-muted" })
+      ] }),
+      /* @__PURE__ */ jsx5(StatusBadge2, { color: stateColor, children: translatedState })
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { className: "text-ui-fg-subtle grid grid-cols-2 px-6 py-4", children: [
+      /* @__PURE__ */ jsx5(Text3, { size: "small", leading: "compact", weight: "plus", children: t("workflowExecutions.workflowIdLabel") }),
+      /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-x-1", children: [
+        /* @__PURE__ */ jsx5(Badge2, { size: "2xsmall", className: "w-fit", children: execution.workflow_id }),
+        /* @__PURE__ */ jsx5(Copy3, { content: execution.workflow_id, className: "text-ui-fg-muted" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { className: "text-ui-fg-subtle grid grid-cols-2 px-6 py-4", children: [
+      /* @__PURE__ */ jsx5(Text3, { size: "small", leading: "compact", weight: "plus", children: t("workflowExecutions.transactionIdLabel") }),
+      /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-x-1", children: [
+        /* @__PURE__ */ jsx5(Badge2, { size: "2xsmall", className: "w-fit", children: execution.transaction_id }),
+        /* @__PURE__ */ jsx5(
+          Copy3,
+          {
+            content: execution.transaction_id,
+            className: "text-ui-fg-muted"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { className: "text-ui-fg-subtle grid grid-cols-2 px-6 py-4", children: [
+      /* @__PURE__ */ jsx5(Text3, { size: "small", leading: "compact", weight: "plus", children: t("workflowExecutions.progressLabel") }),
+      /* @__PURE__ */ jsx5(Progress, { steps: execution.execution?.steps })
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { className: "text-ui-fg-subtle grid grid-cols-2 px-6 py-4", children: [
+      /* @__PURE__ */ jsx5(Text3, { size: "small", leading: "compact", weight: "plus", children: t("fields.summary") }),
+      /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-y-1", children: [
+        /* @__PURE__ */ jsx5(Text3, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: t("workflowExecutions.metrics.stepsSummary", {
+          completed: completedSteps,
+          total: totalSteps
+        }) }),
+        failedSteps > 0 && /* @__PURE__ */ jsx5(Text3, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: t("workflowExecutions.metrics.failedSteps", {
+          count: failedSteps
+        }) }),
+        skippedSteps > 0 && /* @__PURE__ */ jsx5(Text3, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: t("workflowExecutions.metrics.skippedSteps", {
+          count: skippedSteps
+        }) }),
+        /* @__PURE__ */ jsx5(Text3, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: compensatedSteps > 0 ? t("workflowExecutions.metrics.compensatedYes") : t("workflowExecutions.metrics.compensatedNo") })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { className: "text-ui-fg-subtle grid grid-cols-2 px-6 py-4", children: [
+      /* @__PURE__ */ jsx5(Text3, { size: "small", leading: "compact", weight: "plus", children: t("fields.createdAt") }),
+      /* @__PURE__ */ jsx5(Text3, { size: "small", leading: "compact", children: createdAt ? getFullDate({ date: createdAt, includeTime: true }) : "-" })
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { className: "text-ui-fg-subtle grid grid-cols-2 px-6 py-4", children: [
+      /* @__PURE__ */ jsx5(Text3, { size: "small", leading: "compact", weight: "plus", children: t("fields.updatedAt") }),
+      /* @__PURE__ */ jsx5(Text3, { size: "small", leading: "compact", children: updatedAt ? getFullDate({ date: updatedAt, includeTime: true }) : "-" })
+    ] })
+  ] });
+};
+var ROOT_PREFIX = "_root";
+var Progress = ({
+  steps
+}) => {
+  const { t } = useTranslation4();
+  if (!steps) {
+    return /* @__PURE__ */ jsx5(Text3, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: t("workflowExecutions.stepsCompletedLabel", {
+      completed: 0,
+      count: 0
+    }) });
+  }
+  const actionableSteps = Object.values(steps).filter(
+    (step) => step.id !== ROOT_PREFIX
+  );
+  const completedSteps = actionableSteps.filter(
+    (step) => step.invoke.state === "done" /* DONE */
+  );
+  return /* @__PURE__ */ jsxs5("div", { className: "flex w-fit items-center gap-x-2", children: [
+    /* @__PURE__ */ jsx5("div", { className: "flex items-center gap-x-[3px]", children: actionableSteps.map((step) => /* @__PURE__ */ jsx5(
+      "div",
+      {
+        className: clx(
+          "bg-ui-bg-switch-off shadow-details-switch-background h-3 w-1.5 rounded-full",
+          {
+            "bg-ui-fg-muted": step.invoke.state === "done" /* DONE */
+          }
+        )
+      },
+      step.id
+    )) }),
+    /* @__PURE__ */ jsx5(Text3, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: t("workflowExecutions.stepsCompletedLabel", {
+      completed: completedSteps.length,
+      count: actionableSteps.length
+    }) })
+  ] });
+};
+
+// src/routes/workflow-executions/workflow-execution-detail/components/workflow-execution-history-section/workflow-execution-history-section.tsx
+import { Spinner, TriangleDownMini } from "@acmekit/icons";
+import {
+  Button as Button2,
+  clx as clx2,
+  CodeBlock,
+  Container as Container5,
+  Copy as Copy4,
+  Heading as Heading4,
+  IconButton,
+  Text as Text4,
+  toast as toast2
+} from "@acmekit/ui";
+import { format } from "date-fns";
+import { Collapsible as RadixCollapsible } from "radix-ui";
+import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { useTranslation as useTranslation5 } from "react-i18next";
+import { useLocation } from "react-router-dom";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var WorkflowExecutionHistorySection = ({
+  execution
+}) => {
+  const { t } = useTranslation5();
+  const map = Object.values(execution.execution?.steps || {});
+  const steps = map.filter((step) => step.id !== "_root");
+  const hasCompensation = [
+    "compensating" /* COMPENSATING */,
+    "reverted" /* REVERTED */,
+    "waiting_to_compensate" /* WAITING_TO_COMPENSATE */
+  ].includes(execution.state);
+  const [showCompensation, setShowCompensation] = useState2(false);
+  const unreachableStepId = steps.find(
+    (step) => step.invoke.status === "permanent_failure" /* PERMANENT_FAILURE */
+  )?.id;
+  const unreachableSteps = unreachableStepId ? steps.filter(
+    (step) => step.id !== unreachableStepId && step.id.includes(unreachableStepId)
+  ).map((step) => step.id) : [];
+  return /* @__PURE__ */ jsxs6(Container5, { className: "divide-y p-0", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between px-6 py-4", children: [
+      /* @__PURE__ */ jsx6(Heading4, { level: "h2", children: t("workflowExecutions.history.sectionTitle") }),
+      hasCompensation && /* @__PURE__ */ jsx6(
+        Button2,
+        {
+          size: "small",
+          variant: "secondary",
+          onClick: () => setShowCompensation((v) => !v),
+          children: showCompensation ? t("workflowExecutions.history.showInvoke") : t("workflowExecutions.history.showCompensation")
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx6("div", { className: "flex flex-col gap-y-0.5 px-6 py-4", children: steps.map((step, index) => {
+      const stepId = step.id.split(".").pop();
+      if (!stepId) {
+        return null;
+      }
+      const context = execution.context?.data.invoke[stepId];
+      const error = execution.context?.errors.find(
+        (e) => e.action === stepId
+      );
+      return /* @__PURE__ */ jsx6(
+        Event,
+        {
+          step,
+          stepInvokeContext: context,
+          stepError: error,
+          isLast: index === steps.length - 1,
+          isUnreachable: unreachableSteps.includes(step.id),
+          execution,
+          showCompensation
+        },
+        step.id
+      );
+    }) })
+  ] });
+};
+var Event = ({
+  step,
+  stepInvokeContext,
+  stepError,
+  isLast,
+  isUnreachable,
+  execution,
+  showCompensation
+}) => {
+  const [open, setOpen] = useState2(false);
+  const ref = useRef2(null);
+  const { hash } = useLocation();
+  const { t } = useTranslation5();
+  const stepId = step.id.split(".").pop();
+  useEffect2(() => {
+    if (hash === `#${stepId}`) {
+      setOpen(true);
+    }
+  }, [hash, stepId]);
+  const identifier = step.id.split(".").pop();
+  const isPermanentFailure = step.invoke.status === "permanent_failure" /* PERMANENT_FAILURE */;
+  const isWaiting = step.invoke.status === "waiting_response" /* WAITING */;
+  const idempotencyKey = computeIdempotencyKey(
+    execution.workflow_id,
+    execution.transaction_id,
+    stepId,
+    "invoke"
+  );
+  const duration = formatStepDuration(
+    step.startedAt ?? void 0,
+    step.endedAt ?? void 0
+  );
+  const { mutateAsync: retryStep, isPending: isRetrying } = useRetryStep(
+    execution.workflow_id,
+    execution.transaction_id
+  );
+  const handleRetryStep = async () => {
+    await retryStep(
+      { step_id: stepId },
+      {
+        onSuccess: () => {
+          toast2.success(t("workflowExecutions.actions.retryStepSuccess"));
+        }
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: "grid grid-cols-[20px_1fr] items-start gap-x-2 px-2",
+      id: stepId,
+      children: [
+        /* @__PURE__ */ jsxs6("div", { className: "grid h-full grid-rows-[20px_1fr] items-center justify-center gap-y-0.5", children: [
+          /* @__PURE__ */ jsx6("div", { className: "flex size-5 items-center justify-center", children: /* @__PURE__ */ jsx6("div", { className: "bg-ui-bg-base shadow-borders-base flex size-2.5 items-center justify-center rounded-full", children: /* @__PURE__ */ jsx6(
+            "div",
+            {
+              className: clx2("size-1.5 rounded-full", {
+                "bg-ui-tag-neutral-bg": STEP_SKIPPED_STATES.includes(
+                  step.invoke.state
+                ),
+                "bg-ui-tag-green-icon": STEP_OK_STATES.includes(
+                  step.invoke.state
+                ),
+                "bg-ui-tag-purple-icon": isWaiting,
+                "bg-ui-tag-orange-icon": !isWaiting && STEP_IN_PROGRESS_STATES.includes(step.invoke.state),
+                "bg-ui-tag-red-icon": STEP_ERROR_STATES.includes(
+                  step.invoke.state
+                ),
+                "bg-ui-tag-neutral-icon": STEP_INACTIVE_STATES.includes(
+                  step.invoke.state
+                )
+              })
+            }
+          ) }) }),
+          /* @__PURE__ */ jsx6("div", { className: "flex h-full flex-col items-center", children: /* @__PURE__ */ jsx6(
+            "div",
+            {
+              "aria-hidden": true,
+              role: "presentation",
+              className: clx2({
+                "bg-ui-border-base h-full min-h-[14px] w-px": !isLast
+              })
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs6(
+          RadixCollapsible.Root,
+          {
+            open,
+            onOpenChange: (isOpen) => {
+              setOpen(isOpen);
+              if (isOpen) {
+                window.history.replaceState(null, "", `#${stepId}`);
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsx6(RadixCollapsible.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs6("div", { className: "group flex cursor-pointer items-start justify-between outline-none", children: [
+                /* @__PURE__ */ jsx6(Text4, { size: "small", leading: "compact", weight: "plus", children: identifier }),
+                /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-x-2", children: [
+                  duration && /* @__PURE__ */ jsx6(Text4, { size: "small", leading: "compact", className: "text-ui-fg-muted", children: duration }),
+                  /* @__PURE__ */ jsx6(
+                    StepState,
+                    {
+                      state: step.invoke.state,
+                      status: step.invoke.status,
+                      startedAt: step.startedAt,
+                      isUnreachable
+                    }
+                  ),
+                  /* @__PURE__ */ jsx6(IconButton, { size: "2xsmall", variant: "transparent", children: /* @__PURE__ */ jsx6(TriangleDownMini, { className: "text-ui-fg-muted transition-transform group-data-[state=open]:rotate-180" }) })
+                ] })
+              ] }) }),
+              /* @__PURE__ */ jsx6(RadixCollapsible.Content, { ref, children: /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-y-2 pb-4 pt-2", children: [
+                /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsx6(Text4, { size: "xsmall", className: "text-ui-fg-muted", children: t("workflowExecutions.history.idempotencyKeyLabel") }),
+                  /* @__PURE__ */ jsx6(Copy4, { content: idempotencyKey, asChild: true, children: /* @__PURE__ */ jsx6(
+                    Text4,
+                    {
+                      size: "xsmall",
+                      className: "text-ui-fg-subtle cursor-pointer font-mono",
+                      children: idempotencyKey
+                    }
+                  ) })
+                ] }),
+                isPermanentFailure && /* @__PURE__ */ jsx6("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx6(
+                  Button2,
+                  {
+                    size: "small",
+                    variant: "secondary",
+                    isLoading: isRetrying,
+                    onClick: handleRetryStep,
+                    children: t("workflowExecutions.history.retryFromStep")
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs6("div", { className: "text-ui-fg-subtle flex flex-col gap-y-2", children: [
+                  /* @__PURE__ */ jsx6(Text4, { size: "small", leading: "compact", children: t("workflowExecutions.history.definitionLabel") }),
+                  /* @__PURE__ */ jsx6(
+                    CodeBlock,
+                    {
+                      snippets: [
+                        {
+                          code: JSON.stringify(step.definition, null, 2),
+                          label: t("workflowExecutions.history.definitionLabel"),
+                          language: "json",
+                          hideLineNumbers: true
+                        }
+                      ],
+                      children: /* @__PURE__ */ jsx6(CodeBlock.Body, {})
+                    }
+                  )
+                ] }),
+                stepInvokeContext && /* @__PURE__ */ jsxs6("div", { className: "text-ui-fg-subtle flex flex-col gap-y-2", children: [
+                  /* @__PURE__ */ jsx6(Text4, { size: "small", leading: "compact", children: t("workflowExecutions.history.outputLabel") }),
+                  /* @__PURE__ */ jsx6(
+                    CodeBlock,
+                    {
+                      snippets: [
+                        {
+                          code: JSON.stringify(
+                            // TODO: Apply resolve value: packages/core/workflows-sdk/src/utils/composer/helpers/resolve-value.ts
+                            stepInvokeContext?.output?.output ?? {},
+                            null,
+                            2
+                          ),
+                          label: t("workflowExecutions.history.outputLabel"),
+                          language: "json",
+                          hideLineNumbers: true
+                        }
+                      ],
+                      children: /* @__PURE__ */ jsx6(CodeBlock.Body, {})
+                    }
+                  )
+                ] }),
+                showCompensation && step.compensate.state !== "not_started" /* NOT_STARTED */ && /* @__PURE__ */ jsxs6("div", { className: "border-ui-tag-orange-border bg-ui-tag-orange-bg rounded-md border p-3", children: [
+                  /* @__PURE__ */ jsxs6(Text4, { size: "xsmall", weight: "plus", className: "text-ui-tag-orange-text mb-2", children: [
+                    "\u21A9 ",
+                    t("workflowExecutions.history.revertedLabel"),
+                    " \u2014 ",
+                    step.compensate.state
+                  ] }),
+                  !!stepInvokeContext?.output?.compensateInput && /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-y-1", children: [
+                    /* @__PURE__ */ jsx6(Text4, { size: "xsmall", className: "text-ui-fg-subtle", children: t("workflowExecutions.history.compensateInputLabel") }),
+                    /* @__PURE__ */ jsx6(
+                      CodeBlock,
+                      {
+                        snippets: [
+                          {
+                            code: JSON.stringify(
+                              stepInvokeContext?.output?.compensateInput ?? {},
+                              null,
+                              2
+                            ),
+                            label: t("workflowExecutions.history.compensateInputLabel"),
+                            language: "json",
+                            hideLineNumbers: true
+                          }
+                        ],
+                        children: /* @__PURE__ */ jsx6(CodeBlock.Body, {})
+                      }
+                    )
+                  ] })
+                ] }),
+                !showCompensation && !!stepInvokeContext?.output?.compensateInput && step.compensate.state === "reverted" /* REVERTED */ && /* @__PURE__ */ jsxs6("div", { className: "text-ui-fg-subtle flex flex-col gap-y-2", children: [
+                  /* @__PURE__ */ jsx6(Text4, { size: "small", leading: "compact", children: t("workflowExecutions.history.compensateInputLabel") }),
+                  /* @__PURE__ */ jsx6(
+                    CodeBlock,
+                    {
+                      snippets: [
+                        {
+                          // TODO: Apply resolve value: packages/core/workflows-sdk/src/utils/composer/helpers/resolve-value.ts
+                          code: JSON.stringify(
+                            stepInvokeContext?.output?.compensateInput ?? {},
+                            null,
+                            2
+                          ),
+                          label: t(
+                            "workflowExecutions.history.compensateInputLabel"
+                          ),
+                          language: "json",
+                          hideLineNumbers: true
+                        }
+                      ],
+                      children: /* @__PURE__ */ jsx6(CodeBlock.Body, {})
+                    }
+                  )
+                ] }),
+                stepError && /* @__PURE__ */ jsxs6("div", { className: "text-ui-fg-subtle flex flex-col gap-y-2", children: [
+                  /* @__PURE__ */ jsx6(Text4, { size: "small", leading: "compact", children: t("workflowExecutions.history.errorLabel") }),
+                  /* @__PURE__ */ jsx6(
+                    CodeBlock,
+                    {
+                      snippets: [
+                        {
+                          code: JSON.stringify(
+                            {
+                              error: stepError.error,
+                              handlerType: stepError.handlerType
+                            },
+                            null,
+                            2
+                          ),
+                          label: t("workflowExecutions.history.errorLabel"),
+                          language: "json",
+                          hideLineNumbers: true
+                        }
+                      ],
+                      children: /* @__PURE__ */ jsx6(CodeBlock.Body, {})
+                    }
+                  )
+                ] })
+              ] }) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var StepState = ({
+  state,
+  status,
+  startedAt,
+  isUnreachable
+}) => {
+  const { t } = useTranslation5();
+  const isFailed = state === "failed" /* FAILED */;
+  const isRunning = state === "invoking" /* INVOKING */;
+  const isWaitingResponse = status === "waiting_response" /* WAITING */;
+  const isSkipped = state === "skipped" /* SKIPPED */;
+  const isSkippedFailure = state === "skipped_failure" /* SKIPPED_FAILURE */;
+  if (isUnreachable) {
+    return null;
+  }
+  if (isWaitingResponse) {
+    return /* @__PURE__ */ jsx6("div", { className: "flex items-center gap-x-1", children: /* @__PURE__ */ jsx6(Text4, { size: "small", leading: "compact", className: "text-ui-tag-purple-text", children: t("workflowExecutions.history.awaitingState") }) });
+  }
+  if (isRunning) {
+    return /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-x-1", children: [
+      /* @__PURE__ */ jsx6(Text4, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: t("workflowExecutions.history.runningState") }),
+      /* @__PURE__ */ jsx6(Spinner, { className: "text-ui-fg-interactive animate-spin" })
+    ] });
+  }
+  let stateText;
+  if (isSkipped) {
+    stateText = t("workflowExecutions.history.skippedState");
+  } else if (isSkippedFailure) {
+    stateText = t("workflowExecutions.history.skippedFailureState");
+  } else if (isFailed) {
+    stateText = t("workflowExecutions.history.failedState");
+  }
+  if (stateText !== null) {
+    return /* @__PURE__ */ jsx6(Text4, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: stateText });
+  }
+  if (startedAt) {
+    return /* @__PURE__ */ jsx6(Text4, { size: "small", leading: "compact", className: "text-ui-fg-muted", children: format(startedAt, "dd MMM yyyy HH:mm:ss") });
+  }
+};
+
+// src/routes/workflow-executions/workflow-execution-detail/components/workflow-execution-payload-section/workflow-execution-payload-section.tsx
+import { Button as Button3, Container as Container6, Heading as Heading5, Tabs, toast as toast3 } from "@acmekit/ui";
+import { useState as useState3 } from "react";
+import { useTranslation as useTranslation6 } from "react-i18next";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function downloadJson(data, filename) {
+  const blob = new Blob([JSON.stringify(data, null, 2)], {
+    type: "application/json"
+  });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+var WorkflowExecutionPayloadSection = ({
+  execution
+}) => {
+  const { t } = useTranslation6();
+  let payload = execution.context?.data?.payload;
+  if (payload && typeof payload !== "object") {
+    payload = { input: payload };
+  }
+  const checkpoint = execution.context || {};
+  const errors = execution.context?.errors || [];
+  const stepOutputs = {};
+  const steps = execution?.execution?.steps || {};
+  for (const [stepId, step] of Object.entries(steps)) {
+    if (stepId === "_root") continue;
+    const output = step?.invoke?.output;
+    if (output !== void 0) {
+      stepOutputs[stepId] = output;
+    }
+  }
+  const hasPayload = !!payload;
+  const hasStepOutputs = Object.keys(stepOutputs).length > 0;
+  const hasErrors = errors.length > 0;
+  const defaultTab = hasPayload ? "input" : "checkpoint";
+  const [activeTab, setActiveTab] = useState3(defaultTab);
+  if (!hasPayload && !hasStepOutputs && !hasErrors) {
+    return null;
+  }
+  const activeData = activeTab === "input" ? payload : activeTab === "checkpoint" ? checkpoint : activeTab === "outputs" ? stepOutputs : errors;
+  const handleCopyAll = () => {
+    navigator.clipboard.writeText(JSON.stringify(activeData, null, 2));
+    toast3.success("Copied to clipboard");
+  };
+  const handleDownload = () => {
+    downloadJson(
+      activeData,
+      `${execution.workflow_id}-${activeTab}.json`
+    );
+  };
+  return /* @__PURE__ */ jsxs7(Container6, { className: "divide-y p-0", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between px-6 py-4", children: [
+      /* @__PURE__ */ jsx7(Heading5, { level: "h2", children: t("workflowExecutions.payload.inputPayload") }),
+      /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-x-2", children: [
+        /* @__PURE__ */ jsx7(Button3, { size: "small", variant: "transparent", onClick: handleCopyAll, children: t("workflowExecutions.payload.copyAll") }),
+        /* @__PURE__ */ jsx7(Button3, { size: "small", variant: "transparent", onClick: handleDownload, children: t("workflowExecutions.payload.downloadJson") })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs7(
+      Tabs,
+      {
+        value: activeTab,
+        onValueChange: setActiveTab,
+        children: [
+          /* @__PURE__ */ jsx7("div", { className: "border-ui-border-base border-b px-6", children: /* @__PURE__ */ jsxs7(Tabs.List, { children: [
+            hasPayload && /* @__PURE__ */ jsx7(Tabs.Trigger, { value: "input", children: t("workflowExecutions.payload.inputPayload") }),
+            /* @__PURE__ */ jsx7(Tabs.Trigger, { value: "checkpoint", children: t("workflowExecutions.payload.fullCheckpoint") }),
+            hasStepOutputs && /* @__PURE__ */ jsx7(Tabs.Trigger, { value: "outputs", children: t("workflowExecutions.payload.stepOutputs") }),
+            hasErrors && /* @__PURE__ */ jsx7(Tabs.Trigger, { value: "errors", children: t("workflowExecutions.payload.errors") })
+          ] }) }),
+          hasPayload && /* @__PURE__ */ jsx7(Tabs.Content, { value: "input", className: "p-0", children: /* @__PURE__ */ jsx7(JsonViewSection, { data: payload }) }),
+          /* @__PURE__ */ jsx7(Tabs.Content, { value: "checkpoint", className: "p-0", children: /* @__PURE__ */ jsx7(JsonViewSection, { data: checkpoint }) }),
+          hasStepOutputs && /* @__PURE__ */ jsx7(Tabs.Content, { value: "outputs", className: "p-0", children: /* @__PURE__ */ jsx7(JsonViewSection, { data: stepOutputs }) }),
+          hasErrors && /* @__PURE__ */ jsx7(Tabs.Content, { value: "errors", className: "p-0", children: /* @__PURE__ */ jsx7(JsonViewSection, { data: errors }) })
+        ]
+      }
+    )
+  ] });
+};
+
+// src/routes/workflow-executions/workflow-execution-detail/components/workflow-execution-timeline-section/workflow-execution-timeline-section.tsx
+import { ArrowPathMini as ArrowPathMini2, MinusMini, PlusMini } from "@acmekit/icons";
+import { Container as Container7, DropdownMenu, Heading as Heading6, Text as Text5, clx as clx3 } from "@acmekit/ui";
+import {
+  motion,
+  useAnimationControls,
+  useDragControls,
+  useMotionValue
+} from "motion/react";
+import { useEffect as useEffect3, useRef as useRef3, useState as useState4 } from "react";
+import { useTranslation as useTranslation7 } from "react-i18next";
+import { Link as Link3 } from "react-router-dom";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+var WorkflowExecutionTimelineSection = ({
+  execution
+}) => {
+  const { t } = useTranslation7();
+  return /* @__PURE__ */ jsxs8(Container7, { className: "overflow-hidden px-0 pb-8 pt-0", children: [
+    /* @__PURE__ */ jsx8("div", { className: "flex items-center justify-between px-6 py-4", children: /* @__PURE__ */ jsx8(Heading6, { level: "h2", children: t("general.timeline") }) }),
+    /* @__PURE__ */ jsx8("div", { className: "w-full overflow-hidden border-y", children: /* @__PURE__ */ jsx8(Canvas, { execution }) })
+  ] });
+};
+var createNodeClusters = (steps) => {
+  const actionableSteps = Object.values(steps).filter(
+    (step) => step.id !== "_root"
+  );
+  const clusters = {};
+  actionableSteps.forEach((step) => {
+    if (!clusters[step.depth]) {
+      clusters[step.depth] = [];
+    }
+    clusters[step.depth].push(step);
+  });
+  return clusters;
+};
+var getNextCluster = (clusters, depth) => {
+  const nextDepth = depth + 1;
+  return clusters[nextDepth];
+};
+var defaultState = {
+  x: -860,
+  y: -1020,
+  scale: 1
+};
+var MAX_ZOOM = 1.5;
+var MIN_ZOOM = 0.5;
+var ZOOM_STEP = 0.25;
+var Canvas = ({
+  execution
+}) => {
+  const [zoom, setZoom] = useState4(1);
+  const [isDragging, setIsDragging] = useState4(false);
+  const direction = useDocumentDirection();
+  const scale = useMotionValue(defaultState.scale);
+  const x = useMotionValue(defaultState.x);
+  const y = useMotionValue(defaultState.y);
+  const controls = useAnimationControls();
+  const dragControls = useDragControls();
+  const dragConstraints = useRef3(null);
+  const canZoomIn = zoom < MAX_ZOOM;
+  const canZoomOut = zoom > MIN_ZOOM;
+  useEffect3(() => {
+    const unsubscribe = scale.on("change", (latest) => {
+      setZoom(latest);
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, [scale]);
+  const clusters = createNodeClusters(execution.execution?.steps || {});
+  function scaleXandY(prevScale, newScale, x2, y2) {
+    const scaleRatio = newScale / prevScale;
+    return {
+      x: x2 * scaleRatio,
+      y: y2 * scaleRatio
+    };
+  }
+  const changeZoom = (newScale) => {
+    const { x: newX, y: newY } = scaleXandY(zoom, newScale, x.get(), y.get());
+    setZoom(newScale);
+    controls.set({ scale: newScale, x: newX, y: newY });
+  };
+  const zoomIn = () => {
+    const curr = scale.get();
+    if (curr < 1.5) {
+      const newScale = curr + ZOOM_STEP;
+      changeZoom(newScale);
+    }
+  };
+  const zoomOut = () => {
+    const curr = scale.get();
+    if (curr > 0.5) {
+      const newScale = curr - ZOOM_STEP;
+      changeZoom(newScale);
+    }
+  };
+  const resetCanvas = () => {
+    controls.start(defaultState);
+  };
+  return /* @__PURE__ */ jsx8("div", { className: "h-[400px] w-full", children: /* @__PURE__ */ jsxs8("div", { ref: dragConstraints, className: "relative size-full", children: [
+    /* @__PURE__ */ jsx8("div", { className: "relative size-full overflow-hidden object-contain", children: /* @__PURE__ */ jsx8("div", { children: /* @__PURE__ */ jsx8(
+      motion.div,
+      {
+        onMouseDown: () => setIsDragging(true),
+        onMouseUp: () => setIsDragging(false),
+        drag: true,
+        dragConstraints,
+        dragElastic: 0,
+        dragMomentum: false,
+        dragControls,
+        initial: false,
+        animate: controls,
+        transition: { duration: 0.25 },
+        style: {
+          x,
+          y,
+          scale
+        },
+        className: clx3(
+          "bg-ui-bg-subtle relative size-[500rem] origin-top-left items-start justify-start overflow-hidden",
+          "bg-[radial-gradient(var(--border-base)_1.5px,transparent_0)] bg-[length:20px_20px] bg-repeat",
+          {
+            "cursor-grab": !isDragging,
+            "cursor-grabbing": isDragging
+          }
+        ),
+        children: /* @__PURE__ */ jsx8("main", { className: "size-full", children: /* @__PURE__ */ jsx8("div", { className: "absolute left-[1100px] top-[1100px] flex select-none items-start", children: Object.entries(clusters).map(([depth, cluster]) => {
+          const next = getNextCluster(clusters, Number(depth));
+          return /* @__PURE__ */ jsxs8("div", { className: "flex items-start", children: [
+            /* @__PURE__ */ jsx8("div", { className: "flex flex-col justify-center gap-y-2", children: cluster.map((step) => /* @__PURE__ */ jsx8(Node, { step }, step.id)) }),
+            /* @__PURE__ */ jsx8(Line, { next })
+          ] }, depth);
+        }) }) })
+      }
+    ) }) }),
+    /* @__PURE__ */ jsxs8("div", { className: "bg-ui-bg-base shadow-borders-base text-ui-fg-subtle absolute bottom-4 left-6 flex h-7 items-center overflow-hidden rounded-md", children: [
+      /* @__PURE__ */ jsxs8("div", { className: "flex items-center", children: [
+        /* @__PURE__ */ jsx8(
+          "button",
+          {
+            onClick: zoomIn,
+            type: "button",
+            disabled: !canZoomIn,
+            "aria-label": "Zoom in",
+            className: "disabled:text-ui-fg-disabled transition-fg hover:bg-ui-bg-base-hover active:bg-ui-bg-base-pressed focus-visible:bg-ui-bg-base-pressed border-r p-1 outline-none",
+            children: /* @__PURE__ */ jsx8(PlusMini, {})
+          }
+        ),
+        /* @__PURE__ */ jsx8("div", { children: /* @__PURE__ */ jsxs8(DropdownMenu, { dir: direction, children: [
+          /* @__PURE__ */ jsx8(DropdownMenu.Trigger, { className: "disabled:text-ui-fg-disabled transition-fg hover:bg-ui-bg-base-hover active:bg-ui-bg-base-pressed focus-visible:bg-ui-bg-base-pressed flex w-[50px] items-center justify-center border-r p-1 outline-none", children: /* @__PURE__ */ jsxs8(
+            Text5,
+            {
+              as: "span",
+              size: "xsmall",
+              leading: "compact",
+              className: "select-none tabular-nums",
+              children: [
+                Math.round(zoom * 100),
+                "%"
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx8(DropdownMenu.Content, { children: [50, 75, 100, 125, 150].map((value) => /* @__PURE__ */ jsxs8(
+            DropdownMenu.Item,
+            {
+              onClick: () => changeZoom(value / 100),
+              children: [
+                value,
+                "%"
+              ]
+            },
+            value
+          )) })
+        ] }) }),
+        /* @__PURE__ */ jsx8(
+          "button",
+          {
+            onClick: zoomOut,
+            type: "button",
+            disabled: !canZoomOut,
+            "aria-label": "Zoom out",
+            className: "disabled:text-ui-fg-disabled transition-fg hover:bg-ui-bg-base-hover active:bg-ui-bg-base-pressed focus-visible:bg-ui-bg-base-pressed border-r p-1 outline-none",
+            children: /* @__PURE__ */ jsx8(MinusMini, {})
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx8(
+        "button",
+        {
+          onClick: resetCanvas,
+          type: "button",
+          "aria-label": "Reset canvas",
+          className: "disabled:text-ui-fg-disabled transition-fg hover:bg-ui-bg-base-hover active:bg-ui-bg-base-pressed focus-visible:bg-ui-bg-base-pressed p-1 outline-none",
+          children: /* @__PURE__ */ jsx8(ArrowPathMini2, {})
+        }
+      )
+    ] })
+  ] }) });
+};
+var HorizontalArrow = () => {
+  return /* @__PURE__ */ jsx8(
+    "svg",
+    {
+      width: "42",
+      height: "12",
+      viewBox: "0 0 42 12",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx8(
+        "path",
+        {
+          d: "M41.5303 6.53033C41.8232 6.23744 41.8232 5.76256 41.5303 5.46967L36.7574 0.696699C36.4645 0.403806 35.9896 0.403806 35.6967 0.696699C35.4038 0.989593 35.4038 1.46447 35.6967 1.75736L39.9393 6L35.6967 10.2426C35.4038 10.5355 35.4038 11.0104 35.6967 11.3033C35.9896 11.5962 36.4645 11.5962 36.7574 11.3033L41.5303 6.53033ZM0.999996 5.25C0.585785 5.25 0.249996 5.58579 0.249996 6C0.249996 6.41421 0.585785 6.75 0.999996 6.75V5.25ZM41 5.25L0.999996 5.25V6.75L41 6.75V5.25Z",
+          fill: "var(--border-strong)"
+        }
+      )
+    }
+  );
+};
+var MiddleArrow = () => {
+  return /* @__PURE__ */ jsx8(
+    "svg",
+    {
+      width: "22",
+      height: "38",
+      viewBox: "0 0 22 38",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: "-mt-[6px]",
+      children: /* @__PURE__ */ jsx8(
+        "path",
+        {
+          d: "M0.999878 32H0.249878V32.75H0.999878V32ZM21.5284 32.5303C21.8213 32.2374 21.8213 31.7626 21.5284 31.4697L16.7554 26.6967C16.4625 26.4038 15.9876 26.4038 15.6947 26.6967C15.4019 26.9896 15.4019 27.4645 15.6947 27.7574L19.9374 32L15.6947 36.2426C15.4019 36.5355 15.4019 37.0104 15.6947 37.3033C15.9876 37.5962 16.4625 37.5962 16.7554 37.3033L21.5284 32.5303ZM0.249878 0L0.249878 32H1.74988L1.74988 0H0.249878ZM0.999878 32.75L20.998 32.75V31.25L0.999878 31.25V32.75Z",
+          fill: "var(--border-strong)"
+        }
+      )
+    }
+  );
+};
+var EndArrow = () => {
+  return /* @__PURE__ */ jsx8(
+    "svg",
+    {
+      width: "22",
+      height: "38",
+      viewBox: "0 0 22 38",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: "-mt-[6px]",
+      children: /* @__PURE__ */ jsx8(
+        "path",
+        {
+          d: "M21.5284 32.5303C21.8213 32.2374 21.8213 31.7626 21.5284 31.4697L16.7554 26.6967C16.4625 26.4038 15.9876 26.4038 15.6947 26.6967C15.4019 26.9896 15.4019 27.4645 15.6947 27.7574L19.9374 32L15.6947 36.2426C15.4019 36.5355 15.4019 37.0104 15.6947 37.3033C15.9876 37.5962 16.4625 37.5962 16.7554 37.3033L21.5284 32.5303ZM0.249878 0L0.249878 28H1.74988L1.74988 0H0.249878ZM4.99988 32.75L20.998 32.75V31.25L4.99988 31.25V32.75ZM0.249878 28C0.249878 30.6234 2.37653 32.75 4.99988 32.75V31.25C3.20495 31.25 1.74988 29.7949 1.74988 28H0.249878Z",
+          fill: "var(--border-strong)"
+        }
+      )
+    }
+  );
+};
+var Arrow = ({ depth }) => {
+  if (depth === 1) {
+    return /* @__PURE__ */ jsx8(HorizontalArrow, {});
+  }
+  if (depth === 2) {
+    return /* @__PURE__ */ jsxs8("div", { className: "flex flex-col items-end", children: [
+      /* @__PURE__ */ jsx8(HorizontalArrow, {}),
+      /* @__PURE__ */ jsx8(EndArrow, {})
+    ] });
+  }
+  const inbetween = Array.from({ length: depth - 2 }).map((_, index) => /* @__PURE__ */ jsx8(MiddleArrow, {}, index));
+  return /* @__PURE__ */ jsxs8("div", { className: "flex flex-col items-end", children: [
+    /* @__PURE__ */ jsx8(HorizontalArrow, {}),
+    inbetween,
+    /* @__PURE__ */ jsx8(EndArrow, {})
+  ] });
+};
+var Line = ({ next }) => {
+  if (!next) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx8("div", { className: "-ml-[5px] -mr-[7px] w-[60px] pr-[7px]", children: /* @__PURE__ */ jsxs8("div", { className: "flex min-h-[24px] w-full items-start", children: [
+    /* @__PURE__ */ jsx8("div", { className: "flex h-6 w-2.5 items-center justify-center", children: /* @__PURE__ */ jsx8("div", { className: "bg-ui-button-neutral shadow-borders-base size-2.5 shrink-0 rounded-full" }) }),
+    /* @__PURE__ */ jsx8("div", { className: "pt-1.5", children: /* @__PURE__ */ jsx8(Arrow, { depth: next.length }) })
+  ] }) });
+};
+var Node = ({ step }) => {
+  if (step.id === "_root") {
+    return null;
+  }
+  const stepId = step.id.split(".").pop();
+  const handleScrollTo = () => {
+    if (!stepId) {
+      return;
+    }
+    const historyItem = document.getElementById(stepId);
+    if (!historyItem) {
+      return;
+    }
+    setTimeout(() => {
+      historyItem.scrollIntoView({
+        behavior: "smooth",
+        block: "end"
+      });
+    }, 100);
+  };
+  const isInvoking = step.invoke.state === "invoking" /* INVOKING */;
+  return /* @__PURE__ */ jsx8(
+    Link3,
+    {
+      to: `#${stepId}`,
+      onClick: handleScrollTo,
+      className: "focus-visible:shadow-borders-focus transition-fg rounded-md outline-none",
+      children: /* @__PURE__ */ jsxs8(
+        "div",
+        {
+          className: clx3(
+            "bg-ui-bg-base shadow-borders-base flex min-w-[120px] items-center gap-x-0.5 rounded-md p-0.5",
+            { "animate-pulse": isInvoking }
+          ),
+          "data-step-id": step.id,
+          children: [
+            /* @__PURE__ */ jsx8("div", { className: "flex size-5 items-center justify-center", children: /* @__PURE__ */ jsx8(
+              "div",
+              {
+                className: clx3(
+                  "size-2 rounded-sm shadow-[inset_0_0_0_1px_rgba(0,0,0,0.12)]",
+                  {
+                    "bg-ui-tag-neutral-bg": STEP_SKIPPED_STATES.includes(
+                      step.invoke.state
+                    ),
+                    "bg-ui-tag-green-icon": STEP_OK_STATES.includes(
+                      step.invoke.state
+                    ),
+                    "bg-ui-tag-orange-icon": STEP_IN_PROGRESS_STATES.includes(
+                      step.invoke.state
+                    ),
+                    "bg-ui-tag-red-icon": STEP_ERROR_STATES.includes(
+                      step.invoke.state
+                    ),
+                    "bg-ui-tag-neutral-icon": STEP_INACTIVE_STATES.includes(
+                      step.invoke.state
+                    )
+                  }
+                )
+              }
+            ) }),
+            /* @__PURE__ */ jsx8(
+              Text5,
+              {
+                size: "xsmall",
+                leading: "compact",
+                weight: "plus",
+                className: "select-none",
+                children: stepId
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+
+// src/routes/workflow-executions/workflow-execution-detail/workflow-detail.tsx
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+var ExecutionDetail = () => {
+  const { id } = useParams();
+  const queryClient2 = useQueryClient();
+  const { workflow_execution, isLoading, isError, error } = useWorkflowExecution(id);
+  const { getWidgets } = useExtension();
+  const isActive = workflow_execution ? TRANSACTION_ACTIVE_STATES.includes(
+    workflow_execution.state
+  ) : false;
+  useWorkflowSSE(workflow_execution?.workflow_id || "", {
+    enabled: isActive && !!workflow_execution?.workflow_id,
+    onEvent: (event) => {
+      queryClient2.setQueryData(
+        workflowExecutionsQueryKeys.detail(id),
+        (current) => {
+          if (!current) return current;
+          return mergeStepEvent(current, event);
+        }
+      );
+      if (event.event_type === "onFinish" || event.response?.state && isTerminalState(event.response.state)) {
+        queryClient2.invalidateQueries({
+          queryKey: workflowExecutionsQueryKeys.detail(id)
+        });
+      }
+    }
+  });
+  if (isLoading || !workflow_execution) {
+    return /* @__PURE__ */ jsx9(SingleColumnPageSkeleton, { sections: 4, showJSON: true });
+  }
+  if (isError) {
+    throw error;
+  }
+  return /* @__PURE__ */ jsxs9(
+    SingleColumnPage,
+    {
+      widgets: {
+        after: getWidgets("workflow.details.after"),
+        before: getWidgets("workflow.details.before")
+      },
+      data: workflow_execution,
+      showJSON: true,
+      hasOutlet: true,
+      children: [
+        /* @__PURE__ */ jsx9(WorkflowExecutionActionBar, { execution: workflow_execution }),
+        /* @__PURE__ */ jsx9(WorkflowExecutionErrorCard, { execution: workflow_execution }),
+        /* @__PURE__ */ jsx9(WorkflowExecutionWaitingBanner, { execution: workflow_execution }),
+        /* @__PURE__ */ jsx9(WorkflowExecutionGeneralSection, { execution: workflow_execution }),
+        /* @__PURE__ */ jsx9(WorkflowExecutionTimelineSection, { execution: workflow_execution }),
+        /* @__PURE__ */ jsx9(WorkflowExecutionPayloadSection, { execution: workflow_execution }),
+        /* @__PURE__ */ jsx9(WorkflowExecutionHistorySection, { execution: workflow_execution })
+      ]
+    }
+  );
+};
+export {
+  WorkflowExecutionDetailBreadcrumb as Breadcrumb,
+  ExecutionDetail as Component,
+  workflowExecutionLoader as loader
+};