@voyantjs/workflows-ui 0.37.1 → 0.38.1

package/dist/i18n/ro.js

@@ -1,2 +1,98 @@
-export * from "@voyantjs/workflow-runs-ui/i18n/ro";
-export { workflowRunsUiRo as workflowsUiRo } from "@voyantjs/workflow-runs-ui/i18n/ro";
+export const workflowRunsUiRo = {
+    page: {
+        title: "Rulari workflow",
+        subtitle: "Executii recente si pasi inregistrati.",
+        filterTitle: "Filtru",
+        workflowLabel: "Workflow",
+        workflowPlaceholder: "checkout-finalize",
+        workflowEmpty: "Nu exista workflow-uri in rularile vizibile.",
+        searchLabel: "Cautare",
+        searchPlaceholder: "Corelatie, eticheta, eroare, input...",
+        statusLabel: "Status",
+        tagLabel: "Eticheta",
+        tagPlaceholder: "bookingId:bk_...",
+        tagEmpty: "Nu exista etichete in rularile vizibile.",
+        addTag: "Adauga",
+        removeTag: "Sterge eticheta",
+        timeRangeLabel: "Pornit",
+        live: "Live",
+        clearFilters: "Curata",
+        anyStatus: "Oricare",
+        empty: "Nu exista rulari.",
+        selectPrompt: "Alege o rulare din lista pentru a vedea pasii si payload-urile.",
+        loading: "Se incarca...",
+        loadError: "Rularile workflow nu au putut fi incarcate.",
+        runCount: (count) => `${count} ${count === 1 ? "rulare" : "rulari"}`,
+        filteredRunCount: (filtered, total) => filtered === total
+            ? `${total} ${total === 1 ? "rulare" : "rulari"}`
+            : `${filtered}/${total} rulari`,
+        timeRanges: {
+            "15m": "15m",
+            "1h": "1h",
+            "24h": "24h",
+            "7d": "7z",
+            all: "Toate",
+        },
+    },
+    status: {
+        running: "In rulare",
+        succeeded: "Reusita",
+        failed: "Esuata",
+        cancelled: "Anulata",
+    },
+    stepStatus: {
+        running: "In rulare",
+        succeeded: "Reusit",
+        failed: "Esuat",
+        skipped: "Sarit",
+        compensated: "Compensat",
+    },
+    detail: {
+        trigger: "Declansator",
+        correlation: "Corelatie",
+        parent: "Parinte",
+        triggeredBy: "Declansat de",
+        tags: "Etichete",
+        started: "Pornit",
+        finished: "Finalizat",
+        steps: "Pasi",
+        noSteps: "Nu exista pasi inregistrati.",
+        input: "Input",
+        output: "Output",
+        result: "Rezultat",
+        runError: "Eroare rulare",
+        stackTrace: "Stack trace",
+        copy: "Copiaza",
+        copied: "Copiat",
+        code: "cod",
+        step: "pas",
+        reruns: "Reluari ale acestei rulari",
+        resumedAt: (step) => `reluat @ ${step}`,
+        durationUnavailable: "-",
+    },
+    actions: {
+        rerun: "Ruleaza din nou",
+        rerunBusy: "Se reia",
+        resume: "Reia de la pasul esuat",
+        resumeBusy: "Se reia",
+        waitForCompletion: "Asteapta finalizarea acestei rulari inainte de reluare.",
+        rerunDescription: "Porneste o rulare noua cu acelasi input inregistrat.",
+        resumeDescription: "Sare pasii deja finalizati si reincearca de la pasul esuat.",
+        resumeUnavailable: "Reluarea este disponibila doar pentru rulari esuate.",
+        actionFailed: "Actiunea a esuat.",
+        rerunStarted: "Reluarea a pornit; se deschide rularea noua.",
+        resumeStarted: (step) => `Reluat de la pasul "${step}"; se deschide rularea noua.`,
+        runnerMissing: "Nu exista runner inregistrat pentru acest workflow. Inregistreaza un WorkflowRunner pentru reluare.",
+        rerunBlocked: "Reluarea a fost blocata de regula de siguranta a runnerului.",
+        incompletePriorStep: "Nu se poate relua deoarece un pas anterior este incomplet.",
+        confirmTitle: "Confirma reluarea",
+        confirmBody: "Acest workflow are efecte secundare care se executa din nou la reluare. Rularea noua porneste de la primul pas cu acelasi input.",
+        confirmTip: "Daca rularea initiala a esuat la mijloc, foloseste reluarea de la pasul esuat pentru a sari lucrul finalizat.",
+        cancel: "Anuleaza",
+        rerunAnyway: "Ruleaza oricum",
+    },
+    format: {
+        relativeNow: "acum",
+    },
+};
+export const workflowsUiRo = workflowRunsUiRo;

