@nvent-addon/app 0.4.5 → 0.5.1

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

@@ -12,3 +12,8 @@ export declare function useAnalyzedFlows(): any;
  * Use this when you don't need reactivity.
  */
 export declare function getAnalyzedFlows(): AnalyzedFlows;
+/**
+ * Get analyzed flows with flattened structure for UI consumption.
+ * Merges analyzed properties to top level for easier access.
+ */
+export declare function useFlattenedAnalyzedFlows(): import("vue").ComputedRef<any>;

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

@@ -1,8 +1,22 @@
 import { analyzedFlows } from "#build/analyzed-flows";
-import { readonly, ref } from "#imports";
+import { readonly, ref, computed } from "#imports";
 export function useAnalyzedFlows() {
   return readonly(ref(analyzedFlows));
 }
 export function getAnalyzedFlows() {
   return analyzedFlows;
 }
+export function useFlattenedAnalyzedFlows() {
+  return computed(() => {
+    return analyzedFlows.map((flow) => ({
+      id: flow.id,
+      entry: flow.entry,
+      steps: flow.analyzed?.steps || flow.steps || {},
+      levels: flow.analyzed?.levels || [],
+      maxLevel: flow.analyzed?.maxLevel || 0,
+      stallTimeout: flow.analyzed?.stallTimeout,
+      awaitPatterns: flow.analyzed?.awaitPatterns,
+      hasAwait: flow.analyzed?.awaitPatterns?.steps?.length > 0 || false
+    }));
+  });
+}

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

@@ -1,4 +1,5 @@
 import { shallowRef } from '#imports';
