@acmekit/dashboard 2.13.33 → 2.13.35

package/src/routes/workflow-executions/workflow-execution-detail/components/workflow-execution-error-card/workflow-execution-error-card.tsx

@@ -0,0 +1,59 @@
+import { XCircle } from "@acmekit/icons"
+import { HttpTypes } from "@acmekit/types"
+import { Container, Heading, Text } from "@acmekit/ui"
+import { useTranslation } from "react-i18next"
+import { TransactionState } from "../../../types"
+import { getFailedSteps } from "../../../utils"
+
+type WorkflowExecutionErrorCardProps = {
+  execution: HttpTypes.AdminWorkflowExecution
+}
+
+export const WorkflowExecutionErrorCard = ({
+  execution,
+}: WorkflowExecutionErrorCardProps) => {
+  const { t } = useTranslation()
+
+  if ((execution.state as TransactionState) !== TransactionState.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 (
+    <Container className="border border-ui-tag-red-border bg-ui-tag-red-bg p-0">
+      <div className="flex items-start gap-x-3 px-6 py-4">
+        <div className="mt-0.5">
+          <XCircle className="text-ui-tag-red-icon" />
+        </div>
+        <div className="flex flex-1 flex-col gap-y-1">
+          <Heading level="h3">
+            {t("workflowExecutions.error.failureAtStep", {
+              step: firstFailure.stepId,
+            })}
+          </Heading>
+          <Text size="small" className="text-ui-fg-subtle">
+            {String(errorMessage)}
+          </Text>
+          <Text size="xsmall" className="text-ui-fg-muted">
+            {handlerType === "compensate" ? "Compensation" : "Invoke"} failure
+          </Text>
+        </div>
+        <a
+          href={`#${firstFailure.stepId}`}
+          className="text-ui-fg-interactive txt-compact-small-plus shrink-0 hover:underline"
+        >
+          {t("workflowExecutions.error.jumpToStep")}
+        </a>
+      </div>
+    </Container>
+  )
+}

package/src/routes/workflow-executions/workflow-execution-detail/components/workflow-execution-history-section/workflow-execution-history-section.tsx

@@ -1,12 +1,15 @@
 import { Spinner, TriangleDownMini } from "@acmekit/icons"
 import { HttpTypes } from "@acmekit/types"
 import {
+  Button,
   clx,
   CodeBlock,
   Container,
+  Copy,
   Heading,
   IconButton,
   Text,
+  toast,
 } from "@acmekit/ui"
 import { format } from "date-fns"
 import { Collapsible as RadixCollapsible } from "radix-ui"
@@ -20,7 +23,12 @@ import {
   STEP_OK_STATES,
   STEP_SKIPPED_STATES,
 } from "../../../constants"
-import { TransactionStepState, TransactionStepStatus } from "../../../types"
+import { TransactionState, TransactionStepState, TransactionStepStatus } from "../../../types"
+import {
+  computeIdempotencyKey,
+  formatStepDuration,
+} from "../../../utils"
+import { useRetryStep } from "../../../../../hooks/api/workflow-executions"
 
 type WorkflowExecutionHistorySectionProps = {
   execution: HttpTypes.AdminWorkflowExecution
@@ -34,6 +42,14 @@ export const WorkflowExecutionHistorySection = ({
   const map = Object.values(execution.execution?.steps || {})
   const steps = map.filter((step) => step.id !== "_root")
 
+  const hasCompensation = [
+    TransactionState.COMPENSATING,
+    TransactionState.REVERTED,
+    TransactionState.WAITING_TO_COMPENSATE,
+  ].includes(execution.state as TransactionState)
+
+  const [showCompensation, setShowCompensation] = useState(false)
+
   // check if any of the steps have a .invoke.state of "permanent_failure" and if that is the case then return its id
   const unreachableStepId = steps.find(
     (step) => step.invoke.status === TransactionStepStatus.PERMANENT_FAILURE
@@ -55,6 +71,17 @@ export const WorkflowExecutionHistorySection = ({
         <Heading level="h2">
           {t("workflowExecutions.history.sectionTitle")}
         </Heading>
+        {hasCompensation && (
+          <Button
+            size="small"
+            variant="secondary"
+            onClick={() => setShowCompensation((v) => !v)}
+          >
+            {showCompensation
+              ? t("workflowExecutions.history.showInvoke")
+              : t("workflowExecutions.history.showCompensation")}
+          </Button>
+        )}
       </div>
       <div className="flex flex-col gap-y-0.5 px-6 py-4">
         {steps.map((step, index) => {
@@ -77,6 +104,8 @@ export const WorkflowExecutionHistorySection = ({
               stepError={error}
               isLast={index === steps.length - 1}
               isUnreachable={unreachableSteps.includes(step.id)}
+              execution={execution}
+              showCompensation={showCompensation}
             />
           )
         })}
@@ -91,12 +120,16 @@ const Event = ({
   stepError,
   isLast,
   isUnreachable,
+  execution,
+  showCompensation,
 }: {
   step: HttpTypes.AdminWorkflowExecutionStep
   stepInvokeContext: HttpTypes.StepInvokeResult | undefined
   stepError?: HttpTypes.StepError | undefined
   isLast: boolean
   isUnreachable?: boolean
+  execution: HttpTypes.AdminWorkflowExecution
+  showCompensation?: boolean
 }) => {
   const [open, setOpen] = useState(false)
 
@@ -114,6 +147,37 @@ const Event = ({
   }, [hash, stepId])
 
   const identifier = step.id.split(".").pop()
+  const isPermanentFailure =
+    step.invoke.status === TransactionStepStatus.PERMANENT_FAILURE
+  const isWaiting = step.invoke.status === TransactionStepStatus.WAITING
+
+  const idempotencyKey = computeIdempotencyKey(
+    execution.workflow_id,
+    execution.transaction_id,
+    stepId,
+    "invoke"
+  )
+
+  const duration = formatStepDuration(
+    step.startedAt ?? undefined,
+    (step as any).endedAt ?? undefined
+  )
+
+  const { mutateAsync: retryStep, isPending: isRetrying } = useRetryStep(
+    execution.workflow_id,
+    execution.transaction_id
+  )
+
+  const handleRetryStep = async () => {
+    await retryStep(
+      { step_id: stepId },
+      {
+        onSuccess: () => {
+          toast.success(t("workflowExecutions.actions.retryStepSuccess"))
+        },
+      }
+    )
+  }
 
   return (
     <div
@@ -131,9 +195,10 @@ const Event = ({
                 "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-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
                 ),
@@ -154,15 +219,29 @@ const Event = ({
           />
         </div>
       </div>
-      <RadixCollapsible.Root open={open} onOpenChange={setOpen}>
+      <RadixCollapsible.Root
+        open={open}
+        onOpenChange={(isOpen) => {
+          setOpen(isOpen)
+          if (isOpen) {
+            window.history.replaceState(null, "", `#${stepId}`)
+          }
+        }}
+      >
         <RadixCollapsible.Trigger asChild>
           <div className="group flex cursor-pointer items-start justify-between outline-none">
             <Text size="small" leading="compact" weight="plus">
               {identifier}
             </Text>
             <div className="flex items-center gap-x-2">
+              {duration && (
+                <Text size="small" leading="compact" className="text-ui-fg-muted">
+                  {duration}
+                </Text>
+              )}
               <StepState
                 state={step.invoke.state}
+                status={step.invoke.status}
                 startedAt={step.startedAt}
                 isUnreachable={isUnreachable}
               />
@@ -174,6 +253,35 @@ const Event = ({
         </RadixCollapsible.Trigger>
         <RadixCollapsible.Content ref={ref}>
           <div className="flex flex-col gap-y-2 pb-4 pt-2">
+            {/* Idempotency key */}
+            <div className="flex items-center justify-between">
+              <Text size="xsmall" className="text-ui-fg-muted">
+                {t("workflowExecutions.history.idempotencyKeyLabel")}
+              </Text>
+              <Copy content={idempotencyKey} asChild>
+                <Text
+                  size="xsmall"
+                  className="text-ui-fg-subtle cursor-pointer font-mono"
+                >
+                  {idempotencyKey}
+                </Text>
+              </Copy>
+            </div>
+
+            {/* Retry from this step — only for permanent failures */}
+            {isPermanentFailure && (
+              <div className="flex justify-end">
+                <Button
+                  size="small"
+                  variant="secondary"
+                  isLoading={isRetrying}
+                  onClick={handleRetryStep}
+                >
+                  {t("workflowExecutions.history.retryFromStep")}
+                </Button>
+              </div>
+            )}
+
             <div className="text-ui-fg-subtle flex flex-col gap-y-2">
               <Text size="small" leading="compact">
                 {t("workflowExecutions.history.definitionLabel")}
@@ -215,7 +323,37 @@ const Event = ({
                 </CodeBlock>
               </div>
             )}
-            {!!stepInvokeContext?.output?.compensateInput &&
+            {showCompensation && step.compensate.state !== TransactionStepState.NOT_STARTED && (
+              <div className="border-ui-tag-orange-border bg-ui-tag-orange-bg rounded-md border p-3">
+                <Text size="xsmall" weight="plus" className="text-ui-tag-orange-text mb-2">
+                  ↩ {t("workflowExecutions.history.revertedLabel")} — {step.compensate.state}
+                </Text>
+                {!!stepInvokeContext?.output?.compensateInput && (
+                  <div className="flex flex-col gap-y-1">
+                    <Text size="xsmall" className="text-ui-fg-subtle">
+                      {t("workflowExecutions.history.compensateInputLabel")}
+                    </Text>
+                    <CodeBlock
+                      snippets={[
+                        {
+                          code: JSON.stringify(
+                            stepInvokeContext?.output?.compensateInput ?? {},
+                            null,
+                            2
+                          ),
+                          label: t("workflowExecutions.history.compensateInputLabel"),
+                          language: "json",
+                          hideLineNumbers: true,
+                        },
+                      ]}
+                    >
+                      <CodeBlock.Body />
+                    </CodeBlock>
+                  </div>
+                )}
+              </div>
+            )}
+            {!showCompensation && !!stepInvokeContext?.output?.compensateInput &&
               step.compensate.state === TransactionStepState.REVERTED && (
                 <div className="text-ui-fg-subtle flex flex-col gap-y-2">
                   <Text size="small" leading="compact">
@@ -277,10 +415,12 @@ const Event = ({
 
 const StepState = ({
   state,
+  status,
   startedAt,
   isUnreachable,
 }: {
   state: HttpTypes.TransactionStepState
+  status?: HttpTypes.TransactionStepStatus
   startedAt?: number | null
   isUnreachable?: boolean
 }) => {
@@ -288,6 +428,7 @@ const StepState = ({
 
   const isFailed = state === TransactionStepState.FAILED
   const isRunning = state === TransactionStepState.INVOKING
+  const isWaitingResponse = status === TransactionStepStatus.WAITING
   const isSkipped = state === TransactionStepState.SKIPPED
   const isSkippedFailure = state === TransactionStepState.SKIPPED_FAILURE
 
@@ -295,6 +436,16 @@ const StepState = ({
     return null
   }
 
+  if (isWaitingResponse) {
+    return (
+      <div className="flex items-center gap-x-1">
+        <Text size="small" leading="compact" className="text-ui-tag-purple-text">
+          {t("workflowExecutions.history.awaitingState")}
+        </Text>
+      </div>
+    )
+  }
+
   if (isRunning) {
     return (
       <div className="flex items-center gap-x-1">

package/src/routes/workflow-executions/workflow-execution-detail/components/workflow-execution-payload-section/workflow-execution-payload-section.tsx

@@ -1,24 +1,140 @@
 import { HttpTypes } from "@acmekit/types"
+import { Button, Container, Heading, Tabs, toast } from "@acmekit/ui"
+import { useState } from "react"
+import { useTranslation } from "react-i18next"
 import { JsonViewSection } from "../../../../../components/common/json-view-section"
 
 type WorkflowExecutionPayloadSectionProps = {
   execution: HttpTypes.AdminWorkflowExecution
 }
 
+function downloadJson(data: unknown, filename: string) {
+  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)
+}
+
 export const WorkflowExecutionPayloadSection = ({
   execution,
 }: WorkflowExecutionPayloadSectionProps) => {
+  const { t } = useTranslation()
+
   let payload = execution.context?.data?.payload
+  if (payload && typeof payload !== "object") {
+    payload = { input: payload }
+  }
+
+  const checkpoint = execution.context || {}
+  const errors = (execution as any).context?.errors || []
+
+  const stepOutputs: Record<string, unknown> = {}
+  const steps = execution?.execution?.steps || {}
+  for (const [stepId, step] of Object.entries(steps)) {
+    if (stepId === "_root") continue
+    const output = (step as any)?.invoke?.output
+    if (output !== undefined) {
+      stepOutputs[stepId] = output
+    }
+  }
+
+  const hasPayload = !!payload
+  const hasStepOutputs = Object.keys(stepOutputs).length > 0
+  const hasErrors = errors.length > 0
 
-  if (!payload) {
+  const defaultTab = hasPayload ? "input" : "checkpoint"
+  const [activeTab, setActiveTab] = useState(defaultTab)
+
+  if (!hasPayload && !hasStepOutputs && !hasErrors) {
     return null
   }
 
-  // payloads may be a primitive, so we need to wrap them in an object
-  // to ensure the JsonViewSection component can render them.
-  if (typeof payload !== "object") {
-    payload = { input: payload }
+  const activeData =
+    activeTab === "input"
+      ? payload
+      : activeTab === "checkpoint"
+        ? checkpoint
+        : activeTab === "outputs"
+          ? stepOutputs
+          : errors
+
+  const handleCopyAll = () => {
+    navigator.clipboard.writeText(JSON.stringify(activeData, null, 2))
+    toast.success("Copied to clipboard")
+  }
+
+  const handleDownload = () => {
+    downloadJson(
+      activeData,
+      `${execution.workflow_id}-${activeTab}.json`
+    )
   }
 
-  return <JsonViewSection data={payload as object} />
+  return (
+    <Container className="divide-y p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <Heading level="h2">
+          {t("workflowExecutions.payload.inputPayload")}
+        </Heading>
+        <div className="flex items-center gap-x-2">
+          <Button size="small" variant="transparent" onClick={handleCopyAll}>
+            {t("workflowExecutions.payload.copyAll")}
+          </Button>
+          <Button size="small" variant="transparent" onClick={handleDownload}>
+            {t("workflowExecutions.payload.downloadJson")}
+          </Button>
+        </div>
+      </div>
+      <Tabs
+        value={activeTab}
+        onValueChange={setActiveTab}
+      >
+        <div className="border-ui-border-base border-b px-6">
+          <Tabs.List>
+            {hasPayload && (
+              <Tabs.Trigger value="input">
+                {t("workflowExecutions.payload.inputPayload")}
+              </Tabs.Trigger>
+            )}
+            <Tabs.Trigger value="checkpoint">
+              {t("workflowExecutions.payload.fullCheckpoint")}
+            </Tabs.Trigger>
+            {hasStepOutputs && (
+              <Tabs.Trigger value="outputs">
+                {t("workflowExecutions.payload.stepOutputs")}
+              </Tabs.Trigger>
+            )}
+            {hasErrors && (
+              <Tabs.Trigger value="errors">
+                {t("workflowExecutions.payload.errors")}
+              </Tabs.Trigger>
+            )}
+          </Tabs.List>
+        </div>
+        {hasPayload && (
+          <Tabs.Content value="input" className="p-0">
+            <JsonViewSection data={payload as object} />
+          </Tabs.Content>
+        )}
+        <Tabs.Content value="checkpoint" className="p-0">
+          <JsonViewSection data={checkpoint as object} />
+        </Tabs.Content>
+        {hasStepOutputs && (
+          <Tabs.Content value="outputs" className="p-0">
+            <JsonViewSection data={stepOutputs} />
+          </Tabs.Content>
+        )}
+        {hasErrors && (
+          <Tabs.Content value="errors" className="p-0">
+            <JsonViewSection data={errors as object} />
+          </Tabs.Content>
+        )}
+      </Tabs>
+    </Container>
+  )
 }

package/src/routes/workflow-executions/workflow-execution-detail/components/workflow-execution-timeline-section/workflow-execution-timeline-section.tsx

@@ -18,6 +18,7 @@ import {
   STEP_OK_STATES,
   STEP_SKIPPED_STATES,
 } from "../../../constants"
+import { TransactionStepState } from "../../../types"
 import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 type WorkflowExecutionTimelineSectionProps = {
@@ -398,6 +399,8 @@ const Node = ({ step }: { step: HttpTypes.AdminWorkflowExecutionStep }) => {
     }, 100)
   }
 
+  const isInvoking = step.invoke.state === TransactionStepState.INVOKING
+
   return (
     <Link
       to={`#${stepId}`}
@@ -405,7 +408,10 @@ const Node = ({ step }: { step: HttpTypes.AdminWorkflowExecutionStep }) => {
       className="focus-visible:shadow-borders-focus transition-fg rounded-md outline-none"
     >
       <div
-        className="bg-ui-bg-base shadow-borders-base flex min-w-[120px] items-center gap-x-0.5 rounded-md p-0.5"
+        className={clx(
+          "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}
       >
         <div className="flex size-5 items-center justify-center">

package/src/routes/workflow-executions/workflow-execution-detail/components/workflow-execution-waiting-banner/index.ts

@@ -0,0 +1 @@
+export { WorkflowExecutionWaitingBanner } from "./workflow-execution-waiting-banner"

package/src/routes/workflow-executions/workflow-execution-detail/components/workflow-execution-waiting-banner/workflow-execution-waiting-banner.tsx

@@ -0,0 +1,63 @@
+import { ClockSolidMini } from "@acmekit/icons"
+import { HttpTypes } from "@acmekit/types"
+import { Container, Copy, Heading, Text } from "@acmekit/ui"
+import { useTranslation } from "react-i18next"
+import { Link } from "react-router-dom"
+import { computeIdempotencyKey, getWaitingSteps } from "../../../utils"
+
+type WorkflowExecutionWaitingBannerProps = {
+  execution: HttpTypes.AdminWorkflowExecution
+}
+
+export const WorkflowExecutionWaitingBanner = ({
+  execution,
+}: WorkflowExecutionWaitingBannerProps) => {
+  const { t } = useTranslation()
+  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 (
+    <Container className="border border-ui-tag-purple-border bg-ui-tag-purple-bg p-0">
+      <div className="flex items-start gap-x-3 px-6 py-4">
+        <div className="mt-0.5">
+          <ClockSolidMini className="text-ui-tag-purple-icon" />
+        </div>
+        <div className="flex flex-1 flex-col gap-y-1">
+          <Heading level="h3">
+            {t("workflowExecutions.asyncStep.waitingBanner")}
+          </Heading>
+          <Text size="small" className="text-ui-fg-subtle">
+            {t("workflowExecutions.asyncStep.waitingDescription", {
+              step: firstStep.stepId,
+            })}
+          </Text>
+          <div className="mt-1 flex items-center gap-x-2">
+            <Text size="xsmall" className="text-ui-fg-muted">
+              {t("workflowExecutions.asyncStep.idempotencyKey")}:
+            </Text>
+            <Copy content={idempotencyKey} asChild>
+              <code className="bg-ui-bg-base txt-compact-xsmall cursor-pointer rounded px-1.5 py-0.5">
+                {idempotencyKey}
+              </code>
+            </Copy>
+          </div>
+        </div>
+        <Link
+          to="complete-step"
+          className="text-ui-fg-interactive txt-compact-small-plus shrink-0 hover:underline"
+        >
+          {t("workflowExecutions.actions.completeStep")}
+        </Link>
+      </div>
+    </Container>
+  )
+}

package/src/routes/workflow-executions/workflow-execution-detail/workflow-detail.tsx

@@ -1,9 +1,20 @@
 import { useParams } from "react-router-dom"
+import { useQueryClient } from "@tanstack/react-query"
 
 import { SingleColumnPageSkeleton } from "../../../components/common/skeleton"
 import { SingleColumnPage } from "../../../components/layout/pages"
-import { useWorkflowExecution } from "../../../hooks/api/workflow-executions"
+import {
+  useWorkflowExecution,
+  workflowExecutionsQueryKeys,
+} from "../../../hooks/api/workflow-executions"
 import { useExtension } from "../../../providers/extension-provider"
+import { useWorkflowSSE } from "../../../hooks/use-workflow-sse"
+import { TRANSACTION_ACTIVE_STATES } from "../constants"
+import { TransactionState } from "../types"
+import { isTerminalState, mergeStepEvent } from "../utils"
+import { WorkflowExecutionActionBar } from "./components/workflow-execution-action-bar"
+import { WorkflowExecutionErrorCard } from "./components/workflow-execution-error-card"
+import { WorkflowExecutionWaitingBanner } from "./components/workflow-execution-waiting-banner"
 import { WorkflowExecutionGeneralSection } from "./components/workflow-execution-general-section"
 import { WorkflowExecutionHistorySection } from "./components/workflow-execution-history-section"
 import { WorkflowExecutionPayloadSection } from "./components/workflow-execution-payload-section"
@@ -11,12 +22,42 @@ import { WorkflowExecutionTimelineSection } from "./components/workflow-executio
 
 export const ExecutionDetail = () => {
   const { id } = useParams()
+  const queryClient = useQueryClient()
 
   const { workflow_execution, isLoading, isError, error } =
     useWorkflowExecution(id!)
 
   const { getWidgets } = useExtension()
 
+  const isActive = workflow_execution
+    ? TRANSACTION_ACTIVE_STATES.includes(
+        workflow_execution.state as TransactionState
+      )
+    : false
+
+  useWorkflowSSE(workflow_execution?.workflow_id || "", {
+    enabled: isActive && !!workflow_execution?.workflow_id,
+    onEvent: (event) => {
+      queryClient.setQueryData(
+        workflowExecutionsQueryKeys.detail(id!),
+        (current: any) => {
+          if (!current) return current
+          return mergeStepEvent(current, event)
+        }
+      )
+
+      if (
+        event.event_type === "onFinish" ||
+        (event.response?.state &&
+          isTerminalState(event.response.state as TransactionState))
+      ) {
+        queryClient.invalidateQueries({
+          queryKey: workflowExecutionsQueryKeys.detail(id!),
+        })
+      }
+    },
+  })
+
   if (isLoading || !workflow_execution) {
     return <SingleColumnPageSkeleton sections={4} showJSON />
   }
@@ -33,7 +74,11 @@ export const ExecutionDetail = () => {
       }}
       data={workflow_execution}
       showJSON
+      hasOutlet
     >
+      <WorkflowExecutionActionBar execution={workflow_execution} />
+      <WorkflowExecutionErrorCard execution={workflow_execution} />
+      <WorkflowExecutionWaitingBanner execution={workflow_execution} />
       <WorkflowExecutionGeneralSection execution={workflow_execution} />
       <WorkflowExecutionTimelineSection execution={workflow_execution} />
       <WorkflowExecutionPayloadSection execution={workflow_execution} />

package/src/routes/workflow-executions/workflow-execution-list/components/workflow-execution-list-table/use-workflow-execution-table-columns.tsx

@@ -7,6 +7,7 @@ import { TransactionStepState } from "../../../types"
 import { getTransactionState, getTransactionStateColor } from "../../../utils"
 import { HttpTypes } from "@acmekit/types"
 import { DataTableStatusCell } from "../../../../../components/data-table/components/data-table-status-cell/data-table-status-cell"
+import { WorkflowExecutionRowActions } from "./workflow-execution-row-actions"
 
 const columnHelper =
   createColumnHelper<
@@ -186,6 +187,12 @@ export const useWorkflowExecutionTableColumns = (): ColumnDef<
           return <DateCell date={date} />
         },
       }),
+      columnHelper.display({
+        id: "actions",
+        cell: ({ row }) => (
+          <WorkflowExecutionRowActions execution={row.original} />
+        ),
+      }),
     ],
     [t]
   )