package/dist/index.d.ts

@@ -1,3 +1,7 @@
-export * from "@voyantjs/workflow-runs-ui";
-export { getWorkflowRunsUiI18n as getWorkflowsUiI18n, resolveWorkflowRunsUiMessages as resolveWorkflowsUiMessages, useWorkflowRunsUiI18n as useWorkflowsUiI18n, useWorkflowRunsUiI18nOrDefault as useWorkflowsUiI18nOrDefault, useWorkflowRunsUiMessages as useWorkflowsUiMessages, useWorkflowRunsUiMessagesOrDefault as useWorkflowsUiMessagesOrDefault, type WorkflowRunsUiMessageOverrides as WorkflowsUiMessageOverrides, type WorkflowRunsUiMessages as WorkflowsUiMessages, WorkflowRunsUiMessagesProvider as WorkflowsUiMessagesProvider, workflowRunsUiEn as workflowsUiEn, workflowRunsUiMessageDefinitions as workflowsUiMessageDefinitions, workflowRunsUiRo as workflowsUiRo, } from "@voyantjs/workflow-runs-ui";
+export type { WorkflowRunsApiClientOptions } from "./client.js";
+export { createWorkflowRunsApiClient } from "./client.js";
+export { WorkflowRunDetailPage, type WorkflowRunDetailPageProps, } from "./components/workflow-run-detail-page.js";
+export { WorkflowRunsPage, type WorkflowRunsPageProps, WorkflowRunsPageSkeleton, } from "./components/workflow-runs-page.js";
+export { getWorkflowRunsUiI18n, getWorkflowRunsUiI18n as getWorkflowsUiI18n, resolveWorkflowRunsUiMessages, resolveWorkflowRunsUiMessages as resolveWorkflowsUiMessages, useWorkflowRunsUiI18n, useWorkflowRunsUiI18n as useWorkflowsUiI18n, useWorkflowRunsUiI18nOrDefault, useWorkflowRunsUiI18nOrDefault as useWorkflowsUiI18nOrDefault, useWorkflowRunsUiMessages, useWorkflowRunsUiMessages as useWorkflowsUiMessages, useWorkflowRunsUiMessagesOrDefault, useWorkflowRunsUiMessagesOrDefault as useWorkflowsUiMessagesOrDefault, type WorkflowRunsUiMessageOverrides, type WorkflowRunsUiMessageOverrides as WorkflowsUiMessageOverrides, type WorkflowRunsUiMessages, type WorkflowRunsUiMessages as WorkflowsUiMessages, WorkflowRunsUiMessagesProvider, WorkflowRunsUiMessagesProvider as WorkflowsUiMessagesProvider, workflowRunsUiEn, workflowRunsUiEn as workflowsUiEn, workflowRunsUiMessageDefinitions, workflowRunsUiMessageDefinitions as workflowsUiMessageDefinitions, workflowRunsUiRo, workflowRunsUiRo as workflowsUiRo, } from "./i18n/index.js";
+export type { ListWorkflowRunsQuery, ListWorkflowRunsResponse, WorkflowRun, WorkflowRunActionError, WorkflowRunActionResponse, WorkflowRunActionResult, WorkflowRunDetailResponse, WorkflowRunErrorPayload, WorkflowRunStatus, WorkflowRunStep, WorkflowRunStepStatus, WorkflowRunsApi, } from "./types.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAA;AAE1C,OAAO,EACL,qBAAqB,IAAI,kBAAkB,EAC3C,6BAA6B,IAAI,0BAA0B,EAC3D,qBAAqB,IAAI,kBAAkB,EAC3C,8BAA8B,IAAI,2BAA2B,EAC7D,yBAAyB,IAAI,sBAAsB,EACnD,kCAAkC,IAAI,+BAA+B,EACrE,KAAK,8BAA8B,IAAI,2BAA2B,EAClE,KAAK,sBAAsB,IAAI,mBAAmB,EAClD,8BAA8B,IAAI,2BAA2B,EAC7D,gBAAgB,IAAI,aAAa,EACjC,gCAAgC,IAAI,6BAA6B,EACjE,gBAAgB,IAAI,aAAa,GAClC,MAAM,4BAA4B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,4BAA4B,EAAE,MAAM,aAAa,CAAA;AAC/D,OAAO,EAAE,2BAA2B,EAAE,MAAM,aAAa,CAAA;AACzD,OAAO,EACL,qBAAqB,EACrB,KAAK,0BAA0B,GAChC,MAAM,0CAA0C,CAAA;AACjD,OAAO,EACL,gBAAgB,EAChB,KAAK,qBAAqB,EAC1B,wBAAwB,GACzB,MAAM,oCAAoC,CAAA;AAC3C,OAAO,EACL,qBAAqB,EACrB,qBAAqB,IAAI,kBAAkB,EAC3C,6BAA6B,EAC7B,6BAA6B,IAAI,0BAA0B,EAC3D,qBAAqB,EACrB,qBAAqB,IAAI,kBAAkB,EAC3C,8BAA8B,EAC9B,8BAA8B,IAAI,2BAA2B,EAC7D,yBAAyB,EACzB,yBAAyB,IAAI,sBAAsB,EACnD,kCAAkC,EAClC,kCAAkC,IAAI,+BAA+B,EACrE,KAAK,8BAA8B,EACnC,KAAK,8BAA8B,IAAI,2BAA2B,EAClE,KAAK,sBAAsB,EAC3B,KAAK,sBAAsB,IAAI,mBAAmB,EAClD,8BAA8B,EAC9B,8BAA8B,IAAI,2BAA2B,EAC7D,gBAAgB,EAChB,gBAAgB,IAAI,aAAa,EACjC,gCAAgC,EAChC,gCAAgC,IAAI,6BAA6B,EACjE,gBAAgB,EAChB,gBAAgB,IAAI,aAAa,GAClC,MAAM,iBAAiB,CAAA;AACxB,YAAY,EACV,qBAAqB,EACrB,wBAAwB,EACxB,WAAW,EACX,sBAAsB,EACtB,yBAAyB,EACzB,uBAAuB,EACvB,yBAAyB,EACzB,uBAAuB,EACvB,iBAAiB,EACjB,eAAe,EACf,qBAAqB,EACrB,eAAe,GAChB,MAAM,YAAY,CAAA"}

