@elizaos/ui 2.0.0-alpha.85 → 2.0.0-beta.2

package/components/pages/HeartbeatForm.d.ts

@@ -0,0 +1,56 @@
+import type { TriggerSummary } from "../../api/client";
+import { type TranslateFn, type TriggerFormState } from "./heartbeat-utils";
+export interface HeartbeatFormProps {
+    /** Current form state. */
+    form: TriggerFormState;
+    /** ID of the trigger being edited, or null when creating. */
+    editingId: string | null;
+    /** Whether the trigger (or form default) is enabled. */
+    editorEnabled: boolean;
+    /** Computed modal/editor title. */
+    modalTitle: string;
+    /** Form validation error message, if any. */
+    formError: string | null;
+    /** True while a save/create request is in flight. */
+    triggersSaving: boolean;
+    /** Template notice banner text. */
+    templateNotice: string | null;
+    /** All triggers (used for looking up the editing trigger's metadata). */
+    triggers: TriggerSummary[];
+    /** Run history keyed by trigger ID. */
+    triggerRunsById: Record<string, import("../../api").TriggerRunRecord[]>;
+    /** Translation function. */
+    t: TranslateFn;
+    /** Currently selected trigger ID. */
+    selectedTriggerId: string | null;
+    /** Set a single form field value. */
+    setField: <K extends keyof TriggerFormState>(key: K, value: TriggerFormState[K]) => void;
+    /** Replace the entire form state. */
+    setForm: (form: TriggerFormState | ((prev: TriggerFormState) => TriggerFormState)) => void;
+    /** Set form error message. */
+    setFormError: (error: string | null) => void;
+    /** Close the editor panel. */
+    closeEditor: () => void;
+    /** Submit the form (create or update). */
+    onSubmit: () => Promise<void>;
+    /** Delete the trigger being edited. */
+    onDelete: () => Promise<void>;
+    /** Run a trigger immediately. */
+    onRunSelectedTrigger: (triggerId: string) => Promise<void>;
+    /** Toggle a trigger's enabled state. */
+    onToggleTriggerEnabled: (triggerId: string, currentlyEnabled: boolean) => Promise<void>;
+    /** Save the current form as a template. */
+    saveFormAsTemplate: () => void;
+    /** Load run history for a trigger. */
+    loadTriggerRuns: (triggerId: string) => Promise<void>;
+    /** Optional override for the create-mode kicker label. */
+    kickerLabelCreate?: string;
+    /** Optional override for the edit-mode kicker label. */
+    kickerLabelEdit?: string;
+    /** Optional override for the create submit label. */
+    submitLabelCreate?: string;
+    /** Optional override for the edit submit label. */
+    submitLabelEdit?: string;
+}
+export declare 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, }: HeartbeatFormProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=HeartbeatForm.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeartbeatForm.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/HeartbeatForm.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,cAAc,EAAsB,MAAM,kBAAkB,CAAC;AAE3E,OAAO,EASL,KAAK,WAAW,EAChB,KAAK,gBAAgB,EAEtB,MAAM,mBAAmB,CAAC;AA2B3B,MAAM,WAAW,kBAAkB;IACjC,0BAA0B;IAC1B,IAAI,EAAE,gBAAgB,CAAC;IACvB,6DAA6D;IAC7D,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,wDAAwD;IACxD,aAAa,EAAE,OAAO,CAAC;IACvB,mCAAmC;IACnC,UAAU,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,qDAAqD;IACrD,cAAc,EAAE,OAAO,CAAC;IACxB,mCAAmC;IACnC,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,yEAAyE;IACzE,QAAQ,EAAE,cAAc,EAAE,CAAC;IAC3B,uCAAuC;IACvC,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,WAAW,EAAE,gBAAgB,EAAE,CAAC,CAAC;IACxE,4BAA4B;IAC5B,CAAC,EAAE,WAAW,CAAC;IACf,qCAAqC;IACrC,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,qCAAqC;IACrC,QAAQ,EAAE,CAAC,CAAC,SAAS,MAAM,gBAAgB,EACzC,GAAG,EAAE,CAAC,EACN,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,KACvB,IAAI,CAAC;IACV,qCAAqC;IACrC,OAAO,EAAE,CACP,IAAI,EAAE,gBAAgB,GAAG,CAAC,CAAC,IAAI,EAAE,gBAAgB,KAAK,gBAAgB,CAAC,KACpE,IAAI,CAAC;IACV,8BAA8B;IAC9B,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7C,8BAA8B;IAC9B,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,0CAA0C;IAC1C,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B,uCAAuC;IACvC,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B,iCAAiC;IACjC,oBAAoB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3D,wCAAwC;IACxC,sBAAsB,EAAE,CACtB,SAAS,EAAE,MAAM,EACjB,gBAAgB,EAAE,OAAO,KACtB,OAAO,CAAC,IAAI,CAAC,CAAC;IACnB,2CAA2C;IAC3C,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,sCAAsC;IACtC,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACtD,0DAA0D;IAC1D,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,wDAAwD;IACxD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,qDAAqD;IACrD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mDAAmD;IACnD,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,SAAS,EACT,aAAa,EACb,UAAU,EACV,SAAS,EACT,cAAc,EACd,cAAc,EACd,QAAQ,EACR,eAAe,EACf,CAAC,EACD,iBAAiB,EACjB,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,oBAAoB,EACpB,sBAAsB,EACtB,kBAAkB,EAClB,eAAe,EACf,iBAAiB,EACjB,eAAe,EACf,iBAAiB,EACjB,eAAe,GAChB,EAAE,kBAAkB,2CAgTpB"}

