@voyant-travel/workflows-react 0.107.10

package/package.json

@@ -0,0 +1,123 @@
+{
+  "name": "@voyant-travel/workflows-react",
+  "version": "0.107.10",
+  "description": "React hooks for Voyant Workflows — trigger, subscribe, and stream runs — plus the styled workflow-run admin UI (formerly @voyant-travel/workflows-ui).",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/voyant-travel/voyant.git",
+    "directory": "packages/workflows-react"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./workflow-runs": {
+      "types": "./dist/workflow-runs.d.ts",
+      "import": "./dist/workflow-runs.js",
+      "default": "./dist/workflow-runs.js"
+    },
+    "./workflow-runs-client": {
+      "types": "./dist/workflow-runs-client.d.ts",
+      "import": "./dist/workflow-runs-client.js",
+      "default": "./dist/workflow-runs-client.js"
+    },
+    "./workflow-schedules-client": {
+      "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"
+    }
+  },
+  "dependencies": {
+    "@voyant-travel/i18n": "^0.106.1",
+    "@voyant-travel/react": "^0.104.1",
+    "@voyant-travel/workflows": "^0.107.10"
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": "^5.0.0",
+    "lucide-react": "^0.475.0 || ^1.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@voyant-travel/ui": "^0.106.1"
+  },
+  "peerDependenciesMeta": {
+    "@voyant-travel/ui": {
+      "optional": true
+    },
+    "lucide-react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@tanstack/react-query": "^5.100.11",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "lucide-react": "^1.7.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "typescript": "^6.0.2",
+    "vitest": "^4.1.2",
+    "@voyant-travel/i18n": "^0.106.1",
+    "@voyant-travel/react": "^0.104.1",
+    "@voyant-travel/ui": "^0.106.1",
+    "@voyant-travel/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.build.json",
+    "clean": "rm -rf dist tsconfig.tsbuildinfo tsconfig.build.tsbuildinfo",
+    "typecheck": "tsc --noEmit",
+    "lint": "biome check src/",
+    "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 "@voyant-travel/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 "@voyant-travel/ui/components/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@voyant-travel/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>
+  )
+}