nvent 0.4.0

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

@@ -0,0 +1,156 @@
+<template>
+  <UCard
+    class="min-w-[220px] max-w-[300px]"
+    :ui="{
+  body: 'p-0',
+  header: headerClass,
+  footer: footerClass
+}"
+  >
+    <template #header>
+      <div class="flex items-center justify-between gap-2">
+        <div class="flex items-center gap-2 min-w-0">
+          <UIcon
+            v-if="runnerIcon"
+            :name="runnerIcon"
+            class="size-4 flex-shrink-0"
+            :title="data?.workerId"
+          />
+          <p
+            class="truncate font-medium"
+            :title="data?.label"
+          >
+            {{ data?.label }}
+          </p>
+        </div>
+        <UBadge
+          :label="(data?.status || 'idle').toUpperCase()"
+          size="xs"
+          :color="statusColor(data?.status)"
+        />
+      </div>
+    </template>
+
+    <div class="px-3 py-2 text-xs space-y-1">
+      <div class="flex items-center justify-between">
+        <span class="text-gray-500 dark:text-gray-400">Queue</span>
+        <span
+          class="truncate ml-2 font-mono"
+          :title="data?.queue"
+        >{{ data?.queue || "-" }}</span>
+      </div>
+      <div class="flex items-center justify-between">
+        <span class="text-gray-500 dark:text-gray-400">Worker</span>
+        <span
+          class="truncate ml-2 font-mono"
+          :title="data?.workerId"
+        >{{ data?.workerId || "-" }}</span>
+      </div>
+      <div
+        v-if="data?.runtype"
+        class="flex items-center justify-between"
+      >
+        <span class="text-gray-500 dark:text-gray-400">Mode</span>
+        <UBadge
+          :label="data.runtype"
+          size="xs"
+          color="neutral"
+          variant="soft"
+        />
+      </div>
+      <div
+        v-if="data?.emits && data.emits.length > 0"
+        class="flex items-start justify-between gap-2"
+      >
+        <span class="text-gray-500 dark:text-gray-400">Emits</span>
+        <div class="flex flex-wrap gap-1 justify-end">
+          <UBadge
+            v-for="event in data.emits"
+            :key="event"
+            :label="event"
+            size="xs"
+            color="primary"
+            variant="soft"
+          />
+        </div>
+      </div>
+      <div
+        v-if="data?.attempt && data.attempt > 1"
+        class="flex items-center justify-between"
+      >
+        <span class="text-gray-500 dark:text-gray-400">Attempts</span>
+        <span class="ml-2 font-medium text-amber-600 dark:text-amber-400">
+          {{ data.attempt }}
+        </span>
+      </div>
+      <div
+        v-if="data?.error"
+        class="pt-1 border-t border-gray-200 dark:border-gray-700"
+      >
+        <span
+          class="text-red-500 dark:text-red-400 block truncate"
+          :title="data.error"
+        >
+          ⚠️ {{ data.error }}
+        </span>
+      </div>
+    </div>
+
+    <template #footer>
+      <div class="flex items-center justify-center gap-2 w-full">
+        <UButton
+          size="xs"
+          color="neutral"
+          label="Logs"
+          icon="i-heroicons-document-text-20-solid"
+          @click="handleAction('logs')"
+        />
+        <UButton
+          size="xs"
+          color="neutral"
+          label="Details"
+          icon="i-heroicons-information-circle-20-solid"
+          @click="handleAction('details')"
+        />
+      </div>
+    </template>
+  </UCard>
+</template>
+
+<script setup>
+import { computed } from "#imports";
+import { UCard, UButton, UBadge, UIcon } from "#components";
+const props = defineProps({
+  id: { type: String, required: true },
+  data: { type: Object, required: true },
+  kind: { type: String, required: false }
+});
+const emit = defineEmits(["action"]);
+function handleAction(action) {
+  emit("action", { id: props.id, action });
+}
+const headerClass = computed(() => props.kind === "entry" ? "px-3 py-2 bg-gradient-to-br from-emerald-800 to-emerald-700 text-emerald-50 rounded-t" : "px-3 py-2 bg-gradient-to-br from-gray-800 to-gray-700 text-gray-100 rounded-t");
+const footerClass = computed(() => props.kind === "entry" ? "px-3 pb-2 pt-1" : "px-3 pb-2 pt-1");
+const runnerIcon = computed(() => {
+  const runtime = props.data?.runtime;
+  if (runtime === "python") {
+    return "i-devicon-python";
+  }
+  if (runtime === "nodejs") {
+    return "i-devicon-nodejs";
+  }
+  return runtime ? "i-lucide-code" : void 0;
+});
+function statusColor(status) {
+  switch (status) {
+    case "running":
+      return "warning";
+    case "done":
+      return "success";
+    case "error":
+      return "error";
+    default:
+      return "neutral";
+  }
+}
+</script>

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

