@voyant-travel/workflows-react 0.121.0 → 0.122.1

package/dist/components/common.d.ts

@@ -24,6 +24,6 @@ export declare function PayloadBlock({ title, value, messages, hideTitle, }: {
     messages: WorkflowRunsUiMessages;
     hideTitle?: boolean;
 }): import("react").JSX.Element;
-export declare function formatRelative(iso: string, messages: WorkflowRunsUiMessages): string;
+export declare function formatRelative(iso: string, messages: WorkflowRunsUiMessages, locale: string): string;
 export declare function formatDuration(ms: number): string;
 export declare function runHasLiveStatus(run: WorkflowRun | WorkflowRunStep): boolean;

package/dist/components/common.js

@@ -78,11 +78,11 @@ export function PayloadBlock({ title, value, messages, hideTitle = false, }) {
     };
     return (_jsxs("div", { className: "space-y-1", children: [hideTitle ? null : (_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "text-muted-foreground text-xs", children: title }), _jsxs("button", { type: "button", onClick: onCopy, className: "flex items-center gap-1 text-muted-foreground text-xs hover:text-foreground", children: [_jsx(Copy, { className: "h-3 w-3" }), copied ? messages.detail.copied : messages.detail.copy] })] })), _jsx("pre", { className: "max-h-[24rem] overflow-auto rounded bg-muted/40 p-3 font-mono text-[11px] leading-relaxed", children: json })] }));
 }
-export function formatRelative(iso, messages) {
+export function formatRelative(iso, messages, locale) {
     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" });
+    const formatter = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
     if (Math.abs(seconds) < 60)
         return formatter.format(-seconds, "second");
     const minutes = Math.round(seconds / 60);

package/dist/components/workflow-run-detail-page.js

@@ -4,7 +4,7 @@ import { Badge } from "@voyant-travel/ui/components/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@voyant-travel/ui/components/card";
 import { ChevronDown, ChevronRight, Link2 } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
-import { useWorkflowRunsUiMessagesOrDefault } from "../i18n/index.js";
+import { useWorkflowRunsUiI18nOrDefault, useWorkflowRunsUiMessagesOrDefault, } from "../i18n/index.js";
 import { CopyableId, formatDuration, formatRelative, PayloadBlock, StatusBadge, StatusIcon, StepStatusIcon, TagChip, } from "./common.js";
 import { WorkflowRunActionsCard } from "./workflow-run-actions.js";
 export function WorkflowRunDetailPage({ api, runId, onOpenRun, pollIntervalMs = 3000, className, }) {
@@ -53,8 +53,8 @@ export function WorkflowRunDetailPage({ api, runId, onOpenRun, pollIntervalMs =
     return (_jsxs("div", { className: `space-y-4 ${className ?? ""}`, children: [_jsx(RunHeaderCard, { run: run, onOpenRun: onOpenRun }), _jsx(WorkflowRunActionsCard, { api: api, run: run, onOpenRun: onOpenRun }), reruns.length > 0 ? _jsx(RerunsListCard, { reruns: reruns, onOpenRun: onOpenRun }) : null, _jsx(StepsCard, { steps: steps }), run.input ? _jsx(PayloadCard, { title: messages.detail.input, value: run.input }) : null, run.result ? _jsx(PayloadCard, { title: messages.detail.result, value: run.result }) : null, run.error && !duplicateRunError ? (_jsx(ErrorCard, { title: messages.detail.runError, error: run.error })) : null] }));
 }
 function RunHeaderCard({ run, onOpenRun }) {
-    const messages = useWorkflowRunsUiMessagesOrDefault();
-    return (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "space-y-3 pb-4", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx(StatusIcon, { status: run.status }), _jsx(CardTitle, { className: "font-semibold text-lg", children: run.workflowName }), _jsx(StatusBadge, { status: run.status, messages: messages }), run.durationMs != null ? (_jsx(Badge, { variant: "outline", className: "font-mono text-xs", children: formatDuration(run.durationMs) })) : null, run.resumeFromStep ? (_jsx(Badge, { variant: "outline", className: "font-mono text-xs", children: messages.detail.resumedAt(run.resumeFromStep) })) : null, _jsx(CopyableId, { id: run.id, copiedLabel: messages.detail.copied, className: "ml-auto" })] }), _jsxs("div", { className: "text-muted-foreground text-sm", children: [_jsxs("span", { children: [messages.detail.started, " ", new Date(run.startedAt).toLocaleString()] }), run.completedAt ? (_jsxs("span", { children: [" · ", messages.detail.finished, " ", new Date(run.completedAt).toLocaleString()] })) : null] })] }), _jsxs(CardContent, { className: "space-y-3 pt-0", children: [_jsxs("dl", { className: "grid grid-cols-1 gap-x-6 gap-y-2 text-sm sm:grid-cols-2", children: [_jsx(DefRow, { label: messages.detail.trigger, value: run.trigger, mono: true }), run.correlationId ? (_jsx(DefRow, { label: messages.detail.correlation, value: run.correlationId, mono: true })) : null, run.parentRunId ? (_jsx(LinkedRunRow, { label: messages.detail.parent, runId: run.parentRunId, onOpenRun: onOpenRun })) : null, run.triggeredByUserId ? (_jsx(DefRow, { label: messages.detail.triggeredBy, value: run.triggeredByUserId, mono: true })) : null] }), run.tags.length > 0 ? (_jsxs("div", { children: [_jsx("div", { className: "mb-1.5 text-muted-foreground text-xs uppercase tracking-wide", children: messages.detail.tags }), _jsx("div", { className: "flex flex-wrap gap-1", children: run.tags.map((tag) => (_jsx(TagChip, { tag: tag }, tag))) })] })) : null] })] }));
+    const { formatDateTime, messages } = useWorkflowRunsUiI18nOrDefault();
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "space-y-3 pb-4", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx(StatusIcon, { status: run.status }), _jsx(CardTitle, { className: "font-semibold text-lg", children: run.workflowName }), _jsx(StatusBadge, { status: run.status, messages: messages }), run.durationMs != null ? (_jsx(Badge, { variant: "outline", className: "font-mono text-xs", children: formatDuration(run.durationMs) })) : null, run.resumeFromStep ? (_jsx(Badge, { variant: "outline", className: "font-mono text-xs", children: messages.detail.resumedAt(run.resumeFromStep) })) : null, _jsx(CopyableId, { id: run.id, copiedLabel: messages.detail.copied, className: "ml-auto" })] }), _jsxs("div", { className: "text-muted-foreground text-sm", children: [_jsxs("span", { children: [messages.detail.started, " ", formatDateTime(run.startedAt)] }), run.completedAt ? (_jsxs("span", { children: [" · ", messages.detail.finished, " ", formatDateTime(run.completedAt)] })) : null] })] }), _jsxs(CardContent, { className: "space-y-3 pt-0", children: [_jsxs("dl", { className: "grid grid-cols-1 gap-x-6 gap-y-2 text-sm sm:grid-cols-2", children: [_jsx(DefRow, { label: messages.detail.trigger, value: run.trigger, mono: true }), run.correlationId ? (_jsx(DefRow, { label: messages.detail.correlation, value: run.correlationId, mono: true })) : null, run.parentRunId ? (_jsx(LinkedRunRow, { label: messages.detail.parent, runId: run.parentRunId, onOpenRun: onOpenRun })) : null, run.triggeredByUserId ? (_jsx(DefRow, { label: messages.detail.triggeredBy, value: run.triggeredByUserId, mono: true })) : null] }), run.tags.length > 0 ? (_jsxs("div", { children: [_jsx("div", { className: "mb-1.5 text-muted-foreground text-xs uppercase tracking-wide", children: messages.detail.tags }), _jsx("div", { className: "flex flex-wrap gap-1", children: run.tags.map((tag) => (_jsx(TagChip, { tag: tag }, tag))) })] })) : null] })] }));
 }
 function LinkedRunRow({ label, runId, onOpenRun, }) {
     return (_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("dt", { className: "shrink-0 text-muted-foreground text-xs uppercase tracking-wide", children: label }), _jsx("dd", { className: "min-w-0 truncate", children: _jsxs("button", { type: "button", onClick: () => onOpenRun?.(runId), className: "inline-flex items-center gap-1.5 truncate font-mono text-xs hover:underline", title: runId, children: [_jsx(Link2, { className: "h-3 w-3 opacity-60" }), runId] }) })] }));
