@voyant-travel/workflows-react 0.107.10

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

@@ -0,0 +1,96 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { 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, }) {
+    const messages = useWorkflowRunsUiMessagesOrDefault();
+    const [run, setRun] = useState(null);
+    const [steps, setSteps] = useState([]);
+    const [error, setError] = useState(null);
+    const [reruns, setReruns] = useState([]);
+    useEffect(() => {
+        let cancelled = false;
+        const refresh = async () => {
+            try {
+                const [detail, children] = await Promise.all([
+                    api.getRun(runId),
+                    api.listRuns({ parentRunId: runId, limit: 20 }).catch(() => ({ data: [] })),
+                ]);
+                if (cancelled)
+                    return;
+                setRun(detail.data.run);
+                setSteps(detail.data.steps);
+                setReruns(children.data);
+                setError(null);
+            }
+            catch (err) {
+                if (!cancelled)
+                    setError(err instanceof Error ? err.message : String(err));
+            }
+        };
+        void refresh();
+        const interval = setInterval(() => void refresh(), pollIntervalMs);
+        return () => {
+            cancelled = true;
+            clearInterval(interval);
+        };
+    }, [api, pollIntervalMs, runId]);
+    const duplicateRunError = useMemo(() => {
+        if (!run?.error)
+            return false;
+        return steps.some((step) => step.error?.message === run.error?.message);
+    }, [run?.error, steps]);
+    if (error)
+        return _jsx(ErrorMessage, { message: error });
+    if (!run) {
+        return (_jsx(Card, { className: className, children: _jsx(CardContent, { className: "pt-4 text-muted-foreground text-sm", children: messages.page.loading }) }));
+    }
+    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] })] }));
+}
+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] }) })] }));
+}
+function DefRow({ label, value, mono }) {
+    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: mono ? "min-w-0 truncate font-mono text-xs" : "min-w-0 truncate text-sm" // i18n-literal-ok: CSS classes
+                , 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))) }) })] }));
+}
+function StepsCard({ steps }) {
+    const messages = useWorkflowRunsUiMessagesOrDefault();
+    return (_jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-3", children: _jsx(CardTitle, { className: "text-sm", children: messages.detail.steps }) }), _jsx(CardContent, { children: steps.length === 0 ? (_jsx("p", { className: "text-muted-foreground text-sm", children: messages.detail.noSteps })) : (_jsx("ol", { className: "space-y-2", children: steps.map((step) => (_jsx(StepRow, { step: step }, step.id))) })) })] }));
+}
+function StepRow({ step }) {
+    const messages = useWorkflowRunsUiMessagesOrDefault();
+    const [open, setOpen] = useState(step.status === "failed");
+    const hasDetail = step.output !== null || step.error !== null;
+    return (_jsxs("li", { className: "rounded-md border", children: [_jsxs("button", { type: "button", className: "flex w-full items-center gap-2 p-3 text-left text-sm hover:bg-muted/30", onClick: () => hasDetail && setOpen((prev) => !prev), disabled: !hasDetail, children: [_jsx(StepStatusIcon, { status: step.status }), _jsx("span", { className: "font-medium", children: `${step.sequence}. ${step.stepName}` }), step.error ? (_jsx("span", { className: "truncate text-destructive text-xs", children: step.error.message })) : null, _jsx("span", { className: "ml-auto whitespace-nowrap text-muted-foreground text-xs", children: step.durationMs != null
+                            ? formatDuration(step.durationMs)
+                            : messages.detail.durationUnavailable }), hasDetail ? (open ? (_jsx(ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" })) : (_jsx(ChevronRight, { className: "h-3.5 w-3.5 text-muted-foreground" }))) : null] }), open && hasDetail ? (_jsxs("div", { className: "space-y-3 border-t p-3", children: [step.error ? _jsx(ErrorBlock, { error: step.error }) : null, step.output ? (_jsx(PayloadBlock, { title: messages.detail.output, value: step.output, messages: messages })) : null] })) : null] }));
+}
+function PayloadCard({ title, value }) {
+    const messages = useWorkflowRunsUiMessagesOrDefault();
+    return (_jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-3", children: _jsx(CardTitle, { className: "text-sm", children: title }) }), _jsx(CardContent, { children: _jsx(PayloadBlock, { title: title, value: value, messages: messages, hideTitle: true }) })] }));
+}
+function ErrorCard({ title, error }) {
+    return (_jsxs(Card, { className: "border-destructive/40", children: [_jsx(CardHeader, { className: "pb-3", children: _jsx(CardTitle, { className: "text-destructive text-sm", children: title }) }), _jsx(CardContent, { children: _jsx(ErrorBlock, { error: error }) })] }));
+}
+function ErrorBlock({ error }) {
+    const messages = useWorkflowRunsUiMessagesOrDefault();
+    const [stackOpen, setStackOpen] = useState(false);
+    return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "rounded border border-destructive/30 bg-destructive/5 p-3 text-sm", children: [_jsx("div", { className: "font-medium text-destructive", children: error.message }), error.code || error.stepName ? (_jsxs("div", { className: "mt-1 flex flex-wrap gap-2 text-muted-foreground text-xs", children: [error.code ? _jsx("span", { children: `${messages.detail.code} ${error.code}` }) : null, error.stepName ? _jsx("span", { children: `${messages.detail.step} ${error.stepName}` }) : null] })) : null] }), error.stack ? (_jsxs("details", { open: stackOpen, onToggle: (event) => setStackOpen(event.target.open), className: "rounded border bg-muted/30", children: [_jsxs("summary", { className: "flex cursor-pointer select-none items-center gap-1.5 px-3 py-2 text-muted-foreground text-xs hover:text-foreground", children: [stackOpen ? (_jsx(ChevronDown, { className: "h-3.5 w-3.5" })) : (_jsx(ChevronRight, { className: "h-3.5 w-3.5" })), messages.detail.stackTrace] }), _jsx("pre", { className: "overflow-x-auto whitespace-pre p-3 pt-0 font-mono text-[11px] leading-relaxed text-muted-foreground", children: error.stack })] })) : null] }));
+}
+function ErrorMessage({ message }) {
+    return (_jsx(Card, { className: "border-destructive/40", children: _jsx(CardContent, { className: "pt-4 text-destructive text-sm", children: message }) }));
+}

package/dist/components/workflow-runs-filters.d.ts

@@ -0,0 +1,32 @@
+import type { ListWorkflowRunsQuery, WorkflowRun, WorkflowRunStatus } from "../types.js";
+export declare const STATUS_OPTIONS: WorkflowRunStatus[];
+export declare const TIME_RANGES: readonly ["15m", "1h", "24h", "7d", "all"];
+export type TimeRange = (typeof TIME_RANGES)[number];
+export type WorkflowOption = {
+    name: string;
+    count: number;
+};
+export declare function WorkflowRunsFilters({ filters, workflowOptions, tagOptions, statusFilters, tagFilters, searchQuery, timeRange, onChange, onToggleStatus, onAddTagFilter, onRemoveTagFilter, onSearchChange, onTimeRangeChange, onClear, }: {
+    filters: ListWorkflowRunsQuery;
+    workflowOptions: WorkflowOption[];
+    tagOptions: string[];
+    statusFilters: WorkflowRunStatus[];
+    tagFilters: string[];
+    searchQuery: string;
+    timeRange: TimeRange;
+    onChange: (next: ListWorkflowRunsQuery) => void;
+    onToggleStatus: (status: WorkflowRunStatus) => void;
+    onAddTagFilter: (tag: string) => void;
+    onRemoveTagFilter: (tag: string) => void;
+    onSearchChange: (value: string) => void;
+    onTimeRangeChange: (value: TimeRange) => void;
+    onClear: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function buildFilterOptions(runs: WorkflowRun[], selectedWorkflow?: string): {
+    workflows: {
+        name: string;
+        count: number;
+    }[];
+    tags: string[];
+};
+//# sourceMappingURL=workflow-runs-filters.d.ts.map

package/dist/components/workflow-runs-filters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"workflow-runs-filters.d.ts","sourceRoot":"","sources":["../../src/components/workflow-runs-filters.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,qBAAqB,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAA;AAGxF,eAAO,MAAM,cAAc,EAAE,iBAAiB,EAAoD,CAAA;AAClG,eAAO,MAAM,WAAW,4CAA6C,CAAA;AAErE,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAEpD,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,wBAAgB,mBAAmB,CAAC,EAClC,OAAO,EACP,eAAe,EACf,UAAU,EACV,aAAa,EACb,UAAU,EACV,WAAW,EACX,SAAS,EACT,QAAQ,EACR,cAAc,EACd,cAAc,EACd,iBAAiB,EACjB,cAAc,EACd,iBAAiB,EACjB,OAAO,GACR,EAAE;IACD,OAAO,EAAE,qBAAqB,CAAA;IAC9B,eAAe,EAAE,cAAc,EAAE,CAAA;IACjC,UAAU,EAAE,MAAM,EAAE,CAAA;IACpB,aAAa,EAAE,iBAAiB,EAAE,CAAA;IAClC,UAAU,EAAE,MAAM,EAAE,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,SAAS,CAAA;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,qBAAqB,KAAK,IAAI,CAAA;IAC/C,cAAc,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAA;IACnD,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,iBAAiB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,iBAAiB,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAA;IAC7C,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,2CA0GA;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,WAAW,EAAE,EAAE,gBAAgB,CAAC,EAAE,MAAM;;;;;;EAkBhF"}

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

@@ -0,0 +1,97 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@voyant-travel/ui/components/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@voyant-travel/ui/components/card";
+import { Combobox, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, } from "@voyant-travel/ui/components/combobox";
+import { Input } from "@voyant-travel/ui/components/input";
+import { CheckCircle2, Clock, Search, X, XCircle } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useWorkflowRunsUiMessagesOrDefault } from "../i18n/index.js";
+import { TagChip } from "./common.js";
+export const STATUS_OPTIONS = ["running", "failed", "succeeded", "cancelled"];
+export const TIME_RANGES = ["15m", "1h", "24h", "7d", "all"];
+export function WorkflowRunsFilters({ filters, workflowOptions, tagOptions, statusFilters, tagFilters, searchQuery, timeRange, onChange, onToggleStatus, onAddTagFilter, onRemoveTagFilter, onSearchChange, onTimeRangeChange, onClear, }) {
+    const messages = useWorkflowRunsUiMessagesOrDefault();
+    const searchInputRef = useRef(null);
+    useEffect(() => {
+        const onKeyDown = (event) => {
+            if (!(event.metaKey || event.ctrlKey) || event.key.toLowerCase() !== "k")
+                return;
+            event.preventDefault();
+            searchInputRef.current?.focus();
+        };
+        globalThis.addEventListener("keydown", onKeyDown);
+        return () => globalThis.removeEventListener("keydown", onKeyDown);
+    }, []);
+    return (_jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-3", children: _jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx(CardTitle, { className: "text-sm", children: messages.page.filterTitle }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: onClear, children: messages.page.clearFilters })] }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsx(Field, { label: messages.page.searchLabel, children: _jsxs("div", { className: "relative", children: [_jsx(Search, { className: "absolute top-1/2 left-2.5 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { ref: searchInputRef, className: "pl-8", placeholder: messages.page.searchPlaceholder, value: searchQuery, onChange: (event) => onSearchChange(event.target.value) })] }) }), _jsx(Field, { label: messages.page.workflowLabel, children: _jsx(WorkflowCombobox, { value: filters.workflowName ?? null, options: workflowOptions, placeholder: messages.page.workflowPlaceholder, emptyLabel: messages.page.workflowEmpty, onChange: (workflowName) => onChange({ ...filters, workflowName: workflowName ?? undefined }) }) }), _jsx(Field, { label: messages.page.statusLabel, children: _jsxs("div", { className: "flex flex-wrap gap-1.5", children: [_jsx(Button, { type: "button", variant: statusFilters.length === 0 ? "default" : "outline", size: "sm", onClick: () => {
+                                        for (const status of statusFilters)
+                                            onToggleStatus(status);
+                                    }, children: messages.page.anyStatus }), STATUS_OPTIONS.map((status) => (_jsxs(Button, { type: "button", variant: statusFilters.includes(status) ? "default" : "outline", size: "sm", onClick: () => onToggleStatus(status), "aria-pressed": statusFilters.includes(status), children: [_jsx(StatusGlyph, { status: status }), messages.status[status]] }, status)))] }) }), _jsx(Field, { label: messages.page.timeRangeLabel, children: _jsx("div", { className: "flex flex-wrap gap-1.5", children: TIME_RANGES.map((range) => (_jsx(Button, { type: "button", variant: timeRange === range ? "default" : "outline", size: "sm", onClick: () => onTimeRangeChange(range), "aria-pressed": timeRange === range, children: messages.page.timeRanges[range] }, range))) }) }), _jsx(Field, { label: messages.page.tagLabel, children: _jsx(TagFilterBuilder, { tagOptions: tagOptions, tagFilters: tagFilters, placeholder: messages.page.tagPlaceholder, emptyLabel: messages.page.tagEmpty, addLabel: messages.page.addTag, removeLabel: messages.page.removeTag, onAdd: onAddTagFilter, onRemove: onRemoveTagFilter }) })] })] }));
+}
+export function buildFilterOptions(runs, selectedWorkflow) {
+    const workflowCounts = new Map();
+    const tags = new Set();
+    for (const run of runs) {
+        workflowCounts.set(run.workflowName, (workflowCounts.get(run.workflowName) ?? 0) + 1);
+        for (const tag of run.tags)
+            tags.add(tag);
+    }
+    if (selectedWorkflow && !workflowCounts.has(selectedWorkflow)) {
+        workflowCounts.set(selectedWorkflow, 0);
+    }
+    return {
+        workflows: Array.from(workflowCounts.entries())
+            .map(([name, count]) => ({ name, count }))
+            .sort((a, b) => b.count - a.count || a.name.localeCompare(b.name)),
+        tags: Array.from(tags).sort((a, b) => a.localeCompare(b)),
+    };
+}
+function WorkflowCombobox({ value, options, placeholder, emptyLabel, onChange, }) {
+    const itemMap = useMemo(() => new Map(options.map((item) => [item.name, item])), [options]);
+    const selectedLabel = value ?? "";
+    const [inputValue, setInputValue] = useState(selectedLabel);
+    useEffect(() => {
+        setInputValue(selectedLabel);
+    }, [selectedLabel]);
+    return (_jsxs(Combobox, { items: options.map((item) => item.name), value: value, inputValue: inputValue, autoHighlight: true, itemToStringValue: (item) => String(item), onInputValueChange: (next) => {
+            setInputValue(next);
+            if (!next)
+                onChange(null);
+        }, onValueChange: (next) => {
+            const nextValue = next ?? null;
+            onChange(nextValue);
+            setInputValue(nextValue ?? "");
+        }, children: [_jsx(ComboboxInput, { placeholder: placeholder, showClear: !!value, className: "w-full" }), _jsxs(ComboboxContent, { children: [_jsx(ComboboxEmpty, { children: emptyLabel }), _jsx(ComboboxList, { children: _jsx(ComboboxCollection, { children: (name) => {
+                                const option = itemMap.get(String(name));
+                                if (!option)
+                                    return null;
+                                return (_jsx(ComboboxItem, { value: option.name, children: _jsxs("div", { className: "flex min-w-0 flex-1 items-center justify-between gap-3", children: [_jsx("span", { className: "truncate font-medium", children: option.name }), _jsx("span", { className: "text-muted-foreground text-xs", children: option.count })] }) }, option.name));
+                            } }) })] })] }));
+}
+function TagFilterBuilder({ tagOptions, tagFilters, placeholder, emptyLabel, addLabel, removeLabel, onAdd, onRemove, }) {
+    const [inputValue, setInputValue] = useState("");
+    const submit = () => {
+        const next = inputValue.trim();
+        if (!next)
+            return;
+        onAdd(next);
+        setInputValue("");
+    };
+    return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "grid grid-cols-[1fr_auto] gap-2", children: [_jsxs(Combobox, { items: tagOptions, value: null, inputValue: inputValue, autoHighlight: true, itemToStringValue: (item) => String(item), onInputValueChange: setInputValue, onValueChange: (next) => {
+                            const tag = next ?? "";
+                            if (tag) {
+                                onAdd(tag);
+                                setInputValue("");
+                            }
+                        }, children: [_jsx(ComboboxInput, { placeholder: placeholder, className: "w-full" }), _jsxs(ComboboxContent, { children: [_jsx(ComboboxEmpty, { children: emptyLabel }), _jsx(ComboboxList, { children: _jsx(ComboboxCollection, { children: (tag) => (_jsx(ComboboxItem, { value: String(tag), children: _jsx(TagChip, { tag: String(tag) }) }, String(tag))) }) })] })] }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: submit, children: addLabel })] }), tagFilters.length > 0 ? (_jsx("div", { className: "flex flex-wrap gap-1.5", children: tagFilters.map((tag) => (_jsxs("button", { type: "button", className: "inline-flex items-center gap-1 rounded-full border px-2 py-0.5 font-mono text-[10px] hover:bg-muted", onClick: () => onRemove(tag), "aria-label": `${removeLabel}: ${tag}`, children: [_jsx(TagChip, { tag: tag }), _jsx(X, { className: "h-3 w-3", "aria-hidden": "true" })] }, tag))) })) : null] }));
+}
+function Field({ label, children }) {
+    return (_jsxs("div", { className: "space-y-1", children: [_jsx("span", { className: "text-muted-foreground text-xs", children: label }), children] }));
+}
+function StatusGlyph({ status }) {
+    if (status === "succeeded")
+        return _jsx(CheckCircle2, { "data-icon": "inline-start", "aria-hidden": "true" });
+    if (status === "failed")
+        return _jsx(XCircle, { "data-icon": "inline-start", "aria-hidden": "true" });
+    return _jsx(Clock, { "data-icon": "inline-start", "aria-hidden": "true" });
+}

