@nvent-addon/app 0.5.14 → 1.0.0-alpha.1

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

@@ -1,870 +0,0 @@
-<template>
-  <div class="h-full flex flex-col overflow-hidden">
-    <!-- Header -->
-    <div class="border-b border-gray-200 dark:border-gray-800 px-6 py-3 shrink-0">
-      <div class="flex items-center justify-between">
-        <div class="flex items-center gap-3">
-          <UButton
-            icon="i-lucide-arrow-left"
-            size="xs"
-            color="neutral"
-            variant="ghost"
-            square
-            @click="goBack"
-          />
-          <div>
-            <h1 class="text-lg font-semibold flex items-center gap-2">
-              <UIcon
-                :name="getTriggerIcon(trigger?.type || 'event')"
-                class="w-5 h-5"
-                :class="getTriggerIconColor(trigger?.type || 'event')"
-              />
-              <span>{{ trigger?.displayName || trigger?.name }}</span>
-            </h1>
-            <div class="flex items-center gap-2 mt-1">
-              <UBadge
-                v-if="trigger"
-                :label="trigger.type"
-                :color="getTriggerTypeColor(trigger.type)"
-                variant="subtle"
-                size="xs"
-              />
-              <UBadge
-                v-if="trigger"
-                :label="trigger.scope"
-                color="neutral"
-                variant="subtle"
-                size="xs"
-              />
-              <UBadge
-                v-if="trigger"
-                :label="trigger.status"
-                :color="trigger.status === 'active' ? 'success' : trigger.status === 'inactive' ? 'warning' : 'neutral'"
-                variant="subtle"
-                size="xs"
-              />
-            </div>
-          </div>
-        </div>
-        <div class="flex items-center gap-3">
-          <UButton
-            icon="i-lucide-pencil"
-            color="neutral"
-            variant="outline"
-            size="sm"
-            @click="goToEdit"
-          >
-            Edit
-          </UButton>
-          <div
-            v-if="isConnected"
-            class="flex items-center gap-1.5 text-xs text-emerald-600 dark:text-emerald-400"
-          >
-            <div class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
-            <span>Live</span>
-          </div>
-          <div
-            v-else-if="isReconnecting"
-            class="flex items-center gap-1.5 text-xs text-amber-600 dark:text-amber-400"
-          >
-            <div class="w-2 h-2 rounded-full bg-amber-500 animate-pulse" />
-            <span>Reconnecting...</span>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Main Content -->
-    <div class="flex-1 min-h-0 overflow-hidden">
-      <div
-        v-if="status === 'pending' && !trigger"
-        class="h-full flex items-center justify-center"
-      >
-        <div class="text-center">
-          <UIcon
-            name="i-lucide-loader-2"
-            class="w-8 h-8 animate-spin mx-auto mb-2 text-gray-400"
-          />
-          <p class="text-sm text-gray-500 dark:text-gray-400">
-            Loading trigger...
-          </p>
-        </div>
-      </div>
-
-      <div
-        v-else-if="!trigger"
-        class="h-full flex items-center justify-center"
-      >
-        <div class="text-center">
-          <UIcon
-            name="i-lucide-alert-circle"
-            class="w-8 h-8 mx-auto mb-2 text-gray-300 dark:text-gray-700"
-          />
-          <p class="text-sm text-gray-500 dark:text-gray-400">
-            Trigger not found
-          </p>
-        </div>
-      </div>
-
-      <div
-        v-else
-        class="h-full flex gap-px bg-gray-200 dark:bg-gray-800"
-      >
-        <!-- Left: Events List -->
-        <div class="w-1/3 min-w-0 flex-shrink-0 bg-white dark:bg-gray-950 flex flex-col min-h-0 overflow-hidden">
-          <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-800 flex items-center justify-between shrink-0">
-            <h2 class="text-sm font-medium text-gray-900 dark:text-gray-100">
-              Events
-            </h2>
-            <div class="flex items-center gap-2">
-              <USelectMenu
-                v-model="eventTypeFilter"
-                :items="eventTypeFilterOptions"
-                value-key="value"
-                placeholder="All Events"
-                size="xs"
-                class="w-40"
-              >
-                <template #label>
-                  <div class="flex items-center gap-2">
-                    <UIcon
-                      :name="getFilterIcon(eventTypeFilter)"
-                      class="w-4 h-4"
-                      :class="getFilterIconColor(eventTypeFilter)"
-                    />
-                    <span class="text-xs">{{ getFilterLabel(eventTypeFilter) }}</span>
-                  </div>
-                </template>
-                <template #option="{ option }">
-                  <div class="flex items-center gap-2">
-                    <UIcon
-                      :name="getFilterIcon(option.value)"
-                      class="w-4 h-4"
-                      :class="getFilterIconColor(option.value)"
-                    />
-                    <span>{{ option.label }}</span>
-                  </div>
-                </template>
-              </USelectMenu>
-            </div>
-          </div>
-
-          <div
-            v-if="eventsStatus === 'pending' && !events"
-            class="flex-1 flex items-center justify-center"
-          >
-            <div class="text-center">
-              <UIcon
-                name="i-lucide-loader-2"
-                class="w-8 h-8 animate-spin mx-auto mb-2 text-gray-400"
-              />
-              <p class="text-sm text-gray-500 dark:text-gray-400">
-                Loading events...
-              </p>
-            </div>
-          </div>
-
-          <div
-            v-else-if="!events || events.events.length === 0"
-            class="flex-1 flex items-center justify-center"
-          >
-            <div class="text-center">
-              <UIcon
-                name="i-lucide-inbox"
-                class="w-8 h-8 mx-auto mb-2 text-gray-300 dark:text-gray-700"
-              />
-              <p class="text-sm text-gray-500 dark:text-gray-400">
-                No events yet
-              </p>
-            </div>
-          </div>
-
-          <div
-            v-else
-            class="flex-1 min-h-0 overflow-y-auto"
-          >
-            <div class="divide-y divide-gray-100 dark:divide-gray-800">
-              <SelectableListItem
-                v-for="(event, idx) in paginatedEvents"
-                :key="idx"
-                :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>
-          </div>
-
-          <!-- Pagination Footer -->
-          <div
-            v-if="events && (events.total || events.count) > eventsPerPage"
-            class="border-t border-gray-200 dark:border-gray-800 px-4 py-3 flex items-center justify-center shrink-0"
-          >
-            <UPagination
-              v-model:page="currentPage"
-              :items-per-page="eventsPerPage"
-              :total="events.total || events.count"
-              size="xs"
-            />
-          </div>
-        </div>
-
-        <!-- Right: Overview or Event Details -->
-        <div class="flex-1 min-w-0 bg-white dark:bg-gray-950 flex flex-col min-h-0 overflow-hidden">
-          <div class="px-4 py-2.5 border-b border-gray-200 dark:border-gray-800 shrink-0">
-            <div class="flex items-center justify-between">
-              <UTabs
-                v-model="activeTab"
-                :items="tabItems"
-                size="xs"
-                :ui="{
-  root: 'gap-0',
-  trigger: 'px-2 py-0.5'
-}"
-              />
-            </div>
-          </div>
-
-          <div class="flex-1 min-h-0 overflow-y-auto">
-            <!-- Overview Tab -->
-            <div
-              v-if="activeTab === 'overview'"
-              class="p-6 space-y-6"
-            >
-              <!-- Stats Cards -->
-              <div>
-                <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-4">
-                  Trigger Statistics
-                </h3>
-                <div class="grid grid-cols-2 gap-4">
-                  <StatCard
-                    icon="i-lucide-zap"
-                    :count="trigger.stats.totalFires"
-                    label="Total Fires"
-                    variant="gray"
-                  />
-                  <StatCard
-                    icon="i-lucide-git-branch"
-                    :count="trigger.stats.activeSubscribers"
-                    label="Active Subscribers"
-                    variant="purple"
-                  />
-                  <StatCard
-                    v-if="trigger.stats.lastFiredAt"
-                    icon="i-lucide-clock"
-                    :count="formatTime(new Date(trigger.stats.lastFiredAt).getTime())"
-                    label="Last Fired"
-                    variant="blue"
-                  />
-                  <StatCard
-                    icon="i-lucide-users"
-                    :count="trigger.subscriptionCount"
-                    label="Subscriptions"
-                    variant="emerald"
-                  />
-                </div>
-              </div>
-
-              <!-- Description -->
-              <div
-                v-if="trigger.description"
-                class="bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800 rounded-lg p-4"
-              >
-                <div class="flex items-start gap-2">
-                  <UIcon
-                    name="i-lucide-info"
-                    class="w-4 h-4 text-blue-600 dark:text-blue-400 mt-0.5 shrink-0"
-                  />
-                  <p class="text-sm text-blue-900 dark:text-blue-100">
-                    {{ trigger.description }}
-                  </p>
-                </div>
-              </div>
-
-              <!-- Configuration -->
-              <div>
-                <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-4">
-                  Configuration
-                </h3>
-                <div class="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-4 space-y-3">
-                  <div class="flex items-center justify-between py-2 border-b border-gray-200 dark:border-gray-800">
-                    <span class="text-sm text-gray-600 dark:text-gray-400">Name</span>
-                    <span class="text-sm font-medium font-mono text-gray-900 dark:text-gray-100">{{ trigger.name }}</span>
-                  </div>
-                  <div class="flex items-center justify-between py-2 border-b border-gray-200 dark:border-gray-800">
-                    <span class="text-sm text-gray-600 dark:text-gray-400">Type</span>
-                    <UBadge
-                      :label="trigger.type"
-                      :color="getTriggerTypeColor(trigger.type)"
-                      variant="subtle"
-                      size="xs"
-                    />
-                  </div>
-                  <div class="flex items-center justify-between py-2 border-b border-gray-200 dark:border-gray-800">
-                    <span class="text-sm text-gray-600 dark:text-gray-400">Scope</span>
-                    <span class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ trigger.scope }}</span>
-                  </div>
-                  <div
-                    v-if="trigger.source"
-                    class="flex items-center justify-between py-2 border-b border-gray-200 dark:border-gray-800"
-                  >
-                    <span class="text-sm text-gray-600 dark:text-gray-400">Source</span>
-                    <span class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ trigger.source }}</span>
-                  </div>
-                  <div
-                    v-if="trigger.registeredAt"
-                    class="flex items-center justify-between py-2 border-b border-gray-200 dark:border-gray-800"
-                  >
-                    <span class="text-sm text-gray-600 dark:text-gray-400">Registered</span>
-                    <span class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ formatDate(trigger.registeredAt) }}</span>
-                  </div>
-                  <div
-                    v-if="trigger.stats.lastFiredAt"
-                    class="flex items-center justify-between py-2 border-b border-gray-200 dark:border-gray-800"
-                  >
-                    <span class="text-sm text-gray-600 dark:text-gray-400">Last Fired</span>
-                    <span class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ formatTime(trigger.stats.lastFiredAt) }}</span>
-                  </div>
-                  <div
-                    v-if="trigger.lastActivityAt"
-                    class="flex items-center justify-between py-2"
-                  >
-                    <span class="text-sm text-gray-600 dark:text-gray-400">Last Modified</span>
-                    <span class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ formatTime(trigger.lastActivityAt) }}</span>
-                  </div>
-                </div>
-              </div>
-
-              <!-- Webhook Config -->
-              <div v-if="trigger.webhook">
-                <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-3">
-                  Webhook Configuration
-                </h3>
-                <div class="space-y-3">
-                  <div class="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-3">
-                    <div class="flex items-center justify-between mb-2">
-                      <span class="text-xs text-gray-500 dark:text-gray-400">Webhook URL</span>
-                      <UButton
-                        v-if="trigger.webhook.fullUrl"
-                        icon="i-lucide-copy"
-                        size="xs"
-                        color="neutral"
-                        variant="ghost"
-                        @click="copyToClipboard(trigger.webhook.fullUrl)"
-                      />
-                    </div>
-                    <code class="text-xs font-mono text-blue-600 dark:text-blue-400 break-all">
-                      {{ trigger.webhook.fullUrl || trigger.webhook.path }}
-                    </code>
-                  </div>
-                  <div class="flex items-center justify-between py-2 border-b border-gray-100 dark:border-gray-800">
-                    <span class="text-sm text-gray-500 dark:text-gray-400">Method</span>
-                    <UBadge
-                      :label="trigger.webhook.method || 'POST'"
-                      color="neutral"
-                      variant="subtle"
-                      size="xs"
-                    />
-                  </div>
-                </div>
-              </div>
-
-              <!-- Schedule Config -->
-              <div v-if="trigger.schedule">
-                <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-3">
-                  Schedule Configuration
-                </h3>
-                <div class="space-y-2 text-sm">
-                  <div
-                    v-if="trigger.schedule.cron"
-                    class="flex items-center justify-between py-2 border-b border-gray-100 dark:border-gray-800"
-                  >
-                    <span class="text-gray-500 dark:text-gray-400">Cron Expression</span>
-                    <span class="font-mono text-gray-900 dark:text-gray-100">{{ trigger.schedule.cron }}</span>
-                  </div>
-                  <div
-                    v-if="trigger.schedule.interval"
-                    class="flex items-center justify-between py-2 border-b border-gray-100 dark:border-gray-800"
-                  >
-                    <span class="text-gray-500 dark:text-gray-400">Interval</span>
-                    <span class="text-gray-900 dark:text-gray-100">{{ formatInterval(trigger.schedule.interval) }}</span>
-                  </div>
-                  <div
-                    v-if="trigger.schedule.timezone"
-                    class="flex items-center justify-between py-2"
-                  >
-                    <span class="text-gray-500 dark:text-gray-400">Timezone</span>
-                    <span class="text-gray-900 dark:text-gray-100">{{ trigger.schedule.timezone }}</span>
-                  </div>
-                </div>
-              </div>
-
-              <!-- Subscribed Flows -->
-              <div>
-                <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-4">
-                  Subscribed Flows ({{ trigger.subscriptionCount }})
-                </h3>
-                <div
-                  v-if="trigger.subscriptions.length === 0"
-                  class="text-center py-8"
-                >
-                  <UIcon
-                    name="i-lucide-git-branch-plus"
-                    class="w-8 h-8 mx-auto mb-2 text-gray-300 dark:text-gray-700"
-                  />
-                  <p class="text-sm text-gray-500 dark:text-gray-400">
-                    No subscriptions
-                  </p>
-                </div>
-                <div
-                  v-else
-                  class="space-y-2"
-                >
-                  <div
-                    v-for="sub in trigger.subscriptions"
-                    :key="`${sub.flowName}-${sub.triggerName}`"
-                    class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-900/50 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-900 transition-colors cursor-pointer"
-                    @click="goToFlow(sub.flowName)"
-                  >
-                    <div class="flex items-center gap-2 min-w-0">
-                      <UIcon
-                        name="i-lucide-git-branch"
-                        class="w-4 h-4 text-blue-500 shrink-0"
-                      />
-                      <span class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">{{ sub.flowName }}</span>
-                    </div>
-                    <div class="flex items-center gap-2">
-                      <UBadge
-                        :label="sub.mode"
-                        :color="sub.mode === 'auto' ? 'success' : 'neutral'"
-                        variant="subtle"
-                        size="xs"
-                      />
-                      <UIcon
-                        name="i-lucide-arrow-right"
-                        class="w-4 h-4 text-gray-400"
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <!-- Event Details Tab -->
-            <div
-              v-else-if="activeTab === 'details' && selectedEvent"
-              class="p-6 space-y-6"
-            >
-              <!-- Event Info -->
-              <div>
-                <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center gap-2">
-                  <UIcon
-                    :name="getEventIcon(selectedEvent.type)"
-                    class="w-5 h-5"
-                    :class="getEventIconColor(selectedEvent.type)"
-                  />
-                  <span>Event Information</span>
-                </h3>
-                <div class="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-4 space-y-3">
-                  <div class="flex items-center justify-between py-2 border-b border-gray-200 dark:border-gray-800">
-                    <span class="text-sm text-gray-600 dark:text-gray-400">Type</span>
-                    <UBadge
-                      :label="selectedEvent.type"
-                      :color="getEventBadgeColor(selectedEvent.type)"
-                      variant="subtle"
-                      size="xs"
-                    />
-                  </div>
-                  <div class="flex items-center justify-between py-2">
-                    <span class="text-sm text-gray-600 dark:text-gray-400">Timestamp</span>
-                    <span class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ formatDate(selectedEvent.ts || selectedEvent.timestamp) }}</span>
-                  </div>
-                </div>
-              </div>
-
-              <!-- Event Data -->
-              <div>
-                <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-4">
-                  Event Data
-                </h3>
-                <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 overflow-x-auto">
-                  <pre class="text-xs font-mono">{{ JSON.stringify(selectedEvent.data, null, 2) }}</pre>
-                </div>
-              </div>
-
-              <!-- Raw Event -->
-              <div>
-                <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-4">
-                  Raw Event
-                </h3>
-                <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 overflow-x-auto">
-                  <pre class="text-xs font-mono">{{ JSON.stringify(selectedEvent, null, 2) }}</pre>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, onUnmounted, watch, onMounted } from "#imports";
-import { useTrigger, useTriggerEvents } from "../../composables/useTrigger";
-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();
-const triggerName = computed(() => {
-  const name = componentRouter.route.value?.params?.name;
-  return name || null;
-});
-const { trigger, status } = useTrigger(triggerName);
-const eventTypeFilter = computed({
-  get: () => route.query.type || "all",
-  set: (value) => {
-    router.push({
-      query: {
-        ...route.query,
-        type: value === "all" ? void 0 : value,
-        page: void 0
-        // Reset page when filter changes
-      }
-    });
-  }
-});
-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 eventTypeFilterOptions = [
-  { label: "All Events", value: "all" },
-  { label: "Fired", value: "trigger.fired" },
-  { label: "Registered", value: "trigger.registered" },
-  { label: "Updated", value: "trigger.updated" }
-];
-const eventsPerPage = 20;
-const eventQueryOptions = computed(() => {
-  const options = {
-    limit: eventsPerPage,
-    offset: (currentPage.value - 1) * eventsPerPage
-  };
-  if (eventTypeFilter.value !== "all") {
-    options.types = [eventTypeFilter.value];
-  }
-  return options;
-});
-const { events: fetchedEvents, refresh: refreshEvents, status: eventsStatus } = useTriggerEvents(triggerName, eventQueryOptions);
-const liveEvents = ref([]);
-const { connected: isConnected, reconnecting: isReconnecting, subscribe, unsubscribe, subscribeStats, unsubscribeStats } = useTriggerWebSocket();
-const pendingStatsUpdate = ref(null);
-watch(trigger, (newTrigger) => {
-  if (newTrigger && pendingStatsUpdate.value) {
-    const metadata = pendingStatsUpdate.value.metadata;
-    if (metadata) {
-      trigger.value = {
-        ...newTrigger,
-        stats: {
-          totalFires: metadata.stats?.totalFires || metadata.totalFires || metadata["stats.totalFires"] || newTrigger.stats.totalFires || 0,
-          totalFlowsStarted: metadata.stats?.totalFlowsStarted || metadata.totalFlowsStarted || metadata["stats.totalFlowsStarted"] || newTrigger.stats.totalFlowsStarted || 0,
-          activeSubscribers: metadata.stats?.activeSubscribers || metadata.activeSubscribers || metadata["stats.activeSubscribers"] || newTrigger.stats.activeSubscribers || 0,
-          lastFiredAt: metadata.stats?.lastFiredAt || metadata.lastFiredAt || metadata["stats.lastFiredAt"] || newTrigger.stats.lastFiredAt
-        },
-        lastActivityAt: metadata.lastActivityAt || newTrigger.lastActivityAt
-      };
-      pendingStatsUpdate.value = null;
-    }
-  }
-});
-function setupSubscriptions(newName) {
-  subscribe({
-    triggerName: newName,
-    onEvent: (event) => {
-      liveEvents.value = [event, ...liveEvents.value].slice(0, 50);
-    },
-    onHistory: (events2) => {
-      liveEvents.value = events2.slice(0, 50);
-    }
-  });
-  subscribeStats({
-    onInitial: (data) => {
-      if (data.id !== newName) {
-        return;
-      }
-      const metadata = data?.metadata;
-      if (!metadata) {
-        return;
-      }
-      if (!trigger.value) {
-        pendingStatsUpdate.value = data;
-        return;
-      }
-      trigger.value = {
-        ...trigger.value,
-        stats: {
-          totalFires: metadata.stats?.totalFires || metadata.totalFires || metadata["stats.totalFires"] || trigger.value.stats.totalFires || 0,
-          totalFlowsStarted: metadata.stats?.totalFlowsStarted || metadata.totalFlowsStarted || metadata["stats.totalFlowsStarted"] || trigger.value.stats.totalFlowsStarted || 0,
-          activeSubscribers: metadata.stats?.activeSubscribers || metadata.activeSubscribers || metadata["stats.activeSubscribers"] || trigger.value.stats.activeSubscribers || 0,
-          lastFiredAt: metadata.stats?.lastFiredAt || metadata.lastFiredAt || metadata["stats.lastFiredAt"] || trigger.value.stats.lastFiredAt
-        },
-        lastActivityAt: metadata.lastActivityAt || trigger.value.lastActivityAt
-      };
-    },
-    onUpdate: (data) => {
-      if (data.id !== newName) {
-        return;
-      }
-      if (!trigger.value) {
-        pendingStatsUpdate.value = data;
-        return;
-      }
-      const metadata = data?.metadata;
-      if (!metadata) {
-        return;
-      }
-      trigger.value = {
-        ...trigger.value,
-        stats: {
-          totalFires: metadata.stats?.totalFires || metadata.totalFires || metadata["stats.totalFires"] || trigger.value.stats.totalFires || 0,
-          totalFlowsStarted: metadata.stats?.totalFlowsStarted || metadata.totalFlowsStarted || metadata["stats.totalFlowsStarted"] || trigger.value.stats.totalFlowsStarted || 0,
-          activeSubscribers: metadata.stats?.activeSubscribers || metadata.activeSubscribers || metadata["stats.activeSubscribers"] || trigger.value.stats.activeSubscribers || 0,
-          lastFiredAt: metadata.stats?.lastFiredAt || metadata.lastFiredAt || metadata["stats.lastFiredAt"] || trigger.value.stats.lastFiredAt
-        },
-        lastActivityAt: metadata.lastActivityAt || trigger.value.lastActivityAt
-      };
-    }
-  });
-}
-onMounted(() => {
-  if (import.meta.server) return;
-  if (triggerName.value) {
-    setupSubscriptions(triggerName.value);
-  }
-});
-onUnmounted(() => {
-  unsubscribe();
-  unsubscribeStats();
-});
-const events = computed(() => {
-  return fetchedEvents.value;
-});
-const paginatedEvents = computed(() => {
-  if (!events.value) return [];
-  if (currentPage.value === 1) {
-    const filteredLiveEvents = liveEvents.value.filter((event) => {
-      if (eventTypeFilter.value === "all") return true;
-      return event.type === eventTypeFilter.value;
-    });
-    const allEvents = [...filteredLiveEvents, ...events.value.events || []];
-    const seen = /* @__PURE__ */ new Set();
-    const unique = allEvents.filter((event) => {
-      const key = event.id || `${event.type}-${event.ts || event.timestamp}`;
-      if (seen.has(key)) return false;
-      seen.add(key);
-      return true;
-    });
-    unique.sort((a, b) => {
-      const aTime = a.ts || a.timestamp || 0;
-      const bTime = b.ts || b.timestamp || 0;
-      return bTime - aTime;
-    });
-    return unique.slice(0, eventsPerPage);
-  }
-  return events.value.events || [];
-});
-watch(() => eventQueryOptions.value, () => {
-  refreshEvents();
-}, { deep: true });
-const activeTab = ref("overview");
-const tabItems = computed(() => [
-  { label: "Overview", value: "overview", icon: "i-lucide-bar-chart-3" },
-  {
-    label: "Event Details",
-    value: "details",
-    icon: "i-lucide-file-text",
-    disabled: !selectedEvent.value
-  }
-]);
-const selectedEvent = ref(null);
-const selectEvent = (event) => {
-  selectedEvent.value = event;
-  activeTab.value = "details";
-};
-watch(selectedEvent, (newEvent) => {
-  if (newEvent) {
-    activeTab.value = "details";
-  } else {
-    activeTab.value = "overview";
-  }
-});
-const goBack = () => {
-  componentRouter.push("/triggers");
-};
-const goToEdit = () => {
-  if (triggerName.value) {
-    componentRouter.push(`/triggers/${encodeURIComponent(triggerName.value)}/edit`);
-  }
-};
-const goToFlow = (flowName) => {
-  componentRouter.push(`/flows?flow=${encodeURIComponent(flowName)}`);
-};
-const getTriggerIcon = (type) => {
-  switch (type) {
-    case "event":
-      return "i-lucide-radio";
-    case "webhook":
-      return "i-lucide-webhook";
-    case "schedule":
-      return "i-lucide-clock";
-    case "manual":
-      return "i-lucide-hand";
-    default:
-      return "i-lucide-zap";
-  }
-};
-const getTriggerIconColor = (type) => {
-  switch (type) {
-    case "event":
-      return "text-blue-500";
-    case "webhook":
-      return "text-purple-500";
-    case "schedule":
-      return "text-emerald-500";
-    case "manual":
-      return "text-amber-500";
-    default:
-      return "text-gray-500";
-  }
-};
-const getTriggerTypeColor = (type) => {
-  switch (type) {
-    case "event":
-      return "primary";
-    case "webhook":
-      return "success";
-    case "schedule":
-      return "warning";
-    case "manual":
-      return "neutral";
-    default:
-      return "neutral";
-  }
-};
-const getEventIcon = (type) => {
-  if (type.includes("fired")) return "i-lucide-zap";
-  if (type.includes("registered")) return "i-lucide-plus-circle";
-  if (type.includes("updated")) return "i-lucide-pencil";
-  if (type.includes("subscription")) return "i-lucide-link";
-  return "i-lucide-circle-dot";
-};
-const getEventIconColor = (type) => {
-  if (type.includes("fired")) return "text-emerald-500";
-  if (type.includes("registered")) return "text-blue-500";
-  if (type.includes("updated")) return "text-amber-500";
-  if (type.includes("subscription")) return "text-purple-500";
-  return "text-gray-500";
-};
-const getEventBadgeColor = (type) => {
-  if (type.includes("fired")) return "success";
-  if (type.includes("registered")) return "primary";
-  if (type.includes("updated")) return "warning";
-  if (type.includes("subscription")) return "secondary";
-  return "neutral";
-};
-const formatTime = (timestamp) => {
-  const date = new Date(timestamp);
-  const now = /* @__PURE__ */ new Date();
-  const diff = now.getTime() - date.getTime();
-  const seconds = Math.floor(diff / 1e3);
-  const minutes = Math.floor(seconds / 60);
-  const hours = Math.floor(minutes / 60);
-  const days = Math.floor(hours / 24);
-  if (days > 0) return `${days}d ago`;
-  if (hours > 0) return `${hours}h ago`;
-  if (minutes > 0) return `${minutes}m ago`;
-  if (seconds > 10) return `${seconds}s ago`;
-  return "just now";
-};
-const formatDate = (timestamp) => {
-  return new Date(timestamp).toLocaleString();
-};
-const getFilterIcon = (value) => {
-  switch (value) {
-    case "trigger.fired":
-      return "i-lucide-zap";
-    case "trigger.registered":
-      return "i-lucide-plus-circle";
-    case "trigger.updated":
-      return "i-lucide-pencil";
-    default:
-      return "i-lucide-filter";
-  }
-};
-const getFilterIconColor = (value) => {
-  switch (value) {
-    case "trigger.fired":
-      return "text-emerald-500";
-    case "trigger.registered":
-      return "text-blue-500";
-    case "trigger.updated":
-      return "text-amber-500";
-    default:
-      return "text-gray-500";
-  }
-};
-const getFilterLabel = (value) => {
-  const option = eventTypeFilterOptions.find((o) => o.value === value);
-  return option?.label || "All Events";
-};
-const copyToClipboard = async (text) => {
-  try {
-    await navigator.clipboard.writeText(text);
-  } catch (err) {
-    console.error("Failed to copy:", err);
-  }
-};
-const formatInterval = (seconds) => {
-  const units = [
-    { value: 86400, label: "day", pluralLabel: "days" },
-    { value: 3600, label: "hour", pluralLabel: "hours" },
-    { value: 60, label: "minute", pluralLabel: "minutes" },
-    { value: 1, label: "second", pluralLabel: "seconds" }
-  ];
-  for (const unit of units) {
-    if (seconds >= unit.value && seconds % unit.value === 0) {
-      const count = seconds / unit.value;
-      const label = count === 1 ? unit.label : unit.pluralLabel;
-      return `Every ${count} ${label}`;
-    }
-  }
-  if (seconds >= 60) {
-    const minutes = Math.floor(seconds / 60);
-    const remainingSeconds = seconds % 60;
-    if (remainingSeconds === 0) {
-      return `Every ${minutes} ${minutes === 1 ? "minute" : "minutes"}`;
-    }
-    return `Every ${minutes}m ${remainingSeconds}s`;
-  }
-  return `Every ${seconds} ${seconds === 1 ? "second" : "seconds"}`;
-};
-</script>