@@ -64,8 +64,8 @@ function DefRow({ label, value, mono }) {
                 , children: value })] }));
 }
 function RerunsListCard({ reruns, onOpenRun, }) {
-    const messages = useWorkflowRunsUiMessagesOrDefault();
-    return (_jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-3", children: _jsxs(CardTitle, { className: "flex items-center gap-2 text-sm", children: [_jsx(Link2, { className: "h-3.5 w-3.5 text-muted-foreground" }), messages.detail.reruns, _jsx("span", { className: "font-normal text-muted-foreground text-xs", children: `(${reruns.length})` })] }) }), _jsx(CardContent, { children: _jsx("ul", { className: "space-y-1", children: reruns.map((run) => (_jsx("li", { children: _jsxs("button", { type: "button", onClick: () => onOpenRun?.(run.id), className: "flex w-full items-center gap-2 rounded p-2 text-left text-sm hover:bg-muted/40", children: [_jsx(StatusIcon, { status: run.status }), _jsx("span", { className: "font-mono text-xs", children: run.id }), _jsx("span", { className: "text-muted-foreground text-xs", children: run.trigger }), run.resumeFromStep ? (_jsx(Badge, { variant: "outline", className: "font-mono text-[10px]", children: messages.detail.resumedAt(run.resumeFromStep) })) : null, _jsx("span", { className: "ml-auto whitespace-nowrap text-muted-foreground text-xs", children: formatRelative(run.startedAt, messages) })] }) }, run.id))) }) })] }));
+    const { locale, messages } = useWorkflowRunsUiI18nOrDefault();
+    return (_jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-3", children: _jsxs(CardTitle, { className: "flex items-center gap-2 text-sm", children: [_jsx(Link2, { className: "h-3.5 w-3.5 text-muted-foreground" }), messages.detail.reruns, _jsx("span", { className: "font-normal text-muted-foreground text-xs", children: `(${reruns.length})` })] }) }), _jsx(CardContent, { children: _jsx("ul", { className: "space-y-1", children: reruns.map((run) => (_jsx("li", { children: _jsxs("button", { type: "button", onClick: () => onOpenRun?.(run.id), className: "flex w-full items-center gap-2 rounded p-2 text-left text-sm hover:bg-muted/40", children: [_jsx(StatusIcon, { status: run.status }), _jsx("span", { className: "font-mono text-xs", children: run.id }), _jsx("span", { className: "text-muted-foreground text-xs", children: run.trigger }), run.resumeFromStep ? (_jsx(Badge, { variant: "outline", className: "font-mono text-[10px]", children: messages.detail.resumedAt(run.resumeFromStep) })) : null, _jsx("span", { className: "ml-auto whitespace-nowrap text-muted-foreground text-xs", children: formatRelative(run.startedAt, messages, locale) })] }) }, run.id))) }) })] }));
 }
 function StepsCard({ steps }) {
     const messages = useWorkflowRunsUiMessagesOrDefault();

package/dist/components/workflow-runs-page.js

@@ -4,7 +4,7 @@ import { Button } from "@voyant-travel/ui/components/button";
 import { Card, CardContent } from "@voyant-travel/ui/components/card";
 import { Clock, Workflow } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
-import { useWorkflowRunsUiMessagesOrDefault } from "../i18n/index.js";
+import { useWorkflowRunsUiI18nOrDefault, useWorkflowRunsUiMessagesOrDefault, } from "../i18n/index.js";
 import { formatDuration, formatRelative, StatusBadge, StatusIcon, TagChip } from "./common.js";
 import { WorkflowRunDetailPage } from "./workflow-run-detail-page.js";
 import { buildFilterOptions, WorkflowRunsFilters } from "./workflow-runs-filters.js";
@@ -84,9 +84,9 @@ export function WorkflowRunsPageSkeleton() {
     return (_jsxs("div", { className: "flex min-h-screen flex-col bg-background", children: [_jsx("header", { className: "border-b px-4 py-3", children: _jsx("div", { className: "h-5 w-40 rounded bg-muted", role: "status", "aria-label": messages.page.loading }) }), _jsxs("main", { className: "container mx-auto flex flex-1 flex-col gap-6 px-4 py-6 md:flex-row", children: [_jsxs("aside", { className: "space-y-3 md:w-96 md:shrink-0", children: [_jsx("div", { className: "h-56 rounded-md bg-muted" }), _jsx("div", { className: "h-20 rounded-md bg-muted" }), _jsx("div", { className: "h-20 rounded-md bg-muted" })] }), _jsx("section", { className: "min-h-[24rem] flex-1 rounded-md bg-muted" })] })] }));
 }
 function RunListItem({ run, selected, activeTagFilters, activeStatusFilters, onSelect, onToggleStatus, onToggleTag, }) {
-    const messages = useWorkflowRunsUiMessagesOrDefault();
+    const { locale, messages } = useWorkflowRunsUiI18nOrDefault();
     return (_jsxs("div", { className: `rounded-md border bg-card p-3 text-sm transition-colors hover:bg-muted/50 ${selected ? "border-primary bg-primary/5" : "" // i18n-literal-ok: CSS classes
-        }`, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("button", { type: "button", onClick: onSelect, className: "flex min-w-0 flex-1 items-center gap-2 text-left", children: [_jsx(StatusIcon, { status: run.status }), _jsx("span", { className: "truncate font-medium", children: run.workflowName }), _jsx("span", { className: "ml-auto whitespace-nowrap text-muted-foreground text-xs", children: formatRelative(run.startedAt, messages) })] }), _jsx("button", { type: "button", onClick: () => onToggleStatus(run.status), "aria-pressed": activeStatusFilters.includes(run.status), children: _jsx(StatusBadge, { status: run.status, messages: messages }) })] }), run.durationMs != null ? (_jsx("div", { className: "mt-1 text-muted-foreground text-xs", children: formatDuration(run.durationMs) })) : null, run.tags.length > 0 ? (_jsxs("div", { className: "mt-2 flex flex-wrap gap-1", children: [run.tags.slice(0, 3).map((tag) => (_jsx("button", { type: "button", onClick: () => onToggleTag(tag), "aria-pressed": activeTagFilters.includes(tag), className: activeTagFilters.includes(tag) ? "rounded-full ring-2 ring-primary/40" : undefined, children: _jsx(TagChip, { tag: tag }) }, tag))), run.tags.length > 3 ? (_jsx("span", { className: "text-muted-foreground text-xs", children: `+${run.tags.length - 3}` })) : null] })) : null] }));
+        }`, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("button", { type: "button", onClick: onSelect, className: "flex min-w-0 flex-1 items-center gap-2 text-left", children: [_jsx(StatusIcon, { status: run.status }), _jsx("span", { className: "truncate font-medium", children: run.workflowName }), _jsx("span", { className: "ml-auto whitespace-nowrap text-muted-foreground text-xs", children: formatRelative(run.startedAt, messages, locale) })] }), _jsx("button", { type: "button", onClick: () => onToggleStatus(run.status), "aria-pressed": activeStatusFilters.includes(run.status), children: _jsx(StatusBadge, { status: run.status, messages: messages }) })] }), run.durationMs != null ? (_jsx("div", { className: "mt-1 text-muted-foreground text-xs", children: formatDuration(run.durationMs) })) : null, run.tags.length > 0 ? (_jsxs("div", { className: "mt-2 flex flex-wrap gap-1", children: [run.tags.slice(0, 3).map((tag) => (_jsx("button", { type: "button", onClick: () => onToggleTag(tag), "aria-pressed": activeTagFilters.includes(tag), className: activeTagFilters.includes(tag) ? "rounded-full ring-2 ring-primary/40" : undefined, children: _jsx(TagChip, { tag: tag }) }, tag))), run.tags.length > 3 ? (_jsx("span", { className: "text-muted-foreground text-xs", children: `+${run.tags.length - 3}` })) : null] })) : null] }));
 }
 function SelectPrompt() {
     const messages = useWorkflowRunsUiMessagesOrDefault();

package/dist/components/workflow-schedules-page.js

@@ -5,10 +5,10 @@ import { Button } from "@voyant-travel/ui/components/button";
 import { Card, CardContent } from "@voyant-travel/ui/components/card";
 import { AlertTriangle, CalendarClock, RefreshCw } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { useWorkflowRunsUiMessagesOrDefault } from "../i18n/index.js";
+import { useWorkflowRunsUiI18nOrDefault } from "../i18n/index.js";
 import { formatRelative, StatusIcon } from "./common.js";
 export function WorkflowSchedulesPage({ schedulesApi, runsApi, onTriggerNow, environment = "production", pollIntervalMs = 30_000, className, }) {
-    const rootMessages = useWorkflowRunsUiMessagesOrDefault();
+    const { locale, messages: rootMessages } = useWorkflowRunsUiI18nOrDefault();
     const messages = rootMessages.schedules;
     const [response, setResponse] = useState(null);
     const [lastRuns, setLastRuns] = useState({});
@@ -76,11 +76,11 @@ export function WorkflowSchedulesPage({ schedulesApi, runsApi, onTriggerNow, env
                             ? "border-emerald-500/40 bg-emerald-500/5"
                             : "border-destructive/40 bg-destructive/5", children: _jsx(CardContent, { className: `pt-4 text-sm ${triggerNotice.kind === "success"
                                 ? "text-emerald-600 dark:text-emerald-300"
-                                : "text-destructive"}`, children: triggerNotice.text }) })) : null, error ? (_jsx(Card, { className: "border-destructive/40", children: _jsx(CardContent, { className: "pt-4 text-destructive text-sm", children: error }) })) : null, !error && rows.length === 0 && !loading ? (_jsx(Card, { children: _jsx(CardContent, { className: "pt-4 text-muted-foreground text-sm", children: messages.empty }) })) : null, rows.length > 0 ? (_jsx("div", { className: "overflow-hidden rounded-md border", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { className: "bg-muted/40 text-left text-xs uppercase", children: _jsxs("tr", { children: [_jsx("th", { className: "px-3 py-2 font-medium", children: messages.workflowColumn }), _jsx("th", { className: "px-3 py-2 font-medium", children: messages.scheduleColumn }), _jsx("th", { className: "px-3 py-2 font-medium", children: messages.nextRunColumn }), _jsx("th", { className: "px-3 py-2 font-medium", children: messages.lastRunColumn }), _jsx("th", { className: "px-3 py-2 font-medium", children: messages.statusColumn }), onTriggerNow ? (_jsx("th", { className: "px-3 py-2 font-medium", children: messages.actionsColumn })) : null] }) }), _jsx("tbody", { children: rows.map((row) => (_jsx(ScheduleRow, { row: row, lastRun: lastRuns[row.workflowId] ?? null, triggering: !!triggering[row.scheduleId], onTriggerNow: onTriggerNow ? () => void triggerRow(row) : undefined, envFlagDisabled: showEnvFlag && !envFlagOn, rootMessages: rootMessages }, row.scheduleId))) })] }) })) : null] })] }));
+                                : "text-destructive"}`, children: triggerNotice.text }) })) : null, error ? (_jsx(Card, { className: "border-destructive/40", children: _jsx(CardContent, { className: "pt-4 text-destructive text-sm", children: error }) })) : null, !error && rows.length === 0 && !loading ? (_jsx(Card, { children: _jsx(CardContent, { className: "pt-4 text-muted-foreground text-sm", children: messages.empty }) })) : null, rows.length > 0 ? (_jsx("div", { className: "overflow-hidden rounded-md border", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { className: "bg-muted/40 text-left text-xs uppercase", children: _jsxs("tr", { children: [_jsx("th", { className: "px-3 py-2 font-medium", children: messages.workflowColumn }), _jsx("th", { className: "px-3 py-2 font-medium", children: messages.scheduleColumn }), _jsx("th", { className: "px-3 py-2 font-medium", children: messages.nextRunColumn }), _jsx("th", { className: "px-3 py-2 font-medium", children: messages.lastRunColumn }), _jsx("th", { className: "px-3 py-2 font-medium", children: messages.statusColumn }), onTriggerNow ? (_jsx("th", { className: "px-3 py-2 font-medium", children: messages.actionsColumn })) : null] }) }), _jsx("tbody", { children: rows.map((row) => (_jsx(ScheduleRow, { row: row, lastRun: lastRuns[row.workflowId] ?? null, triggering: !!triggering[row.scheduleId], onTriggerNow: onTriggerNow ? () => void triggerRow(row) : undefined, envFlagDisabled: showEnvFlag && !envFlagOn, rootMessages: rootMessages, locale: locale }, row.scheduleId))) })] }) })) : null] })] }));
 }