package/dist/components/workflow-runs-page.d.ts

@@ -0,0 +1,12 @@
+import type { ListWorkflowRunsQuery, WorkflowRunsApi } from "../types.js";
+export interface WorkflowRunsPageProps {
+    api: WorkflowRunsApi;
+    selectedRunId?: string | null;
+    onOpenRun?: (id: string) => void;
+    initialFilters?: ListWorkflowRunsQuery;
+    pollIntervalMs?: number;
+    className?: string;
+}
+export declare function WorkflowRunsPage({ api, selectedRunId, onOpenRun, initialFilters, pollIntervalMs, className, }: WorkflowRunsPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function WorkflowRunsPageSkeleton(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=workflow-runs-page.d.ts.map

package/dist/components/workflow-runs-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"workflow-runs-page.d.ts","sourceRoot":"","sources":["../../src/components/workflow-runs-page.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EACV,qBAAqB,EAGrB,eAAe,EAChB,MAAM,aAAa,CAAA;AAKpB,MAAM,WAAW,qBAAqB;IACpC,GAAG,EAAE,eAAe,CAAA;IACpB,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,cAAc,CAAC,EAAE,qBAAqB,CAAA;IACtC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,aAAa,EACb,SAAS,EACT,cAAc,EACd,cAAqB,EACrB,SAAS,GACV,EAAE,qBAAqB,2CAuKvB;AAED,wBAAgB,wBAAwB,4CAqBvC"}

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

@@ -0,0 +1,132 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { formatDuration, formatRelative, StatusBadge, StatusIcon, TagChip } from "./common.js";
+import { WorkflowRunDetailPage } from "./workflow-run-detail-page.js";
+import { buildFilterOptions, WorkflowRunsFilters } from "./workflow-runs-filters.js";
+export function WorkflowRunsPage({ api, selectedRunId, onOpenRun, initialFilters, pollIntervalMs = 5000, className, }) {
+    const messages = useWorkflowRunsUiMessagesOrDefault();
+    const [filters, setFilters] = useState(initialFilters ?? { limit: 50 });
+    const [statusFilters, setStatusFilters] = useState(initialFilters?.status ? [initialFilters.status] : []);
+    const [tagFilters, setTagFilters] = useState(initialFilters?.tag ? [initialFilters.tag] : []);
+    const [searchQuery, setSearchQuery] = useState("");
+    const [timeRange, setTimeRange] = useState("24h");
+    const [live, setLive] = useState(false);
+    const [runs, setRuns] = useState([]);
+    const [error, setError] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [localSelectedRunId, setLocalSelectedRunId] = useState(null);
+    const activeRunId = selectedRunId !== undefined ? selectedRunId : localSelectedRunId;
+    const serverFilters = useMemo(() => ({
+        ...filters,
+        status: statusFilters.length === 1 ? statusFilters[0] : undefined,
+        tag: tagFilters.length === 1 ? tagFilters[0] : undefined,
+    }), [filters, statusFilters, tagFilters]);
+    useEffect(() => {
+        let cancelled = false;
+        const refresh = async () => {
+            if (typeof document !== "undefined" && document.hidden)
+                return;
+            setLoading(true);
+            try {
+                const res = await api.listRuns(serverFilters);
+                if (!cancelled) {
+                    setRuns(res.data);
+                    setError(null);
+                }
+            }
+            catch (err) {
+                if (!cancelled)
+                    setError(err instanceof Error ? err.message : messages.page.loadError);
+            }
+            finally {
+                if (!cancelled)
+                    setLoading(false);
+            }
+        };
+        void refresh();
+        const interval = setInterval(() => void refresh(), live ? 1000 : pollIntervalMs);
+        return () => {
+            cancelled = true;
+            clearInterval(interval);
+        };
+    }, [api, live, messages.page.loadError, pollIntervalMs, serverFilters]);
+    const filterOptions = useMemo(() => buildFilterOptions(runs, filters.workflowName), [filters.workflowName, runs]);
+    const filteredRuns = useMemo(() => filterRuns({ runs, statusFilters, tagFilters, searchQuery, timeRange }), [runs, searchQuery, statusFilters, tagFilters, timeRange]);
+    const openRun = (id) => {
+        setLocalSelectedRunId(id);
+        onOpenRun?.(id);
+    };
+    const toggleStatus = (status) => {
+        setStatusFilters((current) => current.includes(status) ? current.filter((item) => item !== status) : [...current, status]);
+    };
+    const addTagFilter = (tag) => {
+        const trimmed = tag.trim();
+        if (!trimmed)
+            return;
+        setTagFilters((current) => (current.includes(trimmed) ? current : [...current, trimmed]));
+    };
+    const removeTagFilter = (tag) => setTagFilters((current) => current.filter((item) => item !== tag));
+    return (_jsxs("div", { className: `flex min-h-screen flex-col bg-background ${className ?? ""}`, children: [_jsx("header", { className: "sticky top-0 z-10 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60", children: _jsxs("div", { className: "container mx-auto flex items-center gap-3 px-4 py-3", children: [_jsx(Workflow, { className: "h-5 w-5" }), _jsxs("div", { className: "min-w-0", children: [_jsx("h1", { className: "font-semibold text-base", children: messages.page.title }), _jsx("p", { className: "text-muted-foreground text-xs", children: messages.page.subtitle })] }), _jsxs("div", { className: "ml-auto flex items-center gap-2", children: [_jsxs(Button, { type: "button", variant: live ? "default" : "outline", size: "sm", onClick: () => setLive((value) => !value), "aria-pressed": live, children: [_jsx(Clock, { "data-icon": "inline-start", "aria-hidden": "true" }), messages.page.live] }), _jsx("span", { className: "text-muted-foreground text-xs", children: messages.page.filteredRunCount(filteredRuns.length, runs.length) })] })] }) }), _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(WorkflowRunsFilters, { filters: filters, workflowOptions: filterOptions.workflows, tagOptions: filterOptions.tags, statusFilters: statusFilters, tagFilters: tagFilters, searchQuery: searchQuery, timeRange: timeRange, onChange: setFilters, onToggleStatus: toggleStatus, onAddTagFilter: addTagFilter, onRemoveTagFilter: removeTagFilter, onSearchChange: setSearchQuery, onTimeRangeChange: setTimeRange, onClear: () => {
+                                    setFilters({ limit: filters.limit ?? 50 });
+                                    setStatusFilters([]);
+                                    setTagFilters([]);
+                                    setSearchQuery("");
+                                    setTimeRange("24h");
+                                } }), error ? (_jsx(Card, { className: "border-destructive/40", children: _jsx(CardContent, { className: "pt-4 text-destructive text-sm", children: error }) })) : null, _jsxs("div", { className: "space-y-2", children: [filteredRuns.length === 0 && !loading ? (_jsx(Card, { children: _jsx(CardContent, { className: "pt-4 text-muted-foreground text-sm", children: messages.page.empty }) })) : null, filteredRuns.map((run) => (_jsx(RunListItem, { run: run, selected: activeRunId === run.id, activeTagFilters: tagFilters, activeStatusFilters: statusFilters, onSelect: () => openRun(run.id), onToggleStatus: toggleStatus, onToggleTag: (tag) => tagFilters.includes(tag) ? removeTagFilter(tag) : addTagFilter(tag) }, run.id)))] })] }), _jsx("section", { className: "min-w-0 flex-1", children: activeRunId ? (_jsx(WorkflowRunDetailPage, { api: api, runId: activeRunId, onOpenRun: openRun })) : (_jsx(SelectPrompt, {})) })] })] }));
+}
+export function WorkflowRunsPageSkeleton() {
+    const messages = useWorkflowRunsUiMessagesOrDefault();
+    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();
+    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] }));
+}
+function SelectPrompt() {
+    const messages = useWorkflowRunsUiMessagesOrDefault();
+    return (_jsx(Card, { children: _jsx(CardContent, { className: "flex min-h-[24rem] items-center justify-center text-muted-foreground text-sm", children: messages.page.selectPrompt }) }));
+}
+function filterRuns({ runs, statusFilters, tagFilters, searchQuery, timeRange, }) {
+    const search = searchQuery.trim().toLowerCase();
+    const cutoff = rangeCutoff(timeRange);
+    return runs.filter((run) => {
+        if (statusFilters.length > 0 && !statusFilters.includes(run.status))
+            return false;
+        if (tagFilters.length > 0 && !tagFilters.every((tag) => run.tags.includes(tag)))
+            return false;
+        if (cutoff && new Date(run.startedAt).getTime() < cutoff)
+            return false;
+        if (!search)
+            return true;
+        return runSearchText(run).includes(search);
+    });
+}
+function rangeCutoff(range) {
+    if (range === "all")
+        return null;
+    const minutes = range === "15m" ? 15 : range === "1h" ? 60 : range === "24h" ? 24 * 60 : 7 * 24 * 60;
+    return Date.now() - minutes * 60_000;
+}
+function runSearchText(run) {
+    return [
+        run.id,
+        run.workflowName,
+        run.trigger,
+        run.correlationId,
+        run.status,
+        ...run.tags,
+        run.error?.message,
+        run.error?.code,
+        run.input ? JSON.stringify(run.input) : null,
+        run.result ? JSON.stringify(run.result) : null,
+    ]
+        .filter(Boolean)
+        .join(" ")
+        .toLowerCase();
+}

