@nvent-addon/app 0.4.5

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

@@ -0,0 +1,65 @@
+interface FlowEntry {
+    step: string;
+    queue: string;
+    workerId: string;
+    runtime?: 'nodejs' | 'python';
+    runtype?: 'inprocess' | 'task';
+    emits?: string[];
+}
+interface FlowStep {
+    queue: string;
+    workerId: string;
+    subscribes?: string[];
+    runtime?: 'nodejs' | 'python';
+    runtype?: 'inprocess' | 'task';
+    emits?: string[];
+}
+interface AnalyzedStep extends FlowStep {
+    name: string;
+    dependsOn: string[];
+    triggers: string[];
+    level: number;
+}
+interface FlowMeta {
+    id: string;
+    entry?: FlowEntry;
+    steps?: Record<string, FlowStep>;
+    analyzed?: {
+        levels: string[][];
+        maxLevel: number;
+        steps: Record<string, AnalyzedStep>;
+    };
+}
+interface StepStatus {
+    status: 'pending' | 'running' | 'completed' | 'failed' | 'retrying' | 'waiting' | 'timeout' | 'canceled';
+    attempt?: number;
+    error?: string;
+}
+type __VLS_Props = {
+    flow?: FlowMeta | null;
+    heightClass?: string;
+    showControls?: boolean;
+    showMiniMap?: boolean;
+    showBackground?: boolean;
+    stepStates?: Record<string, StepStatus>;
+    flowStatus?: 'running' | 'completed' | 'failed' | 'canceled';
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    nodeSelected: (payload: {
+        id: string;
+    }) => any;
+    nodeAction: (payload: {
+        id: string;
+        action: "run" | "logs" | "details";
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onNodeSelected?: ((payload: {
+        id: string;
+    }) => any) | undefined;
+    onNodeAction?: ((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/FlowNodeCard.d.vue.ts

@@ -0,0 +1,29 @@
+type Status = 'idle' | 'running' | 'error' | 'done' | 'canceled' | 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/FlowNodeCard.vue

@@ -0,0 +1,158 @@
+<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";
+    case "canceled":
+      return "orange";
+    default:
+      return "neutral";
+  }
+}
+</script>

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

@@ -0,0 +1,29 @@
+type Status = 'idle' | 'running' | 'error' | 'done' | 'canceled' | 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,17 @@
+type __VLS_Props = {
+    runStatus?: string;
+    startedAt?: string | number;
+    completedAt?: string | number;
+    steps: any[];
+    flowName?: string;
+    runId?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "select-step": (stepKey: string | null) => any;
+    "cancel-flow": () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onSelect-step"?: ((stepKey: string | null) => any) | undefined;
+    "onCancel-flow"?: (() => any) | undefined;
+}>, {}, {}, {}, {}, 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,188 @@
+<template>
+  <div class="flex flex-col h-full w-full max-w-full min-w-0">
+    <!-- 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 justify-between gap-4 text-xs">
+        <div class="flex items-center gap-4">
+          <!-- 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>
+
+        <!-- Cancel Button (only show for running flows) -->
+        <UButton
+          v-if="runStatus === 'running'"
+          color="neutral"
+          variant="ghost"
+          icon="i-lucide-x-circle"
+          size="xs"
+          label="Cancel"
+          @click="handleCancelFlow"
+        />
+      </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>
+
+      <FlowStepSelector
+        v-else
+        v-model="selectedStep"
+        :items="radioItems"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from "#imports";
+import { UIcon, UButton } from "#components";
+import FlowStepSelector from "./FlowStepSelector.vue";
+const props = defineProps({
+  runStatus: { type: String, required: false },
+  startedAt: { type: [String, Number], required: false },
+  completedAt: { type: [String, Number], required: false },
+  steps: { type: Array, required: true },
+  flowName: { type: String, required: false },
+  runId: { type: String, required: false }
+});
+const emit = defineEmits(["select-step", "cancel-flow"]);
+const handleCancelFlow = () => {
+  emit("cancel-flow");
+};
+const selectedStep = ref("all-steps");
+const firstStepKey = computed(() => props.steps[0]?.key);
+watch(firstStepKey, (newKey, oldKey) => {
+  if (oldKey !== void 0 && newKey !== oldKey) {
+    selectedStep.value = "all-steps";
+  }
+});
+watch(selectedStep, (newStep) => {
+  emit("select-step", newStep === "all-steps" ? null : newStep);
+});
+const radioItems = computed(() => {
+  const allItem = {
+    value: "all-steps",
+    label: "All Steps",
+    step: {
+      key: "All Steps",
+      status: null,
+      showAllIndicator: true
+    }
+  };
+  const stepItems = props.steps.map((step) => ({
+    value: step.key,
+    label: step.key,
+    step
+  }));
+  return [allItem, ...stepItems];
+});
+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";
+    case "canceled":
+      return "bg-orange-500";
+    case "stalled":
+      return "bg-amber-600";
+    default:
+      return "bg-gray-300";
+  }
+};
+</script>

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

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    runStatus?: string;
+    startedAt?: string | number;
+    completedAt?: string | number;
+    steps: any[];
+    flowName?: string;
+    runId?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "select-step": (stepKey: string | null) => any;
+    "cancel-flow": () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onSelect-step"?: ((stepKey: string | null) => any) | undefined;
+    "onCancel-flow"?: (() => any) | undefined;
+}>, {}, {}, {}, {}, 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,18 @@
+interface Props {
+    isRunning?: boolean;
+    isCompleted?: boolean;
+    isFailed?: boolean;
+    isCanceled?: boolean;
+    isStalled?: 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;
+    isCanceled: boolean;
+    isStalled: 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,74 @@
+<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-orange-50 dark:bg-orange-950/30 border-orange-200 dark:border-orange-800': isCanceled,
+  'bg-amber-50 dark:bg-amber-950/30 border-amber-200 dark:border-amber-800': isStalled,
+  '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-orange-500': isCanceled,
+  'bg-amber-600': isStalled,
+  '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-orange-700 dark:text-orange-400': isCanceled,
+  'text-amber-700 dark:text-amber-400': isStalled,
+  '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-if="isCanceled">
+        Canceled
+      </template>
+      <template v-else-if="isStalled">
+        Stalled
+      </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 },
+  isCanceled: { type: Boolean, required: false, default: false },
+  isStalled: { type: Boolean, required: false, default: false },
+  isReconnecting: { type: Boolean, required: false, default: false }
+});
+const isIdle = computed(() => {
+  return !props.isRunning && !props.isCompleted && !props.isFailed && !props.isCanceled && !props.isStalled;
+});
+</script>

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

@@ -0,0 +1,18 @@
+interface Props {
+    isRunning?: boolean;
+    isCompleted?: boolean;
+    isFailed?: boolean;
+    isCanceled?: boolean;
+    isStalled?: 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;
+    isCanceled: boolean;
+    isStalled: 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;