@voyantjs/workflows-react 0.106.0 → 0.107.0

package/dist/i18n/provider.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createLocaleFormatters, createPackageMessagesContext, resolvePackageMessages, } from "@voyantjs/i18n";
+import { workflowRunsUiEn } from "./en.js";
+import { workflowRunsUiRo } from "./ro.js";
+const fallbackLocale = "en";
+export const workflowRunsUiMessageDefinitions = {
+    en: workflowRunsUiEn,
+    ro: workflowRunsUiRo,
+};
+const workflowRunsUiContext = createPackageMessagesContext("WorkflowRunsUiMessages");
+const defaultWorkflowRunsUiI18n = {
+    messages: workflowRunsUiEn,
+    ...createLocaleFormatters(fallbackLocale),
+};
+export function resolveWorkflowRunsUiMessages({ locale, overrides, }) {
+    return resolvePackageMessages({
+        definitions: workflowRunsUiMessageDefinitions,
+        fallbackLocale,
+        locale,
+        overrides,
+    });
+}
+export function getWorkflowRunsUiI18n({ locale, overrides, }) {
+    const resolvedLocale = locale ?? fallbackLocale;
+    return {
+        messages: resolveWorkflowRunsUiMessages({
+            locale: resolvedLocale,
+            overrides,
+        }),
+        ...createLocaleFormatters(resolvedLocale),
+    };
+}
+export function WorkflowRunsUiMessagesProvider({ children, locale, overrides, }) {
+    return (_jsx(workflowRunsUiContext.ResolvedMessagesProvider, { definitions: workflowRunsUiMessageDefinitions, fallbackLocale: fallbackLocale, locale: locale, overrides: overrides, children: children }));
+}
+export const useWorkflowRunsUiI18n = workflowRunsUiContext.useI18n;
+export const useWorkflowRunsUiMessages = workflowRunsUiContext.useMessages;
+export function useWorkflowRunsUiI18nOrDefault() {
+    return workflowRunsUiContext.useOptionalI18n() ?? defaultWorkflowRunsUiI18n;
+}
+export function useWorkflowRunsUiMessagesOrDefault() {
+    return useWorkflowRunsUiI18nOrDefault().messages;
+}

package/dist/i18n/ro.d.ts

@@ -0,0 +1,4 @@
+import type { WorkflowRunsUiMessages } from "./messages.js";
+export declare const workflowRunsUiRo: WorkflowRunsUiMessages;
+export declare const workflowsUiRo: WorkflowRunsUiMessages;
+//# sourceMappingURL=ro.d.ts.map

package/dist/i18n/ro.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ro.d.ts","sourceRoot":"","sources":["../../src/i18n/ro.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAA;AAE3D,eAAO,MAAM,gBAAgB,EAAE,sBA2I9B,CAAA;AAED,eAAO,MAAM,aAAa,wBAAmB,CAAA"}

package/dist/i18n/ro.js

@@ -0,0 +1,137 @@
+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",
+    },
+    schedules: {
+        title: "Programari workflow",
+        subtitle: "Programari cron, interval si one-shot inregistrate.",
+        environmentLabel: "Mediu",
+        versionLabel: "Manifest",
+        workflowColumn: "Workflow",
+        scheduleColumn: "Programare",
+        nextRunColumn: "Urmatoarea rulare",
+        lastRunColumn: "Ultima rulare",
+        statusColumn: "Status",
+        actionsColumn: "Actiuni",
+        enabled: "Activ",
+        disabledByRegistration: "Dezactivat",
+        disabledByEnvironment: "Dezactivat (filtrat dupa mediu)",
+        disabledByEnvFlag: "Dezactivat (flag de mediu)",
+        envFlagOff: "Programarile sunt dezactivate de flag-ul de mediu — nimic nu va rula.",
+        envFlagOn: "Programarile sunt active.",
+        eventDriven: "declansat de eveniment",
+        cron: (expr, timezone) => `${expr} (${timezone})`,
+        every: (interval) => `la fiecare ${interval}`,
+        at: (timestamp) => `la ${timestamp}`,
+        triggerNow: "Declanseaza acum",
+        triggering: "Se declanseaza...",
+        triggerSuccess: "Rulare pornita.",
+        triggerFailed: "Declansarea a esuat.",
+        refresh: "Reincarca",
+        loading: "Se incarca programarile...",
+        loadError: "Programarile nu au putut fi incarcate.",
+        empty: "Nu exista programari inregistrate pentru acest mediu.",
+        inFuture: (relative) => `in ${relative}`,
+        inPast: (relative) => `acum ${relative}`,
+        notScheduled: "—",
+        lastRunSucceeded: (relative) => `reusita acum ${relative}`,
+        lastRunFailed: (relative) => `esuata acum ${relative}`,
+        lastRunRunning: "in rulare",
+        lastRunCancelled: (relative) => `anulata acum ${relative}`,
+        lastFireRecorded: (relative) => `declansata acum ${relative}`,
+        lastRunNone: "nu a rulat niciodata",
+    },
+};
+export const workflowsUiRo = workflowRunsUiRo;

package/dist/schedules-client.d.ts

@@ -0,0 +1,2 @@
+export { createWorkflowSchedulesApiClient, type ListWorkflowSchedulesResponse, type WorkflowScheduleDecl, type WorkflowScheduleSummary, type WorkflowSchedulesApi, type WorkflowSchedulesApiClientOptions, } from "./workflow-schedules-client.js";
+//# sourceMappingURL=schedules-client.d.ts.map