-function ScheduleRow({ row, lastRun, triggering, onTriggerNow, envFlagDisabled, rootMessages, }) {
+function ScheduleRow({ row, lastRun, triggering, onTriggerNow, envFlagDisabled, rootMessages, locale, }) {
     const messages = rootMessages.schedules;
-    return (_jsxs("tr", { className: "border-t", children: [_jsx("td", { className: "px-3 py-2 font-mono text-xs", children: row.workflowId }), _jsx("td", { className: "px-3 py-2 font-mono text-xs", children: formatScheduleDecl(row.schedule, messages) }), _jsx("td", { className: "px-3 py-2 text-xs text-muted-foreground", children: formatNextRun(row, messages, rootMessages) }), _jsx("td", { className: "px-3 py-2 text-xs", children: formatLastRun(lastRun, row, messages, rootMessages) }), _jsx("td", { className: "px-3 py-2", children: _jsx(StatusPill, { row: row, envFlagDisabled: envFlagDisabled, messages: messages }) }), onTriggerNow ? (_jsx("td", { className: "px-3 py-2", children: _jsx(Button, { type: "button", size: "sm", variant: "outline", onClick: onTriggerNow, disabled: triggering, children: triggering ? messages.triggering : messages.triggerNow }) })) : null] }));
+    return (_jsxs("tr", { className: "border-t", children: [_jsx("td", { className: "px-3 py-2 font-mono text-xs", children: row.workflowId }), _jsx("td", { className: "px-3 py-2 font-mono text-xs", children: formatScheduleDecl(row.schedule, messages) }), _jsx("td", { className: "px-3 py-2 text-xs text-muted-foreground", children: formatNextRun(row, messages, rootMessages, locale) }), _jsx("td", { className: "px-3 py-2 text-xs", children: formatLastRun(lastRun, row, messages, rootMessages, locale) }), _jsx("td", { className: "px-3 py-2", children: _jsx(StatusPill, { row: row, envFlagDisabled: envFlagDisabled, messages: messages }) }), onTriggerNow ? (_jsx("td", { className: "px-3 py-2", children: _jsx(Button, { type: "button", size: "sm", variant: "outline", onClick: onTriggerNow, disabled: triggering, children: triggering ? messages.triggering : messages.triggerNow }) })) : null] }));
 }
 function StatusPill({ row, envFlagDisabled, messages, }) {
     if (envFlagDisabled) {
@@ -103,29 +103,29 @@ function formatScheduleDecl(decl, messages) {
         return messages.at(decl.at);
     return messages.eventDriven;
 }
-function formatNextRun(row, messages, rootMessages) {
+function formatNextRun(row, messages, rootMessages, locale) {
     if (!row.enabled || row.nextRunAt === null)
         return messages.notScheduled;
     const delta = row.nextRunAt - Date.now();
-    const relative = formatRelative(new Date(row.nextRunAt).toISOString(), rootMessages);
+    const relative = formatRelative(new Date(row.nextRunAt).toISOString(), rootMessages, locale);
     return delta >= 0 ? messages.inFuture(relative) : messages.inPast(relative);
 }
-function formatLastRun(lastRun, row, messages, rootMessages) {
+function formatLastRun(lastRun, row, messages, rootMessages, locale) {
     if (lastRun) {
-        const relative = formatRelative(lastRun.startedAt, rootMessages);
+        const relative = formatRelative(lastRun.startedAt, rootMessages, locale);
         const label = lastRunLabel(lastRun.status, relative, messages);
         return (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx(StatusIcon, { status: lastRun.status }), label] }));
     }
     if (row.lastError && row.lastFireAt !== undefined && row.lastFireAt !== null) {
-        const relative = formatRelative(new Date(row.lastFireAt).toISOString(), rootMessages);
+        const relative = formatRelative(new Date(row.lastFireAt).toISOString(), rootMessages, locale);
         return (_jsxs("span", { className: "inline-flex items-center gap-1.5", title: row.lastError, children: [_jsx(StatusIcon, { status: "failed" }), messages.lastRunFailed(relative)] }));
     }
     if (row.lastSuccessfulRunAt !== undefined && row.lastSuccessfulRunAt !== null) {
-        const relative = formatRelative(new Date(row.lastSuccessfulRunAt).toISOString(), rootMessages);
+        const relative = formatRelative(new Date(row.lastSuccessfulRunAt).toISOString(), rootMessages, locale);
         return (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx(StatusIcon, { status: "succeeded" }), messages.lastRunSucceeded(relative)] }));
     }
     if (row.lastFireAt !== undefined && row.lastFireAt !== null) {
-        const relative = formatRelative(new Date(row.lastFireAt).toISOString(), rootMessages);
+        const relative = formatRelative(new Date(row.lastFireAt).toISOString(), rootMessages, locale);
         return (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx(CalendarClock, { className: "h-3.5 w-3.5 text-muted-foreground", "aria-hidden": "true" }), messages.lastFireRecorded(relative)] }));
     }
     return _jsx("span", { className: "text-muted-foreground", children: messages.lastRunNone });

