@acmekit/dashboard 2.13.33 → 2.13.35

package/src/i18n/translations/en.json

@@ -2975,7 +2975,10 @@
     "stepsCompletedLabel_one": "{{completed}} of {{count}} step",
     "stepsCompletedLabel_other": "{{completed}} of {{count}} steps",
     "list": {
-      "noRecordsMessage": "No workflows have been executed, yet."
+      "noRecordsMessage": "No workflows have been executed, yet.",
+      "noFilterResults": "No executions match your current filters.",
+      "clearFilters": "Clear filters",
+      "viewAll": "View all executions"
     },
     "history": {
       "sectionTitle": "History",
@@ -2988,7 +2991,11 @@
       "outputLabel": "Output",
       "compensateInputLabel": "Compensate input",
       "revertedLabel": "Reverted",
-      "errorLabel": "Error"
+      "errorLabel": "Error",
+      "idempotencyKeyLabel": "Idempotency key",
+      "showCompensation": "Show compensation",
+      "showInvoke": "Show invoke",
+      "retryFromStep": "Retry from this step"
     },
     "state": {
       "done": "Done",
@@ -2996,7 +3003,8 @@
       "reverted": "Reverted",
       "invoking": "Invoking",
       "compensating": "Compensating",
-      "notStarted": "Not started"
+      "notStarted": "Not started",
+      "waitingResponse": "Waiting for response"
     },
     "transaction": {
       "state": {
@@ -3010,6 +3018,127 @@
         "dormant": "Dormant",
         "timeout": "Timeout"
       }
+    },
+    "actions": {
+      "retry": "Retry",
+      "retryWithSameInput": "Retry with same input",
+      "retryWithNewInput": "Retry with new input...",
+      "cancel": "Cancel execution",
+      "cancelConfirmTitle": "Cancel workflow execution?",
+      "cancelConfirmDescription": "This will stop {{workflow_id}} and run compensation for all completed steps.",
+      "cancelReasonLabel": "Reason (optional)",
+      "cancelSuccess": "Workflow execution cancelled successfully",
+      "retrySuccess": "Workflow re-run started successfully",
+      "retryStepSuccess": "Step retry initiated successfully",
+      "runWorkflow": "Run workflow",
+      "exportJson": "Export as JSON",
+      "exportCsv": "Export as CSV",
+      "completeStep": "Complete step",
+      "markAsSuccessful": "Mark as successful",
+      "markAsFailed": "Mark as failed",
+      "viewDetails": "View details"
+    },
+    "rerun": {
+      "title": "Re-run workflow",
+      "inputLabel": "Input (JSON)",
+      "transactionIdLabel": "Transaction ID (optional)",
+      "submit": "Run workflow",
+      "autoGenerated": "auto-generated",
+      "success": "Workflow re-run started successfully"
+    },
+    "error": {
+      "failureAtStep": "Failure at step: {{step}}",
+      "jumpToStep": "Jump to step",
+      "attemptInfo": "Attempt {{attempt}} of {{maxAttempts}}",
+      "failedAt": "Failed at {{time}}"
+    },
+    "filters": {
+      "savedViews": "Saved views",
+      "saveCurrentFilter": "Save current filter",
+      "savedViewName": "View name",
+      "autoRefresh": "Auto-refresh",
+      "refreshNow": "Refresh now",
+      "everyNSeconds": "Every {{n}}s",
+      "off": "Off",
+      "hasErrors": "Has errors",
+      "all": "All",
+      "allExecutions": "All executions",
+      "running": "Running",
+      "failedToday": "Failed today"
+    },
+    "definitions": {
+      "domain": "Definitions",
+      "subtitle": "Browse all registered workflow definitions.",
+      "name": "Name",
+      "steps": "Steps",
+      "stepCount": "Steps",
+      "handlers": "Handlers",
+      "lastRun": "Last run",
+      "nextRun": "Next run",
+      "scheduled": "Scheduled",
+      "runThisWorkflow": "Run this workflow",
+      "noRecordsMessage": "No workflow definitions found."
+    },
+    "scheduled": {
+      "domain": "Scheduled",
+      "subtitle": "View and manage scheduled workflow executions.",
+      "schedule": "Schedule",
+      "nextRun": "Next run",
+      "lastRun": "Last run",
+      "pause": "Pause",
+      "resume": "Resume",
+      "runNow": "Run now",
+      "noRecordsMessage": "No scheduled workflows found."
+    },
+    "analytics": {
+      "domain": "Analytics",
+      "subtitle": "Workflow execution metrics and trends.",
+      "executions24h": "Executions (24h)",
+      "successRate": "Success rate",
+      "avgDuration": "Avg duration",
+      "runningNow": "Running now",
+      "executionsOverTime": "Executions over time",
+      "perWorkflowBreakdown": "Per-workflow breakdown",
+      "slowestSteps": "Slowest steps",
+      "noDataMessage": "No metrics data available yet."
+    },
+    "asyncStep": {
+      "waitingBanner": "Waiting for external response",
+      "waitingDescription": "Step {{step}} is awaiting a webhook callback.",
+      "idempotencyKey": "Idempotency key",
+      "completeTitle": "Complete step: {{step}}",
+      "responsePayload": "Response payload (JSON)",
+      "expiresIn": "Expires in {{time}}",
+      "stepLabel": "Step",
+      "outcomeLabel": "Outcome",
+      "success": "Success",
+      "failure": "Failure",
+      "markSuccess": "Mark as success",
+      "markFailure": "Mark as failure",
+      "completedSuccess": "Step completed successfully"
+    },
+    "tabs": {
+      "executions": "Executions",
+      "definitions": "Definitions",
+      "scheduled": "Scheduled",
+      "analytics": "Analytics"
+    },
+    "payload": {
+      "inputPayload": "Input payload",
+      "fullCheckpoint": "Full checkpoint",
+      "stepOutputs": "Step outputs",
+      "errors": "Errors",
+      "copyAll": "Copy all",
+      "downloadJson": "Download as JSON"
+    },
+    "codeSnippet": {
+      "curl": "cURL",
+      "sdk": "SDK",
+      "replicateCall": "Replicate this call"
+    },
+    "compare": {
+      "title": "Compare executions",
+      "selectExecution": "Select execution to compare"
     }
   },
   "shippingOptionTypes": {

package/src/routes/workflow-analytics/workflow-analytics.tsx

@@ -0,0 +1,167 @@
+import {
+  Badge,
+  Container,
+  Heading,
+  Text,
+} from "@acmekit/ui"
+import { useTranslation } from "react-i18next"
+import { SingleColumnPage } from "../../components/layout/pages"
+import { useWorkflowMetrics } from "../../hooks/api/workflow-metrics"
+
+export const WorkflowAnalytics = () => {
+  const { t } = useTranslation()
+
+  const {
+    total_24h,
+    success_rate_24h,
+    avg_duration_ms_24h,
+    running_now,
+    per_workflow,
+    isPending: isLoading,
+  } = useWorkflowMetrics()
+
+  const formatDuration = (ms: number) => {
+    if (ms < 1000) return `${ms}ms`
+    if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`
+    const min = Math.floor(ms / 60000)
+    const sec = Math.round((ms % 60000) / 1000)
+    return `${min}m ${sec}s`
+  }
+
+  const formatRate = (rate: number) => `${(rate * 100).toFixed(1)}%`
+
+  return (
+    <SingleColumnPage widgets={{ before: [], after: [] }}>
+      <Container className="divide-y p-0">
+        <div className="px-6 py-4">
+          <Heading>{t("workflowExecutions.analytics.domain")}</Heading>
+          <Text className="text-ui-fg-subtle" size="small">
+            {t("workflowExecutions.analytics.subtitle")}
+          </Text>
+        </div>
+
+        <div className="grid grid-cols-4 gap-px bg-ui-border-base">
+          <MetricCard
+            label={t("workflowExecutions.analytics.executions24h")}
+            value={isLoading ? "-" : String(total_24h ?? 0)}
+            subtitle="Last 24h"
+          />
+          <MetricCard
+            label={t("workflowExecutions.analytics.successRate")}
+            value={isLoading ? "-" : formatRate(success_rate_24h ?? 0)}
+            subtitle="Last 24h"
+            color={
+              (success_rate_24h ?? 1) >= 0.9
+                ? "green"
+                : (success_rate_24h ?? 1) >= 0.7
+                  ? "orange"
+                  : "red"
+            }
+          />
+          <MetricCard
+            label={t("workflowExecutions.analytics.avgDuration")}
+            value={
+              isLoading ? "-" : formatDuration(avg_duration_ms_24h ?? 0)
+            }
+            subtitle="Last 24h"
+          />
+          <MetricCard
+            label={t("workflowExecutions.analytics.runningNow")}
+            value={isLoading ? "-" : String(running_now ?? 0)}
+            color={(running_now ?? 0) > 0 ? "blue" : undefined}
+          />
+        </div>
+      </Container>
+
+      {per_workflow && per_workflow.length > 0 && (
+        <Container className="divide-y p-0">
+          <div className="px-6 py-4">
+            <Heading level="h2">
+              {t("workflowExecutions.analytics.perWorkflowBreakdown")}
+            </Heading>
+          </div>
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead>
+                <tr className="border-ui-border-base border-b">
+                  <th className="text-ui-fg-subtle txt-compact-small-plus px-6 py-2 text-left">
+                    Workflow
+                  </th>
+                  <th className="text-ui-fg-subtle txt-compact-small-plus px-6 py-2 text-right">
+                    Runs
+                  </th>
+                  <th className="text-ui-fg-subtle txt-compact-small-plus px-6 py-2 text-right">
+                    Success Rate
+                  </th>
+                  <th className="text-ui-fg-subtle txt-compact-small-plus px-6 py-2 text-right">
+                    Avg Duration
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {per_workflow.map((wf) => (
+                  <tr
+                    key={wf.workflow_id}
+                    className="border-ui-border-base border-b last:border-b-0"
+                  >
+                    <td className="px-6 py-3">
+                      <Badge size="2xsmall">{wf.workflow_id}</Badge>
+                    </td>
+                    <td className="txt-compact-small text-ui-fg-subtle px-6 py-3 text-right">
+                      {wf.runs}
+                    </td>
+                    <td className="txt-compact-small text-ui-fg-subtle px-6 py-3 text-right">
+                      {formatRate(wf.success_rate)}
+                    </td>
+                    <td className="txt-compact-small text-ui-fg-subtle px-6 py-3 text-right">
+                      {formatDuration(wf.avg_duration_ms)}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </Container>
+      )}
+    </SingleColumnPage>
+  )
+}
+
+const MetricCard = ({
+  label,
+  value,
+  subtitle,
+  color,
+}: {
+  label: string
+  value: string
+  subtitle?: string
+  color?: "green" | "orange" | "red" | "blue"
+}) => {
+  const colorClass = color
+    ? {
+        green: "text-ui-tag-green-icon",
+        orange: "text-ui-tag-orange-icon",
+        red: "text-ui-tag-red-icon",
+        blue: "text-ui-tag-blue-icon",
+      }[color]
+    : "text-ui-fg-base"
+
+  return (
+    <div className="bg-ui-bg-base flex flex-col gap-y-1 px-6 py-4">
+      <Text size="small" className="text-ui-fg-subtle">
+        {label}
+      </Text>
+      <Text size="xlarge" weight="plus" className={colorClass}>
+        {value}
+      </Text>
+      {subtitle && (
+        <Text size="xsmall" className="text-ui-fg-muted">
+          {subtitle}
+        </Text>
+      )}
+    </div>
+  )
+}
+
+export const Component = WorkflowAnalytics

package/src/routes/workflow-definitions/workflow-definition-detail/workflow-definition-detail.tsx

@@ -0,0 +1,98 @@
+import { ArrowPathMini } from "@acmekit/icons"
+import {
+  Badge,
+  Button,
+  Container,
+  Copy,
+  Heading,
+  Text,
+} from "@acmekit/ui"
+import { useTranslation } from "react-i18next"
+import { Link, useParams } from "react-router-dom"
+import { SingleColumnPageSkeleton } from "../../../components/common/skeleton"
+import { SingleColumnPage } from "../../../components/layout/pages"
+import { useWorkflowDefinition } from "../../../hooks/api/workflow-definitions"
+
+export const WorkflowDefinitionDetail = () => {
+  const { id } = useParams()
+  const { t } = useTranslation()
+
+  const {
+    workflow_definition: definition,
+    isPending: isLoading,
+    isError,
+    error,
+  } = useWorkflowDefinition(id!)
+
+  if (isLoading) {
+    return <SingleColumnPageSkeleton sections={2} showJSON />
+  }
+
+  if (isError) {
+    throw error
+  }
+
+  if (!definition) {
+    return <SingleColumnPageSkeleton sections={2} showJSON />
+  }
+
+  return (
+    <SingleColumnPage
+      widgets={{ before: [], after: [] }}
+      data={definition}
+      showJSON
+      hasOutlet
+    >
+      <Container className="divide-y p-0">
+        <div className="flex items-center justify-between px-6 py-4">
+          <div className="flex items-center gap-x-3">
+            <Copy content={definition.id} asChild>
+              <Badge size="2xsmall" className="cursor-pointer">
+                {definition.id}
+              </Badge>
+            </Copy>
+          </div>
+          <Button variant="secondary" size="small" asChild>
+            <Link to="run">
+              <ArrowPathMini className="mr-1" />
+              {t("workflowExecutions.actions.runWorkflow")}
+            </Link>
+          </Button>
+        </div>
+      </Container>
+
+      <Container className="divide-y p-0">
+        <div className="px-6 py-4">
+          <Heading level="h2">
+            {t("workflowExecutions.definitions.steps")}
+          </Heading>
+          <Text size="small" className="text-ui-fg-subtle mt-1">
+            {t("workflowExecutions.definitions.stepCount")}:{" "}
+            {definition.steps?.length || 0}
+          </Text>
+        </div>
+        <div className="divide-y">
+          {(definition.steps || []).map((step, idx) => (
+            <div
+              key={`${step.action}-${idx}`}
+              className="flex items-center justify-between px-6 py-3"
+              style={{ paddingLeft: `${1.5 + step.depth * 1.5}rem` }}
+            >
+              <div className="flex items-center gap-x-2">
+                <span className="text-ui-fg-muted txt-compact-xsmall">
+                  {step.depth > 0 ? "└" : "●"}
+                </span>
+                <Badge size="2xsmall">{step.action}</Badge>
+              </div>
+              <span className="text-ui-fg-muted txt-compact-xsmall">
+                {step.noCompensation ? "no compensation" : ""}
+              </span>
+            </div>
+          ))}
+        </div>
+      </Container>
+    </SingleColumnPage>
+  )
+}
+
+export const Component = WorkflowDefinitionDetail

package/src/routes/workflow-definitions/workflow-definition-list/components/workflow-definition-list-table/use-workflow-definition-table-columns.tsx

@@ -0,0 +1,78 @@
+import { Badge, Copy } from "@acmekit/ui"
+import { ColumnDef, createColumnHelper } from "@tanstack/react-table"
+import { useMemo } from "react"
+import { useTranslation } from "react-i18next"
+
+type WorkflowDefinition = {
+  id: string
+  handler_count: number
+  steps: Array<{ action: string; depth: number; noCompensation: boolean }>
+  options: Record<string, unknown>
+}
+
+const columnHelper = createColumnHelper<WorkflowDefinition>()
+
+export const useWorkflowDefinitionTableColumns = (): ColumnDef<
+  WorkflowDefinition,
+  any
+>[] => {
+  const { t } = useTranslation()
+
+  return useMemo(
+    () => [
+      columnHelper.accessor("id", {
+        header: t("workflowExecutions.definitions.name"),
+        cell: ({ getValue }) => {
+          const id = getValue()
+          return (
+            <div className="flex items-center gap-x-1">
+              <Badge size="2xsmall" className="truncate">
+                {id}
+              </Badge>
+              <Copy content={id} className="text-ui-fg-muted" />
+            </div>
+          )
+        },
+      }),
+      columnHelper.accessor("steps", {
+        header: t("workflowExecutions.definitions.stepCount"),
+        cell: ({ getValue }) => {
+          const steps = getValue()
+          return (
+            <span className="text-ui-fg-subtle txt-compact-small">
+              {steps?.length || 0} {t("workflowExecutions.definitions.steps")}
+            </span>
+          )
+        },
+      }),
+      columnHelper.accessor("handler_count", {
+        header: t("workflowExecutions.definitions.handlers"),
+        cell: ({ getValue }) => {
+          return (
+            <span className="text-ui-fg-subtle txt-compact-small">
+              {getValue() || 0}
+            </span>
+          )
+        },
+      }),
+      columnHelper.display({
+        id: "schedule",
+        header: t("workflowExecutions.scheduled.schedule"),
+        cell: ({ row }) => {
+          const schedule = (row.original.options as any)?.schedule
+          if (!schedule) {
+            return (
+              <span className="text-ui-fg-muted txt-compact-small">-</span>
+            )
+          }
+          return (
+            <Badge size="2xsmall" color="purple">
+              {String(schedule)}
+            </Badge>
+          )
+        },
+      }),
+    ],
+    [t]
+  )
+}

package/src/routes/workflow-definitions/workflow-definition-list/components/workflow-definition-list-table/workflow-definition-list-table.tsx

@@ -0,0 +1,65 @@
+import { Container, Heading, Text } from "@acmekit/ui"
+import { keepPreviousData } from "@tanstack/react-query"
+import { useTranslation } from "react-i18next"
+import { _DataTable } from "../../../../../components/table/data-table"
+import { useWorkflowDefinitions } from "../../../../../hooks/api/workflow-definitions"
+import { useDataTable } from "../../../../../hooks/use-data-table"
+import { useWorkflowDefinitionTableColumns } from "./use-workflow-definition-table-columns"
+
+const PAGE_SIZE = 20
+
+export const WorkflowDefinitionListTable = () => {
+  const { t } = useTranslation()
+
+  const {
+    workflow_definitions,
+    count,
+    isPending: isLoading,
+    isError,
+    error,
+  } = useWorkflowDefinitions(undefined, {
+    placeholderData: keepPreviousData,
+  })
+
+  const definitions = workflow_definitions || []
+
+  const columns = useWorkflowDefinitionTableColumns()
+
+  const { table } = useDataTable({
+    data: definitions,
+    columns,
+    count,
+    pageSize: PAGE_SIZE,
+    enablePagination: true,
+    getRowId: (row: any) => row.id,
+  })
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <Container className="divide-y p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <div>
+          <Heading>
+            {t("workflowExecutions.definitions.domain")}
+          </Heading>
+          <Text className="text-ui-fg-subtle" size="small">
+            {t("workflowExecutions.definitions.subtitle")}
+          </Text>
+        </div>
+      </div>
+      <_DataTable
+        table={table}
+        columns={columns}
+        count={count}
+        isLoading={isLoading}
+        pageSize={PAGE_SIZE}
+        navigateTo={(row: any) => row.id}
+        search
+        pagination
+      />
+    </Container>
+  )
+}

package/src/routes/workflow-definitions/workflow-definition-list/workflow-definition-list.tsx

@@ -0,0 +1,15 @@
+import { SingleColumnPage } from "../../../components/layout/pages"
+import { WorkflowDefinitionListTable } from "./components/workflow-definition-list-table/workflow-definition-list-table"
+
+export const WorkflowDefinitionList = () => {
+  return (
+    <SingleColumnPage
+      widgets={{ before: [], after: [] }}
+      hasOutlet
+    >
+      <WorkflowDefinitionListTable />
+    </SingleColumnPage>
+  )
+}
+
+export const Component = WorkflowDefinitionList

package/src/routes/workflow-executions/constants.ts

@@ -36,3 +36,19 @@ export const TRANSACTION_IN_PROGRESS_STATES: HttpTypes.TransactionState[] = [
   TransactionState.WAITING_TO_COMPENSATE,
   TransactionState.COMPENSATING,
 ]
+
+export const TRANSACTION_TERMINAL_STATES: HttpTypes.TransactionState[] = [
+  TransactionState.DONE,
+  TransactionState.FAILED,
+  TransactionState.REVERTED,
+]
+
+export const TRANSACTION_ACTIVE_STATES: HttpTypes.TransactionState[] = [
+  TransactionState.INVOKING,
+  TransactionState.COMPENSATING,
+  TransactionState.WAITING_TO_COMPENSATE,
+]
+
+export const STEP_WAITING_STATES: HttpTypes.TransactionStepState[] = [
+  TransactionStepState.INVOKING, // waiting_response comes through as invoking state in the step
+]