@elizaos/ui 2.0.0-beta.2 → 2.0.3-beta.2

package/components/pages/HeartbeatForm.js

@@ -1,49 +1,228 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button, FieldLabel, FieldSwitch, FormSelect, FormSelectItem, Input, PagePanel, StatusDot, Textarea, } from "@elizaos/ui";
 import { useEffect, useMemo, useState } from "react";
+import { useAgentElement } from "../../agent-surface/index.js";
 import { client } from "../../api/index.js";
 import { formatDateTime, formatDurationMs } from "../../utils/format.js";
+import { detectUiHostCapabilities, intervalHostWarning, } from "../../utils/host-capabilities.js";
+import { PagePanel } from "../composites/page-panel/index.js";
+import { Button } from "../ui/button.js";
+import { FieldLabel } from "../ui/field.js";
+import { FieldSwitch } from "../ui/field-switch.js";
+import { FormSelect, FormSelectItem } from "../ui/form-select.js";
+import { Input } from "../ui/input.js";
+import { StatusDot } from "../ui/status-badge.js";
+import { Textarea } from "../ui/textarea.js";
 import { DURATION_UNITS, durationToMs, durationUnitLabel, formFromTrigger, humanizeEventKind, localizedExecutionStatus, nextRunsForCron, nextRunsForInterval, validateCronExpression, } from "./heartbeat-utils.js";
 const EVENT_KIND_OPTIONS = [
     {
         value: "message.received",
-        label: "Message received",
+        labelKey: "heartbeatform.event.messageReceived",
+        defaultLabel: "Message received",
     },
     {
         value: "discord.message.received",
-        label: "Discord message",
+        labelKey: "heartbeatform.event.discordMessage",
+        defaultLabel: "Discord message",
     },
     {
         value: "telegram.message.received",
-        label: "Telegram message",
+        labelKey: "heartbeatform.event.telegramMessage",
+        defaultLabel: "Telegram message",
     },
     {
         value: "gmail.message.received",
-        label: "Gmail message",
+        labelKey: "heartbeatform.event.gmailMessage",
+        defaultLabel: "Gmail message",
     },
     {
         value: "calendar.event.ended",
-        label: "Calendar event ended",
+        labelKey: "heartbeatform.event.calendarEventEnded",
+        defaultLabel: "Calendar event ended",
     },
 ];