+import { createHooks } from 'hookable';
 export type ComponentRouteRecord = {
     path: string;
     component: any;
@@ -13,6 +14,12 @@ export interface UseComponentRouterOptions {
     provideKey?: string;
     debug?: boolean;
 }
+type RouterHooks = {
+    navigated: (data: {
+        path: string;
+        params: Record<string, string>;
+    }) => void;
+};
 type RouterContext = {
     route: ReturnType<typeof shallowRef<{
         path: string;
@@ -25,6 +32,7 @@ type RouterContext = {
     makeHref: (patternOrPath: string, params?: Record<string, any>) => string;
     pushTo: (patternOrPath: string, params?: Record<string, any>) => Promise<void>;
     replaceTo: (patternOrPath: string, params?: Record<string, any>) => Promise<void>;
+    hooks: ReturnType<typeof createHooks<RouterHooks>>;
 };
 export declare function useComponentRouter(): RouterContext & {
     component?: any;

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

@@ -8,6 +8,7 @@ import {
   watch,
   defineAsyncComponent
 } from "#imports";
+import { createHooks } from "hookable";
 export function useComponentRouter(opts) {
   const CTX_KEY = "component-router";
   if (!opts || !("routes" in opts) || !opts.routes) {
@@ -23,6 +24,7 @@ export function useComponentRouter(opts) {
       );
       const noopMake = (p, _params) => p;
       const noopHref = (p, _params) => p;
+      const emptyHooks = createHooks();
       return {
         route: emptyRoute,
         push: warnNav,
@@ -31,6 +33,7 @@ export function useComponentRouter(opts) {
         makeHref: noopHref,
         pushTo: async (p, _params) => warnNav(p),
         replaceTo: async (p, _params) => warnNav(p),
+        hooks: emptyHooks,
         component: void 0
       };
     }
@@ -55,6 +58,7 @@ export function useComponentRouter(opts) {
     params: {},
     query: {}
   });
+  const hooks = createHooks();
   const dbg = (...args) => {
     if (props.debug) console.info("[component-router]", ...args);
   };
@@ -119,6 +123,8 @@ export function useComponentRouter(opts) {
       // Only use query params from the current path, not from nuxtRoute
     };
     dbg("current", route.value);
+    dbg("calling navigated hook with", { path: pathOnly || path, params: m.params });
+    hooks.callHook("navigated", { path: pathOnly || path, params: m.params });
   }
   function readFromHost() {
     if (props.mode === "query") {
@@ -137,6 +143,8 @@ export function useComponentRouter(opts) {
   }
   async function writeToHost(path, replace2 = false) {
     dbg("writeToHost", path, { replace: replace2, mode: props.mode });
+    const prevPath = route.value.path;
+    dbg("current path before write:", prevPath, "new path:", path);
     if (props.mode === "query") {
       const [pathOnly, queryString] = path.split("?");
       const pathQuery = {};
@@ -199,7 +207,7 @@ export function useComponentRouter(opts) {
     const path = makePath(patternOrPath, params);
     await replace(path);
   }
-  const exposed = { push, replace, route, makePath, makeHref, pushTo, replaceTo };
+  const exposed = { push, replace, route, makePath, makeHref, pushTo, replaceTo, hooks };
   provide(props.provideKey, exposed);
   const initialPath = readFromHost() || props.initial || props.routes[0]?.path || "/";
   dbg("init", { initialPath });
@@ -215,7 +223,7 @@ export function useComponentRouter(opts) {
       if (path) setCurrent(path);
     }
   );
-  return { component, route, push, replace, makePath, makeHref, pushTo, replaceTo };
+  return { component, route, push, replace, makePath, makeHref, pushTo, replaceTo, hooks };
 }
 export default useComponentRouter;
 export function createComponentRoutes(glob, options) {

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

@@ -6,7 +6,7 @@ export declare function useFlowRunsInfinite(flowId: Ref<string>): {
     items: import("vue").ComputedRef<{
         id: string;
         flowName: string;
-        status: "running" | "completed" | "failed" | "canceled" | "stalled" | "unknown";
+        status: "running" | "completed" | "failed" | "canceled" | "stalled" | "awaiting" | "unknown";
         createdAt: string;
         startedAt?: string | undefined;
         completedAt?: string | undefined;

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

@@ -16,6 +16,13 @@ export function reduceFlowState(events) {
         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 };
+        if (e.data?.trigger) {
+          state.meta = {
+            ...state.meta,
+            triggerName: e.data.trigger.name,
+            triggerType: e.data.trigger.type || "manual"
+          };
+        }
         break;
       case "flow.complete":
       case "flow.completed":
@@ -119,6 +126,64 @@ export function reduceFlowState(events) {
         state.steps[stepKey].completedAt = e.ts;
         break;
       }
+      case "await.registered": {
+        if (!stepKey) break;
+        const awaitKeyAfter = `${stepKey}:await-after`;
+        const awaitKeyBefore = `${stepKey}:await-before`;
+        if (!state.steps[awaitKeyAfter]) {
+          state.steps[awaitKeyAfter] = { status: "waiting", attempt: 1 };
+        }
+        state.steps[awaitKeyAfter].status = "waiting";
+        state.steps[awaitKeyAfter].awaitType = e.data?.awaitType;
+        state.steps[awaitKeyAfter].awaitData = e.data;
+        if (!state.steps[awaitKeyBefore]) {
+          state.steps[awaitKeyBefore] = { status: "waiting", attempt: 1 };
+        }
+        state.steps[awaitKeyBefore].status = "waiting";
+        state.steps[awaitKeyBefore].awaitType = e.data?.awaitType;
+        state.steps[awaitKeyBefore].awaitData = e.data;
+        break;
+      }
+      case "await.resolved": {
+        if (!stepKey) break;
+        const awaitKeyAfter = `${stepKey}:await-after`;
+        const awaitKeyBefore = `${stepKey}:await-before`;
+        if (!state.steps[awaitKeyAfter]) {
+          state.steps[awaitKeyAfter] = { status: "completed", attempt: 1 };
+        }
+        state.steps[awaitKeyAfter].status = "completed";
+        state.steps[awaitKeyAfter].completedAt = e.ts;
+        state.steps[awaitKeyAfter].awaitType = e.data?.awaitType;
+        if (e.data?.triggerData) state.steps[awaitKeyAfter].result = e.data.triggerData;
+        if (!state.steps[awaitKeyBefore]) {
+          state.steps[awaitKeyBefore] = { status: "completed", attempt: 1 };
+        }
+        state.steps[awaitKeyBefore].status = "completed";
+        state.steps[awaitKeyBefore].completedAt = e.ts;
+        state.steps[awaitKeyBefore].awaitType = e.data?.awaitType;
+        if (e.data?.triggerData) state.steps[awaitKeyBefore].result = e.data.triggerData;
+        break;
+      }
+      case "await.timeout": {
+        if (!stepKey) break;
+        const awaitKeyAfter = `${stepKey}:await-after`;
+        const awaitKeyBefore = `${stepKey}:await-before`;
+        if (!state.steps[awaitKeyAfter]) {
+          state.steps[awaitKeyAfter] = { status: "timeout", attempt: 1 };
+        }
+        state.steps[awaitKeyAfter].status = "timeout";
+        state.steps[awaitKeyAfter].error = `Await timeout`;
+        state.steps[awaitKeyAfter].completedAt = e.ts;
+        state.steps[awaitKeyAfter].awaitType = e.data?.awaitType;
+        if (!state.steps[awaitKeyBefore]) {
+          state.steps[awaitKeyBefore] = { status: "timeout", attempt: 1 };
+        }
+        state.steps[awaitKeyBefore].status = "timeout";
+        state.steps[awaitKeyBefore].error = `Await timeout`;
+        state.steps[awaitKeyBefore].completedAt = e.ts;
+        state.steps[awaitKeyBefore].awaitType = e.data?.awaitType;
+        break;
+      }
       case "runner.log":
       case "log": {
         state.logs.push({

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

@@ -13,14 +13,23 @@ export interface FlowSubscription {
     onEvent: (event: any) => void;
     onHistory?: (events: any[]) => void;
 }
+export interface StatsSubscription {
+    onInitial?: (data: any) => void;
+    onUpdate?: (data: any) => void;
+}
 /**
- * WebSocket composable for flow run events
- * Replaces the SSE-based useEventSSE with a more reliable WebSocket implementation
+ * WebSocket composable for flow run events and flow stats
+ * Architecture: Client (this) → WebSocket → Server Handler → StreamAdapter.subscribe(StreamTopics.flowEvents)
+ * Supports subscribing to specific flow runs and global flow statistics
+ * Uses a singleton connection shared across all instances
  */
 export declare function useFlowWebSocket(): {
     subscribe: (subscription: FlowSubscription, opts?: UseFlowWebSocketOptions) => void;
     unsubscribe: () => void;
+    subscribeStats: (subscription: StatsSubscription, opts?: UseFlowWebSocketOptions) => void;
+    unsubscribeStats: () => void;
     stop: () => void;
+    forceClose: () => void;
     connected: import("vue").Ref<boolean, boolean>;
     reconnecting: import("vue").Ref<boolean, boolean>;
 };

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

@@ -1,14 +1,23 @@
 import { ref, onBeforeUnmount } from "#imports";
+let sharedWs = null;
+let sharedConnected = false;
+let sharedReconnecting = false;
+let retry = 0;
+let reconnectTimer = null;
+let currentOptions;
+let currentSubscription = null;
+let currentStatsSubscription = null;
+let pendingStatsSubscription = false;
+let isStatsSubscribed = false;
+let statsCache = [];
+let pingInterval = null;
+let isServerRestarting = false;
+let refCount = 0;
 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 ws = ref(sharedWs);
+  const connected = ref(sharedConnected);
+  const reconnecting = ref(sharedReconnecting);
+  refCount++;
   const computeDelay = (opts) => {
     const base = Math.max(100, opts?.baseDelayMs ?? 1e3);
     const max = Math.max(base, opts?.maxDelayMs ?? 1e4);
@@ -32,34 +41,55 @@ export function useFlowWebSocket() {
       pingInterval = null;
     }
   };
+  const updateRefs = () => {
+    ws.value = sharedWs;
+    connected.value = sharedConnected;
+    reconnecting.value = sharedReconnecting;
+  };
   const send = (data) => {
-    if (ws.value && ws.value.readyState === WebSocket.OPEN) {
-      ws.value.send(JSON.stringify(data));
+    if (sharedWs && sharedWs.readyState === WebSocket.OPEN) {
+      try {
+        sharedWs.send(JSON.stringify(data));
+        return true;
+      } catch (err) {
+        console.error("[useFlowWebSocket] Error sending message:", err);
+        return false;
+      }
     }
+    return false;
   };
   const startPingInterval = () => {
     clearTimers();
     pingInterval = setInterval(() => {
-      if (ws.value && ws.value.readyState === WebSocket.OPEN) {
+      if (sharedWs && sharedWs.readyState === WebSocket.OPEN) {
         send({ type: "ping" });
       }
     }, 3e4);
   };
   const stop = () => {
+    refCount = Math.max(0, refCount - 1);
+  };
+  const forceClose = () => {
     clearTimers();
     isServerRestarting = false;
     try {
-      if (ws.value) {
-        ws.value.close(1e3, "Client closing");
+      if (sharedWs) {
+        sharedWs.close(1e3, "Client closing");
       }
     } catch (err) {
       console.warn("[useFlowWebSocket] Error closing WebSocket:", err);
     }
-    ws.value = null;
-    connected.value = false;
-    reconnecting.value = false;
+    sharedWs = null;
+    sharedConnected = false;
+    sharedReconnecting = false;
+    updateRefs();
     retry = 0;
+    refCount = 0;
     currentSubscription = null;
+    currentStatsSubscription = null;
+    isStatsSubscribed = false;
+    pendingStatsSubscription = false;
+    statsCache = [];
   };
   const attemptReconnect = () => {
     if (!currentOptions?.autoReconnect) {
@@ -73,29 +103,38 @@ export function useFlowWebSocket() {
       return;
     }
     retry++;
-    reconnecting.value = true;
+    sharedReconnecting = true;
+    updateRefs();
     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);
+      if (currentSubscription || currentStatsSubscription) {
+        connect(currentOptions);
       }
     }, delay);
   };
-  const setupWebSocket = (socket, subscription, opts) => {
+  const setupWebSocket = (socket, opts) => {
     socket.onopen = () => {
       console.log("[useFlowWebSocket] Connected");
-      connected.value = true;
-      reconnecting.value = false;
+      sharedConnected = true;
+      sharedReconnecting = false;
+      updateRefs();
       retry = 0;
       startPingInterval();
-      send({
-        type: "subscribe",
-        flowName: subscription.flowName,
-        runId: subscription.runId
-      });
+      if (currentSubscription) {
+        send({
+          type: "subscribe",
+          flowName: currentSubscription.flowName,
+          runId: currentSubscription.runId
+        });
+      }
+      if (currentStatsSubscription || pendingStatsSubscription) {
+        send({
+          type: "subscribe.stats"
+        });
+        pendingStatsSubscription = false;
+      }
       opts?.onOpen?.();
     };
     socket.onmessage = (event) => {
@@ -103,30 +142,64 @@ export function useFlowWebSocket() {
         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);
+          case "stats.subscribed":
+            isStatsSubscribed = true;
+            break;
+          case "stats.unsubscribed":
+            isStatsSubscribed = false;
+            break;
+          case "flow.stats.initial": {
+            const existingIndex = statsCache.findIndex((s) => s.id === data.data.id);
+            if (existingIndex >= 0) {
+              statsCache[existingIndex] = data.data;
+            } else {
+              statsCache.push(data.data);
+            }
+            if (currentStatsSubscription?.onInitial) {
+              currentStatsSubscription.onInitial(data.data);
+            } else {
+              console.warn("[useFlowWebSocket] No onInitial handler for stats:", data.data);
+            }
+            break;
+          }
+          case "flow.stats.update": {
+            const cacheIndex = statsCache.findIndex((s) => s.id === data.data.id);
+            if (cacheIndex >= 0) {
+              statsCache[cacheIndex] = data.data;
+            } else {
+              statsCache.push(data.data);
+            }
+            if (currentStatsSubscription?.onUpdate) {
+              currentStatsSubscription.onUpdate(data.data);
             } else {
-              for (const eventData of data.events) {
-                subscription.onEvent(eventData);
+              console.warn("[useFlowWebSocket] No onUpdate handler for stats:", data.data);
+            }
+            break;
+          }
+          case "history":
+            if (currentSubscription) {
+              if (currentSubscription.onHistory) {
+                currentSubscription.onHistory(data.events);
+              } else {
+                for (const eventData of data.events) {
+                  currentSubscription.onEvent(eventData);
+                }
               }
             }
             break;
           case "event":
-            subscription.onEvent(data.event);
+            if (currentSubscription) {
+              currentSubscription.onEvent(data.event);
+            }
             break;
           case "pong":
             break;
           case "server-restart":
-            console.log("[useFlowWebSocket] Server is restarting (HMR)");
             isServerRestarting = true;
             break;
           case "error":
@@ -146,51 +219,40 @@ export function useFlowWebSocket() {
     };
     socket.onclose = (event) => {
       console.log("[useFlowWebSocket] Connection closed:", event.code, event.reason);
-      connected.value = false;
+      sharedConnected = false;
+      updateRefs();
       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) => {
+  const connect = (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
-      });
+    if (sharedWs && (sharedWs.readyState === WebSocket.OPEN || sharedWs.readyState === WebSocket.CONNECTING)) {
       return;
     }
-    if (ws.value) {
-      stop();
+    if (sharedWs) {
+      try {
+        sharedWs.close();
+      } catch {
+      }
     }
     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);
+      sharedWs = socket;
+      updateRefs();
+      setupWebSocket(socket, opts);
     } catch (err) {
       console.error("[useFlowWebSocket] Error creating WebSocket:", err);
       opts?.onError?.(err);
@@ -198,10 +260,26 @@ export function useFlowWebSocket() {
     }
   };
   const subscribe = (subscription, opts) => {
-    innerSubscribe(subscription, opts);
+    if (currentSubscription && sharedWs && sharedWs.readyState === WebSocket.OPEN) {
+      send({
+        type: "unsubscribe",
+        flowName: currentSubscription.flowName,
+        runId: currentSubscription.runId
+      });
+    }
+    currentSubscription = subscription;
+    if (sharedWs && sharedWs.readyState === WebSocket.OPEN) {
+      send({
+        type: "subscribe",
+        flowName: subscription.flowName,
+        runId: subscription.runId
+      });
+      return;
+    }
+    connect(opts);
   };
   const unsubscribe = () => {
-    if (currentSubscription && ws.value && ws.value.readyState === WebSocket.OPEN) {
+    if (currentSubscription && sharedWs && sharedWs.readyState === WebSocket.OPEN) {
       send({
         type: "unsubscribe",
         flowName: currentSubscription.flowName,
@@ -210,11 +288,49 @@ export function useFlowWebSocket() {
     }
     currentSubscription = null;
   };
-  onBeforeUnmount(() => stop());
+  const subscribeStats = (subscription, opts) => {
+    currentStatsSubscription = subscription;
+    if (sharedWs && sharedWs.readyState === WebSocket.OPEN) {
+      if (isStatsSubscribed) {
+        if (subscription.onInitial && statsCache.length > 0) {
+          for (const cachedStat of statsCache) {
+            subscription.onInitial(cachedStat);
+          }
+        }
+        return;
+      }
+      send({
+        type: "subscribe.stats"
+      });
+      return;
+    }
+    if (sharedWs && sharedWs.readyState === WebSocket.CONNECTING) {
+      pendingStatsSubscription = true;
+      return;
+    }
+    pendingStatsSubscription = true;
+    connect(opts);
+  };
+  const unsubscribeStats = () => {
+    if (currentStatsSubscription && sharedWs && sharedWs.readyState === WebSocket.OPEN) {
+      send({
+        type: "unsubscribe.stats"
+      });
+    }
+    currentStatsSubscription = null;
+    isStatsSubscribed = false;
+  };
+  onBeforeUnmount(() => {
+    stop();
+  });
   return {
     subscribe,
     unsubscribe,
+    subscribeStats,
+    unsubscribeStats,
     stop,
+    forceClose,
+    // Exposed for debugging/manual cleanup
     connected,
     reconnecting
   };

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

@@ -13,12 +13,23 @@ export interface Job {
 }
 export interface JobsResponse {
     jobs: Job[];
+    count: number;
+    total: number;
+    hasMore: boolean;
 }
 /**
  * Composable for fetching jobs for a queue
  * Client-only to avoid hydration mismatches
  */
-export declare function useQueueJobs(queueName: Ref<string>, state?: Ref<string | null>): {
+export declare function useQueueJobs(queueName: Ref<string>, options?: Ref<{
+    state?: string | null;
+    limit?: number;
+    offset?: number;
+}> | {
+    state?: string | null;
+    limit?: number;
+    offset?: number;
+}): {
     data: Ref<JobsResponse | null | undefined>;
     refresh: () => Promise<void>;
     status: Ref<'idle' | 'pending' | 'success' | 'error'>;

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

@@ -1,20 +1,26 @@
-import { ref, useFetch } from "#imports";
-export function useQueueJobs(queueName, state = ref(null)) {
+import { ref, useFetch, isRef } from "#imports";
+export function useQueueJobs(queueName, options) {
+  const opts = isRef(options) ? options : ref(options || {});
   return useFetch(
     () => {
       const params = new URLSearchParams();
-      if (state.value) {
-        params.append("state", state.value);
+      if (opts.value.state) {
+        params.append("state", opts.value.state);
+      }
+      if (opts.value.limit) {
+        params.append("limit", opts.value.limit.toString());
+      }
+      if (opts.value.offset) {
+        params.append("offset", opts.value.offset.toString());
       }
       const queryString = params.toString();
       return `/api/_queues/${encodeURIComponent(queueName.value)}/job${queryString ? `?${queryString}` : ""}`;
     },
     {
-      key: () => `queue-jobs-${queueName.value}-${state.value || "all"}`,
-      watch: [queueName, state],
+      key: () => `queue-jobs-${queueName.value}-${opts.value.state || "all"}-${opts.value.offset || 0}`,
+      watch: false,
       immediate: true,
       server: false
-      // Client-only
     }
   );
 }