nvent 0.4.0

package/dist/runtime/app/components/FlowRunTimeline.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="flex flex-col h-full">
+    <!-- Filter Bar -->
+    <div class="flex items-center gap-3 px-6 py-3 border-b border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900/50 shrink-0">
+      <div class="flex items-center gap-2">
+        <span class="text-xs font-medium text-gray-700 dark:text-gray-300">Show:</span>
+        <URadioGroup
+          v-model="filter"
+          :items="filterOptions"
+          orientation="horizontal"
+          size="xs"
+          variant="table"
+          indicator="hidden"
+          :ui="{
+  base: 'size-2',
+  container: 'h-2',
+  item: 'p-1'
+}"
+        />
+      </div>
+
+      <div class="flex items-center gap-2 ml-auto">
+        <UButton
+          size="xs"
+          color="neutral"
+          variant="outline"
+          :disabled="filteredItems.length === 0"
+          @click="$emit('export')"
+        >
+          Export JSON
+        </UButton>
+        <div class="text-xs text-gray-500">
+          {{ filteredItems.length }} item{{ filteredItems.length === 1 ? "" : "s" }}
+        </div>
+      </div>
+    </div>
+
+    <!-- Combined Timeline/Logs Content -->
+    <div class="flex-1 overflow-y-auto overflow-x-hidden">
+      <div
+        v-if="filteredItems.length === 0"
+        class="h-full flex flex-col items-center justify-center text-gray-400 dark:text-gray-500"
+      >
+        <UIcon
+          name="i-lucide-inbox"
+          class="w-12 h-12 mb-3 opacity-50"
+        />
+        <span class="text-sm">No {{ filter === "all" ? "items" : filter }} yet.</span>
+      </div>
+      <TimelineList
+        v-else
+        :items="filteredItems"
+        height-class="min-h-full"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from "#imports";
+import TimelineList from "./TimelineList.vue";
+import { UButton, UIcon, URadioGroup } from "#components";
+const props = defineProps({
+  events: { type: Array, required: true },
+  logs: { type: Array, required: true },
+  isLive: { type: Boolean, required: false }
+});
+defineEmits(["export"]);
+const filter = ref("all");
+const filterOptions = [
+  { value: "all", label: "All" },
+  { value: "events", label: "Events" },
+  { value: "logs", label: "Logs" }
+];
+function getItemHash(item) {
+  if (item.type === "log") {
+    const message = item.data?.message || item.data?.msg || "";
+    const level = item.data?.level || "info";
+    const step2 = item.stepName || item.data?.stepName || "";
+    const ts2 = item.ts || 0;
+    return `log-${ts2}-${step2}-${level}-${message}`.toLowerCase();
+  }
+  const step = item.stepName || "";
+  const ts = item.ts || 0;
+  return `${item.type}-${ts}-${step}`.toLowerCase();
+}
+const filteredItems = computed(() => {
+  const allItems = [];
+  allItems.push(...props.events);
+  const logItems = props.logs.map((log) => ({
+    id: `log-${log.ts}`,
+    ts: log.ts,
+    type: "log",
+    stepName: log.step || log.stepName,
+    data: {
+      level: log.level,
+      message: log.msg || log.message,
+      ...log.data
+    }
+  }));
+  allItems.push(...logItems);
+  const seenHashes = /* @__PURE__ */ new Set();
+  const uniqueItems = [];
+  allItems.forEach((item) => {
+    const hash = getItemHash(item);
+    if (!seenHashes.has(hash)) {
+      seenHashes.add(hash);
+      uniqueItems.push(item);
+    }
+  });
+  let deduplicatedItems = uniqueItems;
+  if (filter.value === "events") {
+    deduplicatedItems = uniqueItems.filter((item) => item.type !== "log");
+  } else if (filter.value === "logs") {
+    deduplicatedItems = uniqueItems.filter((item) => item.type === "log");
+  }
+  deduplicatedItems.sort((a, b) => {
+    const getTs = (item) => {
+      if (typeof item.ts === "number") return item.ts;
+      if (typeof item.ts === "string") return new Date(item.ts).getTime();
+      return 0;
+    };
+    return getTs(b) - getTs(a);
+  });
+  return deduplicatedItems;
+});
+</script>

package/dist/runtime/app/components/FlowRunTimeline.vue.d.ts

@@ -0,0 +1,12 @@
+type __VLS_Props = {
+    events: any[];
+    logs: any[];
+    isLive?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    export: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onExport?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/FlowScheduleDialog.d.vue.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    flowName: string;
+};
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    scheduled: () => any;
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onScheduled?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/FlowScheduleDialog.vue

