@nvent-addon/app 0.5.7 → 0.5.9

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "nventapp",
-  "version": "0.5.7",
+  "version": "0.5.9",
   "configKey": "nventapp",
   "builder": {
     "@nuxt/module-builder": "1.0.2",

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

@@ -0,0 +1,36 @@
+type __VLS_Props = {
+    selected?: boolean;
+    icon?: string;
+    iconClass?: string;
+    title?: string;
+    subtitle?: string;
+    badge?: string;
+    badgeColor?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
+    meta?: string;
+    metaSecondary?: string;
+};
+declare var __VLS_1: {}, __VLS_9: {}, __VLS_11: {}, __VLS_19: {}, __VLS_21: {};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_1) => any;
+} & {
+    title?: (props: typeof __VLS_9) => any;
+} & {
+    badge?: (props: typeof __VLS_11) => any;
+} & {
+    subtitle?: (props: typeof __VLS_19) => any;
+} & {
+    meta?: (props: typeof __VLS_21) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,73 @@
+<template>
+  <div
+    class="px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-900/50 cursor-pointer transition-colors"
+    :class="{
+  'bg-blue-50 dark:bg-blue-950/30 border-l-2 border-l-blue-500': selected
+}"
+    @click="$emit('click')"
+  >
+    <div class="flex items-start gap-3">
+      <div
+        v-if="icon || $slots.icon"
+        class="flex-shrink-0 mt-0.5"
+      >
+        <slot name="icon">
+          <UIcon
+            v-if="icon"
+            :name="icon"
+            class="w-5 h-5"
+            :class="iconClass"
+          />
+        </slot>
+      </div>
+      <div class="flex-1 min-w-0">
+        <div class="flex items-center justify-between gap-2 mb-1">
+          <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
+            <slot name="title">
+              {{ title }}
+            </slot>
+          </h3>
+          <slot name="badge">
+            <UBadge
+              v-if="badge"
+              :label="badge"
+              :color="badgeColor"
+              variant="subtle"
+              size="xs"
+              class="capitalize flex-shrink-0"
+            />
+          </slot>
+        </div>
+        <p
+          v-if="subtitle || $slots.subtitle"
+          class="text-xs text-gray-500 dark:text-gray-400 font-mono truncate mb-1"
+        >
+          <slot name="subtitle">
+            {{ subtitle }}
+          </slot>
+        </p>
+        <div class="flex items-center gap-3 text-xs text-gray-500 dark:text-gray-400">
+          <slot name="meta">
+            <span v-if="meta">{{ meta }}</span>
+            <span v-if="metaSecondary">• {{ metaSecondary }}</span>
+          </slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  selected: { type: Boolean, required: false },
+  icon: { type: String, required: false },
+  iconClass: { type: String, required: false },
+  title: { type: String, required: false },
+  subtitle: { type: String, required: false },
+  badge: { type: String, required: false },
+  badgeColor: { type: String, required: false },
+  meta: { type: String, required: false },
+  metaSecondary: { type: String, required: false }
+});
+defineEmits(["click"]);
+</script>

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

