@nvent-addon/app 0.4.5

package/dist/runtime/app/composables/useFlowState.d.ts

@@ -0,0 +1,127 @@
+import { type Ref } from '#imports';
+/**
+ * Client-Side Flow State Reducer
+ *
+ * Reduces an array of events from the flow timeline into current state.
+ */
+export interface FlowState {
+    status: 'running' | 'completed' | 'failed' | 'canceled' | 'stalled';
+    startedAt?: string;
+    completedAt?: string;
+    steps: Record<string, StepState>;
+    logs: LogEntry[];
+    meta?: Record<string, any>;
+}
+export interface StepState {
+    status: 'pending' | 'running' | 'completed' | 'failed' | 'retrying' | 'waiting' | 'timeout';
+    attempt: number;
+    startedAt?: string;
+    completedAt?: string;
+    error?: string;
+    awaitType?: 'time' | 'event' | 'trigger';
+    awaitData?: any;
+    result?: any;
+}
+export interface LogEntry {
+    ts: string;
+    step?: string;
+    level: string;
+    msg: string;
+    data?: any;
+}
+export interface EventRecord {
+    id: string;
+    ts: string;
+    type: string;
+    runId: string;
+    flowName?: string;
+    stepName?: string;
+    stepId?: string;
+    attempt?: number;
+    data?: any;
+}
+/**
+ * Reduce an array of events into current flow state
+ */
+export declare function reduceFlowState(events: EventRecord[]): FlowState;
+/**
+ * Composable for managing flow state from event stream
+ *
+ * Usage:
+ * ```typescript
+ * const { state, events, addEvent, addEvents, reset } = useFlowState()
+ *
+ * // Add events as they arrive
+ * addEvent(newEvent)
+ *
+ * // Access computed state
+ * console.log(state.value.status) // 'running' | 'completed' | 'failed'
+ * ```
+ */
+export declare function useFlowState(initialEvents?: EventRecord[]): {
+    events: Ref<EventRecord[], EventRecord[]>;
+    state: import("vue").ComputedRef<FlowState>;
+    addEvent: (event: EventRecord) => void;
+    addEvents: (newEvents: EventRecord[]) => void;
+    reset: (newEvents?: EventRecord[]) => void;
+    isRunning: import("vue").ComputedRef<boolean>;
+    isCompleted: import("vue").ComputedRef<boolean>;
+    isFailed: import("vue").ComputedRef<boolean>;
+    isCanceled: import("vue").ComputedRef<boolean>;
+    isStalled: import("vue").ComputedRef<boolean>;
+    stepList: import("vue").ComputedRef<{
+        status: "pending" | "running" | "completed" | "failed" | "retrying" | "waiting" | "timeout";
+        attempt: number;
+        startedAt?: string;
+        completedAt?: string;
+        error?: string;
+        awaitType?: "time" | "event" | "trigger";
+        awaitData?: any;
+        result?: any;
+        key: string;
+    }[]>;
+    runningSteps: import("vue").ComputedRef<{
+        status: "pending" | "running" | "completed" | "failed" | "retrying" | "waiting" | "timeout";
+        attempt: number;
+        startedAt?: string;
+        completedAt?: string;
+        error?: string;
+        awaitType?: "time" | "event" | "trigger";
+        awaitData?: any;
+        result?: any;
+        key: string;
+    }[]>;
+    waitingSteps: import("vue").ComputedRef<{
+        status: "pending" | "running" | "completed" | "failed" | "retrying" | "waiting" | "timeout";
+        attempt: number;
+        startedAt?: string;
+        completedAt?: string;
+        error?: string;
+        awaitType?: "time" | "event" | "trigger";
+        awaitData?: any;
+        result?: any;
+        key: string;
+    }[]>;
+    failedSteps: import("vue").ComputedRef<{
+        status: "pending" | "running" | "completed" | "failed" | "retrying" | "waiting" | "timeout";
+        attempt: number;
+        startedAt?: string;
+        completedAt?: string;
+        error?: string;
+        awaitType?: "time" | "event" | "trigger";
+        awaitData?: any;
+        result?: any;
+        key: string;
+    }[]>;
+    completedSteps: import("vue").ComputedRef<{
+        status: "pending" | "running" | "completed" | "failed" | "retrying" | "waiting" | "timeout";
+        attempt: number;
+        startedAt?: string;
+        completedAt?: string;
+        error?: string;
+        awaitType?: "time" | "event" | "trigger";
+        awaitData?: any;
+        result?: any;
+        key: string;
+    }[]>;
+};

