@nvent-addon/app 0.5.4 → 0.5.6

package/dist/module.json

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

package/dist/module.mjs

@@ -1,11 +1,13 @@
 import { createResolver, defineNuxtModule, addImportsDir, addServerScanDir, addPlugin, addComponentsDir, addComponent, extendPages } from '@nuxt/kit';
 import defu from 'defu';
+import { readFileSync } from 'node:fs';
 
 const resolver = createResolver(import.meta.url);
+const packageJson = JSON.parse(readFileSync(new URL("../package.json", import.meta.url), "utf-8"));
 const module$1 = defineNuxtModule({
   meta: {
     name: "nventapp",
-    version: "0.1",
+    version: packageJson.version,
     configKey: "nventapp"
   },
   defaults: {
@@ -20,6 +22,12 @@ const module$1 = defineNuxtModule({
   },
   async setup(options, nuxt) {
     const { resolve } = resolver;
+    nuxt.options.runtimeConfig.public.nventapp = defu(
+      nuxt.options.runtimeConfig.public.nventapp,
+      {
+        routePath: options.routePath
+      }
+    );
     nuxt.options.css = nuxt.options.css || [];
     nuxt.options.css.push(resolve("./runtime/app/assets/vueflow.css"));
     addImportsDir(resolve("./runtime/shared/utils"));

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

@@ -3,6 +3,7 @@ type __VLS_Props = {
     orientation?: 'horizontal' | 'vertical';
     items?: NavigationMenuItem[][];
     activeMatch?: 'exact' | 'prefix';
+    fullPage?: boolean;
 };
 declare var __VLS_7: {};
 type __VLS_Slots = {} & {

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

@@ -5,7 +5,7 @@
       :class="
   orientation === 'vertical' ? 'flex h-full' : 'flex flex-col w-full'
 "
-      style="height: calc(100vh - 4rem)"
+      :style="containerStyle"
     >
       <!-- Navigation using UNavigationMenu -->
       <div
@@ -34,13 +34,23 @@
 
 <script setup>
 import { computed } from "vue";
-import { useComponentRouter } from "#imports";
+import { useComponentRouter, useRoute, useRuntimeConfig } from "#imports";
 const props = defineProps({
   orientation: { type: String, required: false, default: "horizontal" },
   items: { type: Array, required: false },
-  activeMatch: { type: String, required: false, default: "prefix" }
+  activeMatch: { type: String, required: false, default: "prefix" },
+  fullPage: { type: Boolean, required: false }
 });
 const router = useComponentRouter();
+const nuxtRoute = useRoute();
+const config = useRuntimeConfig();
+const isFullPage = computed(() => {
+  const nventPath = config.public.nventapp?.routePath || "/_nvent";
+  return nuxtRoute?.path?.startsWith(nventPath) ?? false;
+});
+const containerStyle = computed(() => {
+  return isFullPage.value ? "height: 100vh" : "height: calc(100vh - 4rem)";
+});
 const navigationItems = computed(() => {
   if (!props.items) return [];
   const transformItem = (item) => {

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

@@ -3,6 +3,7 @@ type __VLS_Props = {
     orientation?: 'horizontal' | 'vertical';
     items?: NavigationMenuItem[][];
     activeMatch?: 'exact' | 'prefix';
+    fullPage?: boolean;
 };
 declare var __VLS_7: {};
 type __VLS_Slots = {} & {

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

@@ -0,0 +1,15 @@
+interface Stat {
+    value: string | number;
+    label: string;
+}
+interface Props {
+    icon: string;
+    title: string;
+    primaryStats: Stat[];
+    secondaryStats?: Stat[];
+    color: 'blue' | 'purple' | 'amber' | 'emerald' | 'red';
+    onClick?: () => void;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,76 @@
+<template>
+  <div
+    :class="[
+  'rounded-xl p-6 text-white shadow-lg hover:shadow-xl transition-shadow cursor-pointer',
+  gradientClass
+]"
+    @click="onClick"
+  >
+    <div class="flex items-center justify-between mb-4">
+      <div class="flex items-center gap-3">
+        <div class="p-3 bg-white/20 rounded-lg backdrop-blur-sm">
+          <UIcon
+            :name="icon"
+            class="w-6 h-6"
+          />
+        </div>
+        <div class="text-sm opacity-75">
+          {{ title }}
+        </div>
+      </div>
+      <UIcon
+        name="i-lucide-arrow-right"
+        class="w-5 h-5 opacity-60"
+      />
+    </div>
+
+    <!-- Primary Stats (Live Data - Large) -->
+    <div class="flex items-baseline gap-4 mb-4 flex-wrap min-h-[3rem]">
+      <div
+        v-for="stat in primaryStats"
+        :key="stat.label"
+        class="flex items-baseline gap-2"
+      >
+        <div class="text-4xl font-bold">
+          {{ stat.value }}
+        </div>
+        <div class="text-sm opacity-90">
+          {{ stat.label }}
+        </div>
+      </div>
+    </div>
+
+    <!-- Secondary Stats (Static/Context - Small) -->
+    <div class="flex items-center gap-3 text-xs opacity-75">
+      <div
+        v-for="stat in secondaryStats"
+        :key="stat.label"
+      >
+        <span class="font-semibold">{{ stat.value }}</span> {{ stat.label }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "#imports";
+const props = defineProps({
+  icon: { type: String, required: true },
+  title: { type: String, required: true },
+  primaryStats: { type: Array, required: true },
+  secondaryStats: { type: Array, required: false, default: () => [] },
+  color: { type: String, required: true },
+  onClick: { type: Function, required: false, default: () => {
+  } }
+});
+const gradientClass = computed(() => {
+  const colors = {
+    blue: "bg-gradient-to-br from-blue-500 to-blue-600 dark:from-blue-600 dark:to-blue-700",
+    purple: "bg-gradient-to-br from-purple-500 to-purple-600 dark:from-purple-600 dark:to-purple-700",
+    amber: "bg-gradient-to-br from-amber-500 to-amber-600 dark:from-amber-600 dark:to-amber-700",
+    emerald: "bg-gradient-to-br from-emerald-500 to-emerald-600 dark:from-emerald-600 dark:to-emerald-700",
+    red: "bg-gradient-to-br from-red-500 to-red-600 dark:from-red-600 dark:to-red-700"
+  };
+  return colors[props.color];
+});
+</script>

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

@@ -0,0 +1,15 @@
+interface Stat {
+    value: string | number;
+    label: string;
+}
+interface Props {
+    icon: string;
+    title: string;
+    primaryStats: Stat[];
+    secondaryStats?: Stat[];
+    color: 'blue' | 'purple' | 'amber' | 'emerald' | 'red';
+    onClick?: () => void;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -21,13 +21,14 @@
       <template #title="{ item }">
         <div class="flex items-center gap-2 min-w-0">
           <span
-            class="font-mono text-xs px-2 py-0.5 rounded bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 flex-shrink-0"
+            :class="eventTypeColor(item.eventType)"
+            class="font-mono text-xs px-2 py-1 rounded font-medium flex-shrink-0"
           >
             {{ item.eventType }}
           </span>
           <span
             v-if="item.stepName"
-            class="text-xs text-gray-500 dark:text-gray-400 truncate"
+            class="text-xs text-gray-600 dark:text-gray-300 truncate"
           >
             {{ item.stepName }}
           </span>
@@ -39,26 +40,42 @@
         <!-- Special rendering for log events -->
         <div
           v-if="item.eventType === 'log'"
-          class="space-y-2 mt-2"
+          :class="hasMetadata(item.eventData) ? 'p-3 rounded-lg border bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700 mt-2' : 'mt-1'"
+          class="space-y-2"
         >
           <div class="flex items-start gap-2">
             <UBadge
               :color="levelColor(item?.eventData?.level)"
-              variant="subtle"
+              variant="solid"
               size="xs"
               class="capitalize mt-0.5 flex-shrink-0"
             >
               {{ item?.eventData?.level || "info" }}
             </UBadge>
-            <span class="text-sm text-gray-900 dark:text-gray-100 flex-1 break-words">
+            <span class="text-xs text-gray-900 dark:text-gray-100 flex-1 break-words line-clamp-3">
               {{ item?.eventData?.message || "" }}
             </span>
           </div>
-          <div
-            v-if="item?.eventData?.progress"
-            class="mt-2"
-          >
-            <pre class="text-xs bg-gray-50 dark:bg-gray-800 rounded p-2 overflow-y-auto max-h-40 text-gray-700 dark:text-gray-300 font-mono whitespace-pre-wrap break-words">{{ pretty(item.eventData) }}</pre>
+          <!-- Show metadata in accordion if exists -->
+          <div v-if="hasMetadata(item.eventData)">
+            <UAccordion
+              :items="[{
+  label: 'Metadata',
+  icon: 'i-lucide-info',
+  defaultOpen: false,
+  content: item.eventData
+}]"
+              :ui="{
+  trigger: 'text-[10px] py-1',
+  leadingIcon: 'size-3 text-blue-500 dark:text-blue-400',
+  label: 'text-[10px]',
+  item: 'border-0 mt-1'
+}"
+            >
+              <template #content="{ item: accordionItem }">
+                <pre class="text-xs bg-gray-50 dark:bg-gray-800 rounded p-2 overflow-y-auto max-h-60 text-gray-700 dark:text-gray-300 font-mono whitespace-pre-wrap break-words">{{ prettyMetadata(accordionItem.content) }}</pre>
+              </template>
+            </UAccordion>
           </div>
         </div>
 
@@ -69,13 +86,13 @@
         >
           <div
             v-if="item.eventData"
-            class="space-y-1"
+            class="space-y-1 p-2 rounded border bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700"
           >
             <div
               v-if="item.eventData.awaitType"
               class="flex items-start gap-2"
             >
-              <span class="text-xs text-gray-500 dark:text-gray-400 font-medium min-w-[60px] flex-shrink-0">Type:</span>
+              <span class="text-xs text-gray-500 dark:text-gray-400 min-w-[60px] flex-shrink-0">Type:</span>
               <UBadge
                 color="blue"
                 variant="subtle"
@@ -89,7 +106,7 @@
               v-if="item.eventData.position"
               class="flex items-start gap-2"
             >
-              <span class="text-xs text-gray-500 dark:text-gray-400 font-medium min-w-[60px] flex-shrink-0">Position:</span>
+              <span class="text-xs text-gray-500 dark:text-gray-400 min-w-[60px] flex-shrink-0">Position:</span>
               <UBadge
                 color="neutral"
                 variant="subtle"
@@ -103,21 +120,37 @@
               v-if="item.eventData.triggerName"
               class="flex items-start gap-2"
             >
-              <span class="text-xs text-gray-500 dark:text-gray-400 font-medium min-w-[60px] flex-shrink-0">Trigger:</span>
+              <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold min-w-[60px] flex-shrink-0">Trigger:</span>
               <span class="text-xs text-gray-700 dark:text-gray-300 font-mono">{{ item.eventData.triggerName }}</span>
             </div>
             <div
               v-if="item.eventData.triggerData"
-              class="flex items-start gap-2"
+              class="mt-1"
             >
-              <span class="text-xs text-gray-500 dark:text-gray-400 font-medium min-w-[60px] flex-shrink-0">Data:</span>
-              <pre class="text-xs bg-gray-50 dark:bg-gray-800 rounded px-2 py-1 overflow-y-auto max-h-20 text-gray-700 dark:text-gray-300 font-mono flex-1 min-w-0 whitespace-pre-wrap break-words">{{ pretty(item.eventData.triggerData) }}</pre>
+              <UAccordion
+                :items="[{
+  label: 'Trigger Data',
+  icon: 'i-lucide-braces',
+  defaultOpen: false,
+  content: item.eventData.triggerData
+}]"
+                :ui="{
+  trigger: 'text-[10px] py-1',
+  leadingIcon: 'size-3 text-purple-500 dark:text-purple-400',
+  label: 'text-[10px]',
+  item: 'border-0 mt-0'
+}"
+              >
+                <template #content="{ item: accordionItem }">
+                  <pre class="text-xs bg-gray-50 dark:bg-gray-800 rounded p-2 overflow-y-auto max-h-60 text-gray-700 dark:text-gray-300 font-mono whitespace-pre-wrap break-words">{{ pretty(accordionItem.content) }}</pre>
+                </template>
+              </UAccordion>
             </div>
             <div
               v-if="item.eventData.duration"
               class="flex items-start gap-2"
             >
-              <span class="text-xs text-gray-500 dark:text-gray-400 font-medium min-w-[60px] flex-shrink-0">Duration:</span>
+              <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold min-w-[60px] flex-shrink-0">Duration:</span>
               <span class="text-xs text-gray-700 dark:text-gray-300">{{ item.eventData.duration }}ms</span>
             </div>
           </div>
@@ -129,39 +162,158 @@
           class="text-sm mt-2"
         >
           <div
-            v-if="item.eventData"
-            class="space-y-1"
+            v-if="item.eventData && (item.eventData.input || item.eventData.output || item.eventData.error)"
+            class="space-y-1 p-2 rounded border bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700"
           >
             <div
               v-if="item.eventData.input"
-              class="flex items-start gap-2"
+              class="mt-1"
             >
-              <span class="text-xs text-gray-500 dark:text-gray-400 font-medium min-w-[60px] flex-shrink-0">Input:</span>
-              <pre class="text-xs bg-gray-50 dark:bg-gray-800 rounded px-2 py-1 overflow-y-auto max-h-20 text-gray-700 dark:text-gray-300 font-mono flex-1 min-w-0 whitespace-pre-wrap break-words">{{ pretty(item.eventData.input) }}</pre>
+              <UAccordion
+                :items="[{
+  label: 'Input',
+  icon: 'i-lucide-arrow-down-to-line',
+  defaultOpen: false,
+  content: item.eventData.input
+}]"
+                :ui="{
+  trigger: 'text-[10px] py-1',
+  leadingIcon: 'size-3 text-green-500 dark:text-green-400',
+  label: 'text-[10px]',
+  item: 'border-0 mt-0'
+}"
+              >
+                <template #content="{ item: accordionItem }">
+                  <pre class="text-xs bg-gray-50 dark:bg-gray-800 rounded p-2 overflow-y-auto max-h-60 text-gray-700 dark:text-gray-300 font-mono whitespace-pre-wrap break-words">{{ pretty(accordionItem.content) }}</pre>
+                </template>
+              </UAccordion>
             </div>
             <div
               v-if="item.eventData.output"
-              class="flex items-start gap-2"
+              class="mt-1"
             >
-              <span class="text-xs text-gray-500 dark:text-gray-400 font-medium min-w-[60px] flex-shrink-0">Output:</span>
-              <pre class="text-xs bg-gray-50 dark:bg-gray-800 rounded px-2 py-1 overflow-y-auto max-h-20 text-gray-700 dark:text-gray-300 font-mono flex-1 min-w-0 whitespace-pre-wrap break-words">{{ pretty(item.eventData.output) }}</pre>
+              <UAccordion
+                :items="[{
+  label: 'Output',
+  icon: 'i-lucide-arrow-up-from-line',
+  defaultOpen: false,
+  content: item.eventData.output
+}]"
+                :ui="{
+  trigger: 'text-[10px] py-1',
+  leadingIcon: 'size-3 text-blue-500 dark:text-blue-400',
+  label: 'text-[10px]',
+  item: 'border-0 mt-0'
+}"
+              >
+                <template #content="{ item: accordionItem }">
+                  <pre class="text-xs bg-gray-50 dark:bg-gray-800 rounded p-2 overflow-y-auto max-h-60 text-gray-700 dark:text-gray-300 font-mono whitespace-pre-wrap break-words">{{ pretty(accordionItem.content) }}</pre>
+                </template>
+              </UAccordion>
             </div>
             <div
               v-if="item.eventData.error"