package/dist/index.js

@@ -1,2 +1,4 @@
-export * from "@voyantjs/workflow-runs-ui";
-export { getWorkflowRunsUiI18n as getWorkflowsUiI18n, resolveWorkflowRunsUiMessages as resolveWorkflowsUiMessages, useWorkflowRunsUiI18n as useWorkflowsUiI18n, useWorkflowRunsUiI18nOrDefault as useWorkflowsUiI18nOrDefault, useWorkflowRunsUiMessages as useWorkflowsUiMessages, useWorkflowRunsUiMessagesOrDefault as useWorkflowsUiMessagesOrDefault, WorkflowRunsUiMessagesProvider as WorkflowsUiMessagesProvider, workflowRunsUiEn as workflowsUiEn, workflowRunsUiMessageDefinitions as workflowsUiMessageDefinitions, workflowRunsUiRo as workflowsUiRo, } from "@voyantjs/workflow-runs-ui";
+export { createWorkflowRunsApiClient } from "./client.js";
+export { WorkflowRunDetailPage, } from "./components/workflow-run-detail-page.js";
+export { WorkflowRunsPage, WorkflowRunsPageSkeleton, } from "./components/workflow-runs-page.js";
+export { getWorkflowRunsUiI18n, getWorkflowRunsUiI18n as getWorkflowsUiI18n, resolveWorkflowRunsUiMessages, resolveWorkflowRunsUiMessages as resolveWorkflowsUiMessages, useWorkflowRunsUiI18n, useWorkflowRunsUiI18n as useWorkflowsUiI18n, useWorkflowRunsUiI18nOrDefault, useWorkflowRunsUiI18nOrDefault as useWorkflowsUiI18nOrDefault, useWorkflowRunsUiMessages, useWorkflowRunsUiMessages as useWorkflowsUiMessages, useWorkflowRunsUiMessagesOrDefault, useWorkflowRunsUiMessagesOrDefault as useWorkflowsUiMessagesOrDefault, WorkflowRunsUiMessagesProvider, WorkflowRunsUiMessagesProvider as WorkflowsUiMessagesProvider, workflowRunsUiEn, workflowRunsUiEn as workflowsUiEn, workflowRunsUiMessageDefinitions, workflowRunsUiMessageDefinitions as workflowsUiMessageDefinitions, workflowRunsUiRo, workflowRunsUiRo as workflowsUiRo, } from "./i18n/index.js";