+// ── Agent-surface select wrapper ────────────────────────────────────
+// FormSelect is a Radix Select and forwards neither a ref nor DOM props, so we
+// wrap it in a registered element that drives its controlled state via onFill.
+function AgentSelectField({ id, label, group, description, value, options, onFill, children, }) {
+    const { ref, agentProps } = useAgentElement({
+        id,
+        role: "select",
+        label,
+        group,
+        description,
+        options,
+        getValue: () => value,
+        onFill,
+    });
+    return (_jsx("div", { ref: ref, ...agentProps, children: children }));
+}
+function DurationValueInput({ form, setField, }) {
+    const { ref, agentProps } = useAgentElement({
+        id: "heartbeat-duration-value",
+        role: "number-input",
+        label: "Repeat interval value",
+        group: "heartbeat-schedule",
+        description: "How many duration units between runs",
+        getValue: () => form.durationValue,
+        onFill: (value) => setField("durationValue", value),
+    });
+    return (_jsx(Input, { ref: ref, type: "number", min: "1", variant: "form", value: form.durationValue, onChange: (event) => setField("durationValue", event.target.value), placeholder: "1", ...agentProps }));
+}
+function ScheduledAtInput({ form, setField, t, }) {
+    const { ref, agentProps } = useAgentElement({
+        id: "heartbeat-scheduled-at",
+        role: "text-input",
+        label: t("heartbeatform.runAt", { defaultValue: "Run at" }),
+        group: "heartbeat-schedule",
+        description: "Date and time to run a one-time trigger",
+        getValue: () => form.scheduledAtIso,
+        onFill: (value) => setField("scheduledAtIso", value),
+    });
+    return (_jsx(Input, { ref: ref, type: "datetime-local", variant: "form", value: form.scheduledAtIso, onChange: (event) => setField("scheduledAtIso", event.target.value), ...agentProps }));
+}
 export function HeartbeatForm({ form, editingId, editorEnabled, modalTitle, formError, triggersSaving, templateNotice, triggers, triggerRunsById, t, selectedTriggerId, setField, setForm, setFormError, closeEditor, onSubmit, onDelete, onRunSelectedTrigger, onToggleTriggerEnabled, saveFormAsTemplate, loadTriggerRuns, kickerLabelCreate, kickerLabelEdit, submitLabelCreate, submitLabelEdit, }) {
     const cronInvalid = form.triggerType === "cron" &&
         !validateCronExpression(form.cronExpression).ok;
+    const runNowButton = useAgentElement({
+        id: "heartbeat-run-now",
+        role: "button",
+        label: t("triggersview.RunNow"),
+        group: "heartbeat-toolbar",
+        description: "Run the trigger being edited immediately",
+        onActivate: () => {
+            if (editingId)
+                void onRunSelectedTrigger(editingId);
+        },
+    });
+    const toggleEnabledButton = useAgentElement({
+        id: "heartbeat-toggle-enabled",
+        role: "button",
+        label: editorEnabled ? t("common.disable") : t("common.enable"),
+        group: "heartbeat-toolbar",
+        status: editorEnabled ? "active" : "inactive",
+        description: "Enable or disable the trigger being edited",
+        onActivate: () => {
+            if (editingId)
+                void onToggleTriggerEnabled(editingId, editorEnabled);
+        },
+    });
+    const deleteButton = useAgentElement({
+        id: "heartbeat-delete",
+        role: "button",
+        label: t("common.delete"),
+        group: "heartbeat-toolbar",
+        description: "Delete the trigger being edited",
+        onActivate: () => void onDelete(),
+    });
+    const displayNameInput = useAgentElement({
+        id: "heartbeat-display-name",
+        role: "text-input",
+        label: t("heartbeatform.taskName", { defaultValue: "Task name" }),
+        group: "heartbeat-form",
+        description: "Display name for this scheduled task or workflow",
+        getValue: () => form.displayName,
+        onFill: (value) => setField("displayName", value),
+    });
+    const maxRunsInput = useAgentElement({
+        id: "heartbeat-max-runs",
+        role: "text-input",
+        label: t("heartbeatform.stopAfter", { defaultValue: "Stop after" }),
+        group: "heartbeat-form",
+        description: "Maximum number of runs before the trigger stops",
+        getValue: () => form.maxRuns,
+        onFill: (value) => setField("maxRuns", value),
+    });
+    const enabledSwitch = useAgentElement({
+        id: "heartbeat-enabled",
+        role: "toggle",
+        label: t("heartbeatform.enabled", { defaultValue: "Enabled" }),
+        group: "heartbeat-form",
+        status: form.enabled ? "active" : "inactive",
+        description: "Whether this trigger is enabled",
+        onActivate: () => setField("enabled", !form.enabled),
+    });
+    const saveTemplateButton = useAgentElement({
+        id: "heartbeat-save-template",
+        role: "button",
+        label: t("heartbeatsview.SaveAsTemplate", {
+            defaultValue: "Save as template",
+        }),
+        group: "heartbeat-form",
+        description: "Save the current form as a reusable template",
+        onActivate: () => saveFormAsTemplate(),
+    });
+    const submitButton = useAgentElement({
+        id: "heartbeat-submit",
+        role: "button",
+        label: editingId
+            ? (submitLabelEdit ?? t("heartbeatsview.saveChanges"))
+            : (submitLabelCreate ?? t("heartbeatsview.createHeartbeat")),
+        group: "heartbeat-form",
+        description: "Save the trigger (create or update)",
+        onActivate: () => void onSubmit(),
+    });
+    const cancelButton = useAgentElement({
+        id: "heartbeat-cancel",
+        role: "button",
+        label: t("common.cancel"),
+        group: "heartbeat-form",
+        description: "Cancel editing and revert changes",
+    });
     return (_jsxs("div", { className: "w-full px-4 pb-8 pt-0 sm:px-5 sm:pb-8 sm:pt-1 lg:px-7 lg:pb-8 lg:pt-1 xl:px-8", children: [templateNotice && (_jsx(PagePanel.Notice, { tone: "accent", className: "mb-4 animate-[fadeIn_0.2s_ease] text-xs font-medium", children: templateNotice })), _jsxs("div", { className: "mb-3 flex flex-col justify-between gap-2 lg:flex-row lg:items-start", children: [_jsxs("div", { className: "max-w-3xl space-y-1", children: [_jsx(FieldLabel, { variant: "kicker", children: editingId
                                     ? (kickerLabelEdit ?? t("heartbeatsview.editHeartbeat"))
-                                    : (kickerLabelCreate ?? t("heartbeatsview.createHeartbeat")) }), _jsx("h2", { className: "text-2xl font-semibold text-txt", children: modalTitle })] }), _jsx("div", { className: "flex flex-wrap items-center gap-2 lg:justify-end", children: editingId && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", size: "sm", className: "h-9 px-3 text-xs", disabled: triggersSaving, onClick: () => void onRunSelectedTrigger(editingId), children: t("triggersview.RunNow") }), _jsx(Button, { variant: "outline", size: "sm", className: "h-9 px-3 text-xs", onClick: () => void onToggleTriggerEnabled(editingId, editorEnabled), children: editorEnabled ? t("common.disable") : t("common.enable") }), _jsx("div", { className: "w-px h-6 bg-border/50 mx-1 hidden sm:block" }), _jsx(Button, { variant: "outline", size: "sm", className: "h-9 px-3 text-xs text-danger hover:border-danger hover:bg-danger/10 hover:text-danger", onClick: () => void onDelete(), children: t("common.delete") })] })) })] }), _jsxs("div", { className: "space-y-6", children: [formError && (_jsx(PagePanel.Notice, { tone: "danger", className: "text-sm", children: formError })), _jsxs(PagePanel, { variant: "padded", className: "grid gap-5", "data-testid": "heartbeats-editor-panel", children: [_jsxs("div", { children: [_jsx(FieldLabel, { variant: "form", children: form.kind === "workflow" ? "Schedule name" : "Task name" }), _jsx(Input, { variant: "form", value: form.displayName, onChange: (event) => setField("displayName", event.target.value), placeholder: t("triggersview.eGDailyDigestH") })] }), _jsxs("div", { className: "grid gap-4 rounded-xl border border-border/30 bg-bg/20 p-4", children: [_jsx("div", { className: "text-xs font-semibold uppercase tracking-[0.14em] text-muted", children: "What it does" }), _jsx(TriggerKindSection, { form: form, setField: setField, t: t, onGoToWorkflows: () => {
+                                    : (kickerLabelCreate ?? t("heartbeatsview.createHeartbeat")) }), _jsx("h2", { className: "text-2xl font-semibold text-txt", children: modalTitle })] }), _jsx("div", { className: "flex flex-wrap items-center gap-2 lg:justify-end", children: editingId && (_jsxs(_Fragment, { children: [_jsx(Button, { ref: runNowButton.ref, variant: "outline", size: "sm", className: "h-9 px-3 text-xs", disabled: triggersSaving, onClick: () => void onRunSelectedTrigger(editingId), ...runNowButton.agentProps, children: t("triggersview.RunNow") }), _jsx(Button, { ref: toggleEnabledButton.ref, variant: "outline", size: "sm", className: "h-9 px-3 text-xs", onClick: () => void onToggleTriggerEnabled(editingId, editorEnabled), ...toggleEnabledButton.agentProps, children: editorEnabled ? t("common.disable") : t("common.enable") }), _jsx("div", { className: "w-px h-6 bg-border/50 mx-1 hidden sm:block" }), _jsx(Button, { ref: deleteButton.ref, variant: "outline", size: "sm", className: "h-9 px-3 text-xs text-danger hover:border-danger hover:bg-danger/10 hover:text-danger", onClick: () => void onDelete(), ...deleteButton.agentProps, children: t("common.delete") })] })) })] }), _jsxs("div", { className: "space-y-6", children: [formError && (_jsx(PagePanel.Notice, { tone: "danger", className: "text-sm", children: formError })), _jsxs(PagePanel, { variant: "padded", className: "grid gap-5", "data-testid": "heartbeats-editor-panel", children: [_jsxs("div", { children: [_jsx(FieldLabel, { variant: "form", children: form.kind === "workflow"
+                                            ? t("heartbeatform.scheduleName", {
+                                                defaultValue: "Schedule name",
+                                            })
+                                            : t("heartbeatform.taskName", { defaultValue: "Task name" }) }), _jsx(Input, { ref: displayNameInput.ref, variant: "form", value: form.displayName, onChange: (event) => setField("displayName", event.target.value), placeholder: t("triggersview.eGDailyDigestH"), ...displayNameInput.agentProps })] }), _jsxs("div", { className: "grid gap-4 rounded-sm border border-border/30 bg-bg/20 p-4", children: [_jsx("div", { className: "text-xs font-semibold uppercase tracking-[0.14em] text-muted", children: t("heartbeatform.whatItDoes", { defaultValue: "What it does" }) }), _jsx(TriggerKindSection, { form: form, setField: setField, t: t, onGoToWorkflows: () => {
                                             window.dispatchEvent(new CustomEvent("eliza:automations:setFilter", {
                                                 detail: { filter: "workflows" },
                                             }));
-                                        } })] }), _jsxs("div", { className: "grid gap-4 rounded-xl border border-border/30 bg-bg/20 p-4", children: [_jsx("div", { className: "text-xs font-semibold uppercase tracking-[0.14em] text-muted", children: "When it starts" }), _jsxs("div", { className: "grid grid-cols-1 gap-5 lg:grid-cols-2", children: [_jsxs("div", { children: [_jsx(FieldLabel, { variant: "form", children: "Trigger type" }), _jsxs(FormSelect, { value: form.triggerType, onValueChange: (value) => setField("triggerType", value), placeholder: "Repeating interval", children: [_jsx(FormSelectItem, { value: "interval", children: "Repeating interval" }), _jsx(FormSelectItem, { value: "once", children: "One time" }), _jsx(FormSelectItem, { value: "cron", children: "Cron schedule" }), _jsx(FormSelectItem, { value: "event", children: "Event" })] })] }), _jsxs("div", { children: [_jsx(FieldLabel, { variant: "form", children: "When it fires" }), _jsxs(FormSelect, { value: form.wakeMode, onValueChange: (value) => setField("wakeMode", value), placeholder: "Interrupt and run now", children: [_jsx(FormSelectItem, { value: "inject_now", children: "Interrupt and run now" }), _jsx(FormSelectItem, { value: "next_autonomy_cycle", children: "Queue for next cycle" })] })] })] }), form.triggerType === "interval" && (_jsxs("div", { children: [_jsx(FieldLabel, { variant: "form", children: "Repeat every" }), _jsxs("div", { className: "grid grid-cols-[140px_minmax(0,1fr)] gap-3", children: [_jsx(Input, { type: "number", min: "1", variant: "form", value: form.durationValue, onChange: (event) => setField("durationValue", event.target.value), placeholder: "1" }), _jsx(FormSelect, { value: form.durationUnit, onValueChange: (value) => setField("durationUnit", value), placeholder: durationUnitLabel(form.durationUnit, t), children: DURATION_UNITS.map((unit) => (_jsx(FormSelectItem, { value: unit.unit, children: durationUnitLabel(unit.unit, t) }, unit.unit))) })] })] })), form.triggerType === "once" && (_jsxs("div", { children: [_jsx(FieldLabel, { variant: "form", children: "Run at" }), _jsx(Input, { type: "datetime-local", variant: "form", value: form.scheduledAtIso, onChange: (event) => setField("scheduledAtIso", event.target.value) })] })), form.triggerType === "cron" && (_jsx(CronInputSection, { form: form, setField: setField, t: t })), form.triggerType === "event" && (_jsx(EventInputSection, { form: form, setField: setField })), _jsx(SchedulePreview, { form: form, t: t })] }), _jsxs("div", { className: "grid gap-4 rounded-xl border border-border/30 bg-bg/20 p-4", children: [_jsx("div", { className: "text-xs font-semibold uppercase tracking-[0.14em] text-muted", children: "Run behavior" }), _jsxs("div", { className: "grid grid-cols-1 gap-5 lg:grid-cols-2", children: [_jsxs("div", { children: [_jsx(FieldLabel, { variant: "form", children: "Stop after" }), _jsx(Input, { variant: "form", value: form.maxRuns, onChange: (event) => setField("maxRuns", event.target.value), placeholder: "Unlimited" })] }), _jsx("div", { className: "flex items-end", children: _jsx(FieldSwitch, { checked: form.enabled, "aria-label": "Enabled", className: "flex-1", label: "Enabled", onCheckedChange: (checked) => setField("enabled", checked) }) })] })] })] }), _jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [form.displayName.trim() && (_jsx("button", { type: "button", className: "text-xs font-medium text-muted transition-colors hover:text-accent underline-offset-2 hover:underline", onClick: saveFormAsTemplate, children: t("heartbeatsview.SaveAsTemplate", {
+                                        } })] }), _jsxs("div", { className: "grid gap-4 rounded-sm border border-border/30 bg-bg/20 p-4", children: [_jsx("div", { className: "text-xs font-semibold uppercase tracking-[0.14em] text-muted", children: t("heartbeatform.whenItStarts", {
+                                            defaultValue: "When it starts",
+                                        }) }), _jsxs("div", { className: "grid grid-cols-1 gap-5 lg:grid-cols-2", children: [_jsxs("div", { children: [_jsx(FieldLabel, { variant: "form", children: t("heartbeatform.triggerType", {
+                                                            defaultValue: "Trigger type",
+                                                        }) }), _jsx(AgentSelectField, { id: "heartbeat-trigger-type", label: t("heartbeatform.triggerType", {
+                                                            defaultValue: "Trigger type",
+                                                        }), group: "heartbeat-form", description: "How the trigger fires (interval, once, cron, or event)", value: form.triggerType, options: ["interval", "once", "cron", "event"], onFill: (value) => setField("triggerType", value), children: _jsxs(FormSelect, { value: form.triggerType, onValueChange: (value) => setField("triggerType", value), placeholder: t("heartbeatform.repeatingInterval", {
+                                                                defaultValue: "Repeating interval",
+                                                            }), children: [_jsx(FormSelectItem, { value: "interval", children: t("heartbeatform.repeatingInterval", {
+                                                                        defaultValue: "Repeating interval",
+                                                                    }) }), _jsx(FormSelectItem, { value: "once", children: t("heartbeatform.oneTime", { defaultValue: "One time" }) }), _jsx(FormSelectItem, { value: "cron", children: t("heartbeatform.cronSchedule", {
+                                                                        defaultValue: "Cron schedule",
+                                                                    }) }), _jsx(FormSelectItem, { value: "event", children: t("heartbeatform.event.label", {
+                                                                        defaultValue: "Event",
+                                                                    }) })] }) })] }), _jsxs("div", { children: [_jsx(FieldLabel, { variant: "form", children: t("heartbeatform.whenItFires", {
+                                                            defaultValue: "When it fires",
+                                                        }) }), _jsx(AgentSelectField, { id: "heartbeat-wake-mode", label: t("heartbeatform.whenItFires", {
+                                                            defaultValue: "When it fires",
+                                                        }), group: "heartbeat-form", description: "Whether to interrupt now or queue for the next cycle", value: form.wakeMode, options: ["inject_now", "next_autonomy_cycle"], onFill: (value) => setField("wakeMode", value), children: _jsxs(FormSelect, { value: form.wakeMode, onValueChange: (value) => setField("wakeMode", value), placeholder: t("heartbeatform.interruptAndRunNow", {
+                                                                defaultValue: "Interrupt and run now",
+                                                            }), children: [_jsx(FormSelectItem, { value: "inject_now", children: t("heartbeatform.interruptAndRunNow", {
+                                                                        defaultValue: "Interrupt and run now",
+                                                                    }) }), _jsx(FormSelectItem, { value: "next_autonomy_cycle", children: t("heartbeatform.queueForNextCycle", {
+                                                                        defaultValue: "Queue for next cycle",
+                                                                    }) })] }) })] })] }), form.triggerType === "interval" && (_jsxs("div", { children: [_jsx(FieldLabel, { variant: "form", children: t("heartbeatform.repeatEvery", {
+                                                    defaultValue: "Repeat every",
+                                                }) }), _jsxs("div", { className: "grid grid-cols-[140px_minmax(0,1fr)] gap-3", children: [_jsx(DurationValueInput, { form: form, setField: setField }), _jsx(AgentSelectField, { id: "heartbeat-duration-unit", label: "Repeat interval unit", group: "heartbeat-schedule", description: "The unit of time between runs (minutes, hours, days\u2026)", value: form.durationUnit, options: DURATION_UNITS.map((unit) => unit.unit), onFill: (value) => setField("durationUnit", value), children: _jsx(FormSelect, { value: form.durationUnit, onValueChange: (value) => setField("durationUnit", value), placeholder: durationUnitLabel(form.durationUnit, t), children: DURATION_UNITS.map((unit) => (_jsx(FormSelectItem, { value: unit.unit, children: durationUnitLabel(unit.unit, t) }, unit.unit))) }) })] }), _jsx(IntervalHostWarningBanner, { form: form })] })), form.triggerType === "once" && (_jsxs("div", { children: [_jsx(FieldLabel, { variant: "form", children: t("heartbeatform.runAt", { defaultValue: "Run at" }) }), _jsx(ScheduledAtInput, { form: form, setField: setField, t: t })] })), form.triggerType === "cron" && (_jsx(CronInputSection, { form: form, setField: setField, t: t })), form.triggerType === "event" && (_jsx(EventInputSection, { form: form, setField: setField, t: t })), _jsx(SchedulePreview, { form: form, t: t })] }), _jsxs("div", { className: "grid gap-4 rounded-sm border border-border/30 bg-bg/20 p-4", children: [_jsx("div", { className: "text-xs font-semibold uppercase tracking-[0.14em] text-muted", children: t("heartbeatform.runBehavior", {
+                                            defaultValue: "Run behavior",
+                                        }) }), _jsxs("div", { className: "grid grid-cols-1 gap-5 lg:grid-cols-2", children: [_jsxs("div", { children: [_jsx(FieldLabel, { variant: "form", children: t("heartbeatform.stopAfter", {
+                                                            defaultValue: "Stop after",
+                                                        }) }), _jsx(Input, { ref: maxRunsInput.ref, variant: "form", value: form.maxRuns, onChange: (event) => setField("maxRuns", event.target.value), placeholder: t("heartbeatform.unlimited", {
+                                                            defaultValue: "Unlimited",
+                                                        }), ...maxRunsInput.agentProps })] }), _jsx("div", { className: "flex items-end", children: _jsx(FieldSwitch, { ref: enabledSwitch.ref, checked: form.enabled, "aria-label": t("heartbeatform.enabled", {
+                                                        defaultValue: "Enabled",
+                                                    }), className: "flex-1", label: t("heartbeatform.enabled", {
+                                                        defaultValue: "Enabled",
+                                                    }), onCheckedChange: (checked) => setField("enabled", checked), ...enabledSwitch.agentProps }) })] })] })] }), _jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [form.displayName.trim() && (_jsx("button", { ref: saveTemplateButton.ref, type: "button", className: "text-xs font-medium text-muted transition-colors hover:text-accent underline-offset-2 hover:underline", onClick: saveFormAsTemplate, ...saveTemplateButton.agentProps, children: t("heartbeatsview.SaveAsTemplate", {
                                     defaultValue: "Save as template",
-                                }) })), _jsxs("div", { className: "flex flex-wrap items-center gap-2.5", children: [_jsx(Button, { variant: "default", size: "sm", className: "h-10 px-6 text-sm text-white shadow-sm hover:text-white dark:text-white dark:hover:text-white", disabled: triggersSaving ||
+                                }) })), _jsxs("div", { className: "flex flex-wrap items-center gap-2.5", children: [_jsx(Button, { ref: submitButton.ref, variant: "default", size: "sm", className: "h-10 px-6 text-sm text-white hover:text-white dark:text-white dark:hover:text-white", disabled: triggersSaving ||
                                             (form.kind === "workflow" && !form.workflowId) ||
-                                            cronInvalid, onClick: () => void onSubmit(), children: triggersSaving
+                                            cronInvalid, onClick: () => void onSubmit(), ...submitButton.agentProps, children: triggersSaving
                                             ? t("common.saving")
                                             : editingId
                                                 ? (submitLabelEdit ?? t("heartbeatsview.saveChanges"))
-                                                : (submitLabelCreate ?? t("heartbeatsview.createHeartbeat")) }), _jsx(Button, { variant: "outline", size: "sm", className: "h-10 px-6 text-sm", onClick: () => {
+                                                : (submitLabelCreate ?? t("heartbeatsview.createHeartbeat")) }), _jsx(Button, { ref: cancelButton.ref, variant: "outline", size: "sm", className: "h-10 px-6 text-sm", onClick: () => {
                                             if (editingId && selectedTriggerId === editingId) {
                                                 const trigger = triggers.find((trigger) => trigger.id === editingId);
                                                 if (trigger) {
@@ -54,7 +233,7 @@ export function HeartbeatForm({ form, editingId, editorEnabled, modalTitle, form
                                             else {
                                                 closeEditor();
                                             }
-                                        }, children: t("common.cancel") })] })] }), editingId && (_jsx(HeartbeatRunHistory, { editingId: editingId, triggers: triggers, triggerRunsById: triggerRunsById, loadTriggerRuns: loadTriggerRuns, t: t }))] })] }));
+                                        }, ...cancelButton.agentProps, children: t("common.cancel") })] })] }), editingId && (_jsx(HeartbeatRunHistory, { editingId: editingId, triggers: triggers, triggerRunsById: triggerRunsById, loadTriggerRuns: loadTriggerRuns, t: t }))] })] }));
 }
 // ── Trigger kind section (what to run) ────────────────────────────
 function TriggerKindSection({ form, setField, t, onGoToWorkflows, }) {
@@ -89,18 +268,59 @@ function TriggerKindSection({ form, setField, t, onGoToWorkflows, }) {
         };
     }, [form.kind]);
     const toggleLabelId = "trigger-kind-toggle-label";