-              class="flex items-start gap-2"
+              class="mt-1"
             >
-              <span class="text-xs text-red-500 dark:text-red-400 font-medium min-w-[60px] flex-shrink-0">Error:</span>
-              <pre class="text-xs bg-red-50 dark:bg-red-900/20 rounded px-2 py-1 overflow-y-auto max-h-20 text-red-700 dark:text-red-300 font-mono flex-1 min-w-0 whitespace-pre-wrap break-words">{{ pretty(item.eventData.error) }}</pre>
+              <UAccordion
+                :items="[{
+  label: 'Error Details',
+  icon: 'i-lucide-alert-circle',
+  defaultOpen: true,
+  content: item.eventData.error
+}]"
+                :ui="{
+  trigger: 'text-[10px] py-1 text-red-600 dark:text-red-400',
+  leadingIcon: 'size-3 text-red-500 dark:text-red-400',
+  label: 'text-[10px]',
+  item: 'border-0 mt-0'
+}"
+              >
+                <template #content="{ item: accordionItem }">
+                  <pre class="text-xs bg-red-50 dark:bg-red-900/20 rounded p-2 overflow-y-auto max-h-60 text-red-700 dark:text-red-300 font-mono whitespace-pre-wrap break-words">{{ pretty(accordionItem.content) }}</pre>
+                </template>
+              </UAccordion>
+            </div>
+          </div>
+        </div>
+
+        <!-- Special rendering for emit events -->
+        <div
+          v-else-if="isEmitEvent(item.eventType)"
+          class="mt-2"
+        >
+          <div
+            v-if="item.eventData && item.eventData.payload"
+            class="p-2 rounded border bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700"
+          >
+            <div class="flex items-center gap-2 mb-1">
+              <span class="text-xs text-gray-500 dark:text-gray-400">Event:</span>
+              <UBadge
+                color="primary"
+                variant="solid"
+                size="xs"
+              >
+                {{ item.eventData.name || "unknown" }}
+              </UBadge>
             </div>