@@ -0,0 +1,226 @@
+<template>
+  <UModal v-model:open="isOpen">
+    <template #header>
+      <div class="flex items-center justify-between">
+        <div>
+          <h3 class="text-lg font-semibold">
+            Schedule Flow
+          </h3>
+          <p class="text-sm text-gray-500 mt-1">
+            {{ flowName }}
+          </p>
+        </div>
+      </div>
+    </template>
+    <template #body>
+      <div class="space-y-4">
+        <!-- Schedule Type -->
+        <div>
+          <label class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 block">
+            Schedule Type
+          </label>
+          <UTabs
+            v-model="scheduleType"
+            :items="typeOptions"
+            size="sm"
+            variant="pill"
+            color="neutral"
+          />
+        </div>
+
+        <!-- Cron Pattern -->
+        <div v-if="scheduleType === 'cron'">
+          <label class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 block">
+            Pattern
+          </label>
+          <USelectMenu
+            v-model="selectedPreset"
+            :items="cronPresets"
+            class="w-full"
+            placeholder="Select preset or custom"
+          />
+          <UInput
+            v-if="selectedPreset?.value === 'custom'"
+            v-model="customCron"
+            placeholder="0 2 * * *"
+            class="mt-2 w-full"
+          />
+        </div>
+
+        <!-- Delay -->
+        <div v-else-if="scheduleType === 'delay'">
+          <label class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 block">
+            Delay
+          </label>
+          <div class="flex gap-2">
+            <UInput
+              v-model="delayValue"
+              type="number"
+              placeholder="5"
+              class="flex-1"
+            />
+            <USelectMenu
+              v-model="delayUnit"
+              :items="delayUnits"
+              class="w-32"
+            />
+          </div>
+        </div>
+
+        <!-- Input Data -->
+        <div>
+          <label class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 block">
+            Input Data (JSON)
+          </label>
+          <UTextarea
+            v-model="inputJson"
+            placeholder="{ &quot;key&quot;: &quot;value&quot; }"
+            :rows="4"
+            class="font-mono text-sm w-full"
+          />
+          <p
+            v-if="jsonError"
+            class="text-xs text-red-500 mt-1"
+          >
+            {{ jsonError }}
+          </p>
+        </div>
+
+        <!-- Description -->
+        <div>
+          <label class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 block">
+            Description (optional)
+          </label>
+          <UInput
+            v-model="description"
+            class="w-full"
+            placeholder="Daily cleanup job"
+          />
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <UButton
+          color="neutral"
+          variant="ghost"
+          @click="isOpen = false"
+        >
+          Cancel
+        </UButton>
+        <UButton
+          color="primary"
+          :loading="isSubmitting"
+          :disabled="!canSubmit"
+          @click="handleSubmit"
+        >
+          Schedule Flow
+        </UButton>
+      </div>
+    </template>
+  </UModal>
+</template>
+
+<script setup>
+import { ref, computed, watch } from "#imports";
+import { UModal, UButton, UTabs, USelectMenu, UInput, UTextarea } from "#components";
+const props = defineProps({
+  flowName: { type: String, required: true }
+});
+const emit = defineEmits(["scheduled"]);
+const isOpen = defineModel({ type: Boolean, ...{ default: false } });
+const scheduleType = ref("cron");
+const typeOptions = [
+  { label: "Recurring (Cron)", value: "cron" },
+  { label: "One-time (Delay)", value: "delay" }
+];
+const cronPresets = [
+  { label: "Every minute", value: "* * * * *" },
+  { label: "Every 5 minutes", value: "*/5 * * * *" },
+  { label: "Every hour", value: "0 * * * *" },
+  { label: "Daily at 2 AM", value: "0 2 * * *" },
+  { label: "Daily at noon", value: "0 12 * * *" },
+  { label: "Weekly (Monday 9 AM)", value: "0 9 * * 1" },
+  { label: "Monthly (1st at midnight)", value: "0 0 1 * *" },
+  { label: "Custom", value: "custom" }
+];
+const selectedPreset = ref(cronPresets[3]);
+const customCron = ref("");
+const delayValue = ref("5");
+const delayUnit = ref({ label: "Minutes", value: 6e4 });
+const delayUnits = [
+  { label: "Seconds", value: 1e3 },
+  { label: "Minutes", value: 6e4 },
+  { label: "Hours", value: 36e5 },
+  { label: "Days", value: 864e5 }
+];
+const inputJson = ref("");
+const description = ref("");
+const isSubmitting = ref(false);
+const jsonError = computed(() => {
+  if (!inputJson.value)
+    return null;
+  try {
+    JSON.parse(inputJson.value);
+    return null;
+  } catch (e) {
+    return `Invalid JSON: ${e.message}`;
+  }
+});
+const canSubmit = computed(() => {
+  if (jsonError.value)
+    return false;
+  if (scheduleType.value === "cron") {
+    if (selectedPreset.value?.value === "custom") {
+      return customCron.value.trim().length > 0;
+    }
+    return selectedPreset.value?.value != null;
+  } else {
+    const num = Number.parseInt(delayValue.value);
+    return !Number.isNaN(num) && num > 0;
+  }
+});
+const handleSubmit = async () => {
+  isSubmitting.value = true;
+  try {
+    let input = {};
+    if (inputJson.value) {
+      input = JSON.parse(inputJson.value);
+    }
+    const body = {
+      input,
+      metadata: {
+        description: description.value || void 0
+      }
+    };
+    if (scheduleType.value === "cron") {
+      body.cron = selectedPreset.value?.value === "custom" ? customCron.value : selectedPreset.value?.value;
+    } else {
+      const num = Number.parseInt(delayValue.value);
+      body.delay = num * delayUnit.value.value;
+    }
+    await $fetch(`/api/_flows/${props.flowName}/schedule`, {
+      method: "POST",
+      body
+    });
+    emit("scheduled");
+    isOpen.value = false;
+    inputJson.value = "";
+    description.value = "";
+    customCron.value = "";
+    delayValue.value = "5";
+  } finally {
+    isSubmitting.value = false;
+  }
+};
+watch(isOpen, (newVal) => {
+  if (!newVal) {
+    scheduleType.value = "cron";
+    selectedPreset.value = cronPresets[3];
+    inputJson.value = "";
+    description.value = "";
+    customCron.value = "";
+    delayValue.value = "5";
+  }
+});
+</script>