package/dist/runtime/app/composables/useFlowState.js

@@ -0,0 +1,225 @@
+import { ref, computed } from "#imports";
+export function reduceFlowState(events) {
+  const state = {
+    status: "running",
+    steps: {},
+    logs: []
+  };
+  for (const e of events) {
+    const eventType = e.type;
+    const stepKey = e.stepName;
+    switch (eventType) {
+      case "flow.start":
+      case "flow.started":
+        state.status = "running";
+        state.startedAt = e.ts;
+        if (e.flowName) state.meta = { ...state.meta, flowName: e.flowName };
+        if (e.data?.flowName) state.meta = { ...state.meta, flowName: e.data.flowName };
+        if (e.data?.input) state.meta = { ...state.meta, input: e.data.input };
+        break;
+      case "flow.complete":
+      case "flow.completed":
+        state.status = "completed";
+        state.completedAt = e.ts;
+        if (e.data?.result) state.meta = { ...state.meta, result: e.data.result };
+        break;
+      case "flow.failed":
+        state.status = "failed";
+        state.completedAt = e.ts;
+        if (e.data?.error) state.meta = { ...state.meta, error: e.data.error };
+        break;
+      case "flow.cancel":
+      case "flow.canceled":
+        state.status = "canceled";
+        state.completedAt = e.ts;
+        break;
+      case "flow.stalled":
+        state.status = "stalled";
+        if (e.data?.lastActivityAt) state.meta = { ...state.meta, lastActivityAt: e.data.lastActivityAt };
+        if (e.data?.stallTimeout) state.meta = { ...state.meta, stallTimeout: e.data.stallTimeout };
+        break;
+      case "step.started": {
+        if (!stepKey) break;
+        if (!state.steps[stepKey]) {
+          state.steps[stepKey] = {
+            status: "running",
+            attempt: 1
+          };
+        }
+        const currentStatus = state.steps[stepKey].status;
+        if (currentStatus !== "completed" && currentStatus !== "failed" && currentStatus !== "timeout") {
+          state.steps[stepKey].status = "running";
+        }
+        state.steps[stepKey].startedAt = e.ts;
+        state.steps[stepKey].attempt = e.attempt || state.steps[stepKey].attempt || 1;
+        break;
+      }
+      case "step.completed": {
+        if (!stepKey) break;
+        if (!state.steps[stepKey]) {
+          state.steps[stepKey] = { status: "completed", attempt: 1 };
+        }
+        state.steps[stepKey].status = "completed";
+        state.steps[stepKey].completedAt = e.ts;
+        if (e.data?.result !== void 0) state.steps[stepKey].result = e.data.result;
+        break;
+      }
+      case "step.failed": {
+        if (!stepKey) break;
+        if (!state.steps[stepKey]) {
+          state.steps[stepKey] = { status: "failed", attempt: 1 };
+        }
+        const willRetry = e.data?.willRetry || e.data?.retry;
+        state.steps[stepKey].status = willRetry ? "retrying" : "failed";
+        state.steps[stepKey].error = e.data?.error || e.data?.message;
+        if (!willRetry) {
+          state.steps[stepKey].completedAt = e.ts;
+        }
+        break;
+      }
+      case "step.retry": {
+        if (!stepKey) break;
+        if (!state.steps[stepKey]) {
+          state.steps[stepKey] = { status: "retrying", attempt: 1 };
+        }
+        state.steps[stepKey].status = "retrying";
+        state.steps[stepKey].attempt = e.data?.nextAttempt || e.attempt || 1;
+        state.steps[stepKey].error = e.data?.error;
+        break;
+      }
+      case "step.await.time":
+      case "step.await.event":
+      case "step.await.trigger": {
+        if (!stepKey) break;
+        if (!state.steps[stepKey]) {
+          state.steps[stepKey] = { status: "waiting", attempt: 1 };
+        }
+        state.steps[stepKey].status = "waiting";
+        state.steps[stepKey].awaitType = eventType.split(".")[2];
+        state.steps[stepKey].awaitData = e.data;
+        break;
+      }
+      case "step.resumed": {
+        if (!stepKey) break;
+        if (!state.steps[stepKey]) {
+          state.steps[stepKey] = { status: "running", attempt: 1 };
+        }
+        state.steps[stepKey].status = "running";
+        delete state.steps[stepKey].awaitType;
+        delete state.steps[stepKey].awaitData;
+        break;
+      }
+      case "step.await.timeout": {
+        if (!stepKey) break;
+        if (!state.steps[stepKey]) {
+          state.steps[stepKey] = { status: "timeout", attempt: 1 };
+        }
+        state.steps[stepKey].status = "timeout";
+        state.steps[stepKey].error = `Await timeout after ${e.data?.duration}ms`;
+        state.steps[stepKey].completedAt = e.ts;
+        break;
+      }
+      case "runner.log":
+      case "log": {
+        state.logs.push({
+          ts: e.ts,
+          step: stepKey,
+          level: e.data?.level || "info",
+          msg: e.data?.message || e.data?.msg || (typeof e.data === "string" ? e.data : String(e.data)),
+          data: e.data
+        });
+        break;
+      }
+      // Handle any unrecognized events - log for debugging
+      default: {
+        if (typeof console !== "undefined" && eventType && !eventType.startsWith("_")) {
+          console.debug("[useFlowState] Unhandled event type:", eventType, {
+            stepName: e.stepName,
+            stepKey,
+            data: e.data
+          });
+        }
+      }
+    }
+  }
+  if (!state.startedAt && events.length > 0 && events[0]) {
+    state.startedAt = events[0].ts;
+  }
+  if (state.status === "running" && state.startedAt && Object.keys(state.steps).length > 0) {
+    const hasRunningSteps = Object.values(state.steps).some(
+      (s) => s.status === "running" || s.status === "retrying" || s.status === "waiting"
+    );
+    const hasFailedSteps = Object.values(state.steps).some((s) => s.status === "failed");
+    const allStepsTerminal = Object.values(state.steps).every(
+      (s) => s.status === "completed" || s.status === "failed" || s.status === "timeout"
+    );
+    if (!hasRunningSteps && allStepsTerminal) {
+      if (hasFailedSteps) {
+        state.status = "failed";
+      } else {
+        state.status = "completed";
+      }
+      const latestCompletion = Object.values(state.steps).map((s) => s.completedAt).filter(Boolean).sort().pop();
+      if (latestCompletion) {
+        state.completedAt = latestCompletion;
+      }
+    }
+  }
+  return state;
+}
+export function useFlowState(initialEvents = []) {
+  const events = ref(initialEvents);
+  const state = computed(() => reduceFlowState(events.value));
+  const addEvent = (event) => {
+    events.value.push(event);
+  };
+  const addEvents = (newEvents) => {
+    events.value.push(...newEvents);
+  };
+  const reset = (newEvents = []) => {
+    events.value = newEvents;
+  };
+  const isRunning = computed(() => state.value.status === "running");
+  const isCompleted = computed(() => state.value.status === "completed");
+  const isFailed = computed(() => state.value.status === "failed");
+  const isCanceled = computed(() => state.value.status === "canceled");
+  const isStalled = computed(() => state.value.status === "stalled");
+  const stepList = computed(() => {
+    return Object.entries(state.value.steps).map(([key, step]) => ({
+      key,
+      ...step
+    }));
+  });
+  const runningSteps = computed(() => {
+    return stepList.value.filter((s) => s.status === "running");
+  });
+  const waitingSteps = computed(() => {
+    return stepList.value.filter((s) => s.status === "waiting");
+  });
+  const failedSteps = computed(() => {
+    return stepList.value.filter((s) => s.status === "failed");
+  });
+  const completedSteps = computed(() => {
+    return stepList.value.filter((s) => s.status === "completed");
+  });
+  return {
+    // Raw data
+    events,
+    state,
+    // Methods
+    addEvent,
+    addEvents,
+    reset,
+    // Computed helpers
+    isRunning,
+    isCompleted,
+    isFailed,
+    isCanceled,
+    isStalled,
+    stepList,
+    runningSteps,
+    waitingSteps,
+    failedSteps,
+    completedSteps
+  };
+}