+            <UAccordion
+              v-if="item.eventData.payload"
+              :items="[{
+  label: 'Payload',
+  icon: 'i-lucide-package',
+  defaultOpen: false,
+  content: item.eventData.payload
+}]"
+              :ui="{
+  trigger: 'text-[10px] py-1',
+  leadingIcon: 'size-3 text-emerald-500 dark:text-emerald-400',
+  label: 'text-[10px]',
+  item: 'border-0 mt-0'
+}"
+            >
+              <template #content="{ item: accordionItem }">
+                <pre class="text-xs bg-gray-50 dark:bg-gray-800 rounded p-2 overflow-y-auto max-h-60 text-gray-700 dark:text-gray-300 font-mono whitespace-pre-wrap break-words">{{ pretty(accordionItem.content) }}</pre>
+              </template>
+            </UAccordion>
+          </div>
+          <div
+            v-else-if="item.eventData"
+            class="flex items-center gap-2 mt-1"
+          >
+            <span class="text-xs text-gray-500 dark:text-gray-400">Event:</span>
+            <UBadge
+              color="primary"
+              variant="solid"
+              size="xs"
+            >
+              {{ item.eventData.name || "unknown" }}
+            </UBadge>
           </div>
         </div>
 
-        <!-- Default rendering -->
+        <!-- Default rendering with accordion -->
         <div
           v-else-if="item.eventData && Object.keys(item.eventData).length > 0"
           class="mt-2"
         >