-    return (_jsxs("div", { children: [_jsx(FieldLabel, { variant: "form", id: toggleLabelId, children: "Runs" }), _jsxs("div", { className: "mt-1.5 flex gap-2", children: [_jsx("button", { type: "button", "aria-pressed": form.kind === "text", onClick: () => setField("kind", "text"), className: `rounded-lg border px-3 py-1.5 text-sm font-medium transition-colors ${form.kind === "text"
+    const promptKindButton = useAgentElement({
+        id: "heartbeat-kind-prompt",
+        role: "tab",
+        label: t("heartbeatform.prompt", { defaultValue: "Prompt" }),
+        group: "heartbeat-kind",
+        status: form.kind === "text" ? "active" : "inactive",
+        description: "Run a free-text prompt when this trigger fires",
+        onActivate: () => setField("kind", "text"),
+    });
+    const workflowKindButton = useAgentElement({
+        id: "heartbeat-kind-workflow",
+        role: "tab",
+        label: t("heartbeatform.workflow", { defaultValue: "Workflow" }),
+        group: "heartbeat-kind",
+        status: form.kind === "workflow" ? "active" : "inactive",
+        description: "Run a saved workflow when this trigger fires",
+        onActivate: () => setField("kind", "workflow"),
+    });
+    const instructionsTextarea = useAgentElement({
+        id: "heartbeat-instructions",
+        role: "textarea",
+        label: t("heartbeatform.prompt", { defaultValue: "Prompt" }),
+        group: "heartbeat-kind",
+        description: "Prompt text the agent runs when this trigger fires",
+        getValue: () => form.instructions,
+        onFill: (value) => setField("instructions", value),
+    });
+    const goToWorkflowsButton = useAgentElement({
+        id: "heartbeat-go-to-workflows",
+        role: "button",
+        label: t("triggers.goToWorkflows"),
+        group: "heartbeat-kind",
+        description: "Navigate to the workflows list to create a workflow",
+        onActivate: () => onGoToWorkflows(),
+    });
+    return (_jsxs("div", { children: [_jsx(FieldLabel, { variant: "form", id: toggleLabelId, children: t("heartbeatform.runs", { defaultValue: "Runs" }) }), _jsxs("div", { className: "mt-1.5 flex gap-2", children: [_jsx("button", { ref: promptKindButton.ref, type: "button", "aria-pressed": form.kind === "text", onClick: () => setField("kind", "text"), className: `rounded-sm border px-3 py-1.5 text-sm font-medium transition-colors ${form.kind === "text"
                             ? "border-accent bg-accent/10 text-accent"
-                            : "border-border/40 text-muted hover:border-border hover:text-txt"}`, children: "Prompt" }), _jsx("button", { type: "button", "aria-pressed": form.kind === "workflow", onClick: () => setField("kind", "workflow"), className: `rounded-lg border px-3 py-1.5 text-sm font-medium transition-colors ${form.kind === "workflow"
+                            : "border-border/40 text-muted hover:border-border hover:text-txt"}`, ...promptKindButton.agentProps, children: t("heartbeatform.prompt", { defaultValue: "Prompt" }) }), _jsx("button", { ref: workflowKindButton.ref, type: "button", "aria-pressed": form.kind === "workflow", onClick: () => setField("kind", "workflow"), className: `rounded-sm border px-3 py-1.5 text-sm font-medium transition-colors ${form.kind === "workflow"
                             ? "border-accent bg-accent/10 text-accent"
-                            : "border-border/40 text-muted hover:border-border hover:text-txt"}`, children: "Workflow" })] }), form.kind === "text" && (_jsxs("div", { className: "mt-4", children: [_jsx(FieldLabel, { variant: "form", children: "Prompt" }), _jsx(Textarea, { variant: "form", value: form.instructions, onChange: (event) => setField("instructions", event.target.value), placeholder: t("triggersview.WhatShouldTheAgen") })] })), form.kind === "workflow" && (_jsx("div", { className: "mt-4", children: workflowsError === "unavailable" ||
-                    (!workflowsLoading && workflows.length === 0) ? (_jsxs("div", { role: "status", className: "rounded-lg border border-border/30 bg-bg/30 px-4 py-3 text-sm text-muted", children: [_jsx("p", { children: t("triggers.workflowUnavailable") }), _jsx("button", { type: "button", className: "mt-2 text-xs font-medium text-accent underline-offset-2 hover:underline", onClick: onGoToWorkflows, children: t("triggers.goToWorkflows") })] })) : (_jsxs(_Fragment, { children: [_jsx(FieldLabel, { variant: "form", htmlFor: "trigger-workflow-select", children: "Workflow" }), _jsx(FormSelect, { value: form.workflowId, onValueChange: (value) => {
+                            : "border-border/40 text-muted hover:border-border hover:text-txt"}`, ...workflowKindButton.agentProps, children: t("heartbeatform.workflow", { defaultValue: "Workflow" }) })] }), form.kind === "text" && (_jsxs("div", { className: "mt-4", children: [_jsx(FieldLabel, { variant: "form", children: t("heartbeatform.prompt", { defaultValue: "Prompt" }) }), _jsx(Textarea, { ref: instructionsTextarea.ref, variant: "form", value: form.instructions, onChange: (event) => setField("instructions", event.target.value), placeholder: t("triggersview.WhatShouldTheAgen"), ...instructionsTextarea.agentProps })] })), form.kind === "workflow" && (_jsx("div", { className: "mt-4", children: workflowsError === "unavailable" ||
+                    (!workflowsLoading && workflows.length === 0) ? (_jsxs("div", { role: "status", className: "rounded-sm border border-border/30 bg-bg/30 px-4 py-3 text-sm text-muted", children: [_jsx("p", { children: t("triggers.workflowUnavailable") }), _jsx("button", { ref: goToWorkflowsButton.ref, type: "button", className: "mt-2 text-xs font-medium text-accent underline-offset-2 hover:underline", onClick: onGoToWorkflows, ...goToWorkflowsButton.agentProps, children: t("triggers.goToWorkflows") })] })) : (_jsxs(_Fragment, { children: [_jsx(FieldLabel, { variant: "form", htmlFor: "trigger-workflow-select", children: t("heartbeatform.workflow", { defaultValue: "Workflow" }) }), _jsx(AgentSelectField, { id: "heartbeat-workflow-select", label: t("heartbeatform.workflow", {
+                                defaultValue: "Workflow",
+                            }), group: "heartbeat-kind", description: "The saved workflow to run when this trigger fires", value: form.workflowId, options: workflows.map((wf) => wf.id), onFill: (value) => {
                                 const wf = workflows.find((w) => w.id === value);
                                 setField("workflowId", value);
                                 setField("workflowName", wf?.name ?? "");
-                            }, placeholder: workflowsLoading
-                                ? t("appsview.Loading")
-                                : t("triggers.workflowPlaceholder"), children: workflows.map((wf) => (_jsx(FormSelectItem, { value: wf.id, children: wf.name }, wf.id))) })] })) }))] }));
+                            }, children: _jsx(FormSelect, { value: form.workflowId, onValueChange: (value) => {
+                                    const wf = workflows.find((w) => w.id === value);
+                                    setField("workflowId", value);
+                                    setField("workflowName", wf?.name ?? "");
+                                }, placeholder: workflowsLoading
+                                    ? t("appsview.Loading")
+                                    : t("triggers.workflowPlaceholder"), children: workflows.map((wf) => (_jsx(FormSelectItem, { value: wf.id, children: wf.name }, wf.id))) }) })] })) }))] }));
 }
 // ── Cron input with inline validation + example chips ─────────────
 const CRON_EXAMPLES = [
@@ -108,21 +328,82 @@ const CRON_EXAMPLES = [
     { expr: "*/15 * * * *", labelKey: "triggers.cronExample.every15min" },
     { expr: "0 0 1 * *", labelKey: "triggers.cronExample.monthly" },
 ];
+function CronExampleButton({ expr, labelKey, setField, t, }) {
+    const { ref, agentProps } = useAgentElement({
+        id: `heartbeat-cron-example-${expr.replace(/[^a-z0-9]+/gi, "-")}`,
+        role: "button",
+        label: `${t(labelKey)} (${expr})`,
+        group: "heartbeat-cron",
+        description: `Fill the cron expression with ${expr}`,
+        onActivate: () => setField("cronExpression", expr),
+    });
+    return (_jsx(Button, { ref: ref, variant: "outline", size: "sm", className: "h-6 px-2 py-0 text-xs font-mono", onClick: () => setField("cronExpression", expr), ...agentProps, children: t(labelKey) }));
+}
 function CronInputSection({ form, setField, t, }) {
     const cronErrorId = "cron-expression-error";
     const validationResult = validateCronExpression(form.cronExpression);
     const isInvalid = !validationResult.ok;
-    return (_jsxs("div", { children: [_jsx(FieldLabel, { variant: "form", children: "Cron schedule" }), _jsx(Input, { variant: "form", className: "font-mono", value: form.cronExpression, onChange: (event) => setField("cronExpression", event.target.value), placeholder: "*/15 * * * *", "aria-invalid": isInvalid, "aria-describedby": isInvalid ? cronErrorId : undefined }), isInvalid ? (_jsxs("p", { id: cronErrorId, className: "mt-1.5 text-xs font-medium text-danger", role: "alert", children: [t("triggers.cronError"), " ", validationResult.message] })) : (_jsx("div", { className: "mt-2 text-xs-tight text-muted", children: "minute hour day month weekday" })), _jsxs("div", { className: "mt-2 flex flex-wrap items-center gap-1.5", children: [_jsx("span", { className: "text-xs text-muted", children: t("triggers.cronExampleHint") }), CRON_EXAMPLES.map(({ expr, labelKey }) => (_jsx(Button, { variant: "outline", size: "sm", className: "h-6 px-2 py-0 text-xs font-mono", onClick: () => setField("cronExpression", expr), children: t(labelKey) }, expr)))] })] }));
+    const cronInput = useAgentElement({
+        id: "heartbeat-cron-expression",
+        role: "text-input",
+        label: t("heartbeatform.cronSchedule", { defaultValue: "Cron schedule" }),
+        group: "heartbeat-cron",
+        status: isInvalid ? "error" : undefined,
+        description: "Cron expression controlling when the trigger fires",
+        getValue: () => form.cronExpression,
+        onFill: (value) => setField("cronExpression", value),
+    });
+    return (_jsxs("div", { children: [_jsx(FieldLabel, { variant: "form", children: t("heartbeatform.cronSchedule", { defaultValue: "Cron schedule" }) }), _jsx(Input, { ref: cronInput.ref, variant: "form", className: "font-mono", value: form.cronExpression, onChange: (event) => setField("cronExpression", event.target.value), placeholder: "*/15 * * * *", "aria-invalid": isInvalid, "aria-describedby": isInvalid ? cronErrorId : undefined, ...cronInput.agentProps }), isInvalid ? (_jsxs("p", { id: cronErrorId, className: "mt-1.5 text-xs font-medium text-danger", role: "alert", children: [t("triggers.cronError"), " ", validationResult.message] })) : (_jsx("div", { className: "mt-2 text-xs-tight text-muted", children: t("heartbeatform.cronFieldOrder", {
+                    defaultValue: "minute hour day month weekday",
+                }) })), _jsxs("div", { className: "mt-2 flex flex-wrap items-center gap-1.5", children: [_jsx("span", { className: "text-xs text-muted", children: t("triggers.cronExampleHint") }), CRON_EXAMPLES.map(({ expr, labelKey }) => (_jsx(CronExampleButton, { expr: expr, labelKey: labelKey, setField: setField, t: t }, expr)))] })] }));
 }
-function EventInputSection({ form, setField, }) {
+function EventInputSection({ form, setField, t, }) {
     const isCustomEvent = !EVENT_KIND_OPTIONS.some((option) => option.value === form.eventKind);
-    return (_jsxs("div", { className: "grid gap-3", children: [_jsxs("div", { children: [_jsx(FieldLabel, { variant: "form", children: "Event" }), _jsxs(FormSelect, { value: isCustomEvent ? "__custom" : form.eventKind, onValueChange: (value) => {
+    const customEventInput = useAgentElement({
+        id: "heartbeat-event-name",
+        role: "text-input",
+        label: t("heartbeatform.event.name", { defaultValue: "Event name" }),
+        group: "heartbeat-event",
+        description: "Custom event name in namespace.subject.verb form",
+        getValue: () => form.eventKind,
+        onFill: (value) => setField("eventKind", value),
+    });
+    return (_jsxs("div", { className: "grid gap-3", children: [_jsxs("div", { children: [_jsx(FieldLabel, { variant: "form", children: t("heartbeatform.event.label", { defaultValue: "Event" }) }), _jsx(AgentSelectField, { id: "heartbeat-event-kind", label: t("heartbeatform.event.label", { defaultValue: "Event" }), group: "heartbeat-event", description: "The event that fires this trigger", value: isCustomEvent ? "__custom" : form.eventKind, options: [...EVENT_KIND_OPTIONS.map((o) => o.value), "__custom"], onFill: (value) => {
                             if (value === "__custom") {
                                 setField("eventKind", "");
                                 return;
                             }
                             setField("eventKind", value);
-                        }, placeholder: "Message received", children: [EVENT_KIND_OPTIONS.map((option) => (_jsx(FormSelectItem, { value: option.value, children: option.label }, option.value))), _jsx(FormSelectItem, { value: "__custom", children: "Custom event" })] })] }), isCustomEvent && (_jsxs("div", { children: [_jsx(FieldLabel, { variant: "form", children: "Event name" }), _jsx(Input, { variant: "form", className: "font-mono", value: form.eventKind, onChange: (event) => setField("eventKind", event.target.value), placeholder: "namespace.subject.verb" })] })), form.eventKind.trim() && (_jsxs("div", { className: "rounded-lg border border-border/30 bg-bg/30 px-4 py-3 text-xs text-muted", children: ["Runs when", " ", _jsx("span", { className: "font-medium text-txt", children: humanizeEventKind(form.eventKind) }), " ", "arrives."] }))] }));
+                        }, children: _jsxs(FormSelect, { value: isCustomEvent ? "__custom" : form.eventKind, onValueChange: (value) => {
+                                if (value === "__custom") {
+                                    setField("eventKind", "");
+                                    return;
+                                }
+                                setField("eventKind", value);
+                            }, placeholder: t("heartbeatform.event.messageReceived", {
+                                defaultValue: "Message received",
+                            }), children: [EVENT_KIND_OPTIONS.map((option) => (_jsx(FormSelectItem, { value: option.value, children: t(option.labelKey, { defaultValue: option.defaultLabel }) }, option.value))), _jsx(FormSelectItem, { value: "__custom", children: t("heartbeatform.event.custom", {
+                                        defaultValue: "Custom event",
+                                    }) })] }) })] }), isCustomEvent && (_jsxs("div", { children: [_jsx(FieldLabel, { variant: "form", children: t("heartbeatform.event.name", { defaultValue: "Event name" }) }), _jsx(Input, { ref: customEventInput.ref, variant: "form", className: "font-mono", value: form.eventKind, onChange: (event) => setField("eventKind", event.target.value), placeholder: "namespace.subject.verb", ...customEventInput.agentProps })] })), form.eventKind.trim() && (_jsx("div", { className: "rounded-sm border border-border/30 bg-bg/30 px-4 py-3 text-xs text-muted", children: t("heartbeatform.event.runsWhen", {
+                    eventName: humanizeEventKind(form.eventKind),
+                    defaultValue: "Runs when {{eventName}} arrives.",
+                }) }))] }));
+}
+// ── Mobile / browser cadence warning ─────────────────────────────
+function IntervalHostWarningBanner({ form }) {
+    const warning = useMemo(() => {
+        const value = Number(form.durationValue);
+        if (!Number.isFinite(value) || value <= 0) {
+            return { show: false, message: "", label: "" };
+        }
+        const intervalMs = durationToMs(value, form.durationUnit);
+        const host = detectUiHostCapabilities();
+        const { show, message } = intervalHostWarning(host, intervalMs);
+        return { show, message, label: host.label };
+    }, [form.durationValue, form.durationUnit]);
+    if (!warning.show)
+        return null;
+    return (_jsx(PagePanel.Notice, { tone: "warning", className: "mt-3 text-xs", role: "status", "aria-live": "polite", children: _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "font-semibold", children: warning.label }), _jsx("span", { children: warning.message })] }) }));
 }
 // ── Schedule preview ("Next runs: …") ────────────────────────────
 function SchedulePreview({ form, t, }) {
@@ -175,12 +456,25 @@ function SchedulePreview({ form, t, }) {
     ]);
     if (!preview)
         return null;