@@ -0,0 +1,29 @@
+type Status = 'idle' | 'running' | 'error' | 'done' | string | undefined;
+type __VLS_Props = {
+    id: string;
+    data: {
+        label?: string;
+        queue?: string;
+        workerId?: string;
+        status?: Status;
+        attempt?: number;
+        error?: string;
+        runtime?: 'nodejs' | 'python';
+        runtype?: 'inprocess' | 'task';
+        emits?: string[];
+    };
+    kind?: 'entry' | 'step';
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    action: (payload: {
+        id: string;
+        action: "run" | "logs" | "details";
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onAction?: ((payload: {
+        id: string;
+        action: "run" | "logs" | "details";
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    runStatus?: string;
+    startedAt?: string;
+    completedAt?: string;
+    steps: any[];
+};
+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;

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

@@ -0,0 +1,291 @@
+<template>
+  <div class="flex flex-col h-full">
+    <!-- Fixed Header with Run Stats -->
+    <div class="px-6 py-[17px] 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-4 text-xs">
+        <!-- Status -->
+        <div class="flex items-center gap-1.5">
+          <div
+            class="w-1.5 h-1.5 rounded-full"
+            :class="getStatusColor(runStatus)"
+          />
+          <span class="text-gray-700 dark:text-gray-300 font-medium capitalize">
+            {{ runStatus || "unknown" }}
+          </span>
+        </div>
+
+        <!-- Divider -->
+        <div class="w-px h-3 bg-gray-300 dark:bg-gray-700" />
+
+        <!-- Total Steps -->
+        <div class="flex items-center gap-1.5">
+          <UIcon
+            name="i-lucide-layers"
+            class="w-3 h-3 text-gray-500"
+          />
+          <span class="text-gray-700 dark:text-gray-300">
+            {{ steps.length }} {{ steps.length === 1 ? "step" : "steps" }}
+          </span>
+        </div>
+
+        <!-- Divider -->
+        <div class="w-px h-3 bg-gray-300 dark:bg-gray-700" />
+
+        <!-- Started -->
+        <div class="flex items-center gap-1.5">
+          <UIcon
+            name="i-lucide-clock"
+            class="w-3 h-3 text-gray-500"
+          />
+          <span class="text-gray-600 dark:text-gray-400">
+            {{ startedAt ? formatTime(startedAt) : "Not started" }}
+          </span>
+        </div>
+
+        <!-- Divider -->
+        <div class="w-px h-3 bg-gray-300 dark:bg-gray-700" />
+
+        <!-- Duration -->
+        <div class="flex items-center gap-1.5">
+          <UIcon
+            name="i-lucide-timer"
+            class="w-3 h-3 text-gray-500"
+          />
+          <span class="text-gray-600 dark:text-gray-400">
+            {{ getDuration(startedAt, completedAt) }}
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Scrollable Steps List -->
+    <div class="flex-1 overflow-y-auto overflow-x-hidden px-6 py-6">
+      <div
+        v-if="steps.length === 0"
+        class="h-full flex flex-col items-center justify-center text-gray-400 dark:text-gray-500"
+      >
+        <UIcon
+          name="i-lucide-layers"
+          class="w-12 h-12 mb-3 opacity-50"
+        />
+        <span class="text-sm">No steps executed yet</span>
+      </div>
+
+      <div
+        v-else
+        class="space-y-3"
+      >
+        <div
+          v-for="(step, idx) in steps"
+          :key="step.key"
+          class="relative"
+        >
+          <!-- Connecting Line -->
+          <div
+            v-if="idx < steps.length - 1"
+            class="absolute left-4 top-10 w-0.5 h-8 bg-gray-200 dark:bg-gray-800"
+          />
+
+          <!-- Step Card -->
+          <div class="bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-lg p-4 hover:border-gray-300 dark:hover:border-gray-700 transition-colors">
+            <div class="flex items-start gap-3">
+              <!-- Status Icon -->
+              <div class="flex-shrink-0 mt-0.5">
+                <div
+                  class="w-8 h-8 rounded-full flex items-center justify-center"
+                  :class="getStepStatusBg(step.status)"
+                >
+                  <UIcon
+                    :name="getStepStatusIcon(step.status)"
+                    class="w-4 h-4"
+                    :class="getStepStatusIconColor(step.status)"
+                  />
+                </div>
+              </div>
+
+              <!-- Step Details -->
+              <div class="flex-1 min-w-0">
+                <div class="flex items-start justify-between gap-2">
+                  <div class="flex-1">
+                    <h4 class="text-sm font-medium text-gray-900 dark:text-gray-100">
+                      {{ step.key }}
+                    </h4>
+                    <div class="flex items-center gap-3 mt-1 text-xs text-gray-500">
+                      <span
+                        class="capitalize"
+                        :class="getStepStatusTextColor(step.status)"
+                      >
+                        {{ step.status || "pending" }}
+                      </span>
+                      <span v-if="step.attempt && step.attempt > 1">
+                        Attempt {{ step.attempt }}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Timing Info -->
+                <div
+                  v-if="step.startedAt || step.completedAt"
+                  class="mt-2 flex items-center gap-4 text-xs text-gray-500"
+                >
+                  <div
+                    v-if="step.startedAt"
+                    class="flex items-center gap-1"
+                  >
+                    <UIcon
+                      name="i-lucide-clock"
+                      class="w-3 h-3"
+                    />
+                    <span>{{ formatTime(step.startedAt) }}</span>
+                  </div>
+                  <div
+                    v-if="step.completedAt"
+                    class="flex items-center gap-1"
+                  >
+                    <UIcon
+                      name="i-lucide-check-circle"
+                      class="w-3 h-3"
+                    />
+                    <span>{{ formatTime(step.completedAt) }}</span>
+                  </div>
+                </div>
+
+                <!-- Error Message -->
+                <div
+                  v-if="step.error"
+                  class="mt-2 p-2 bg-red-50 dark:bg-red-900/10 border border-red-200 dark:border-red-900/30 rounded text-xs text-red-600 dark:text-red-400"
+                >
+                  <div class="flex items-start gap-1">
+                    <UIcon
+                      name="i-lucide-alert-circle"
+                      class="w-3 h-3 flex-shrink-0 mt-0.5"
+                    />
+                    <span>{{ step.error }}</span>
+                  </div>
+                </div>
+
+                <!-- Await Info -->
+                <div
+                  v-if="step.awaitType"
+                  class="mt-2 p-2 bg-blue-50 dark:bg-blue-900/10 border border-blue-200 dark:border-blue-900/30 rounded text-xs text-blue-600 dark:text-blue-400"
+                >
+                  <div class="flex items-center gap-1">
+                    <UIcon
+                      name="i-lucide-timer"
+                      class="w-3 h-3"
+                    />
+                    <span>Waiting: {{ step.awaitType }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { UIcon } from "#components";
+defineProps({
+  runStatus: { type: String, required: false },
+  startedAt: { type: String, required: false },
+  completedAt: { type: String, required: false },
+  steps: { type: Array, required: true }
+});
+const formatTime = (timestamp) => {
+  const date = new Date(timestamp);
+  const now = /* @__PURE__ */ new Date();
+  const diff = now.getTime() - date.getTime();
+  const seconds = Math.floor(diff / 1e3);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+  if (days > 0)
+    return `${days}d ago`;
+  if (hours > 0)
+    return `${hours}h ago`;
+  if (minutes > 0)
+    return `${minutes}m ago`;
+  if (seconds > 10)
+    return `${seconds}s ago`;
+  return "just now";
+};
+const getDuration = (start, end) => {
+  if (!start)
+    return "\u2014";
+  const startTime = new Date(start).getTime();
+  const endTime = end ? new Date(end).getTime() : Date.now();
+  const diff = endTime - startTime;
+  const seconds = Math.floor(diff / 1e3);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  if (hours > 0)
+    return `${hours}h ${minutes % 60}m`;
+  if (minutes > 0)
+    return `${minutes}m ${seconds % 60}s`;
+  return `${seconds}s`;
+};
+const getStatusColor = (status) => {
+  switch (status) {
+    case "completed":
+      return "bg-emerald-500";
+    case "failed":
+      return "bg-red-500";
+    case "running":
+      return "bg-blue-500 animate-pulse";
+    default:
+      return "bg-gray-300";
+  }
+};
+const getStepStatusBg = (status) => {
+  switch (status) {
+    case "completed":
+      return "bg-emerald-50 dark:bg-emerald-900/20";
+    case "failed":
+      return "bg-red-50 dark:bg-red-900/20";
+    case "running":
+      return "bg-blue-50 dark:bg-blue-900/20";
+    default:
+      return "bg-gray-50 dark:bg-gray-900/20";
+  }
+};
+const getStepStatusIcon = (status) => {
+  switch (status) {
+    case "completed":
+      return "i-lucide-check-circle";
+    case "failed":
+      return "i-lucide-x-circle";
+    case "running":
+      return "i-lucide-loader-circle";
+    default:
+      return "i-lucide-circle";
+  }
+};
+const getStepStatusIconColor = (status) => {
+  switch (status) {
+    case "completed":
+      return "text-emerald-600 dark:text-emerald-400";
+    case "failed":
+      return "text-red-600 dark:text-red-400";
+    case "running":
+      return "text-blue-600 dark:text-blue-400 animate-spin";
+    default:
+      return "text-gray-400";
+  }
+};
+const getStepStatusTextColor = (status) => {
+  switch (status) {
+    case "completed":
+      return "text-emerald-600 dark:text-emerald-400";
+    case "failed":
+      return "text-red-600 dark:text-red-400";
+    case "running":
+      return "text-blue-600 dark:text-blue-400";
+    default:
+      return "text-gray-500";
+  }
+};
+</script>

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

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    runStatus?: string;
+    startedAt?: string;
+    completedAt?: string;
+    steps: any[];
+};
+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;

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

@@ -0,0 +1,14 @@
+interface Props {
+    isRunning?: boolean;
+    isCompleted?: boolean;
+    isFailed?: boolean;
+    isReconnecting?: boolean;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    isRunning: boolean;
+    isCompleted: boolean;
+    isFailed: boolean;
+    isReconnecting: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,60 @@
+<template>
+  <div
+    class="flex items-center gap-1.5 px-1.5 py-0.5 rounded text-xs border shrink-0"
+    :class="{
+  'bg-emerald-50 dark:bg-emerald-950/30 border-emerald-200 dark:border-emerald-800': isCompleted,
+  'bg-red-50 dark:bg-red-950/30 border-red-200 dark:border-red-800': isFailed,
+  'bg-blue-50 dark:bg-blue-950/30 border-blue-200 dark:border-blue-800': isRunning,
+  'bg-gray-50 dark:bg-gray-900/30 border-gray-200 dark:border-gray-800': isIdle
+}"
+  >
+    <div
+      class="w-1 h-1 rounded-full"
+      :class="{
+  'bg-emerald-500': isCompleted,
+  'bg-red-500': isFailed,
+  'bg-blue-500 animate-pulse': isRunning && !isReconnecting,
+  'bg-amber-500 animate-pulse': isReconnecting,
+  'bg-gray-400': isIdle
+}"
+    />
+    <span
+      class="text-[10px] font-medium uppercase tracking-wider"
+      :class="{
+  'text-emerald-700 dark:text-emerald-400': isCompleted,
+  'text-red-700 dark:text-red-400': isFailed,
+  'text-blue-700 dark:text-blue-400': isRunning,
+  'text-gray-600 dark:text-gray-400': isIdle
+}"
+    >
+      <template v-if="isReconnecting">
+        Reconnecting
+      </template>
+      <template v-else-if="isRunning">
+        Running
+      </template>
+      <template v-else-if="isCompleted">
+        Done
+      </template>
+      <template v-else-if="isFailed">
+        Failed
+      </template>
+      <template v-else>
+        Idle
+      </template>
+    </span>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "#imports";
+const props = defineProps({
+  isRunning: { type: Boolean, required: false, default: false },
+  isCompleted: { type: Boolean, required: false, default: false },
+  isFailed: { type: Boolean, required: false, default: false },
+  isReconnecting: { type: Boolean, required: false, default: false }
+});
+const isIdle = computed(() => {
+  return !props.isRunning && !props.isCompleted && !props.isFailed;
+});
+</script>

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

@@ -0,0 +1,14 @@
+interface Props {
+    isRunning?: boolean;
+    isCompleted?: boolean;
+    isFailed?: boolean;
+    isReconnecting?: boolean;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    isRunning: boolean;
+    isCompleted: boolean;
+    isFailed: boolean;
+    isReconnecting: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/FlowRunTimeline.d.vue.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;