package/dist/runtime/app/components/FlowScheduleDialog.vue.d.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    flowName: string;
+};
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    scheduled: () => any;
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onScheduled?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/FlowSchedulesList.d.vue.ts

@@ -0,0 +1,12 @@
+type __VLS_Props = {
+    flowName: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    loadSchedules: () => Promise<void>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    updated: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onUpdated?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/FlowSchedulesList.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="space-y-4">
+    <div v-if="!schedules || schedules.length === 0">
+      <UAlert
+        color="info"
+        title="No schedules configured"
+        variant="subtle"
+        icon="i-lucide-info"
+        description="Create a schedule to run this flow automatically"
+      />
+    </div>
+
+    <div
+      v-for="schedule in schedules"
+      :key="schedule.id"
+      class="border border-gray-200 dark:border-gray-800 rounded-lg p-4"
+    >
+      <div class="flex items-start justify-between">
+        <div class="flex-1">
+          <div class="flex items-center gap-2 mb-2">
+            <UIcon
+              name="i-lucide-clock"
+              class="text-blue-500"
+            />
+            <span class="font-medium text-sm">
+              {{ schedule.schedule.cron || "One-time delay" }}
+            </span>
+          </div>
+          <div class="text-xs text-gray-500 space-y-1">
+            <div>
+              <span class="font-medium">Next run:</span>
+              {{ formatDate(schedule.nextRun) }}
+            </div>
+            <div v-if="schedule.metadata?.description">
+              <span class="font-medium">Description:</span>
+              {{ schedule.metadata.description }}
+            </div>
+          </div>
+        </div>
+        <UButton
+          icon="i-lucide-trash-2"
+          color="error"
+          variant="ghost"
+          size="xs"
+          :loading="deletingId === schedule.id"
+          @click="handleDelete(schedule.id)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "#imports";
+import { UAlert, UButton, UIcon } from "#components";
+const props = defineProps({
+  flowName: { type: String, required: true }
+});
+const emit = defineEmits(["updated"]);
+const schedules = ref([]);
+const deletingId = ref(null);
+const loadSchedules = async () => {
+  try {
+    const data = await $fetch(`/api/_flows/${props.flowName}/schedules`);
+    schedules.value = data;
+  } catch (error) {
+    console.error("Failed to load schedules:", error);
+    schedules.value = [];
+  }
+};
+const handleDelete = async (id) => {
+  deletingId.value = id;
+  try {
+    await $fetch(`/api/_flows/${props.flowName}/schedules/${id}`, {
+      method: "DELETE"
+    });
+    await loadSchedules();
+    emit("updated");
+  } catch (error) {
+    console.error("Failed to delete schedule:", error);
+  } finally {
+    deletingId.value = null;
+  }
+};
+const formatDate = (date) => {
+  if (!date)
+    return "N/A";
+  return new Date(date).toLocaleString("en-US", {
+    dateStyle: "medium",
+    timeStyle: "short"
+  });
+};
+onMounted(() => {
+  loadSchedules();
+});
+defineExpose({
+  loadSchedules
+});
+</script>

package/dist/runtime/app/components/FlowSchedulesList.vue.d.ts

@@ -0,0 +1,12 @@
+type __VLS_Props = {
+    flowName: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    loadSchedules: () => Promise<void>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    updated: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onUpdated?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/JobScheduling.d.vue.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    queue: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;