-    return (_jsx("div", { role: "status", "aria-live": "polite", className: "rounded-lg border border-border/30 bg-bg/30 px-4 py-3 text-sm", children: preview.kind === "error" ? (_jsx("p", { className: "text-xs font-medium text-danger", children: preview.message })) : preview.kind === "once" ? (_jsxs("div", { children: [preview.isPast && (_jsx("p", { className: "mb-1 text-xs font-medium text-warning", children: t("triggers.scheduleOnceInPast") })), _jsx("p", { className: "text-xs text-muted", children: t("triggers.scheduleOnceLabel", {
+    return (_jsx("div", { role: "status", "aria-live": "polite", className: "rounded-sm border border-border/30 bg-bg/30 px-4 py-3 text-sm", children: preview.kind === "error" ? (_jsx("p", { className: "text-xs font-medium text-danger", children: preview.message })) : preview.kind === "once" ? (_jsxs("div", { children: [preview.isPast && (_jsx("p", { className: "mb-1 text-xs font-medium text-warning", children: t("triggers.scheduleOnceInPast") })), _jsx("p", { className: "text-xs text-muted", children: t("triggers.scheduleOnceLabel", {
                         time: formatDateTime(preview.date),
-                    }) })] })) : preview.kind === "event" ? (_jsxs("p", { className: "text-xs text-muted", children: ["Waiting for", " ", _jsx("span", { className: "font-medium text-txt", children: preview.label }), "."] })) : (_jsxs("div", { children: [_jsx("p", { className: "mb-1 text-xs font-semibold uppercase tracking-wide text-muted", children: "Next runs" }), _jsx("ul", { className: "space-y-0.5", children: preview.dates.map((date) => (_jsx("li", { className: "text-xs text-txt/80 before:mr-1.5 before:content-['\u2022']", children: formatDateTime(date) }, date.getTime()))) })] })) }));
+                    }) })] })) : preview.kind === "event" ? (_jsx("p", { className: "text-xs text-muted", children: t("heartbeatform.preview.waitingFor", {
+                eventName: preview.label,
+                defaultValue: "Waiting for {{eventName}}.",
+            }) })) : (_jsxs("div", { children: [_jsx("p", { className: "mb-1 text-xs font-semibold uppercase tracking-wide text-muted", children: t("heartbeatform.preview.nextRuns", {
+                        defaultValue: "Next runs",
+                    }) }), _jsx("ul", { className: "space-y-0.5", children: preview.dates.map((date) => (_jsx("li", { className: "text-xs text-txt/80 before:mr-1.5 before:content-['\u2022']", children: formatDateTime(date) }, date.getTime()))) })] })) }));
 }
 // ── Run history sub-section (shown when editing) ───────────────────
 function HeartbeatRunHistory({ editingId, triggers, triggerRunsById, loadTriggerRuns, t, }) {
+    const refreshRunsButton = useAgentElement({
+        id: "heartbeat-refresh-runs",
+        role: "button",
+        label: t("common.refresh"),
+        group: "heartbeat-history",
+        description: "Reload the run history for the trigger being edited",
+        onActivate: () => void loadTriggerRuns(editingId),
+    });
     return (_jsxs("div", { className: "mt-10 grid gap-8 pt-8", children: [_jsxs("dl", { className: "grid gap-4 text-sm sm:grid-cols-2 lg:grid-cols-3", children: [_jsxs(PagePanel.SummaryCard, { className: "px-4 py-4", children: [_jsx("dt", { className: "text-xs-tight font-semibold uppercase tracking-[0.14em] text-muted", children: t("heartbeatsview.maxRuns") }), _jsx("dd", { className: "mt-1.5 text-txt font-medium", children: (() => {
                                     const trigger = triggers.find((trigger) => trigger.id === editingId);
                                     return trigger?.maxRuns
@@ -196,7 +490,7 @@ function HeartbeatRunHistory({ editingId, triggers, triggerRunsById, loadTrigger
                                     return formatDateTime(trigger?.nextRunAtMs, {
                                         fallback: t("heartbeatsview.notScheduled"),
                                     });
-                                })() })] })] }), _jsxs(PagePanel, { variant: "padded", className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-3 pb-3", children: [_jsx("div", { className: "text-xs font-semibold uppercase tracking-[0.14em] text-muted", children: t("triggersview.RunHistory") }), _jsx(Button, { variant: "outline", size: "sm", className: "h-7 px-3 text-xs-tight", onClick: () => void loadTriggerRuns(editingId), children: t("common.refresh") })] }), (() => {
+                                })() })] })] }), _jsxs(PagePanel, { variant: "padded", className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-3 pb-3", children: [_jsx("div", { className: "text-xs font-semibold uppercase tracking-[0.14em] text-muted", children: t("triggersview.RunHistory") }), _jsx(Button, { ref: refreshRunsButton.ref, variant: "outline", size: "sm", className: "h-7 px-3 text-xs-tight", onClick: () => void loadTriggerRuns(editingId), ...refreshRunsButton.agentProps, children: t("common.refresh") })] }), (() => {
                         const hasLoadedRuns = Object.hasOwn(triggerRunsById, editingId);
                         const runs = triggerRunsById[editingId] ?? [];
                         if (!hasLoadedRuns) {
@@ -208,8 +502,8 @@ function HeartbeatRunHistory({ editingId, triggers, triggerRunsById, loadTrigger
                         return (_jsx("div", { className: "space-y-3", children: runs
                                 .slice()
                                 .reverse()
-                                .map((run) => (_jsx("div", { className: "rounded-xl bg-bg/30 border border-border/20 px-4 py-3 text-sm transition-colors hover:bg-bg/50", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx(StatusDot, { status: run.status, className: "mt-1 flex-shrink-0" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 mb-1", children: [_jsx("span", { className: "font-medium text-txt", children: localizedExecutionStatus(run.status, t) }), _jsx("span", { className: "text-xs text-muted", children: formatDateTime(run.finishedAt, {
+                                .map((run) => (_jsx("div", { className: "rounded-sm bg-bg/30 border border-border/20 px-4 py-3 text-sm transition-colors hover:bg-bg/50", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx(StatusDot, { status: run.status, className: "mt-1 flex-shrink-0" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 mb-1", children: [_jsx("span", { className: "font-medium text-txt", children: localizedExecutionStatus(run.status, t) }), _jsx("span", { className: "text-xs text-muted", children: formatDateTime(run.finishedAt, {
                                                                 fallback: t("heartbeatsview.emDash"),
-                                                            }) })] }), _jsxs("div", { className: "text-xs-tight text-muted/80", children: [formatDurationMs(run.latencyMs), " \u00B7", " ", _jsx("span", { className: "font-mono text-muted/60 bg-bg/40 px-1 py-0.5 rounded", children: run.source })] }), run.error && (_jsx("div", { className: "mt-2.5 text-xs text-danger/90 bg-danger/10 border border-danger/20 p-2.5 rounded-lg whitespace-pre-wrap font-mono leading-relaxed", children: run.error }))] })] }) }, run.triggerRunId))) }));
+                                                            }) })] }), _jsxs("div", { className: "text-xs-tight text-muted/80", children: [formatDurationMs(run.latencyMs), " \u00B7", " ", _jsx("span", { className: "font-mono text-muted/60 bg-bg/40 px-1 py-0.5 rounded-sm", children: run.source })] }), run.error && (_jsx("div", { className: "mt-2.5 text-xs text-danger/90 bg-danger/10 border border-danger/20 p-2.5 rounded-sm whitespace-pre-wrap font-mono leading-relaxed", children: run.error }))] })] }) }, run.triggerRunId))) }));
                     })()] })] }));
 }

package/components/pages/HeartbeatsView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HeartbeatsView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/HeartbeatsView.tsx"],"names":[],"mappings":"AA24BA,wBAAgB,sBAAsB,4CAMrC;AAED,wBAAgB,cAAc,4CAM7B"}
+{"version":3,"file":"HeartbeatsView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/HeartbeatsView.tsx"],"names":[],"mappings":"AAyjCA,wBAAgB,sBAAsB,4CAMrC;AAED,wBAAgB,cAAc,4CAM7B"}