package/dist/types.d.ts

@@ -0,0 +1,2 @@
+export type { ListWorkflowRunsQuery, ListWorkflowRunsResponse, WorkflowRun, WorkflowRunActionError, WorkflowRunActionResponse, WorkflowRunActionResult, WorkflowRunDetailResponse, WorkflowRunErrorPayload, WorkflowRunStatus, WorkflowRunStep, WorkflowRunStepStatus, WorkflowRunsApi, } from "@voyantjs/workflows-react/workflow-runs-client";
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,qBAAqB,EACrB,wBAAwB,EACxB,WAAW,EACX,sBAAsB,EACtB,yBAAyB,EACzB,uBAAuB,EACvB,yBAAyB,EACzB,uBAAuB,EACvB,iBAAiB,EACjB,eAAe,EACf,qBAAqB,EACrB,eAAe,GAChB,MAAM,gDAAgD,CAAA"}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@voyantjs/workflows-ui",
-  "version": "0.37.1",
+  "version": "0.38.1",
   "description": "Importable React admin UI for Voyant workflow run observability.",
   "license": "Apache-2.0",
   "repository": {
@@ -11,90 +11,77 @@
   "type": "module",
   "sideEffects": false,
   "exports": {
-    ".": "./src/index.ts",
-    "./client": "./src/client.ts",
-    "./styles.css": "./src/styles.css",
-    "./i18n": "./src/i18n/index.ts",
-    "./i18n/en": "./src/i18n/en.ts",
-    "./i18n/ro": "./src/i18n/ro.ts",
-    "./components/workflow-run-detail-page": "./src/components/workflow-run-detail-page.ts",
-    "./components/workflow-runs-page": "./src/components/workflow-runs-page.ts"
-  },
-  "scripts": {
-    "build": "tsc -p tsconfig.build.json",
-    "clean": "rm -rf dist tsconfig.tsbuildinfo",
-    "prepack": "pnpm run build",
-    "typecheck": "tsc --noEmit",
-    "lint": "biome check src/",
-    "test": "vitest run --passWithNoTests"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./client": {
+      "types": "./dist/client.d.ts",
+      "import": "./dist/client.js",
+      "default": "./dist/client.js"
+    },
+    "./styles.css": {
+      "default": "./src/styles.css"
+    },
+    "./i18n": {
+      "types": "./dist/i18n/index.d.ts",
+      "import": "./dist/i18n/index.js",
+      "default": "./dist/i18n/index.js"
+    },
+    "./i18n/en": {
+      "types": "./dist/i18n/en.d.ts",
+      "import": "./dist/i18n/en.js",
+      "default": "./dist/i18n/en.js"
+    },
+    "./i18n/ro": {
+      "types": "./dist/i18n/ro.d.ts",
+      "import": "./dist/i18n/ro.js",
+      "default": "./dist/i18n/ro.js"
+    },
+    "./components/*": {
+      "types": "./dist/components/*.d.ts",
+      "import": "./dist/components/*.js",
+      "default": "./dist/components/*.js"
+    }
   },
   "dependencies": {
-    "@voyantjs/workflow-runs-ui": "workspace:*"
+    "@voyantjs/i18n": "0.38.1",
+    "@voyantjs/workflows-react": "0.38.1"
   },
   "peerDependencies": {
-    "@voyantjs/ui": "workspace:*",
     "lucide-react": "^0.475.0 || ^1.0.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "@voyantjs/ui": "0.38.1"
   },
   "devDependencies": {
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@voyantjs/ui": "workspace:*",
-    "@voyantjs/voyant-typescript-config": "workspace:*",
     "lucide-react": "^1.7.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "typescript": "^6.0.2",
-    "vitest": "^4.1.2"
+    "vitest": "^4.1.2",
+    "@voyantjs/i18n": "0.38.1",
+    "@voyantjs/ui": "0.38.1",
+    "@voyantjs/voyant-typescript-config": "0.1.0"
   },
   "files": [
     "dist",
+    "src/components",
     "src/styles.css"
   ],
   "publishConfig": {
-    "access": "public",
-    "exports": {
-      ".": {
-        "types": "./dist/index.d.ts",
-        "import": "./dist/index.js",
-        "default": "./dist/index.js"
-      },
-      "./client": {
-        "types": "./dist/client.d.ts",
-        "import": "./dist/client.js",
-        "default": "./dist/client.js"
-      },
-      "./styles.css": {
-        "default": "./src/styles.css"
-      },
-      "./i18n": {
-        "types": "./dist/i18n/index.d.ts",
-        "import": "./dist/i18n/index.js",
-        "default": "./dist/i18n/index.js"
-      },
-      "./i18n/en": {
-        "types": "./dist/i18n/en.d.ts",
-        "import": "./dist/i18n/en.js",
-        "default": "./dist/i18n/en.js"
-      },
-      "./i18n/ro": {
-        "types": "./dist/i18n/ro.d.ts",
-        "import": "./dist/i18n/ro.js",
-        "default": "./dist/i18n/ro.js"
-      },
-      "./components/workflow-run-detail-page": {
-        "types": "./dist/components/workflow-run-detail-page.d.ts",
-        "import": "./dist/components/workflow-run-detail-page.js",
-        "default": "./dist/components/workflow-run-detail-page.js"
-      },
-      "./components/workflow-runs-page": {
-        "types": "./dist/components/workflow-runs-page.d.ts",
-        "import": "./dist/components/workflow-runs-page.js",
-        "default": "./dist/components/workflow-runs-page.js"
-      }
-    },
-    "main": "./dist/index.js",
-    "types": "./dist/index.d.ts"
-  }
-}
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "clean": "rm -rf dist tsconfig.tsbuildinfo",
+    "typecheck": "tsc --noEmit",
+    "lint": "biome check src/",
+    "test": "vitest run --passWithNoTests"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts"
+}

