@nvent-addon/app 0.4.5

package/dist/module.d.mts

@@ -0,0 +1,6 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+type ModuleOptions = Record<string, unknown>;
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };

package/dist/module.json

@@ -0,0 +1,9 @@
+{
+  "name": "nventapp",
+  "version": "0.1",
+  "configKey": "nventapp",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "3.6.1"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,42 @@
+import { defineNuxtModule, createResolver, addImportsDir, addPlugin, addComponentsDir, addComponent } from '@nuxt/kit';
+import defu from 'defu';
+
+const meta = {
+  name: "nventapp",
+  version: "0.1",
+  configKey: "nventapp"
+};
+const module$1 = defineNuxtModule({
+  meta,
+  defaults: {},
+  moduleDependencies: {
+    "json-editor-vue/nuxt": {
+      version: "0.18.1"
+    }
+  },
+  async setup(options, nuxt) {
+    const { resolve } = createResolver(import.meta.url);
+    addImportsDir(resolve("./runtime/shared/utils"));
+    addImportsDir(resolve("./runtime/app/composables"));
+    nuxt.options.css = nuxt.options.css || [];
+    nuxt.options.css.push(resolve("./runtime/app/assets/vueflow.css"));
+    addPlugin({
+      src: resolve("./runtime/app/plugins/vueflow.client"),
+      mode: "client"
+    });
+    addComponentsDir({
+      path: resolve("./runtime/app/components"),
+      prefix: "Queue"
+    });
+    addComponent({
+      name: "QueueApp",
+      filePath: resolve("./runtime/app/pages/index.vue"),
+      global: true
+    });
+    nuxt.options.vite.optimizeDeps = defu(nuxt.options.vite.optimizeDeps, {
+      include: ["vanilla-jsoneditor"]
+    });
+  }
+});
+
+export { module$1 as default };

package/dist/runtime/app/assets/vueflow.css

@@ -0,0 +1 @@
+@import "@vue-flow/core/dist/style.css";@import "@vue-flow/core/dist/theme-default.css";@import "@vue-flow/controls/dist/style.css";@import "@vue-flow/minimap/dist/style.css";

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

@@ -0,0 +1,33 @@
+interface Props {
+    title: string;
+    description?: string;
+    items?: string[];
+    warning?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    confirmColor?: 'primary' | 'error' | 'warning' | 'success';
+    icon?: string;
+    iconColor?: 'primary' | 'error' | 'warning' | 'success' | 'info';
+    loading?: boolean;
+}
+type __VLS_Props = Props;
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    cancel: () => any;
+    "update:open": (value: boolean) => any;
+    confirm: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onConfirm?: (() => any) | undefined;
+}>, {
+    confirmLabel: string;
+    cancelLabel: string;
+    confirmColor: "primary" | "error" | "warning" | "success";
+    iconColor: "primary" | "error" | "warning" | "success" | "info";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,121 @@
+<template>
+  <UModal
+    v-model:open="isOpen"
+    :ui="{
+  content: 'max-w-md'
+}"
+  >
+    <template #header>
+      <div class="flex items-start gap-3">
+        <div
+          v-if="icon"
+          class="shrink-0 rounded-full p-2"
+          :class="iconColorClasses"
+        >
+          <UIcon
+            :name="icon"
+            class="size-5"
+          />
+        </div>
+        <div class="flex-1 min-w-0">
+          <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">
+            {{ title }}
+          </h3>
+        </div>
+      </div>
+    </template>
+
+    <template #body>
+      <div class="space-y-3">
+        <p
+          v-if="description"
+          class="text-sm text-gray-600 dark:text-gray-400"
+        >
+          {{ description }}
+        </p>
+        <ul
+          v-if="items && items.length > 0"
+          class="space-y-2 text-sm text-gray-600 dark:text-gray-400"
+        >
+          <li
+            v-for="(item, index) in items"
+            :key="index"
+            class="flex items-start gap-2"
+          >
+            <UIcon
+              name="i-lucide-circle"
+              class="size-1.5 mt-1.5 shrink-0"
+            />
+            <span>{{ item }}</span>
+          </li>
+        </ul>
+        <p
+          v-if="warning"
+          class="text-sm font-medium text-amber-600 dark:text-amber-400"
+        >
+          {{ warning }}
+        </p>
+      </div>
+    </template>
+
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <UButton
+          color="neutral"
+          variant="ghost"
+          :disabled="loading"
+          @click="handleCancel"
+        >
+          {{ cancelLabel }}
+        </UButton>
+        <UButton
+          :color="confirmColor"
+          :loading="loading"
+          @click="handleConfirm"
+        >
+          {{ confirmLabel }}
+        </UButton>
+      </div>
+    </template>
+  </UModal>
+</template>
+
+<script setup>
+import { computed } from "#imports";
+import { UModal, UButton, UIcon } from "#components";
+const props = defineProps({
+  title: { type: String, required: true },
+  description: { type: String, required: false },
+  items: { type: Array, required: false },
+  warning: { type: String, required: false },
+  confirmLabel: { type: String, required: false, default: "Confirm" },
+  cancelLabel: { type: String, required: false, default: "Cancel" },
+  confirmColor: { type: String, required: false, default: "primary" },
+  icon: { type: String, required: false },
+  iconColor: { type: String, required: false, default: "primary" },
+  loading: { type: Boolean, required: false }
+});
+const isOpen = defineModel("open", { type: Boolean, ...{ default: false } });
+const emit = defineEmits(["confirm", "cancel"]);
+const iconColorClasses = computed(() => {
+  switch (props.iconColor) {
+    case "error":
+      return "bg-red-50 dark:bg-red-950/50 text-red-600 dark:text-red-400";
+    case "warning":
+      return "bg-amber-50 dark:bg-amber-950/50 text-amber-600 dark:text-amber-400";
+    case "success":
+      return "bg-emerald-50 dark:bg-emerald-950/50 text-emerald-600 dark:text-emerald-400";
+    case "info":
+      return "bg-blue-50 dark:bg-blue-950/50 text-blue-600 dark:text-blue-400";
+    default:
+      return "bg-primary-50 dark:bg-primary-950/50 text-primary-600 dark:text-primary-400";
+  }
+});
+const handleConfirm = () => {
+  emit("confirm");
+};
+const handleCancel = () => {
+  isOpen.value = false;
+  emit("cancel");
+};
+</script>

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