@@ -0,0 +1,36 @@
+type __VLS_Props = {
+    selected?: boolean;
+    icon?: string;
+    iconClass?: string;
+    title?: string;
+    subtitle?: string;
+    badge?: string;
+    badgeColor?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
+    meta?: string;
+    metaSecondary?: string;
+};
+declare var __VLS_1: {}, __VLS_9: {}, __VLS_11: {}, __VLS_19: {}, __VLS_21: {};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_1) => any;
+} & {
+    title?: (props: typeof __VLS_9) => any;
+} & {
+    badge?: (props: typeof __VLS_11) => any;
+} & {
+    subtitle?: (props: typeof __VLS_19) => any;
+} & {
+    meta?: (props: typeof __VLS_21) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,18 +1,40 @@
 import { type Ref } from '#imports';
 import type { FetchError } from 'ofetch';
-interface FlowRun {
+export interface FlowRun {
     id: string;
-    [key: string]: any;
+    flowName: string;
+    status: 'running' | 'completed' | 'failed' | 'canceled' | 'stalled' | 'awaiting' | 'unknown';
+    createdAt: string;
+    startedAt?: string;
+    completedAt?: string;
+    stepCount: number;
+    completedSteps: number;
+}
+export interface FlowRunsResponse {
+    flowName: string;
+    count: number;
+    total: number;
+    offset: number;
+    limit: number;
+    hasMore: boolean;
+    items: FlowRun[];
 }
 /**
- * Composable for fetching and managing flow runs
- * Simple approach: Fresh fetch on every refresh, no stale cache
+ * Composable for fetching flow runs with pagination
+ * Similar pattern to useTriggerEvents - supports server-side pagination
  * Client-only to avoid hydration mismatches
  */
-export declare function useFlowRuns(flowId: Ref<string>): {
-    runs: Ref<FlowRun[] | null | undefined>;
+export declare function useFlowRuns(flowId: Ref<string>, options?: Ref<{
+    limit?: number;
+    offset?: number;
+    status?: string | null;
+}> | {
+    limit?: number;
+    offset?: number;
+    status?: string | null;
+}): {
+    runs: Ref<FlowRunsResponse | null | undefined>;
     refresh: () => Promise<void>;
     status: Ref<'idle' | 'pending' | 'success' | 'error'>;
     error: Ref<FetchError | null | undefined>;
 };
-export {};

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

@@ -1,28 +1,41 @@
-import { ref, watch, useFetch } from "#imports";
-export function useFlowRuns(flowId) {
+import { ref, watch, useFetch, isRef } from "#imports";
+export function useFlowRuns(flowId, options) {
   const refreshCounter = ref(0);
+  const opts = isRef(options) ? options : ref(options || {});
+  const buildUrl = () => {
+    if (!flowId.value) return "/api/_flows/__invalid__/runs";
+    const params = new URLSearchParams();
+    params.append("_t", refreshCounter.value.toString());
+    if (opts.value.limit) params.append("limit", opts.value.limit.toString());
+    if (opts.value.offset !== void 0) params.append("offset", opts.value.offset.toString());
+    if (opts.value.status) params.append("status", opts.value.status);
+    return `/api/_flows/${encodeURIComponent(flowId.value)}/runs?${params.toString()}`;
+  };
   const { data: runs, refresh: _refresh, status, error } = useFetch(
-    () => `/api/_flows/${encodeURIComponent(flowId.value)}/runs?_t=${refreshCounter.value}`,
+    buildUrl,
     {
       immediate: false,
       watch: false,
       // Disable automatic watch to prevent SSR execution
       server: false
       // Client-only to avoid hydration issues
-      // Don't use a key - this prevents Nuxt from caching across calls
     }
   );
   const refresh = async () => {
+    if (!flowId.value) return;
     refreshCounter.value++;
     await _refresh();
   };
   watch(flowId, (newFlow, oldFlow) => {
-    if (import.meta.client && newFlow) {
-      if (newFlow !== oldFlow || !runs.value) {
-        refresh();
-      }
+    if (import.meta.client && newFlow && newFlow !== oldFlow) {
+      refresh();
     }
   }, { immediate: true });
+  watch(() => opts.value, () => {
+    if (import.meta.client && flowId.value) {
+      refresh();
+    }
+  }, { deep: true });
   return {
     runs,
     refresh,

package/dist/runtime/app/pages/flows/[name].vue

@@ -131,54 +131,23 @@
           </div>
           <div
             v-else
-            ref="runsScrollContainer"
-            class="flex-1 overflow-y-auto min-h-0 divide-y divide-gray-100 dark:divide-gray-800"
-            @scroll="handleRunsScroll"
+            class="flex-1 min-h-0 flex flex-col overflow-hidden"
           >
-            <div
-              v-for="r in runs"
-              :key="r.id"
-              class="group"
-            >
-              <div
-                class="px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-900/50 transition-colors cursor-pointer"
-                :class="{ 'bg-gray-50 dark:bg-gray-900': selectedRunId === r.id }"
+            <div class="flex-1 min-h-0 overflow-y-auto divide-y divide-gray-100 dark:divide-gray-800">
+              <SelectableListItem
+                v-for="r in runs"
+                :key="r.id"
+                :selected="selectedRunId === r.id"
+                :icon="getRunStatusIcon(r.status)"
+                :icon-class="getRunStatusIconClass(r.status)"
+                :subtitle="truncateId(r.id)"
+                :meta="formatTime(r.createdAt)"
                 @click="selectRun(r.id)"
               >
-                <div class="flex items-start justify-between gap-3">
-                  <div class="flex-1 min-w-0">
-                    <div class="text-xs font-mono text-gray-900 dark:text-gray-100 truncate">
-                      {{ r.id?.substring(0, 8) }}...{{ r.id?.substring(r.id?.length - 4) }}
-                    </div>
-                    <div class="flex items-center gap-3 mt-1.5">
-                      <div class="text-xs text-gray-500">
-                        {{ formatTime(r.createdAt) }}
-                      </div>
-                      <!-- Step progress -->
-                      <div
-                        v-if="r.stepCount > 0"
-                        class="text-xs text-gray-500 flex items-center gap-1"
-                      >
-                        <UIcon
-                          name="i-lucide-list-checks"
-                          class="w-3 h-3"
-                        />
-                        <span>{{ r.completedSteps }}/{{ r.stepCount }}</span>
-                      </div>
-                      <!-- Duration (if completed) -->
-                      <div
-                        v-if="r.completedAt && r.startedAt"
-                        class="text-xs text-gray-500 flex items-center gap-1"
-                      >
-                        <UIcon
-                          name="i-lucide-timer"
-                          class="w-3 h-3"
-                        />
-                        <span>{{ formatDuration(r.startedAt, r.completedAt) }}</span>
-                      </div>
-                    </div>
-                  </div>
-                  <!-- Status badge -->
+                <template #title>
+                  Run {{ r.id?.substring(0, 8) }}
+                </template>
+                <template #badge>
                   <FlowRunStatusBadge
                     :is-running="r.status === 'running'"
                     :is-completed="r.status === 'completed'"
@@ -187,28 +156,56 @@
                     :is-stalled="r.status === 'stalled'"
                     :is-awaiting="r.status === 'awaiting'"
                   />
-                </div>
+                </template>
+                <template #meta>
+                  <span>{{ formatTime(r.createdAt) }}</span>
+                  <span
+                    v-if="r.stepCount > 0"
+                    class="flex items-center gap-1"
+                  >
+                    <UIcon
+                      name="i-lucide-list-checks"
+                      class="w-3 h-3"
+                    />
+                    {{ r.completedSteps }}/{{ r.stepCount }}
+                  </span>
+                  <span
+                    v-if="r.completedAt && r.startedAt"
+                    class="flex items-center gap-1"
+                  >
+                    <UIcon
+                      name="i-lucide-timer"
+                      class="w-3 h-3"
+                    />
+                    {{ formatDuration(r.startedAt, r.completedAt) }}
+                  </span>
+                </template>
+              </SelectableListItem>
+
+              <!-- Loading indicator -->
+              <div
+                v-if="loadingRuns"
+                class="px-4 py-3 text-center text-xs text-gray-400"
+              >
+                <UIcon
+                  name="i-lucide-loader-2"
+                  class="w-4 h-4 animate-spin inline-block"
+                />
+                <span class="ml-2">Loading runs...</span>
               </div>
             </div>
 
-            <!-- Loading indicator for infinite scroll -->
+            <!-- Pagination Footer -->
             <div
-              v-if="loadingRuns"
-              class="px-4 py-3 text-center text-xs text-gray-400"
+              v-if="totalRuns > runsPerPage"
+              class="border-t border-gray-200 dark:border-gray-800 px-4 py-3 flex items-center justify-center shrink-0"
             >
-              <UIcon
-                name="i-lucide-loader-2"
-                class="w-4 h-4 animate-spin inline-block"
+              <UPagination
+                v-model:page="currentPage"
+                :items-per-page="runsPerPage"
+                :total="totalRuns"
+                size="xs"
               />
-              <span class="ml-2">Loading more runs...</span>
-            </div>
-
-            <!-- End of list indicator -->
-            <div
-              v-else-if="!hasMoreRuns && runs.length > 0"
-              class="px-4 py-3 text-center text-xs text-gray-400"
-            >
-              All runs loaded
             </div>
           </div>
         </div>
@@ -391,17 +388,17 @@
 </template>
 
 <script setup>
-import { ref, computed, watch } from "#imports";
+import { ref, computed, watch, onMounted, onUnmounted } from "#imports";
 import FlowDiagram from "../../components/flow/Diagram.vue";
 import FlowRunOverview from "../../components/flow/RunOverview.vue";
 import FlowRunTimeline from "../../components/flow/RunTimeline.vue";
 import FlowRunStatusBadge from "../../components/flow/RunStatusBadge.vue";
 import ConfirmDialog from "../../components/ConfirmDialog.vue";
+import SelectableListItem from "../../components/SelectableListItem.vue";
 import { useRoute, useRouter } from "#app";
 import { useAnalyzedFlows } from "../../composables/useAnalyzedFlows";
-import { useFlowRunsInfinite } from "../../composables/useFlowRunsInfinite";
+import { useFlowRuns } from "../../composables/useFlowRuns";
 import { useFlowRunTimeline } from "../../composables/useFlowRunTimeline";
-import { useFlowRunsPolling } from "../../composables/useFlowRunsPolling";
 import { useComponentRouter } from "../../composables/useComponentRouter";
 const componentRouter = useComponentRouter();
 const router = useRouter();
@@ -449,18 +446,64 @@ const selectedFlowDef = computed(() => {
 });
 const selectedFlowRef = computed(() => selectedFlow.value || "");
 const selectedRunIdRef = computed(() => selectedRunId.value || "");
+const runsPerPage = 20;
+const currentPage = computed({
+  get: () => {
+    const page = route.query.page;
+    return page ? Number.parseInt(page, 10) : 1;
+  },
+  set: (value) => {
+    router.push({
+      query: {
+        ...route.query,
+        page: value > 1 ? value.toString() : void 0
+      }
+    });
+  }
+});
+const runsQueryOptions = computed(() => ({
+  limit: runsPerPage,
+  offset: (currentPage.value - 1) * runsPerPage
+}));
 const {
-  items: runs,
-  total: totalRuns,
-  loading: loadingRuns,
-  hasMore: hasMoreRuns,
-  loadMore: loadMoreRuns,
+  runs: runsResponse,
   refresh: refreshRuns,
-  checkForNewRuns
-} = useFlowRunsInfinite(selectedFlowRef);
+  status: runsStatus
+} = useFlowRuns(selectedFlowRef, runsQueryOptions);
+const runs = computed(() => runsResponse.value?.items || []);
+const totalRuns = computed(() => runsResponse.value?.total || 0);
+const loadingRuns = computed(() => runsStatus.value === "pending");
 const { flowState, isConnected, isReconnecting } = useFlowRunTimeline(selectedFlowRef, selectedRunIdRef);
-const shouldPoll = computed(() => !!selectedFlow.value);
-useFlowRunsPolling(checkForNewRuns, shouldPoll);
+let pollInterval = null;
+const startPolling = () => {
+  if (pollInterval) return;
+  pollInterval = setInterval(() => {
+    if (selectedFlow.value) {
+      refreshRuns();
+    }
+  }, 3e3);
+};
+const stopPolling = () => {
+  if (pollInterval) {
+    clearInterval(pollInterval);
+    pollInterval = null;
+  }
+};
+watch(selectedFlow, (flow) => {
+  if (flow) {
+    startPolling();
+  } else {
+    stopPolling();
+  }
+}, { immediate: true });
+onMounted(() => {
+  if (import.meta.client && selectedFlow.value) {
+    startPolling();
+  }
+});
+onUnmounted(() => {
+  stopPolling();
+});
 const startFlowModalOpen = ref(false);
 const flowInputJson = ref("{}");
 const jsonError = ref("");
@@ -491,17 +534,6 @@ watch(flowInputJson, (value) => {
     jsonError.value = err instanceof Error ? err.message : "Invalid JSON";
   }
 });
-const runsScrollContainer = ref(null);
-const handleRunsScroll = (event) => {
-  if (!hasMoreRuns.value || loadingRuns.value) return;
-  const container = event.target;
-  const scrollTop = container.scrollTop;
-  const scrollHeight = container.scrollHeight;
-  const clientHeight = container.clientHeight;
-  if (scrollTop + clientHeight >= scrollHeight - 200) {
-    loadMoreRuns();
-  }
-};
 const formatTime = (timestamp) => {
   const date = new Date(timestamp);
   const now = /* @__PURE__ */ new Date();
@@ -533,6 +565,46 @@ const formatDuration = (start, end) => {
   }
   return `${seconds}s`;
 };
+const truncateId = (id) => {
+  if (!id || id.length <= 16) return id;
+  return `${id.substring(0, 8)}...${id.substring(id.length - 8)}`;
+};
+const getRunStatusIcon = (status) => {
+  switch (status) {
+    case "running":
+      return "i-lucide-loader-2";
+    case "completed":
+      return "i-lucide-check-circle";
+    case "failed":
+      return "i-lucide-x-circle";
+    case "canceled":
+      return "i-lucide-ban";
+    case "stalled":
+      return "i-lucide-alert-triangle";
+    case "awaiting":
+      return "i-lucide-pause-circle";
+    default:
+      return "i-lucide-circle";
+  }
+};
+const getRunStatusIconClass = (status) => {
+  switch (status) {
+    case "running":
+      return "text-blue-500 animate-spin";
+    case "completed":
+      return "text-emerald-500";
+    case "failed":
+      return "text-red-500";
+    case "canceled":
+      return "text-gray-500";
+    case "stalled":
+      return "text-amber-500";
+    case "awaiting":
+      return "text-purple-500";
+    default:
+      return "text-gray-400";
+  }
+};
 const runSnapshot = computed(() => {
   const state = flowState.state.value;
   const flowMeta = selectedFlowMeta.value;

package/dist/runtime/app/pages/queues/jobs.vue

@@ -88,50 +88,27 @@
             class="flex-1 min-h-0 overflow-y-auto"
           >
             <div class="divide-y divide-gray-100 dark:divide-gray-800">
-              <div
+              <SelectableListItem
                 v-for="job in paginatedJobs"
                 :key="job.id"
-                class="px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-900/50 cursor-pointer transition-colors"
-                :class="{
-  'bg-blue-50 dark:bg-blue-950/30 border-l-2 border-l-blue-500': selectedJobId === job.id
-}"
+                :selected="selectedJobId === job.id"
+                :icon="getJobIcon(job.state)"
+                :icon-class="getJobIconColor(job.state)"
+                :title="job.name"
+                :subtitle="truncateId(job.id)"
+                :badge="job.state || 'unknown'"
+                :badge-color="getStateBadgeColor(job.state)"
                 @click="selectJob(job.id)"
               >
-                <div class="flex items-start gap-3">
-                  <div class="flex-shrink-0 mt-0.5">
-                    <UIcon
-                      :name="getJobIcon(job.state)"
-                      class="w-5 h-5"
-                      :class="getJobIconColor(job.state)"
-                    />
-                  </div>
-                  <div class="flex-1 min-w-0">
-                    <div class="flex items-center justify-between gap-2 mb-1">
-                      <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
-                        {{ job.name }}
-                      </h3>
-                      <UBadge
-                        :label="job.state || 'unknown'"
-                        :color="getStateBadgeColor(job.state)"
-                        variant="subtle"
-                        size="xs"
-                        class="capitalize flex-shrink-0"
-                      />
-                    </div>
-                    <p class="text-xs text-gray-500 dark:text-gray-400 font-mono truncate mb-1">
-                      {{ truncateId(job.id) }}
-                    </p>
-                    <div class="flex items-center gap-3 text-xs text-gray-500 dark:text-gray-400">
-                      <span v-if="job.timestamp">
-                        {{ formatTime(job.timestamp) }}
-                      </span>
-                      <span v-if="job.finishedOn && job.processedOn">
-                        • {{ formatDuration(job.processedOn, job.finishedOn) }}
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </div>
+                <template #meta>
+                  <span v-if="job.timestamp">
+                    {{ formatTime(job.timestamp) }}
+                  </span>
+                  <span v-if="job.finishedOn && job.processedOn">
+                    • {{ formatDuration(job.processedOn, job.finishedOn) }}
+                  </span>
+                </template>
+              </SelectableListItem>
             </div>
           </div>
 
@@ -407,6 +384,7 @@ import { useComponentRouter } from "../../composables/useComponentRouter";
 import { useRoute, useRouter } from "#app";
 import StatCard from "../../components/StatCard.vue";
 import QueueConfiguration from "../../components/QueueConfiguration.vue";
+import SelectableListItem from "../../components/SelectableListItem.vue";
 const componentRouter = useComponentRouter();
 const router = useRouter();
 const route = useRoute();

package/dist/runtime/app/pages/triggers/[name].vue

@@ -184,47 +184,19 @@
             class="flex-1 min-h-0 overflow-y-auto"
           >
             <div class="divide-y divide-gray-100 dark:divide-gray-800">
-              <div
+              <SelectableListItem
                 v-for="(event, idx) in paginatedEvents"
                 :key="idx"
-                class="px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-900/50 cursor-pointer transition-colors"
-                :class="{
-  'bg-blue-50 dark:bg-blue-950/30 border-l-2 border-l-blue-500': selectedEvent && selectedEvent.type === event.type && (selectedEvent.ts || selectedEvent.timestamp) === (event.ts || event.timestamp)
-}"
+                :selected="!!(selectedEvent && selectedEvent.type === event.type && (selectedEvent.ts || selectedEvent.timestamp) === (event.ts || event.timestamp))"
+                :icon="getEventIcon(event.type)"
+                :icon-class="getEventIconColor(event.type)"
+                :title="event.type"
+                :subtitle="formatDate(event.ts || event.timestamp)"
+                :badge="event.type.split('.')[1] || 'event'"
+                :badge-color="getEventBadgeColor(event.type)"
+                :meta="formatTime(event.ts || event.timestamp)"
                 @click="selectEvent(event)"
-              >
-                <div class="flex items-start gap-3">
-                  <div class="flex-shrink-0 mt-0.5">
-                    <UIcon
-                      :name="getEventIcon(event.type)"
-                      class="w-5 h-5"
-                      :class="getEventIconColor(event.type)"
-                    />
-                  </div>
-                  <div class="flex-1 min-w-0">
-                    <div class="flex items-center justify-between gap-2 mb-1">
-                      <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
-                        {{ event.type }}
-                      </h3>
-                      <UBadge
-                        :label="event.type.split('.')[1] || 'event'"
-                        :color="getEventBadgeColor(event.type)"
-                        variant="subtle"
-                        size="xs"
-                        class="capitalize flex-shrink-0"
-                      />
-                    </div>
-                    <p class="text-xs text-gray-500 dark:text-gray-400 font-mono truncate mb-1">
-                      {{ formatDate(event.ts || event.timestamp) }}
-                    </p>
-                    <div class="flex items-center gap-3 text-xs text-gray-500 dark:text-gray-400">
-                      <span>
-                        {{ formatTime(event.ts || event.timestamp) }}
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </div>
+              />
             </div>
           </div>
 
@@ -549,6 +521,7 @@ import { useComponentRouter } from "../../composables/useComponentRouter";
 import { useTriggerWebSocket } from "../../composables/useTriggerWebSocket";
 import { useRoute, useRouter } from "#app";
 import StatCard from "../../components/StatCard.vue";
+import SelectableListItem from "../../components/SelectableListItem.vue";
 const componentRouter = useComponentRouter();
 const router = useRouter();
 const route = useRoute();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nvent-addon/app",
-  "version": "0.5.7",
+  "version": "0.5.9",
   "description": "nvent app module for Nuxt.js",
   "repository": "DevJoghurt/nvent",
   "license": "MIT",

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

@@ -1,6 +0,0 @@
-type __VLS_Props = {
-    queue: string;
-};
-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/JobScheduling.vue

@@ -1,203 +0,0 @@
-<template>
-  <div class="space-y-4">
-    <div class="flex justify-end">
-      <Button
-        icon="i-heroicons-clock"
-        color="neutral"
-        variant="outline"
-        @click="jobSchedulerEditor = !jobSchedulerEditor"
-      >
-        Job Scheduler
-      </Button>
-    </div>
-    <UForm
-      :schema="schema"
-      :state="state"
-      @submit="onSubmit"
-    >
-      <UCard
-        v-if="jobSchedulerEditor"
-        :ui="{
-  body: 'space-y-6'
-}"
-      >
-        <UFormField
-          label="Name"
-          name="name"
-        >
-          <UInput
-            v-model="state.name"
-            placeholder="Name"
-            class="w-full"
-          />
-        </UFormField>
-        <UTabs
-          v-model="state.scheduleType"
-          :items="scheduleInputTypes"
-          size="xs"
-          default-value="every"
-          variant="pill"
-          color="neutral"
-          :ui="{
-  list: 'w-28 self-start',
-  content: 'w-full'
-}"
-        >
-          <template #content="{ item }">
-            <UFormField name="scheduleValue">
-              <UInput
-                v-if="item.value === 'every'"
-                v-model="state.scheduleValue"
-                class="w-full"
-                type="number"
-              />
-              <UInput
-                v-if="item.value === 'cron'"
-                v-model="state.scheduleValue"
-                class="w-full"
-                type="string"
-              />
-            </UFormField>
-          </template>
-        </UTabs>
-        <div>
-          <div class="text-sm font-bold mb-2">
-            Job
-          </div>
-          <div class="flex flex-col space-y-2 p-2 rounded-sm ring-1 ring-gray-200 dark:ring-gray-800 shadow">
-            <UFormField
-              label="Name"
-              name="jobName"
-            >
-              <UInput
-                v-model="state.jobName"
-                placeholder="Job Name"
-                class="w-full"
-              />
-            </UFormField>
-            <UFormField
-              label="Data"
-              name="jobData"
-            >
-              <JsonEditorVue
-                v-model="state.jobData"
-                :main-menu-bar="false"
-                mode="text"
-              />
-            </UFormField>
-          </div>
-        </div>
-        <template #footer>
-          <div class="flex justify-end">
-            <Button
-              type="submit"
-              color="neutral"
-              variant="outline"
-              class="cursor-pointer"
-            >
-              Create
-            </Button>
-          </div>
-        </template>
-      </UCard>
-    </UForm>
-    <div>
-      <div
-        v-if="scheduler && scheduler.length > 0"
-        class="space-y-4"
-      >
-        <div
-          v-for="item of scheduler"
-          :key="item.key"
-          class="flex flex-col rounded-sm ring-1 ring-gray-200 dark:ring-gray-800 shadow p-4"
-        >
-          <div class="flex justify-end">
-            <Button
-              icon="i-heroicons-x-circle"
-              color="error"
-              variant="outline"
-              class="cursor-pointer"
-              @click="deleteScheduledJob(item.key)"
-            />
-          </div>
-          <div>
-            <span class="text-sm font-bold">Name:</span> {{ item.key }}
-          </div>
-          <div>
-            <span class="text-sm font-bold">Next schedule:</span> {{
-              new Date(item.next).toLocaleString("de", {
-  day: "numeric",
-  month: "short",
-  hour: "2-digit",
-  minute: "2-digit",
-  second: "2-digit",
-  hour12: false
-})
-            }}
-          </div>
-        </div>
-      </div>
-      <div v-else>
-        <UAlert
-          color="info"
-          title="No scheduled jobs"
-          variant="subtle"
-          icon="i-heroicons-information-circle"
-          class="flex items-center space-x-2"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { z } from "zod";
-import { ref, useFetch } from "#imports";
-const props = defineProps({
-  queue: { type: String, required: true }
-});
-const jobSchedulerEditor = ref(false);
-const scheduleInputTypes = [
-  { label: "Every", value: "every" },
-  { label: "Cron", value: "cron" }
-];
-const {
-  data: scheduler,
-  refresh
-} = await useFetch(`/api/_queue/${props.queue}/job/scheduler`, {
-  method: "GET"
-});
-const state = ref({
-  name: void 0,
-  scheduleType: "every",
-  scheduleValue: void 0,
-  jobName: void 0,
-  jobData: void 0
-});
-const schema = z.object({
-  name: z.string().regex(/^\S*$/gm, "No spaces allowed"),
-  scheduleType: z.enum(["every", "cron"]),
-  scheduleValue: z.any(),
-  jobName: z.string().regex(/^\S*$/gm, "No spaces allowed"),
-  jobData: z.string().default("{}")
-});
-async function onSubmit(event) {
-  await $fetch(`/api/_queue/${props.queue}/job/scheduler`, {
-    method: "POST",
-    body: {
-      name: event.data.name,
-      scheduleType: event.data.scheduleType,
-      scheduleValue: event.data.scheduleValue,
-      jobName: event.data.jobName,
-      jobData: JSON.stringify(event.data.jobData)
-    }
-  });
-  refresh();
-}
-const deleteScheduledJob = async (id) => {
-  await $fetch(`/api/_queue/${props.queue}/job/scheduler/${id}`, {
-    method: "DELETE"
-  });
-  refresh();
-};
-</script>

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

@@ -1,6 +0,0 @@
-type __VLS_Props = {
-    queue: string;
-};
-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/ListItem.d.vue.ts

@@ -1,20 +0,0 @@
-import type { DropdownMenuItem } from '@nuxt/ui';
-type __VLS_Props = {
-    title?: string;
-    link: string;
-    origin?: string | null;
-    dropdown?: DropdownMenuItem[];
-};
-declare var __VLS_27: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_27) => any;
-};
-declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

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

@@ -1,69 +0,0 @@
-<template>
-  <div
-    :to="link"
-    class="rounded-lg divide-y divide-gray-200 dark:divide-gray-800 ring-1 ring-gray-200 dark:ring-gray-800 shadow bg-white dark:bg-gray-900"
-  >
-    <div class="px-4 py-5 sm:p-6">
-      <div class="flex flex-col md:flex-row">
-        <div class="flex-none flex flex-col justify-between space-y-2">
-          <ULink
-            class="inline-flex items-center gap-1"
-            @click="push(link)"
-          >
-            <span class="text-lg font-semibold">{{ title }}</span>
-            <UIcon
-              name="i-heroicons-arrow-up-right"
-              class="w-5 h-5 text-primary-500"
-            />
-          </ULink>
-          <div class="flex flex-wrap items-center gap-2">
-            <div class="inline-flex gap-1 items-center">
-              <UIcon
-                name="i-heroicons-check-circle"
-                class="w-4 h-4 text-green-500"
-              />
-              <span class="text-sm">Active</span>
-            </div>
-            <UBadge
-              v-if="origin"
-              size="sm"
-              color="neutral"
-            >
-              <span v-if="origin === 'local'">Local</span>
-              <span v-if="origin === 'remote'">Remote</span>
-            </UBadge>
-          </div>
-        </div>
-        <div class="grow pr-12">
-          <div class="flex flex-row gap-4 justify-end">
-            <slot />
-          </div>
-        </div>
-        <div class="flex-none">
-          <div class="flex gap-2 items-center">
-            <UDropdownMenu
-              :items="dropdown"
-            >
-              <UButton
-                icon="i-heroicons-ellipsis-vertical"
-                color="neutral"
-                variant="outline"
-              />
-            </UDropdownMenu>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { useComponentRouter } from "#imports";
-defineProps({
-  title: { type: String, required: false, default: "" },
-  link: { type: String, required: true },
-  origin: { type: [String, null], required: false, default: null },
-  dropdown: { type: Array, required: false }
-});
-const { push } = useComponentRouter();
-</script>

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

@@ -1,20 +0,0 @@
-import type { DropdownMenuItem } from '@nuxt/ui';
-type __VLS_Props = {
-    title?: string;
-    link: string;
-    origin?: string | null;
-    dropdown?: DropdownMenuItem[];
-};
-declare var __VLS_27: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_27) => any;
-};
-declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

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