package/dist/i18n/provider.d.ts

@@ -14,9 +14,10 @@ export declare function getWorkflowRunsUiI18n({ locale, overrides, }: {
     locale?: string | null | undefined;
     overrides?: WorkflowRunsUiMessageOverrides | null;
 }): PackageI18nValue<WorkflowRunsUiMessages>;
-export declare function WorkflowRunsUiMessagesProvider({ children, locale, overrides, }: {
+export declare function WorkflowRunsUiMessagesProvider({ children, locale, timeZone, overrides, }: {
     children: ReactNode;
     locale: string | null | undefined;
+    timeZone?: string | null;
     overrides?: WorkflowRunsUiMessageOverrides | null;
 }): import("react").JSX.Element;
 export declare const useWorkflowRunsUiI18n: () => PackageI18nValue<WorkflowRunsUiMessages>;

package/dist/i18n/provider.js

@@ -31,8 +31,8 @@ export function getWorkflowRunsUiI18n({ locale, overrides, }) {
         ...createLocaleFormatters(resolvedLocale),
     };
 }
-export function WorkflowRunsUiMessagesProvider({ children, locale, overrides, }) {
-    return (_jsx(workflowRunsUiContext.ResolvedMessagesProvider, { definitions: workflowRunsUiMessageDefinitions, fallbackLocale: fallbackLocale, locale: locale, overrides: overrides, children: children }));
+export function WorkflowRunsUiMessagesProvider({ children, locale, timeZone, overrides, }) {
+    return (_jsx(workflowRunsUiContext.ResolvedMessagesProvider, { definitions: workflowRunsUiMessageDefinitions, fallbackLocale: fallbackLocale, locale: locale, timeZone: timeZone, overrides: overrides, children: children }));
 }
 export const useWorkflowRunsUiI18n = workflowRunsUiContext.useI18n;
 export const useWorkflowRunsUiMessages = workflowRunsUiContext.useMessages;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@voyant-travel/workflows-react",
-  "version": "0.121.0",
+  "version": "0.122.1",
   "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": {
@@ -66,9 +66,9 @@
     }
   },
   "dependencies": {
-    "@voyant-travel/i18n": "^0.111.1",
-    "@voyant-travel/workflows": "^0.121.0",
-    "@voyant-travel/react": "^0.104.2"
+    "@voyant-travel/i18n": "^0.111.3",
+    "@voyant-travel/react": "^0.104.2",
+    "@voyant-travel/workflows": "^0.122.1"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.0.0",
@@ -94,7 +94,7 @@
     "react-dom": "^19.2.7",
     "typescript": "^6.0.3",
     "vitest": "^4.1.9",
-    "@voyant-travel/i18n": "^0.111.1",
+    "@voyant-travel/i18n": "^0.111.3",
     "@voyant-travel/react": "^0.104.2",
     "@voyant-travel/ui": "^0.109.2",
     "@voyant-travel/voyant-typescript-config": "^0.1.0"

package/src/components/common.tsx

@@ -156,10 +156,14 @@ export function PayloadBlock({
   )
 }
 
-export function formatRelative(iso: string, messages: WorkflowRunsUiMessages): string {
+export function formatRelative(
+  iso: string,
+  messages: WorkflowRunsUiMessages,
+  locale: string,
+): 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" })
+  const formatter = new Intl.RelativeTimeFormat(locale, { 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")

package/src/components/workflow-run-detail-page.tsx

@@ -5,7 +5,10 @@ import { Card, CardContent, CardHeader, CardTitle } from "@voyant-travel/ui/comp
 import { ChevronDown, ChevronRight, Link2 } from "lucide-react"
 import { useEffect, useMemo, useState } from "react"
 
-import { useWorkflowRunsUiMessagesOrDefault } from "../i18n/index.js"
+import {
+  useWorkflowRunsUiI18nOrDefault,
+  useWorkflowRunsUiMessagesOrDefault,
+} from "../i18n/index.js"
 import type {
   WorkflowRun,
   WorkflowRunErrorPayload,
@@ -102,7 +105,7 @@ export function WorkflowRunDetailPage({
 }
 
 function RunHeaderCard({ run, onOpenRun }: { run: WorkflowRun; onOpenRun?: (id: string) => void }) {
-  const messages = useWorkflowRunsUiMessagesOrDefault()
+  const { formatDateTime, messages } = useWorkflowRunsUiI18nOrDefault()
   return (
     <Card>
       <CardHeader className="space-y-3 pb-4">
@@ -124,12 +127,12 @@ function RunHeaderCard({ run, onOpenRun }: { run: WorkflowRun; onOpenRun?: (id:
         </div>
         <div className="text-muted-foreground text-sm">
           <span>
-            {messages.detail.started} {new Date(run.startedAt).toLocaleString()}
+            {messages.detail.started} {formatDateTime(run.startedAt)}
           </span>
           {run.completedAt ? (
             <span>
               {" · "}
-              {messages.detail.finished} {new Date(run.completedAt).toLocaleString()}
+              {messages.detail.finished} {formatDateTime(run.completedAt)}
             </span>
           ) : null}
         </div>
@@ -217,7 +220,7 @@ function RerunsListCard({
   reruns: WorkflowRun[]
   onOpenRun?: (id: string) => void
 }) {
-  const messages = useWorkflowRunsUiMessagesOrDefault()
+  const { locale, messages } = useWorkflowRunsUiI18nOrDefault()
   return (
     <Card>
       <CardHeader className="pb-3">
@@ -245,7 +248,7 @@ function RerunsListCard({
                   </Badge>
                 ) : null}
                 <span className="ml-auto whitespace-nowrap text-muted-foreground text-xs">
-                  {formatRelative(run.startedAt, messages)}
+                  {formatRelative(run.startedAt, messages, locale)}
                 </span>
               </button>
             </li>

package/src/components/workflow-runs-page.tsx

@@ -5,7 +5,10 @@ import { Card, CardContent } from "@voyant-travel/ui/components/card"
 import { Clock, Workflow } from "lucide-react"
 import { useEffect, useMemo, useState } from "react"
 
-import { useWorkflowRunsUiMessagesOrDefault } from "../i18n/index.js"
+import {
+  useWorkflowRunsUiI18nOrDefault,
+  useWorkflowRunsUiMessagesOrDefault,
+} from "../i18n/index.js"
 import type {
   ListWorkflowRunsQuery,
   WorkflowRun,
@@ -241,7 +244,7 @@ function RunListItem({
   onToggleStatus: (status: WorkflowRunStatus) => void
   onToggleTag: (tag: string) => void
 }) {
-  const messages = useWorkflowRunsUiMessagesOrDefault()
+  const { locale, messages } = useWorkflowRunsUiI18nOrDefault()
   return (
     <div
       className={`rounded-md border bg-card p-3 text-sm transition-colors hover:bg-muted/50 ${
@@ -257,7 +260,7 @@ function RunListItem({
           <StatusIcon status={run.status} />
           <span className="truncate font-medium">{run.workflowName}</span>
           <span className="ml-auto whitespace-nowrap text-muted-foreground text-xs">
-            {formatRelative(run.startedAt, messages)}
+            {formatRelative(run.startedAt, messages, locale)}
           </span>
         </button>
         <button

package/src/components/workflow-schedules-page.tsx

@@ -6,7 +6,7 @@ import { Card, CardContent } from "@voyant-travel/ui/components/card"
 import { AlertTriangle, CalendarClock, RefreshCw } from "lucide-react"
 import { useCallback, useEffect, useMemo, useState } from "react"
 
-import { useWorkflowRunsUiMessagesOrDefault, type WorkflowRunsUiMessages } from "../i18n/index.js"
+import { useWorkflowRunsUiI18nOrDefault, type WorkflowRunsUiMessages } from "../i18n/index.js"
 import type {
   ListWorkflowSchedulesResponse,
   WorkflowScheduleDecl,
@@ -44,7 +44,7 @@ export function WorkflowSchedulesPage({
   pollIntervalMs = 30_000,
   className,
 }: WorkflowSchedulesPageProps) {
-  const rootMessages = useWorkflowRunsUiMessagesOrDefault()
+  const { locale, messages: rootMessages } = useWorkflowRunsUiI18nOrDefault()
   const messages = rootMessages.schedules
   const [response, setResponse] = useState<ListWorkflowSchedulesResponse | null>(null)
   const [lastRuns, setLastRuns] = useState<Record<string, WorkflowRun | null>>({})
@@ -220,6 +220,7 @@ export function WorkflowSchedulesPage({
                     onTriggerNow={onTriggerNow ? () => void triggerRow(row) : undefined}
                     envFlagDisabled={showEnvFlag && !envFlagOn}
                     rootMessages={rootMessages}
+                    locale={locale}
                   />
                 ))}
               </tbody>
@@ -238,6 +239,7 @@ function ScheduleRow({
   onTriggerNow,
   envFlagDisabled,
   rootMessages,
+  locale,
 }: {
   row: WorkflowScheduleSummary
   lastRun: WorkflowRun | null
@@ -245,6 +247,7 @@ function ScheduleRow({
   onTriggerNow?: () => void
   envFlagDisabled: boolean
   rootMessages: WorkflowRunsUiMessages
+  locale: string
 }) {
   const messages = rootMessages.schedules
 
@@ -253,9 +256,11 @@ function ScheduleRow({
       <td className="px-3 py-2 font-mono text-xs">{row.workflowId}</td>
       <td className="px-3 py-2 font-mono text-xs">{formatScheduleDecl(row.schedule, messages)}</td>
       <td className="px-3 py-2 text-xs text-muted-foreground">
-        {formatNextRun(row, messages, rootMessages)}
+        {formatNextRun(row, messages, rootMessages, locale)}
+      </td>
+      <td className="px-3 py-2 text-xs">
+        {formatLastRun(lastRun, row, messages, rootMessages, locale)}
       </td>
-      <td className="px-3 py-2 text-xs">{formatLastRun(lastRun, row, messages, rootMessages)}</td>
       <td className="px-3 py-2">
         <StatusPill row={row} envFlagDisabled={envFlagDisabled} messages={messages} />
       </td>
@@ -327,10 +332,11 @@ function formatNextRun(
   row: WorkflowScheduleSummary,
   messages: SchedulesMessages,
   rootMessages: WorkflowRunsUiMessages,
+  locale: string,
 ): string {
   if (!row.enabled || row.nextRunAt === null) return messages.notScheduled
   const delta = row.nextRunAt - Date.now()
-  const relative = formatRelative(new Date(row.nextRunAt).toISOString(), rootMessages)
+  const relative = formatRelative(new Date(row.nextRunAt).toISOString(), rootMessages, locale)
   return delta >= 0 ? messages.inFuture(relative) : messages.inPast(relative)
 }
 
@@ -339,9 +345,10 @@ function formatLastRun(
   row: WorkflowScheduleSummary,
   messages: SchedulesMessages,
   rootMessages: WorkflowRunsUiMessages,
+  locale: string,
 ) {
   if (lastRun) {
-    const relative = formatRelative(lastRun.startedAt, rootMessages)
+    const relative = formatRelative(lastRun.startedAt, rootMessages, locale)
     const label = lastRunLabel(lastRun.status, relative, messages)
     return (
       <span className="inline-flex items-center gap-1.5">
@@ -351,7 +358,7 @@ function formatLastRun(
     )
   }
   if (row.lastError && row.lastFireAt !== undefined && row.lastFireAt !== null) {
-    const relative = formatRelative(new Date(row.lastFireAt).toISOString(), rootMessages)
+    const relative = formatRelative(new Date(row.lastFireAt).toISOString(), rootMessages, locale)
     return (
       <span className="inline-flex items-center gap-1.5" title={row.lastError}>
         <StatusIcon status="failed" />
@@ -360,7 +367,11 @@ function formatLastRun(
     )
   }
   if (row.lastSuccessfulRunAt !== undefined && row.lastSuccessfulRunAt !== null) {
-    const relative = formatRelative(new Date(row.lastSuccessfulRunAt).toISOString(), rootMessages)
+    const relative = formatRelative(
+      new Date(row.lastSuccessfulRunAt).toISOString(),
+      rootMessages,
+      locale,
+    )
     return (
       <span className="inline-flex items-center gap-1.5">
         <StatusIcon status="succeeded" />
@@ -369,7 +380,7 @@ function formatLastRun(
     )
   }
   if (row.lastFireAt !== undefined && row.lastFireAt !== null) {
-    const relative = formatRelative(new Date(row.lastFireAt).toISOString(), rootMessages)
+    const relative = formatRelative(new Date(row.lastFireAt).toISOString(), rootMessages, locale)
     return (
       <span className="inline-flex items-center gap-1.5">
         <CalendarClock className="h-3.5 w-3.5 text-muted-foreground" aria-hidden="true" />

package/src/i18n/provider.tsx

@@ -66,10 +66,12 @@ export function getWorkflowRunsUiI18n({
 export function WorkflowRunsUiMessagesProvider({
   children,
   locale,
+  timeZone,
   overrides,
 }: {
   children: ReactNode
   locale: string | null | undefined
+  timeZone?: string | null
   overrides?: WorkflowRunsUiMessageOverrides | null
 }) {
   return (
@@ -77,6 +79,7 @@ export function WorkflowRunsUiMessagesProvider({
       definitions={workflowRunsUiMessageDefinitions}
       fallbackLocale={fallbackLocale}
       locale={locale}
+      timeZone={timeZone}
       overrides={overrides}
     >
       {children}