@@ -0,0 +1,33 @@
+interface Props {
+    title: string;
+    description?: string;
+    items?: string[];
+    warning?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    confirmColor?: 'primary' | 'error' | 'warning' | 'success';
+    icon?: string;
+    iconColor?: 'primary' | 'error' | 'warning' | 'success' | 'info';
+    loading?: boolean;
+}
+type __VLS_Props = Props;
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    cancel: () => any;
+    "update:open": (value: boolean) => any;
+    confirm: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onConfirm?: (() => any) | undefined;
+}>, {
+    confirmLabel: string;
+    cancelLabel: string;
+    confirmColor: "primary" | "error" | "warning" | "success";
+    iconColor: "primary" | "error" | "warning" | "success" | "info";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,341 @@
+<template>
+  <div
+    :class="heightClass"
+    class="w-full border rounded bg-white/5"
+  >
+    <ClientOnly>
+      <div class="relative h-full">
+        <button
+          v-if="flowId"
+          class="absolute z-10 top-2 right-2 bg-gray-700 hover:bg-gray-600 text-white text-xs px-2 py-1 rounded"
+          type="button"
+          title="Reset layout"
+          @click="resetLayout()"
+        >
+          Reset
+        </button>
+        <VueFlow
+          ref="vueFlowRef"
+          v-model:nodes="internalNodes"
+          v-model:edges="internalEdges"
+          :fit-view-on-init="true"
+          class="h-full w-full"
+          @node-click="onNodeClick"
+        >
+          <template #node-flow-step="{ id, data }">
+            <FlowNodeCard
+              :id="id"
+              :data="data"
+              kind="step"
+              @action="onAction"
+            />
+            <Handle
+              type="target"
+              :position="Position.Top"
+            />
+            <Handle
+              type="source"
+              :position="Position.Bottom"
+            />
+          </template>
+
+          <template #node-flow-entry="{ id, data }">
+            <FlowNodeCard
+              :id="id"
+              :data="data"
+              kind="entry"
+              @action="onAction"
+            />
+            <Handle
+              type="source"
+              :position="Position.Bottom"
+            />
+          </template>
+
+          <Background
+            v-if="showBackground"
+            pattern-color="#888"
+            :gap="12"
+          />
+          <Controls v-if="showControls" />
+          <MiniMap v-if="showMiniMap" />
+        </VueFlow>
+      </div>
+    </ClientOnly>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, watch, nextTick } from "#imports";
+import { Handle, Position } from "@vue-flow/core";
+import FlowNodeCard from "../components/FlowNodeCard.vue";
+const props = defineProps({
+  flow: { type: [Object, null], required: false },
+  heightClass: { type: String, required: false },
+  showControls: { type: Boolean, required: false },
+  showMiniMap: { type: Boolean, required: false },
+  showBackground: { type: Boolean, required: false },
+  stepStates: { type: Object, required: false },
+  flowStatus: { type: String, required: false }
+});
+const heightClass = computed(() => props.heightClass || "h-80");
+const emit = defineEmits(["nodeSelected", "nodeAction"]);
+const flowId = computed(() => props.flow?.id);
+const vueFlowRef = ref(null);
+const nodes = computed(() => {
+  const out = [];
+  const f = props.flow;
+  if (!f) return out;
+  const states = props.stepStates || {};
+  const colWidth = 250;
+  const rowHeight = 140;
+  const horizontalGap = 50;
+  const verticalGap = 80;
+  const entryToStepsGap = 140;
+  const nodeWidth = 220;
+  let y = 0;
+  if (f.entry) {
+    const entryState = states[f.entry.step];
+    const status = mapStatusToNodeStatus(entryState?.status);
+    out.push({
+      id: `entry:${f.entry.step}`,
+      position: { x: -nodeWidth / 2, y },
+      data: {
+        label: f.entry.step,
+        queue: f.entry.queue,
+        status,
+        attempt: entryState?.attempt,
+        error: entryState?.error,
+        runtime: f.entry.runtime,
+        runtype: f.entry.runtype,
+        emits: f.entry.emits
+      },
+      type: "flow-entry",
+      style: { minWidth: `${nodeWidth}px` }
+    });
+    y += rowHeight + entryToStepsGap;
+  }
+  const steps = f.steps || {};
+  if (f.analyzed?.levels && f.analyzed.levels.length > 0) {
+    const levels = f.analyzed.levels.filter((level) => level.length > 0);
+    levels.forEach((levelSteps) => {
+      if (levelSteps.length === 0) return;
+      const cols = Math.min(4, levelSteps.length);
+      const rows = Math.ceil(levelSteps.length / cols);
+      levelSteps.forEach((stepName, idx) => {
+        const step = steps[stepName];
+        if (!step) return;
+        const stepState = states[stepName];
+        const status = mapStatusToNodeStatus(stepState?.status);
+        const col = idx % cols;
+        const row = Math.floor(idx / cols);
+        const remainingInLevel = levelSteps.length - row * cols;
+        const nodesInThisRow = Math.min(cols, remainingInLevel);
+        const rowWidth = nodesInThisRow * colWidth + (nodesInThisRow - 1) * horizontalGap;
+        const rowStartX = -rowWidth / 2;
+        const x = rowStartX + col * (colWidth + horizontalGap);
+        const yPos = y + row * (rowHeight + verticalGap);
+        out.push({
+          id: `step:${stepName}`,
+          position: { x, y: yPos },
+          data: {
+            label: stepName,
+            queue: step?.queue,
+            workerId: step?.workerId,
+            status,
+            attempt: stepState?.attempt,
+            error: stepState?.error,
+            runtime: step?.runtime,
+            runtype: step?.runtype,
+            emits: step?.emits
+          },
+          type: "flow-step",
+          style: { minWidth: `${nodeWidth}px` }
+        });
+      });
+      y += rows * (rowHeight + verticalGap);
+    });
+  } else {
+    const names = Object.keys(steps);
+    const cols = 3;
+    names.forEach((name, idx) => {
+      const step = steps[name];
+      const stepState = states[name];
+      const status = mapStatusToNodeStatus(stepState?.status);
+      const col = idx % cols;
+      const row = Math.floor(idx / cols);
+      const totalRows = Math.ceil(names.length / cols);
+      const isLastRow = row === totalRows - 1;
+      const nodesInThisRow = isLastRow ? names.length % cols || cols : cols;
+      const rowWidth = nodesInThisRow * colWidth + (nodesInThisRow - 1) * horizontalGap;
+      const rowStartX = -rowWidth / 2;
+      const x = rowStartX + col * (colWidth + horizontalGap);
+      const yPos = y + row * (rowHeight + verticalGap);
+      out.push({
+        id: `step:${name}`,
+        position: { x, y: yPos },
+        data: {
+          label: name,
+          queue: step?.queue,
+          workerId: step?.workerId,
+          status,
+          attempt: stepState?.attempt,
+          error: stepState?.error,
+          runtime: step?.runtime,
+          runtype: step?.runtype,
+          emits: step?.emits
+        },
+        type: "flow-step",
+        style: { minWidth: `${nodeWidth}px` }
+      });
+    });
+  }
+  return out;
+});
+function mapStatusToNodeStatus(status) {
+  switch (status) {
+    case "running":
+    case "retrying":
+    case "waiting":
+      return "running";
+    case "completed":
+      return "done";
+    case "failed":
+    case "timeout":
+      return "error";
+    case "canceled":
+      return "canceled";
+    default:
+      return "idle";
+  }
+}
+const edges = computed(() => {
+  const f = props.flow;
+  if (!f) return [];
+  const states = props.stepStates || {};
+  const added = /* @__PURE__ */ new Set();
+  const out = [];
+  function addEdge(source, target, label) {
+    const id = `${source}->${target}${label ? `:${label}` : ""}`;
+    if (added.has(id)) return;
+    const sourceStep = source.split(":")[1];
+    const targetStep = target.split(":")[1];
+    const sourceState = sourceStep ? states[sourceStep] : void 0;
+    const targetState = targetStep ? states[targetStep] : void 0;
+    const shouldAnimate = props.flowStatus === "running" && sourceState?.status === "completed" && (targetState?.status === "running" || targetState?.status === "pending" || !targetState);
+    added.add(id);
+    out.push({ id, source, target, label, animated: shouldAnimate });
+  }
+  if (f.analyzed?.steps) {
+    const analyzedSteps = f.analyzed.steps;
+    for (const [stepName, stepInfo] of Object.entries(analyzedSteps)) {
+      const target = `step:${stepName}`;
+      if (stepInfo.dependsOn.length > 0) {
+        for (const depName of stepInfo.dependsOn) {
+          const source = depName === f.entry?.step ? `entry:${depName}` : `step:${depName}`;
+          addEdge(source, target);
+        }
+      } else if (f.entry) {
+        addEdge(`entry:${f.entry.step}`, target);
+      }
+    }
+  } else {
+    console.warn("[FlowDiagram] No analyzed data available for edges");
+  }
+  return out;
+});
+const internalNodes = ref([]);
+const internalEdges = ref([]);
+function storageKey(flowId2) {
+  return flowId2 ? `flow-layout:${flowId2}` : "flow-layout:unknown";
+}
+function applySavedPositions(nodesIn, flowId2) {
+  if (!flowId2) return nodesIn;
+  try {
+    const raw = localStorage.getItem(storageKey(flowId2));
+    if (!raw) return nodesIn;
+    const saved = JSON.parse(raw);
+    const byId = new Map(saved.map((s) => [s.id, s]));
+    nodesIn.forEach((n) => {
+      const s = byId.get(n.id);
+      if (s) n.position = { x: s.x, y: s.y };
+    });
+  } catch {
+  }
+  return nodesIn;
+}
+function savePositionsDebounced(flowId2) {
+  if (!flowId2) return;
+  const payload = internalNodes.value.map((n) => ({ id: n.id, x: n.position.x, y: n.position.y }));
+  try {
+    localStorage.setItem(storageKey(flowId2), JSON.stringify(payload));
+  } catch {
+  }
+}
+watch(() => props.flow, (f) => {
+  if (!f) {
+    internalNodes.value = [];
+    internalEdges.value = [];
+    return;
+  }
+  const builtNodes = nodes.value.map((n) => ({ id: n.id, position: { ...n.position }, data: { ...n.data }, type: n.type, style: n.style }));
+  const builtEdges = edges.value.map((e) => ({ id: e.id, source: e.source, target: e.target, label: e.label, animated: e.animated }));
+  applySavedPositions(builtNodes, f.id);
+  internalNodes.value = builtNodes;
+  internalEdges.value = builtEdges;
+  setTimeout(() => {
+    if (vueFlowRef.value) {
+      vueFlowRef.value.fitView({ padding: 0.2, duration: 200 });
+    }
+  }, 100);
+}, { immediate: true, deep: false });
+watch(() => props.stepStates, () => {
+  if (!props.flow) return;
+  const builtNodes = nodes.value.map((n) => ({ id: n.id, position: { ...n.position }, data: { ...n.data }, type: n.type, style: n.style }));
+  const positionMap = new Map(internalNodes.value.map((n) => [n.id, n.position]));
+  builtNodes.forEach((n) => {
+    const existing = positionMap.get(n.id);
+    if (existing) n.position = existing;
+  });
+  internalNodes.value = builtNodes;
+  const builtEdges = edges.value.map((e) => ({ id: e.id, source: e.source, target: e.target, label: e.label, animated: e.animated }));
+  internalEdges.value = builtEdges;
+}, { deep: true });
+watch(internalNodes, () => savePositionsDebounced(props.flow?.id), { deep: true });
+function onNodeClick(evt) {
+  const id = evt?.node?.id || evt?.id;
+  if (id) emit("nodeSelected", { id });
+}
+function onAction(payload) {
+  emit("nodeAction", payload);
+}
+function resetLayout() {
+  const id = flowId.value;
+  if (!id) return;
+  try {
+    localStorage.removeItem(storageKey(id));
+  } catch {
+  }
+  const freshNodes = nodes.value.map((n) => ({
+    id: n.id,
+    position: { x: n.position.x, y: n.position.y },
+    data: { ...n.data },
+    type: n.type,
+    style: n.style
+  }));
+  internalNodes.value = freshNodes;
+  nextTick(() => {
+    if (vueFlowRef.value) {
+      vueFlowRef.value.fitView({
+        padding: 0.2,
+        includeHiddenNodes: false,
+        duration: 300
+      });
+    }
+  });
+}
+</script>
+
+<style scoped>
+:deep(.vue-flow__node){background:transparent;border:none;box-shadow:none;display:inline-block;overflow:visible;padding:0}:deep(.vue-flow__node-input){border:none}:deep(.vue-flow__node.selected),:deep(.vue-flow__node:focus){border:none;box-shadow:none;outline:none}
+</style>