-          <pre class="text-xs bg-gray-50 dark:bg-gray-800 rounded p-2 overflow-y-auto max-h-40 text-gray-700 dark:text-gray-300 font-mono whitespace-pre-wrap break-words">{{ pretty(item.eventData) }}</pre>
+          <UAccordion
+            :items="[{
+  label: 'Event Data',
+  icon: 'i-lucide-braces',
+  defaultOpen: false,
+  content: item.eventData
+}]"
+            :ui="{
+  trigger: 'text-[10px] py-1',
+  leadingIcon: 'size-3 text-gray-500 dark:text-gray-400',
+  label: 'text-[10px]',
+  item: 'border-0 mt-1'
+}"
+          >
+            <template #content="{ item: accordionItem }">
+              <pre class="text-xs bg-gray-50 dark:bg-gray-800 rounded p-2 overflow-y-auto max-h-60 text-gray-700 dark:text-gray-300 font-mono whitespace-pre-wrap break-words">{{ pretty(accordionItem.content) }}</pre>
+            </template>
+          </UAccordion>
         </div>
       </template>
     </UTimeline>
@@ -268,10 +420,49 @@ function levelColor(level) {
       return "neutral";
   }
 }
+function eventTypeColor(type) {
+  if (!type) return "bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300";
+  if (type.startsWith("flow.")) {
+    if (type === "flow.start") return "bg-purple-100 dark:bg-purple-900/50 text-purple-700 dark:text-purple-300";
+    if (type === "flow.completed") return "bg-green-100 dark:bg-green-900/50 text-green-700 dark:text-green-300";
+    if (type === "flow.failed") return "bg-red-100 dark:bg-red-900/50 text-red-700 dark:text-red-300";
+    return "bg-purple-100 dark:bg-purple-900/50 text-purple-700 dark:text-purple-300";
+  }
+  if (type.startsWith("step.")) {
+    if (type === "step.completed") return "bg-green-100 dark:bg-green-900/50 text-green-700 dark:text-green-300";
+    if (type === "step.failed") return "bg-red-100 dark:bg-red-900/50 text-red-700 dark:text-red-300";
+    return "bg-indigo-100 dark:bg-indigo-900/50 text-indigo-700 dark:text-indigo-300";
+  }
+  if (type.startsWith("await.")) {
+    if (type === "await.resolved") return "bg-green-100 dark:bg-green-900/50 text-green-700 dark:text-green-300";
+    if (type === "await.timeout") return "bg-orange-100 dark:bg-orange-900/50 text-orange-700 dark:text-orange-300";
+    return "bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300";
+  }
+  if (type === "log") return "bg-yellow-100 dark:bg-yellow-900/50 text-yellow-700 dark:text-yellow-300";
+  if (type === "emit") return "bg-emerald-100 dark:bg-emerald-900/50 text-emerald-700 dark:text-emerald-300";
+  return "bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300";
+}
 function isFlowEvent(type) {
   return type?.startsWith("flow.") || type?.startsWith("step.");
 }
 function isAwaitEvent(type) {
   return type?.startsWith("await.");
 }