package/dist/runtime/app/composables/useFlowWebSocket.d.ts

@@ -0,0 +1,27 @@
+export interface UseFlowWebSocketOptions {
+    autoReconnect?: boolean;
+    maxRetries?: number;
+    baseDelayMs?: number;
+    maxDelayMs?: number;
+    onOpen?: () => void;
+    onError?: (err?: any) => void;
+    onClose?: (event?: CloseEvent) => void;
+}
+export interface FlowSubscription {
+    flowName: string;
+    runId: string;
+    onEvent: (event: any) => void;
+    onHistory?: (events: any[]) => void;
+}
+/**
+ * WebSocket composable for flow run events
+ * Replaces the SSE-based useEventSSE with a more reliable WebSocket implementation
+ */
+export declare function useFlowWebSocket(): {
+    subscribe: (subscription: FlowSubscription, opts?: UseFlowWebSocketOptions) => void;
+    unsubscribe: () => void;
+    stop: () => void;
+    connected: import("vue").Ref<boolean, boolean>;
+    reconnecting: import("vue").Ref<boolean, boolean>;
+};
+export default useFlowWebSocket;

package/dist/runtime/app/composables/useFlowWebSocket.js

@@ -0,0 +1,222 @@
+import { ref, onBeforeUnmount } from "#imports";
+export function useFlowWebSocket() {
+  const ws = ref(null);
+  const connected = ref(false);
+  const reconnecting = ref(false);
+  let retry = 0;
+  let reconnectTimer = null;
+  let currentOptions;
+  let currentSubscription = null;
+  let pingInterval = null;
+  let isServerRestarting = false;
+  const computeDelay = (opts) => {
+    const base = Math.max(100, opts?.baseDelayMs ?? 1e3);
+    const max = Math.max(base, opts?.maxDelayMs ?? 1e4);
+    const exp = Math.min(max, base * Math.pow(2, retry));
+    const jitter = Math.floor(Math.random() * Math.min(1e3, exp / 4));
+    return exp + jitter;
+  };
+  const clearTimers = () => {
+    if (reconnectTimer) {
+      try {
+        clearTimeout(reconnectTimer);
+      } catch {
+      }
+      reconnectTimer = null;
+    }
+    if (pingInterval) {
+      try {
+        clearInterval(pingInterval);
+      } catch {
+      }
+      pingInterval = null;
+    }
+  };
+  const send = (data) => {
+    if (ws.value && ws.value.readyState === WebSocket.OPEN) {
+      ws.value.send(JSON.stringify(data));
+    }
+  };
+  const startPingInterval = () => {
+    clearTimers();
+    pingInterval = setInterval(() => {
+      if (ws.value && ws.value.readyState === WebSocket.OPEN) {
+        send({ type: "ping" });
+      }
+    }, 3e4);
+  };
+  const stop = () => {
+    clearTimers();
+    isServerRestarting = false;
+    try {
+      if (ws.value) {
+        ws.value.close(1e3, "Client closing");
+      }
+    } catch (err) {
+      console.warn("[useFlowWebSocket] Error closing WebSocket:", err);
+    }
+    ws.value = null;
+    connected.value = false;
+    reconnecting.value = false;
+    retry = 0;
+    currentSubscription = null;
+  };
+  const attemptReconnect = () => {
+    if (!currentOptions?.autoReconnect) {
+      stop();
+      return;
+    }
+    const max = Math.max(0, currentOptions?.maxRetries ?? 10);
+    if (retry >= max) {
+      console.error("[useFlowWebSocket] Max retries reached");
+      stop();
+      return;
+    }
+    retry++;
+    reconnecting.value = true;
+    const baseDelay = isServerRestarting ? 2e3 : computeDelay(currentOptions);
+    const delay = baseDelay;
+    console.log(`[useFlowWebSocket] Will attempt reconnection in ${delay}ms (attempt ${retry}/${max})${isServerRestarting ? " [server restart]" : ""}`);
+    clearTimers();
+    reconnectTimer = setTimeout(() => {
+      if (currentSubscription) {
+        innerSubscribe(currentSubscription, currentOptions);
+      }
+    }, delay);
+  };
+  const setupWebSocket = (socket, subscription, opts) => {
+    socket.onopen = () => {
+      console.log("[useFlowWebSocket] Connected");
+      connected.value = true;
+      reconnecting.value = false;
+      retry = 0;
+      startPingInterval();
+      send({
+        type: "subscribe",
+        flowName: subscription.flowName,
+        runId: subscription.runId
+      });
+      opts?.onOpen?.();
+    };
+    socket.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        switch (data.type) {
+          case "connected":
+            console.log("[useFlowWebSocket] Server acknowledged connection");
+            break;
+          case "subscribed":
+            console.log("[useFlowWebSocket] Subscribed to flow:", data.flowName, data.runId);
+            break;
+          case "unsubscribed":
+            console.log("[useFlowWebSocket] Unsubscribed from flow:", data.flowName, data.runId);
+            break;
+          case "history":
+            if (subscription.onHistory) {
+              subscription.onHistory(data.events);
+            } else {
+              for (const eventData of data.events) {
+                subscription.onEvent(eventData);
+              }
+            }
+            break;
+          case "event":
+            subscription.onEvent(data.event);
+            break;
+          case "pong":
+            break;
+          case "server-restart":
+            console.log("[useFlowWebSocket] Server is restarting (HMR)");
+            isServerRestarting = true;
+            break;
+          case "error":
+            console.error("[useFlowWebSocket] Server error:", data.message);
+            opts?.onError?.(new Error(data.message));
+            break;
+          default:
+            console.warn("[useFlowWebSocket] Unknown message type:", data.type);
+        }
+      } catch (err) {
+        console.error("[useFlowWebSocket] Error parsing message:", err);
+      }
+    };
+    socket.onerror = (err) => {
+      console.error("[useFlowWebSocket] WebSocket error:", err);
+      opts?.onError?.(err);
+    };
+    socket.onclose = (event) => {
+      console.log("[useFlowWebSocket] Connection closed:", event.code, event.reason);
+      connected.value = false;
+      clearTimers();
+      opts?.onClose?.(event);
+      const shouldReconnect = event.code !== 1e3 && opts?.autoReconnect;
+      if (shouldReconnect) {
+        console.log("[useFlowWebSocket] Will attempt reconnection (code:", event.code, ")");
+        attemptReconnect();
+      } else {
+        isServerRestarting = false;
+      }
+    };
+  };
+  const innerSubscribe = (subscription, opts) => {
+    if (import.meta.server || typeof WebSocket === "undefined") {
+      console.warn("[useFlowWebSocket] WebSocket not available (SSR context)");
+      return;
+    }
+    if (ws.value && ws.value.readyState === WebSocket.OPEN) {
+      console.log("[useFlowWebSocket] Reusing connection, switching subscription");
+      if (currentSubscription) {
+        send({
+          type: "unsubscribe",
+          flowName: currentSubscription.flowName,
+          runId: currentSubscription.runId
+        });
+      }
+      currentSubscription = subscription;
+      send({
+        type: "subscribe",
+        flowName: subscription.flowName,
+        runId: subscription.runId
+      });
+      return;
+    }
+    if (ws.value) {
+      stop();
+    }
+    currentOptions = opts;
+    currentSubscription = subscription;
+    try {
+      const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+      const wsUrl = `${protocol}//${window.location.host}/api/_flows/ws`;
+      const socket = new WebSocket(wsUrl);
+      ws.value = socket;
+      setupWebSocket(socket, subscription, opts);
+    } catch (err) {
+      console.error("[useFlowWebSocket] Error creating WebSocket:", err);
+      opts?.onError?.(err);
+      attemptReconnect();
+    }
+  };
+  const subscribe = (subscription, opts) => {
+    innerSubscribe(subscription, opts);
+  };
+  const unsubscribe = () => {
+    if (currentSubscription && ws.value && ws.value.readyState === WebSocket.OPEN) {
+      send({
+        type: "unsubscribe",
+        flowName: currentSubscription.flowName,
+        runId: currentSubscription.runId
+      });
+    }
+    currentSubscription = null;
+  };
+  onBeforeUnmount(() => stop());
+  return {
+    subscribe,
+    unsubscribe,
+    stop,
+    connected,
+    reconnecting
+  };
+}
+export default useFlowWebSocket;