@@ -1,24 +0,0 @@
-import { type Ref } from '#imports';
-/**
- * Composable for infinite scroll flow runs with pagination
- */
-export declare function useFlowRunsInfinite(flowId: Ref<string>): {
-    items: import("vue").ComputedRef<{
-        id: string;
-        flowName: string;
-        status: "running" | "completed" | "failed" | "canceled" | "stalled" | "awaiting" | "unknown";
-        createdAt: string;
-        startedAt?: string | undefined;
-        completedAt?: string | undefined;
-        stepCount: number;
-        completedSteps: number;
-    }[]>;
-    total: import("vue").ComputedRef<number>;
-    loading: import("vue").ComputedRef<boolean>;
-    hasMore: import("vue").ComputedRef<boolean>;
-    error: import("vue").ComputedRef<Error | null>;
-    loadMore: () => void;
-    refresh: () => Promise<void>;
-    checkForNewRuns: () => Promise<void>;
-    reset: () => void;
-};

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

@@ -1,123 +0,0 @@
-import { ref, computed, watch } from "#imports";
-export function useFlowRunsInfinite(flowId) {
-  const items = ref([]);
-  const total = ref(0);
-  const offset = ref(0);
-  const limit = 50;
-  const loading = ref(false);
-  const hasMore = ref(true);
-  const error = ref(null);
-  const newestRunId = ref(null);
-  const reset = () => {
-    items.value = [];
-    total.value = 0;
-    offset.value = 0;
-    hasMore.value = true;
-    error.value = null;
-    newestRunId.value = null;
-  };
-  const fetchPage = async (resetData = false) => {
-    if (!flowId.value || loading.value) return;
-    if (resetData) {
-      reset();
-    }
-    if (!hasMore.value && !resetData) return;
-    try {
-      loading.value = true;
-      error.value = null;
-      const response = await $fetch(
-        `/api/_flows/${encodeURIComponent(flowId.value)}/runs`,
-        {
-          query: {
-            limit,
-            offset: resetData ? 0 : offset.value,
-            _t: Date.now()
-            // Cache busting
-          }
-        }
-      );
-      if (resetData) {
-        items.value = response.items;
-        offset.value = response.items.length;
-        if (response.items.length > 0) {
-          newestRunId.value = response.items[0].id;
-        }
-      } else {
-        items.value.push(...response.items);
-        offset.value += response.items.length;
-      }
-      total.value = response.total;
-      hasMore.value = response.hasMore;
-    } catch (err) {
-      console.error("[useFlowRunsInfinite] fetch error:", err);
-      error.value = err instanceof Error ? err : new Error(String(err));
-    } finally {
-      loading.value = false;
-    }
-  };
-  const loadMore = () => {
-    if (!loading.value && hasMore.value) {
-      fetchPage(false);
-    }
-  };
-  const refresh = async () => {
-    await fetchPage(true);
-  };
-  const checkForNewRuns = async () => {
-    if (!flowId.value || loading.value) return;
-    try {
-      const response = await $fetch(
-        `/api/_flows/${encodeURIComponent(flowId.value)}/runs`,
-        {
-          query: {
-            limit: Math.max(items.value.length, 10),
-            // Fetch at least as many as we have loaded
-            offset: 0,
-            _t: Date.now()
-          }
-        }
-      );
-      if (response.items.length === 0) return;
-      const latestRunId = response.items[0].id;
-      const updatedItems = [...items.value];
-      const newRuns = [];
-      for (const freshRun of response.items) {
-        const existingIndex = updatedItems.findIndex((r) => r.id === freshRun.id);
-        if (existingIndex >= 0) {
-          updatedItems[existingIndex] = freshRun;
-        } else {
-          newRuns.push(freshRun);
-        }
-      }
-      if (newRuns.length > 0) {
-        items.value = [...newRuns, ...updatedItems];
-        newestRunId.value = latestRunId;
-      } else {
-        items.value = updatedItems;
-      }
-      total.value = response.total;
-      if (!newestRunId.value) {
-        newestRunId.value = latestRunId;
-      }
-    } catch (err) {
-      console.error("[useFlowRunsInfinite] checkForNewRuns error:", err);
-    }
-  };
-  watch(flowId, (newFlow, oldFlow) => {
-    if (import.meta.client && newFlow && newFlow !== oldFlow) {
-      refresh();
-    }
-  }, { immediate: true });
-  return {
-    items: computed(() => items.value),
-    total: computed(() => total.value),
-    loading: computed(() => loading.value),
-    hasMore: computed(() => hasMore.value),
-    error: computed(() => error.value),
-    loadMore,
-    refresh,
-    checkForNewRuns,
-    // For polling - prepends new runs without resetting
-    reset
-  };
-}

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

@@ -1,9 +0,0 @@
-import { type Ref } from '#imports';
-/**
- * Composable for auto-polling flow runs list
- * Polls continuously to keep the list fresh
- */
-export declare function useFlowRunsPolling(refresh: () => Promise<void>, shouldPoll: Ref<boolean>, intervalMs?: number): {
-    pause: () => void;
-    resume: () => void;
-};

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

@@ -1,33 +0,0 @@
-import { watch, onBeforeUnmount } from "#imports";
-export function useFlowRunsPolling(refresh, shouldPoll, intervalMs = 3e3) {
-  let intervalId = null;
-  const pause = () => {
-    if (intervalId) {
-      clearInterval(intervalId);
-      intervalId = null;
-    }
-  };
-  const resume = () => {
-    if (!intervalId) {
-      intervalId = setInterval(async () => {
-        if (shouldPoll.value) {
-          await refresh();
-        }
-      }, intervalMs);
-    }
-  };
-  watch(shouldPoll, (should) => {
-    if (should) {
-      resume();
-    } else {
-      pause();
-    }
-  }, { immediate: true });
-  onBeforeUnmount(() => {
-    pause();
-  });
-  return {
-    pause,
-    resume
-  };
-}