package/src/components/common.tsx

@@ -0,0 +1,182 @@
+"use client"
+
+import { Badge } from "@voyantjs/ui/components/badge"
+import { AlertCircle, CheckCircle2, Clock, Copy, RefreshCw, XCircle } from "lucide-react"
+import { useMemo, useState } from "react"
+
+import { useWorkflowRunsUiMessagesOrDefault, type WorkflowRunsUiMessages } from "../i18n/index.js"
+import type { WorkflowRun, WorkflowRunStep, WorkflowRunStepStatus } from "../types.js"
+
+export function StatusIcon({ status }: { status: WorkflowRun["status"] }) {
+  switch (status) {
+    case "succeeded":
+      return <CheckCircle2 className="h-4 w-4 text-emerald-500" />
+    case "failed":
+      return <XCircle className="h-4 w-4 text-destructive" />
+    case "cancelled":
+      return <AlertCircle className="h-4 w-4 text-amber-500" />
+    case "running":
+      return <Clock className="h-4 w-4 animate-pulse text-blue-500" />
+  }
+}
+
+export function StepStatusIcon({ status }: { status: WorkflowRunStepStatus }) {
+  switch (status) {
+    case "succeeded":
+      return <CheckCircle2 className="h-4 w-4 text-emerald-500" />
+    case "failed":
+      return <XCircle className="h-4 w-4 text-destructive" />
+    case "running":
+      return <Clock className="h-4 w-4 animate-pulse text-blue-500" />
+    case "skipped":
+      return <AlertCircle className="h-4 w-4 text-muted-foreground" />
+    case "compensated":
+      return <RefreshCw className="h-4 w-4 text-amber-500" />
+  }
+}
+
+export function StatusBadge({
+  status,
+  messages,
+}: {
+  status: WorkflowRun["status"]
+  messages: WorkflowRunsUiMessages
+}) {
+  useWorkflowRunsUiMessagesOrDefault()
+  const className = {
+    succeeded: "border-emerald-500/40 bg-emerald-500/10 text-emerald-600 dark:text-emerald-300", // i18n-literal-ok: CSS classes
+    failed: "border-destructive/40 bg-destructive/10 text-destructive", // i18n-literal-ok: CSS classes
+    cancelled: "border-amber-500/40 bg-amber-500/10 text-amber-600 dark:text-amber-300", // i18n-literal-ok: CSS classes
+    running: "border-blue-500/40 bg-blue-500/10 text-blue-600 dark:text-blue-300", // i18n-literal-ok: CSS classes
+  }[status]
+  return (
+    <Badge variant="outline" className={`text-[11px] ${className}`}>
+      {messages.status[status]}
+    </Badge>
+  )
+}
+
+export function TagChip({ tag }: { tag: string }) {
+  const colonIdx = tag.indexOf(":")
+  if (colonIdx < 0) {
+    return (
+      <Badge variant="outline" className="font-mono text-[10px]">
+        {tag}
+      </Badge>
+    )
+  }
+  const key = tag.slice(0, colonIdx)
+  const value = tag.slice(colonIdx + 1)
+  return (
+    <Badge variant="outline" className="gap-1 font-mono text-[10px]" title={tag}>
+      <span className="text-muted-foreground">{key}</span>
+      <span className="max-w-[18ch] truncate">{value}</span>
+    </Badge>
+  )
+}
+
+export function CopyableId({
+  id,
+  copiedLabel,
+  className,
+}: {
+  id: string
+  copiedLabel: string
+  className?: string
+}) {
+  const [copied, setCopied] = useState(false)
+  const onCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(id)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 1500)
+    } catch {
+      /* clipboard blocked */
+    }
+  }
+  return (
+    <button
+      type="button"
+      onClick={onCopy}
+      className={`group inline-flex items-center gap-1.5 rounded border bg-muted/40 px-2 py-1 font-mono text-[11px] hover:bg-muted ${
+        className ?? ""
+      }`}
+      title={id}
+    >
+      <span className="max-w-[16ch] truncate">{id}</span>
+      <Copy className="h-3 w-3 opacity-60 group-hover:opacity-100" />
+      {copied ? <span className="text-emerald-500 text-[10px]">{copiedLabel}</span> : null}
+    </button>
+  )
+}
+
+export function PayloadBlock({
+  title,
+  value,
+  messages,
+  hideTitle = false,
+}: {
+  title: string
+  value: Record<string, unknown>
+  messages: WorkflowRunsUiMessages
+  hideTitle?: boolean
+}) {
+  const [copied, setCopied] = useState(false)
+  const json = useMemo(() => JSON.stringify(value, null, 2), [value])
+
+  const onCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(json)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 1500)
+    } catch {
+      /* clipboard blocked */
+    }
+  }
+
+  return (
+    <div className="space-y-1">
+      {hideTitle ? null : (
+        <div className="flex items-center justify-between gap-2">
+          <span className="text-muted-foreground text-xs">{title}</span>
+          <button
+            type="button"
+            onClick={onCopy}
+            className="flex items-center gap-1 text-muted-foreground text-xs hover:text-foreground"
+          >
+            <Copy className="h-3 w-3" />
+            {copied ? messages.detail.copied : messages.detail.copy}
+          </button>
+        </div>
+      )}
+      <pre className="max-h-[24rem] overflow-auto rounded bg-muted/40 p-3 font-mono text-[11px] leading-relaxed">
+        {json}
+      </pre>
+    </div>
+  )
+}
+
+export function formatRelative(iso: string, messages: WorkflowRunsUiMessages): string {
+  const seconds = Math.round((Date.now() - new Date(iso).getTime()) / 1000)
+  if (Math.abs(seconds) < 5) return messages.format.relativeNow
+  const formatter = new Intl.RelativeTimeFormat(undefined, { numeric: "auto" })
+  if (Math.abs(seconds) < 60) return formatter.format(-seconds, "second")
+  const minutes = Math.round(seconds / 60)
+  if (Math.abs(minutes) < 60) return formatter.format(-minutes, "minute")
+  const hours = Math.round(minutes / 60)
+  if (Math.abs(hours) < 24) return formatter.format(-hours, "hour")
+  const days = Math.round(hours / 24)
+  return formatter.format(-days, "day")
+}
+
+export function formatDuration(ms: number): string {
+  if (ms < 1000) return `${ms}ms`
+  if (ms < 60_000) return `${(ms / 1000).toFixed(2)}s`
+  const minutes = Math.floor(ms / 60_000)
+  const seconds = Math.round((ms % 60_000) / 1000)
+  return `${minutes}m ${seconds}s`
+}
+
+export function runHasLiveStatus(run: WorkflowRun | WorkflowRunStep): boolean {
+  return run.status === "running"
+}