+function isEmitEvent(type) {
+  return type === "emit";
+}
+function hasMetadata(eventData) {
+  if (!eventData || typeof eventData !== "object") return false;
+  const autoInjectedKeys = ["message", "level", "msg", "stepName", "stepId", "stepRunId", "attempt", "flowName"];
+  const keys = Object.keys(eventData).filter((k) => !autoInjectedKeys.includes(k));
+  return keys.length > 0;
+}
+function prettyMetadata(eventData) {
+  if (!eventData || typeof eventData !== "object") return "";
+  const { message, level, msg, stepName, stepId, stepRunId, attempt, flowName, ...metadata } = eventData;
+  if (Object.keys(metadata).length === 1 && "value" in metadata) {
+    return pretty(metadata.value);
+  }
+  return pretty(metadata);
+}
 </script>

package/dist/runtime/app/components/flow/AwaitNode.d.vue.ts

@@ -1,16 +1,33 @@
 interface AwaitConfig {
-    type?: 'time' | 'event' | 'webhook';
+    type?: 'time' | 'event' | 'webhook' | 'schedule';
     delay?: number;
     event?: string;
+    filterKey?: string;
     method?: string;
+    path?: string;
+    cron?: string;
+    timezone?: string;
     timeout?: number;
+    timeoutAction?: 'fail' | 'continue' | 'retry';
+}
+interface AwaitData {
+    method?: string;
+    webhookUrl?: string;
+    timeout?: number;
+    timeoutAction?: string;
+    eventName?: string;
+    filterKey?: string;
+    [key: string]: any;
 }
 type __VLS_Props = {
     data: {
         label: string;
-        awaitType?: 'time' | 'event' | 'webhook';
+        awaitType?: 'time' | 'event' | 'webhook' | 'schedule';
         awaitConfig?: AwaitConfig;
+        awaitData?: AwaitData;
         status?: 'idle' | 'waiting' | 'resolved' | 'timeout';
+        startedAt?: string | Date;
+        scheduledTriggerAt?: string | Date;
     };
 };
 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>;