package/dist/components/workflow-schedules-page.d.ts

@@ -0,0 +1,21 @@
+import type { WorkflowSchedulesApi } from "../schedules-client.js";
+import type { WorkflowRunsApi } from "../types.js";
+export interface WorkflowSchedulesPageProps {
+    /** Schedules API — backed by `/api/schedules/:env`. */
+    schedulesApi: WorkflowSchedulesApi;
+    /** Optional runs API — when provided, the page joins each row with the most recent matching run. */
+    runsApi?: WorkflowRunsApi;
+    /**
+     * Optional trigger callback. When provided, each row renders a
+     * "Trigger now" button that calls this with the workflow id + the
+     * schedule's recorded `input` payload (if any).
+     */
+    onTriggerNow?: (workflowId: string, input: unknown) => Promise<void>;
+    /** Manifest environment to inspect. Defaults to "production". */
+    environment?: "production" | "preview" | "development";
+    /** Auto-refresh interval (ms). Defaults to 30s. Pass 0 to disable. */
+    pollIntervalMs?: number;
+    className?: string;
+}
+export declare function WorkflowSchedulesPage({ schedulesApi, runsApi, onTriggerNow, environment, pollIntervalMs, className, }: WorkflowSchedulesPageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=workflow-schedules-page.d.ts.map

package/dist/components/workflow-schedules-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"workflow-schedules-page.d.ts","sourceRoot":"","sources":["../../src/components/workflow-schedules-page.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAIV,oBAAoB,EACrB,MAAM,wBAAwB,CAAA;AAC/B,OAAO,KAAK,EAAkC,eAAe,EAAE,MAAM,aAAa,CAAA;AAKlF,MAAM,WAAW,0BAA0B;IACzC,uDAAuD;IACvD,YAAY,EAAE,oBAAoB,CAAA;IAClC,oGAAoG;IACpG,OAAO,CAAC,EAAE,eAAe,CAAA;IACzB;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACpE,iEAAiE;IACjE,WAAW,CAAC,EAAE,YAAY,GAAG,SAAS,GAAG,aAAa,CAAA;IACtD,sEAAsE;IACtE,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,YAAY,EACZ,OAAO,EACP,YAAY,EACZ,WAA0B,EAC1B,cAAuB,EACvB,SAAS,GACV,EAAE,0BAA0B,2CA0L5B"}

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

@@ -0,0 +1,144 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge } from "@voyant-travel/ui/components/badge";
+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 { formatRelative, StatusIcon } from "./common.js";
+export function WorkflowSchedulesPage({ schedulesApi, runsApi, onTriggerNow, environment = "production", pollIntervalMs = 30_000, className, }) {
+    const rootMessages = useWorkflowRunsUiMessagesOrDefault();
+    const messages = rootMessages.schedules;
+    const [response, setResponse] = useState(null);
+    const [lastRuns, setLastRuns] = useState({});
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [triggering, setTriggering] = useState({});
+    const [triggerNotice, setTriggerNotice] = useState(null);
+    const refresh = useCallback(async () => {
+        setLoading(true);
+        try {
+            const next = await schedulesApi.listSchedules(environment);
+            setResponse(next);
+            setError(null);
+            if (runsApi) {
+                const uniqueIds = Array.from(new Set(next.data.map((entry) => entry.workflowId)));
+                const results = await Promise.all(uniqueIds.map(async (workflowId) => {
+                    try {
+                        const runs = await runsApi.listRuns({ workflowName: workflowId, limit: 1 });
+                        return [workflowId, runs.data[0] ?? null];
+                    }
+                    catch {
+                        return [workflowId, null];
+                    }
+                }));
+                setLastRuns(Object.fromEntries(results));
+            }
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : messages.loadError);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [environment, messages.loadError, runsApi, schedulesApi]);
+    useEffect(() => {
+        void refresh();
+        if (!pollIntervalMs)
+            return;
+        const interval = setInterval(() => void refresh(), pollIntervalMs);
+        return () => clearInterval(interval);
+    }, [pollIntervalMs, refresh]);
+    const showEnvFlag = response?.schedulesEnabledByEnv !== undefined;
+    const envFlagOn = response?.schedulesEnabledByEnv === true;
+    const triggerRow = useCallback(async (entry) => {
+        if (!onTriggerNow)
+            return;
+        setTriggering((prev) => ({ ...prev, [entry.scheduleId]: true }));
+        setTriggerNotice(null);
+        try {
+            await onTriggerNow(entry.workflowId, entry.schedule.input);
+            setTriggerNotice({ kind: "success", text: messages.triggerSuccess });
+        }
+        catch (err) {
+            setTriggerNotice({
+                kind: "error",
+                text: err instanceof Error ? err.message : messages.triggerFailed,
+            });
+        }
+        finally {
+            setTriggering((prev) => ({ ...prev, [entry.scheduleId]: false }));
+        }
+    }, [messages.triggerFailed, messages.triggerSuccess, onTriggerNow]);
+    const rows = useMemo(() => response?.data ?? [], [response]);
+    return (_jsxs("div", { className: `flex min-h-screen flex-col bg-background ${className ?? ""}`, children: [_jsx("header", { className: "sticky top-0 z-10 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60", children: _jsxs("div", { className: "container mx-auto flex flex-wrap items-center gap-3 px-4 py-3", children: [_jsx(CalendarClock, { className: "h-5 w-5" }), _jsxs("div", { className: "min-w-0", children: [_jsx("h1", { className: "font-semibold text-base", children: messages.title }), _jsx("p", { className: "text-muted-foreground text-xs", children: messages.subtitle })] }), _jsxs("div", { className: "ml-auto flex items-center gap-2 text-muted-foreground text-xs", children: [_jsxs("span", { children: [messages.environmentLabel, ": ", _jsx("span", { className: "font-mono", children: environment })] }), response?.versionId ? (_jsxs("span", { children: [messages.versionLabel, ":", " ", _jsx("span", { className: "font-mono", children: response.versionId.slice(0, 12) })] })) : null, _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => void refresh(), disabled: loading, children: [_jsx(RefreshCw, { className: `h-3.5 w-3.5 ${loading ? "animate-spin" : ""}`, "aria-hidden": "true" }), messages.refresh] })] })] }) }), _jsxs("main", { className: "container mx-auto flex flex-1 flex-col gap-4 px-4 py-6", children: [showEnvFlag && !envFlagOn ? (_jsx(Card, { className: "border-amber-500/40 bg-amber-500/5", children: _jsxs(CardContent, { className: "flex items-center gap-2 pt-4 text-amber-700 text-sm dark:text-amber-300", children: [_jsx(AlertTriangle, { className: "h-4 w-4", "aria-hidden": "true" }), messages.envFlagOff] }) })) : null, triggerNotice ? (_jsx(Card, { className: triggerNotice.kind === "success"
+                            ? "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] })] }));
+}
+function ScheduleRow({ row, lastRun, triggering, onTriggerNow, envFlagDisabled, rootMessages, }) {
+    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] }));
+}
+function StatusPill({ row, envFlagDisabled, messages, }) {
+    if (envFlagDisabled) {
+        return (_jsx(Badge, { variant: "outline", className: "border-muted-foreground/30 text-muted-foreground", children: messages.disabledByEnvFlag }));
+    }
+    if (row.disabledReason === "registration_disabled") {
+        return (_jsx(Badge, { variant: "outline", className: "border-muted-foreground/30 text-muted-foreground", children: messages.disabledByRegistration }));
+    }
+    if (row.disabledReason === "env_filtered") {
+        return (_jsx(Badge, { variant: "outline", className: "border-muted-foreground/30 text-muted-foreground", children: messages.disabledByEnvironment }));
+    }
+    return (_jsx(Badge, { variant: "outline", className: "border-emerald-500/40 bg-emerald-500/10 text-emerald-600 dark:text-emerald-300", children: messages.enabled }));
+}
+function formatScheduleDecl(decl, messages) {
+    if (decl.cron)
+        return messages.cron(decl.cron, decl.timezone ?? "UTC");
+    if (decl.every !== undefined)
+        return messages.every(String(decl.every));
+    if (decl.at)
+        return messages.at(decl.at);
+    return messages.eventDriven;
+}
+function formatNextRun(row, messages, rootMessages) {
+    if (!row.enabled || row.nextRunAt === null)
+        return messages.notScheduled;
+    const delta = row.nextRunAt - Date.now();
+    const relative = formatRelative(new Date(row.nextRunAt).toISOString(), rootMessages);
+    return delta >= 0 ? messages.inFuture(relative) : messages.inPast(relative);
+}
+function formatLastRun(lastRun, row, messages, rootMessages) {
+    if (lastRun) {
+        const relative = formatRelative(lastRun.startedAt, rootMessages);
+        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);
+        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);
+        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);
+        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 });
+}
+function lastRunLabel(status, relative, messages) {
+    switch (status) {
+        case "succeeded":
+            return messages.lastRunSucceeded(relative);
+        case "failed":
+            return messages.lastRunFailed(relative);
+        case "running":
+            return messages.lastRunRunning;
+        case "cancelled":
+            return messages.lastRunCancelled(relative);
+    }
+}

package/dist/i18n/en.d.ts

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

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

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