package/src/components/workflow-run-actions.tsx

@@ -0,0 +1,160 @@
+"use client"
+
+import { Button } from "@voyantjs/ui/components/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@voyantjs/ui/components/card"
+import { AlertTriangle, Play, RotateCw } from "lucide-react"
+import { useCallback, useState } from "react"
+
+import { useWorkflowRunsUiMessagesOrDefault } from "../i18n/index.js"
+import type { WorkflowRun, WorkflowRunActionError, WorkflowRunsApi } from "../types.js"
+import { runHasLiveStatus } from "./common.js"
+
+export function WorkflowRunActionsCard({
+  api,
+  run,
+  onOpenRun,
+}: {
+  api: WorkflowRunsApi
+  run: WorkflowRun
+  onOpenRun?: (id: string) => void
+}) {
+  const messages = useWorkflowRunsUiMessagesOrDefault()
+  const [busy, setBusy] = useState<"rerun" | "resume" | null>(null)
+  const [feedback, setFeedback] = useState<{ kind: "info" | "error"; message: string } | null>(null)
+  const [confirmOpen, setConfirmOpen] = useState(false)
+
+  const explainError = useCallback(
+    (err: WorkflowRunActionError): string => {
+      if (err.error === "runner_not_registered") return messages.actions.runnerMissing
+      if (err.error === "rerun_blocked") return err.detail ?? messages.actions.rerunBlocked
+      if (err.error === "incomplete_prior_step") {
+        return err.detail ?? messages.actions.incompletePriorStep
+      }
+      return err.detail ?? err.error ?? messages.actions.actionFailed
+    },
+    [messages],
+  )
+
+  const doRerun = async (confirm: boolean): Promise<void> => {
+    setBusy("rerun")
+    setFeedback(null)
+    try {
+      const result = await api.rerunRun(run.id, { confirm })
+      if (result.ok) {
+        setFeedback({ kind: "info", message: messages.actions.rerunStarted })
+        onOpenRun?.(result.data.runId)
+        setConfirmOpen(false)
+      } else if (result.error.error === "confirmation_required") {
+        setConfirmOpen(true)
+      } else {
+        setFeedback({ kind: "error", message: explainError(result.error) })
+      }
+    } finally {
+      setBusy(null)
+    }
+  }
+
+  const doResume = async (): Promise<void> => {
+    setBusy("resume")
+    setFeedback(null)
+    try {
+      const result = await api.resumeRun(run.id)
+      if (result.ok) {
+        setFeedback({
+          kind: "info",
+          message: messages.actions.resumeStarted(result.data.resumeFromStep ?? ""),
+        })
+        onOpenRun?.(result.data.runId)
+      } else {
+        setFeedback({ kind: "error", message: explainError(result.error) })
+      }
+    } finally {
+      setBusy(null)
+    }
+  }
+
+  const canResume = run.status === "failed"
+  const isRunning = runHasLiveStatus(run)
+
+  return (
+    <Card>
+      <CardContent className="flex flex-wrap items-center gap-2 pt-4">
+        <Button
+          variant="default"
+          size="sm"
+          onClick={() => void doRerun(false)}
+          disabled={busy !== null || isRunning}
+          title={isRunning ? messages.actions.waitForCompletion : messages.actions.rerunDescription}
+        >
+          <RotateCw className={`mr-1.5 h-3.5 w-3.5 ${busy === "rerun" ? "animate-spin" : ""}`} />
+          {busy === "rerun" ? messages.actions.rerunBusy : messages.actions.rerun}
+        </Button>
+        <Button
+          variant="secondary"
+          size="sm"
+          onClick={() => void doResume()}
+          disabled={busy !== null || !canResume}
+          title={
+            canResume ? messages.actions.resumeDescription : messages.actions.resumeUnavailable
+          }
+        >
+          <Play className={`mr-1.5 h-3.5 w-3.5 ${busy === "resume" ? "animate-pulse" : ""}`} />
+          {busy === "resume" ? messages.actions.resumeBusy : messages.actions.resume}
+        </Button>
+        {feedback ? (
+          <span
+            className={`ml-auto text-xs ${
+              feedback.kind === "error" ? "text-destructive" : "text-muted-foreground"
+            }`}
+          >
+            {feedback.message}
+          </span>
+        ) : null}
+      </CardContent>
+      {confirmOpen ? (
+        <ConfirmRerunDialog
+          onCancel={() => setConfirmOpen(false)}
+          onConfirm={() => void doRerun(true)}
+          busy={busy === "rerun"}
+        />
+      ) : null}
+    </Card>
+  )
+}
+
+function ConfirmRerunDialog({
+  onCancel,
+  onConfirm,
+  busy,
+}: {
+  onCancel: () => void
+  onConfirm: () => void
+  busy: boolean
+}) {
+  const messages = useWorkflowRunsUiMessagesOrDefault()
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
+      <Card className="w-full max-w-md border-amber-500/40">
+        <CardHeader className="pb-3">
+          <CardTitle className="flex items-center gap-2 text-base">
+            <AlertTriangle className="h-4 w-4 text-amber-500" />
+            {messages.actions.confirmTitle}
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-3 text-sm">
+          <p>{messages.actions.confirmBody}</p>
+          <p className="text-muted-foreground text-xs">{messages.actions.confirmTip}</p>
+          <div className="flex justify-end gap-2 pt-2">
+            <Button variant="ghost" size="sm" onClick={onCancel} disabled={busy}>
+              {messages.actions.cancel}
+            </Button>
+            <Button variant="default" size="sm" onClick={onConfirm} disabled={busy}>
+              <RotateCw className={`mr-1.5 h-3.5 w-3.5 ${busy ? "animate-spin" : ""}`} />
+              {messages.actions.rerunAnyway}
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}