package/components/pages/HeartbeatForm.js

@@ -0,0 +1,215 @@
+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 { client } from "../../api/index.js";
+import { formatDateTime, formatDurationMs } from "../../utils/format.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",
+    },
+    {
+        value: "discord.message.received",
+        label: "Discord message",
+    },
+    {
+        value: "telegram.message.received",
+        label: "Telegram message",
+    },
+    {
+        value: "gmail.message.received",
+        label: "Gmail message",
+    },
+    {
+        value: "calendar.event.ended",
+        label: "Calendar event ended",
+    },
+];
+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;
+    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: () => {
+                                            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", {
+                                    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 ||
+                                            (form.kind === "workflow" && !form.workflowId) ||
+                                            cronInvalid, onClick: () => void onSubmit(), 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: () => {
+                                            if (editingId && selectedTriggerId === editingId) {
+                                                const trigger = triggers.find((trigger) => trigger.id === editingId);
+                                                if (trigger) {
+                                                    setForm(formFromTrigger(trigger));
+                                                    setFormError(null);
+                                                }
+                                            }
+                                            else {
+                                                closeEditor();
+                                            }
+                                        }, 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, }) {
+    const [workflows, setWorkflows] = useState([]);
+    const [workflowsError, setWorkflowsError] = useState(null);
+    const [workflowsLoading, setWorkflowsLoading] = useState(false);
+    useEffect(() => {
+        if (form.kind !== "workflow")
+            return;
+        let cancelled = false;
+        setWorkflowsLoading(true);
+        setWorkflowsError(null);
+        client
+            .listWorkflowDefinitions()
+            .then((list) => {
+            if (cancelled)
+                return;
+            setWorkflows([...list].sort((a, b) => a.name.localeCompare(b.name)));
+            setWorkflowsError(null);
+        })
+            .catch(() => {
+            if (cancelled)
+                return;
+            setWorkflowsError("unavailable");
+        })
+            .finally(() => {
+            if (!cancelled)
+                setWorkflowsLoading(false);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [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"
+                            ? "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-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) => {
+                                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 = [
+    { expr: "0 9 * * 1-5", labelKey: "triggers.cronExample.weekdaysNine" },
+    { expr: "*/15 * * * *", labelKey: "triggers.cronExample.every15min" },
+    { expr: "0 0 1 * *", labelKey: "triggers.cronExample.monthly" },
+];
+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)))] })] }));
+}
+function EventInputSection({ form, setField, }) {
+    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) => {
+                            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."] }))] }));
+}
+// ── Schedule preview ("Next runs: …") ────────────────────────────
+function SchedulePreview({ form, t, }) {
+    const preview = useMemo(() => {
+        const now = new Date();
+        if (form.triggerType === "interval") {
+            const value = Number(form.durationValue);
+            if (!Number.isFinite(value) || value <= 0) {
+                return {
+                    kind: "error",
+                    message: t("triggers.scheduleIntervalError"),
+                };
+            }
+            const intervalMs = durationToMs(value, form.durationUnit);
+            const dates = nextRunsForInterval(intervalMs, 3, now);
+            return { kind: "dates", dates };
+        }
+        if (form.triggerType === "once") {
+            const raw = form.scheduledAtIso.trim();
+            if (!raw || !Number.isFinite(Date.parse(raw)))
+                return null;
+            const date = new Date(raw);
+            const isPast = date.getTime() <= now.getTime();
+            return { kind: "once", date, isPast };
+        }
+        if (form.triggerType === "cron") {
+            const result = validateCronExpression(form.cronExpression);
+            if (!result.ok)
+                return null;
+            const dates = nextRunsForCron(form.cronExpression, 3, now);
+            if (dates.length === 0)
+                return null;
+            return { kind: "dates", dates };
+        }
+        if (form.triggerType === "event") {
+            return {
+                kind: "event",
+                label: humanizeEventKind(form.eventKind || "event"),
+            };
+        }
+        return null;
+    }, [
+        form.triggerType,
+        form.durationValue,
+        form.durationUnit,
+        form.scheduledAtIso,
+        form.cronExpression,
+        form.eventKind,
+        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", {
+                        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()))) })] })) }));
+}
+// ── Run history sub-section (shown when editing) ───────────────────
+function HeartbeatRunHistory({ editingId, triggers, triggerRunsById, loadTriggerRuns, t, }) {
+    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
+                                        ? trigger.maxRuns
+                                        : t("heartbeatsview.unlimited");
+                                })() })] }), _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("triggersview.LastRun") }), _jsx("dd", { className: "mt-1.5 text-txt font-medium", children: (() => {
+                                    const trigger = triggers.find((trigger) => trigger.id === editingId);
+                                    return formatDateTime(trigger?.lastRunAtIso, {
+                                        fallback: t("heartbeatsview.notYetRun"),
+                                    });
+                                })() })] }), _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.nextRun") }), _jsx("dd", { className: "mt-1.5 text-txt font-medium", children: (() => {
+                                    const trigger = triggers.find((trigger) => trigger.id === editingId);
+                                    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") })] }), (() => {
+                        const hasLoadedRuns = Object.hasOwn(triggerRunsById, editingId);
+                        const runs = triggerRunsById[editingId] ?? [];
+                        if (!hasLoadedRuns) {
+                            return (_jsxs("div", { className: "py-6 text-sm text-muted/70 flex items-center gap-2", children: [_jsx("div", { className: "w-4 h-4 border-2 border-muted/30 border-t-muted/80 rounded-full animate-spin" }), " ", t("appsview.Loading")] }));
+                        }
+                        if (runs.length === 0) {
+                            return (_jsx("div", { className: "py-6 text-sm text-muted/70 italic", children: t("triggersview.NoRunsRecordedYet") }));
+                        }
+                        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, {
+                                                                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))) }));
+                    })()] })] }));
+}

package/components/pages/HeartbeatsView.d.ts

@@ -0,0 +1,3 @@
+export declare function HeartbeatsDesktopShell(): import("react/jsx-runtime").JSX.Element;
+export declare function HeartbeatsView(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=HeartbeatsView.d.ts.map

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

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