package/dist/schedules-client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schedules-client.d.ts","sourceRoot":"","sources":["../src/schedules-client.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gCAAgC,EAChC,KAAK,6BAA6B,EAClC,KAAK,oBAAoB,EACzB,KAAK,uBAAuB,EAC5B,KAAK,oBAAoB,EACzB,KAAK,iCAAiC,GACvC,MAAM,gCAAgC,CAAA"}

package/dist/schedules-client.js

@@ -0,0 +1 @@
+export { createWorkflowSchedulesApiClient, } from "./workflow-schedules-client.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 "./workflow-runs-client.js";
+//# 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,2BAA2B,CAAA"}

package/dist/types.js

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

package/dist/ui.d.ts

@@ -0,0 +1,9 @@
+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 { WorkflowSchedulesPage, type WorkflowSchedulesPageProps, } from "./components/workflow-schedules-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 { createWorkflowSchedulesApiClient, type ListWorkflowSchedulesResponse, type WorkflowScheduleDecl, type WorkflowScheduleSummary, type WorkflowSchedulesApi, type WorkflowSchedulesApiClientOptions, } from "./schedules-client.js";
+export type { ListWorkflowRunsQuery, ListWorkflowRunsResponse, WorkflowRun, WorkflowRunActionError, WorkflowRunActionResponse, WorkflowRunActionResult, WorkflowRunDetailResponse, WorkflowRunErrorPayload, WorkflowRunStatus, WorkflowRunStep, WorkflowRunStepStatus, WorkflowRunsApi, } from "./types.js";
+//# sourceMappingURL=ui.d.ts.map

package/dist/ui.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../src/ui.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,KAAK,0BAA0B,GAChC,MAAM,yCAAyC,CAAA;AAChD,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,OAAO,EACL,gCAAgC,EAChC,KAAK,6BAA6B,EAClC,KAAK,oBAAoB,EACzB,KAAK,uBAAuB,EAC5B,KAAK,oBAAoB,EACzB,KAAK,iCAAiC,GACvC,MAAM,uBAAuB,CAAA;AAC9B,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/ui.js

@@ -0,0 +1,6 @@
+export { createWorkflowRunsApiClient } from "./client.js";
+export { WorkflowRunDetailPage, } from "./components/workflow-run-detail-page.js";
+export { WorkflowRunsPage, WorkflowRunsPageSkeleton, } from "./components/workflow-runs-page.js";
+export { WorkflowSchedulesPage, } from "./components/workflow-schedules-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";
+export { createWorkflowSchedulesApiClient, } from "./schedules-client.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@voyantjs/workflows-react",
-  "version": "0.106.0",
-  "description": "React hooks for Voyant Workflows — trigger, subscribe, and stream runs.",
+  "version": "0.107.0",
+  "description": "React hooks for Voyant Workflows — trigger, subscribe, and stream runs — plus the styled workflow-run admin UI (formerly @voyantjs/workflows-ui).",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -30,46 +30,94 @@
       "types": "./dist/workflow-schedules-client.d.ts",
       "import": "./dist/workflow-schedules-client.js",
       "default": "./dist/workflow-schedules-client.js"
+    },
+    "./ui": {
+      "types": "./dist/ui.d.ts",
+      "import": "./dist/ui.js",
+      "default": "./dist/ui.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"
     }
   },
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "dist",
-    "src",
-    "!**/*.test.*",
-    "!**/*.spec.*",
-    "NOTICE"
-  ],
   "dependencies": {
+    "@voyantjs/i18n": "^0.106.0",
     "@voyantjs/react": "^0.104.1",
-    "@voyantjs/workflows": "^0.106.0"
+    "@voyantjs/workflows": "^0.107.0"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.0.0",
+    "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.106.0"
+  },
+  "peerDependenciesMeta": {
+    "@voyantjs/ui": {
+      "optional": true
+    },
+    "lucide-react": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@tanstack/react-query": "^5.100.11",
-    "@types/react": "^19.1.0",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "react": "^19.1.0",
+    "lucide-react": "^1.7.0",
+    "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "typescript": "^5.9.2",
+    "typescript": "^6.0.2",
     "vitest": "^4.1.2",
+    "@voyantjs/i18n": "^0.106.0",
     "@voyantjs/react": "^0.104.1",
+    "@voyantjs/ui": "^0.106.0",
     "@voyantjs/voyant-typescript-config": "^0.1.0"
   },
+  "files": [
+    "dist",
+    "src",
+    "!**/*.test.*",
+    "!**/*.spec.*",
+    "NOTICE",
+    "src/components",
+    "src/styles.css"
+  ],
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "build": "tsc -p tsconfig.json",
-    "check-types": "tsc --noEmit",
+    "build": "tsc -p tsconfig.build.json",
+    "clean": "rm -rf dist tsconfig.tsbuildinfo tsconfig.build.tsbuildinfo",
     "typecheck": "tsc --noEmit",
     "lint": "biome check src/",
-    "test": "vitest run --passWithNoTests",
-    "dev": "tsc -w -p tsconfig.json"
-  }
+    "test": "vitest run --passWithNoTests"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts"
 }

package/src/client.ts

@@ -0,0 +1,4 @@
+export {
+  createWorkflowRunsApiClient,
+  type WorkflowRunsApiClientOptions,
+} from "./workflow-runs-client.js"

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"
+}