package/dist/runtime/app/composables/useFlowsNavigation.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Composable for managing flows page navigation state
+ * Uses URL query params for persistence across HMR
+ */
+export declare function useFlowsNavigation(): {
+    selectedFlow: import("vue").WritableComputedRef<string, string>;
+    selectedRunId: import("vue").WritableComputedRef<string, string>;
+    timelineOpen: import("vue").Ref<boolean, boolean>;
+    selectedTab: import("vue").WritableComputedRef<string, string>;
+};

package/dist/runtime/app/composables/useFlowsNavigation.js

@@ -0,0 +1,58 @@
+import { computed, ref, watch, useRoute, useRouter } from "#imports";
+export function useFlowsNavigation() {
+  const route = useRoute();
+  const router = useRouter();
+  const selectedFlow = computed({
+    get: () => route.query.flow || "",
+    set: (value) => {
+      router.push({
+        query: {
+          ...route.query,
+          flow: value || void 0,
+          run: void 0
+          // Clear run when flow changes
+        }
+      });
+    }
+  });
+  const selectedRunId = computed({
+    get: () => route.query.run || "",
+    set: (value) => {
+      router.push({
+        query: {
+          ...route.query,
+          run: value || void 0
+        }
+      });
+    }
+  });
+  const timelineOpen = ref(route.query.timeline === "true");
+  watch(timelineOpen, (value) => {
+    router.push({
+      query: {
+        ...route.query,
+        timeline: value ? "true" : void 0
+      }
+    });
+  });
+  watch(() => route.query.timeline, (value) => {
+    timelineOpen.value = value === "true";
+  });
+  const selectedTab = computed({
+    get: () => route.query.tab || "overview",
+    set: (value) => {
+      router.push({
+        query: {
+          ...route.query,
+          tab: value !== "overview" ? value : void 0
+        }
+      });
+    }
+  });
+  return {
+    selectedFlow,
+    selectedRunId,
+    timelineOpen,
+    selectedTab
+  };
+}

package/dist/runtime/app/composables/useQueueJobs.d.ts

@@ -0,0 +1,26 @@
+import { type Ref } from '#imports';
+import type { FetchError } from 'ofetch';
+export interface Job {
+    id: string;
+    name: string;
+    data: any;
+    state?: 'waiting' | 'active' | 'completed' | 'failed' | 'delayed' | 'paused';
+    returnvalue?: any;
+    failedReason?: string;
+    timestamp?: number;
+    processedOn?: number;
+    finishedOn?: number;
+}
+export interface JobsResponse {
+    jobs: Job[];
+}
+/**
+ * Composable for fetching jobs for a queue
+ * Client-only to avoid hydration mismatches
+ */
+export declare function useQueueJobs(queueName: Ref<string>, state?: Ref<string | null>): {
+    data: Ref<JobsResponse | null | undefined>;
+    refresh: () => Promise<void>;
+    status: Ref<'idle' | 'pending' | 'success' | 'error'>;
+    error: Ref<FetchError | null | undefined>;
+};