@nvent-addon/app 0.4.5 → 0.5.1

package/dist/runtime/app/pages/flows/index.vue

@@ -8,676 +8,377 @@
             Flows
           </h1>
         </div>
-        <div class="flex items-center gap-3">
-          <USelectMenu
-            v-model="selectedFlow"
-            :items="(flows || []).map((f) => f.id)"
-            placeholder="Select a flow..."
-            class="w-64"
-          >
-            <template #leading>
-              <UIcon
-                v-if="selectedFlow"
-                name="i-lucide-git-branch"
-                class="w-4 h-4 text-gray-500"
-              />
-            </template>
-          </USelectMenu>
-        </div>
+        <LiveIndicator
+          :is-connected="flowWs.connected.value"
+          :is-reconnecting="flowWs.reconnecting.value"
+        />
       </div>
     </div>
 
     <!-- Main Content -->
-    <div class="flex-1 min-h-0 overflow-hidden">
-      <div class="h-full flex gap-px bg-gray-200 dark:bg-gray-800">
-        <!-- Runs 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 min-h-[49px] 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">
-              Runs
-            </h2>
-            <div class="flex items-center gap-2">
-              <UButton
-                v-if="selectedFlow"
-                icon="i-lucide-play"
-                size="xs"
-                color="primary"
-                variant="soft"
-                @click="openStartFlowModal"
-              >
-                Start
-              </UButton>
-              <div
-                v-if="selectedFlow"
-                class="flex items-center gap-2 text-xs text-gray-500"
-              >
-                <UIcon
-                  name="i-lucide-list"
-                  class="w-3.5 h-3.5"
-                />
-                <span>{{ totalRuns }} run{{ totalRuns === 1 ? "" : "s" }}</span>
-              </div>
-              <UDropdownMenu
-                v-if="selectedFlow"
-                :items="flowActionsItems"
-                :ui="{ content: 'min-w-48' }"
-              >
-                <UButton
-                  icon="i-lucide-more-vertical"
-                  size="xs"
-                  color="neutral"
-                  variant="ghost"
-                  square
-                />
-              </UDropdownMenu>
-            </div>
-          </div>
-          <div
-            v-if="!selectedFlow"
-            class="flex-1 overflow-y-auto min-h-0"
-          >
-            <div class="h-full flex items-center justify-center text-sm text-gray-400 px-4 text-center">
-              Select a flow to view runs
-            </div>
+    <div class="flex-1 min-h-0 overflow-y-auto">
+      <div class="max-w-7xl mx-auto p-6">
+        <!-- Stats Overview -->
+        <div class="grid grid-cols-2 md:grid-cols-6 gap-4 mb-6">
+          <StatCard
+            icon="i-lucide-git-branch"
+            :count="flows?.length || 0"
+            label="Total Flows"
+            variant="gray"
+          />
+          <StatCard
+            icon="i-lucide-play"
+            :count="totalRuns"
+            label="Total Runs"
+            variant="blue"
+          />
+          <StatCard
+            icon="i-lucide-check-circle"
+            :count="totalSuccess"
+            label="Success"
+            variant="emerald"
+          />
+          <StatCard
+            icon="i-lucide-x-circle"
+            :count="totalFailure"
+            label="Failures"
+            variant="red"
+          />
+          <StatCard
+            icon="i-lucide-loader"
+            :count="totalRunning"
+            label="Running"
+            variant="purple"
+          />
+          <StatCard
+            icon="i-lucide-pause"
+            :count="totalAwaiting"
+            label="Awaiting"
+            variant="amber"
+          />
+        </div>
+
+        <!-- Filters -->
+        <div class="mb-4">
+          <UInput
+            v-model="searchQuery"
+            icon="i-lucide-search"
+            placeholder="Search flows..."
+            size="sm"
+          />
+        </div>
+
+        <!-- Flows List -->
+        <div
+          v-if="!filteredFlows || filteredFlows.length === 0"
+          class="bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800 p-8 text-center text-gray-500"
+        >
+          <div v-if="searchQuery">
+            <UIcon
+              name="i-lucide-search-x"
+              class="w-12 h-12 animate-spin mx-auto mb-3 opacity-50"
+            />
+            <p>No flows match your search</p>
+            <UButton
+              size="xs"
+              color="neutral"
+              variant="ghost"
+              class="mt-2"
+              @click="searchQuery = ''"
+            >
+              Clear Search
+            </UButton>
           </div>
-          <div
-            v-else-if="!runs || runs.length === 0"
-            class="flex-1 overflow-y-auto min-h-0"
-          >
-            <div class="h-full flex items-center justify-center text-sm text-gray-400">
-              <ClientOnly>
-                <div class="text-center">
-                  <div v-if="loadingRuns">
-                    Loading runs...
-                  </div>
-                  <div v-else>
-                    No runs yet
-                  </div>
-                </div>
-                <template #fallback>
-                  <div class="text-center">
-                    No runs yet
-                  </div>
-                </template>
-              </ClientOnly>
-            </div>
+          <div v-else>
+            <UIcon
+              name="i-lucide-git-branch"
+              class="w-12 h-12 mx-auto mb-3 opacity-50"
+            />
+            <p>No flows found</p>
           </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"
-          >
+        </div>
+        <div
+          v-else
+          class="bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800 overflow-hidden"
+        >
+          <div class="divide-y divide-gray-100 dark:divide-gray-800">
             <div
-              v-for="r in runs"
-              :key="r.id"
-              class="group"
+              v-for="flow in filteredFlows"
+              :key="flow.id"
+              class="px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-900/50 transition-colors cursor-pointer"
+              @click="openFlow(flow.id)"
             >
-              <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 }"
-                @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 class="flex items-start justify-between gap-4">
+                <!-- Left: Flow Info -->
+                <div class="flex-1 min-w-0">
+                  <div class="flex items-center gap-2 mb-2">
+                    <UIcon
+                      name="i-lucide-git-branch"
+                      class="w-4 h-4 shrink-0 text-blue-500"
+                    />
+                    <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100 truncate">
+                      {{ flow.id }}
+                    </h3>
+                    <UBadge
+                      v-if="flow.hasAwait"
+                      label="await"
+                      color="purple"
+                      variant="subtle"
+                      size="xs"
+                    >
+                      <template #leading>
+                        <UIcon
+                          name="i-lucide-pause"
+                          class="w-3 h-3"
+                        />
+                      </template>
+                    </UBadge>
+                  </div>
+
+                  <div class="flex items-center gap-4 text-xs text-gray-500 dark:text-gray-400">
+                    <div class="flex items-center gap-1">
+                      <UIcon
+                        name="i-lucide-layers"
+                        class="w-3 h-3"
+                      />
+                      <span>{{ getStepCount(flow) }} step{{ getStepCount(flow) === 1 ? "" : "s" }}</span>
                     </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"
-                      >
+                    <div class="flex items-center gap-1">
+                      <UIcon
+                        name="i-lucide-bar-chart-3"
+                        class="w-3 h-3"
+                      />
+                      <span>{{ getLevelCount(flow) }} level{{ getLevelCount(flow) === 1 ? "" : "s" }}</span>
+                    </div>
+                    <div
+                      v-if="flow.stats && flow.stats.total > 0"
+                      class="flex items-center gap-2"
+                    >
+                      <div class="flex items-center gap-1">
                         <UIcon
-                          name="i-lucide-list-checks"
+                          name="i-lucide-play"
                           class="w-3 h-3"
                         />
-                        <span>{{ r.completedSteps }}/{{ r.stepCount }}</span>
+                        <span>{{ flow.stats.total }}</span>
                       </div>
-                      <!-- Duration (if completed) -->
                       <div
-                        v-if="r.completedAt && r.startedAt"
-                        class="text-xs text-gray-500 flex items-center gap-1"
+                        v-if="flow.stats.running > 0"
+                        class="flex items-center gap-1 text-purple-600 dark:text-purple-400"
                       >
                         <UIcon
-                          name="i-lucide-timer"
+                          name="i-lucide-loader"
                           class="w-3 h-3"
                         />
-                        <span>{{ formatDuration(r.startedAt, r.completedAt) }}</span>
+                        <span>{{ flow.stats.running }}</span>
                       </div>
                     </div>
-                  </div>
-                  <!-- Status badge -->
-                  <FlowRunStatusBadge
-                    :is-running="r.status === 'running'"
-                    :is-completed="r.status === 'completed'"
-                    :is-failed="r.status === 'failed'"
-                    :is-canceled="r.status === 'canceled'"
-                    :is-stalled="r.status === 'stalled'"
-                  />
-                </div>
-              </div>
-            </div>
-
-            <!-- Loading indicator for infinite scroll -->
-            <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 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>
-
-          <!-- Schedules Section -->
-          <div
-            v-if="selectedFlow"
-            class="border-t border-gray-200 dark:border-gray-800 shrink-0"
-          >
-            <UAccordion
-              :items="scheduleAccordionItems"
-              :ui="{
-  root: 'w-full',
-  trigger: 'px-4 py-2 bg-gray-50 dark:bg-gray-900/50',
-  content: 'max-h-48 overflow-y-auto'
-}"
-            >
-              <template #item>
-                <FlowSchedulesList
-                  v-if="selectedFlow"
-                  ref="schedulesListRef"
-                  :flow-name="selectedFlow"
-                  class="px-4 py-3"
-                  @updated="handleSchedulesUpdated"
-                />
-              </template>
-            </UAccordion>
-          </div>
-        </div>
-
-        <!-- Main Content Area with Tabs -->
-        <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="mainTab"
-                :items="mainTabs"
-                size="xs"
-                :ui="{
-  root: 'gap-0',
-  trigger: 'px-2 py-0.5'
-}"
-              />
-              <div class="flex items-center gap-2">
-                <span
-                  v-if="selectedRunId"
-                  class="text-xs text-gray-500 flex items-center gap-2"
-                >
-                  <span>Run: {{ selectedRunId.substring(0, 8) }}...</span>
-                  <div
-                    v-if="isReconnecting || isConnected && flowState.isRunning.value"
-                    class="flex items-center gap-1.5"
-                  >
                     <div
-                      class="w-1.5 h-1.5 rounded-full"
-                      :class="isReconnecting ? 'bg-amber-500 animate-pulse' : 'bg-emerald-500 animate-pulse'"
-                    />
-                    <span>{{ isReconnecting ? "Reconnecting" : "Live" }}</span>
+                      v-if="flow.timeout"
+                      class="flex items-center gap-1"
+                    >
+                      <UIcon
+                        name="i-lucide-clock"
+                        class="w-3 h-3"
+                      />
+                      <span>{{ formatTimeout(flow.timeout) }} timeout</span>
+                    </div>
+                    <!-- Runtime Badges -->
+                    <div
+                      v-if="getRuntimes(flow).length > 0"
+                      class="flex items-center gap-1"
+                    >
+                      <UIcon
+                        name="i-lucide-cpu"
+                        class="w-3 h-3"
+                      />
+                      <span>{{ getRuntimes(flow).join(", ") }}</span>
+                    </div>
                   </div>
-                </span>
-                <span
-                  v-else-if="selectedFlow"
-                  class="text-xs font-mono text-gray-500"
-                >
-                  {{ selectedFlow }}
-                </span>
-              </div>
-            </div>
-          </div>
-          <div class="flex-1 min-h-0">
-            <!-- Diagram Tab -->
-            <div
-              v-if="mainTab === 'diagram'"
-              class="h-full"
-            >
-              <div
-                v-if="!selectedFlow"
-                class="h-full flex items-center justify-center text-sm text-gray-400"
-              >
-                Select a flow to view diagram
-              </div>
-              <FlowDiagram
-                v-else
-                :flow="selectedFlowMeta"
-                :show-controls="true"
-                :show-background="true"
-                :step-states="diagramStepStates"
-                :flow-status="runSnapshot.status"
-                height-class="h-full"
-                @node-action="handleNodeAction"
-              />
-            </div>
-
-            <!-- Timeline Tab -->
-            <div
-              v-else-if="mainTab === 'timeline'"
-              class="h-full flex gap-px bg-gray-200 dark:bg-gray-800"
-            >
-              <!-- Left: Overview -->
-              <div class="flex-1 min-w-0 max-w-[50%] bg-white dark:bg-gray-950 flex flex-col min-h-0 overflow-hidden">
-                <div class="flex-1 overflow-y-auto min-h-0">
-                  <FlowRunOverview
-                    :run-status="runSnapshot.status"
-                    :started-at="runSnapshot.startedAt"
-                    :completed-at="runSnapshot.completedAt"
-                    :steps="flowState.stepList.value"
-                    :flow-name="selectedFlow"
-                    :run-id="selectedRunId"
-                    @select-step="handleSelectStep"
-                    @cancel-flow="handleCancelFlow"
-                  />
                 </div>
-              </div>
 
-              <!-- Right: Combined Logs & Events -->
-              <div class="flex-1 min-w-0 max-w-[50%] bg-white dark:bg-gray-950 flex flex-col min-h-0 overflow-hidden">
-                <FlowRunTimeline
-                  :events="timeline"
-                  :logs="filteredLogs"
-                  :is-live="isConnected"
-                  @export="exportTimelineJson"
+                <!-- Right: Action -->
+                <UButton
+                  icon="i-lucide-arrow-right"
+                  size="xs"
+                  color="neutral"
+                  variant="ghost"
+                  square
                 />
               </div>
             </div>
           </div>
         </div>
-      </div>
-    </div>
 
-    <!-- Start Flow Modal -->
-    <UModal v-model:open="startFlowModalOpen">
-      <template #header>
-        <div class="flex items-center justify-between">
-          <div>
-            <h3 class="text-lg font-semibold">
-              Start Flow Run
-            </h3>
-            <p class="text-sm text-gray-500 mt-1">
-              {{ selectedFlow }}
-            </p>
-          </div>
-        </div>
-      </template>
-      <template #body>
-        <div class="space-y-4">
-          <div>
-            <label class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 block">
-              Input Data (JSON)
-            </label>
-            <UTextarea
-              v-model="flowInputJson"
-              :rows="12"
-              placeholder="{\n  &quot;key&quot;: &quot;value&quot;\n}"
-              class="w-full font-mono text-sm"
-            />
-            <p
-              v-if="jsonError"
-              class="text-xs text-red-500 mt-2"
-            >
-              {{ jsonError }}
-            </p>
-          </div>
+        <!-- Footer Info -->
+        <div
+          v-if="filteredFlows && filteredFlows.length > 0"
+          class="mt-4 text-center text-sm text-gray-500 dark:text-gray-400"
+        >
+          Showing {{ filteredFlows.length }} flow{{ filteredFlows.length === 1 ? "" : "s" }}
         </div>
-      </template>
-      <template #footer>
-        <div class="flex justify-end gap-2">
-          <UButton
-            color="neutral"
-            variant="ghost"
-            @click="startFlowModalOpen = false"
-          >
-            Cancel
-          </UButton>
-          <UButton
-            color="primary"
-            :loading="startingFlow"
-            :disabled="!!jsonError"
-            @click="startFlowRun"
-          >
-            Start Flow
-          </UButton>
-        </div>
-      </template>
-    </UModal>
-
-    <!-- Schedule Flow Modal -->
-    <FlowScheduleDialog
-      v-if="selectedFlow"
-      v-model="scheduleModalOpen"
-      :flow-name="selectedFlow"
-      @scheduled="handleFlowScheduled"
-    />
-
-    <!-- Confirm Dialog -->
-    <ConfirmDialog
-      v-model:open="confirmDialogOpen"
-      :title="confirmDialogConfig.title"
-      :description="confirmDialogConfig.description"
-      :items="confirmDialogConfig.items"
-      :warning="confirmDialogConfig.warning"
-      :loading="clearingHistory"
-      confirm-label="Clear History"
-      confirm-color="error"
-      icon="i-lucide-trash-2"
-      icon-color="error"
-      @confirm="confirmDialogConfig.onConfirm"
-    />
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, watch } from "#imports";
-import FlowDiagram from "../../components/FlowDiagram.vue";
-import FlowRunOverview from "../../components/FlowRunOverview.vue";
-import FlowRunTimeline from "../../components/FlowRunTimeline.vue";
-import FlowRunStatusBadge from "../../components/FlowRunStatusBadge.vue";
-import FlowSchedulesList from "../../components/FlowSchedulesList.vue";
-import FlowScheduleDialog from "../../components/FlowScheduleDialog.vue";
-import ConfirmDialog from "../../components/ConfirmDialog.vue";
-import {
-  USelectMenu,
-  UIcon,
-  UButton,
-  UModal,
-  UTextarea,
-  UTabs,
-  UDropdownMenu,
-  UAccordion
-} from "#components";
-import { useAnalyzedFlows } from "../../composables/useAnalyzedFlows";
-import { useFlowsNavigation } from "../../composables/useFlowsNavigation";
-import { useFlowRunsInfinite } from "../../composables/useFlowRunsInfinite";
-import { useFlowRunTimeline } from "../../composables/useFlowRunTimeline";
-import { useFlowRunsPolling } from "../../composables/useFlowRunsPolling";
-const { selectedFlow, selectedRunId } = useFlowsNavigation();
-const mainTab = ref("diagram");
-const mainTabs = computed(() => [
-  { label: "Diagram", value: "diagram", icon: "i-lucide-git-branch" },
-  {
-    label: "Timeline",
-    value: "timeline",
-    icon: "i-lucide-activity",
-    disabled: !selectedRunId.value
+import { ref, computed, onMounted, onBeforeUnmount } from "#imports";
+import { UButton, UIcon, UBadge, UInput } from "#components";
+import { useComponentRouter } from "../../composables/useComponentRouter";
+import { useFlowWebSocket } from "../../composables/useFlowWebSocket";
+import StatCard from "../../components/StatCard.vue";
+import LiveIndicator from "../../components/LiveIndicator.vue";
+const router = useComponentRouter();
+const flows = ref([]);
+const loading = ref(true);
+const flowWs = useFlowWebSocket();
+async function fetchAnalyzedFlows() {
+  try {
+    const data = await $fetch("/api/_flows");
+    const analyzedFlows = data;
+    flows.value = analyzedFlows.map((flow) => ({
+      id: flow.id,
+      entry: flow.entry,
+      steps: flow.analyzed?.steps || flow.steps || {},
+      levels: flow.analyzed?.levels || [],
+      maxLevel: flow.analyzed?.maxLevel || 0,
+      stallTimeout: flow.analyzed?.stallTimeout,
+      awaitPatterns: flow.analyzed?.awaitPatterns,
+      hasAwait: flow.analyzed?.awaitPatterns?.steps?.length > 0 || false,
+      timeout: flow.timeout,
+      stats: { total: 0, success: 0, failure: 0, cancel: 0, running: 0, awaiting: 0 }
+    }));
+  } catch (err) {
+    console.error("Error fetching analyzed flows:", err);
   }
-]);
-watch(selectedRunId, (newRunId, oldRunId) => {
-  if (newRunId && newRunId !== oldRunId) {
-    mainTab.value = "timeline";
-  } else if (!newRunId) {
-    mainTab.value = "diagram";
+}
+function updateFlowStats(data) {
+  const flowId = data?.id;
+  if (!flowId || !flows.value)
+    return;
+  const flowIndex = flows.value.findIndex((f) => f.id === flowId);
+  if (flowIndex === -1) {
+    console.warn("[Flow Stats] Flow not found in list:", flowId);
+    return;
   }
-});
-const flows = useAnalyzedFlows();
-const {
-  items: runs,
-  total: totalRuns,
-  loading: loadingRuns,
-  hasMore: hasMoreRuns,
-  loadMore: loadMoreRuns,
-  refresh: refreshRuns,
-  checkForNewRuns
-} = useFlowRunsInfinite(selectedFlow);
-const { flowState, isConnected, isReconnecting } = useFlowRunTimeline(selectedFlow, selectedRunId);
-const shouldPoll = computed(() => !!selectedFlow.value);
-useFlowRunsPolling(checkForNewRuns, shouldPoll);
-const startFlowModalOpen = ref(false);
-const scheduleModalOpen = ref(false);
-const flowInputJson = ref("{}");
-const jsonError = ref("");
-const startingFlow = ref(false);
-const schedulesListRef = ref();
-const clearingHistory = ref(false);
-const scheduleAccordionItems = [
-  {
-    label: "Schedules",
-    slot: "item",
-    defaultOpen: false
+  const metadata = data?.metadata;
+  if (!metadata) {
+    console.warn("[Flow Stats] No metadata in update:", data);
+    return;
   }
-];
-const confirmDialogOpen = ref(false);
-const confirmDialogConfig = ref({
-  title: "",
-  description: "",
-  items: [],
-  warning: "",
-  onConfirm: () => {
+  const stats = metadata.stats || {
+    total: metadata["stats.total"] || 0,
+    success: metadata["stats.success"] || 0,
+    failure: metadata["stats.failure"] || 0,
+    cancel: metadata["stats.cancel"] || 0,
+    running: metadata["stats.running"] || 0,
+    awaiting: metadata["stats.awaiting"] || 0
+  };
+  flows.value[flowIndex] = {
+    ...flows.value[flowIndex],
+    stats: {
+      total: stats.total || 0,
+      success: stats.success || 0,
+      failure: stats.failure || 0,
+      cancel: stats.cancel || 0,
+      running: stats.running || 0,
+      awaiting: stats.awaiting || 0
+    },
+    lastRunAt: metadata.lastRunAt,
+    lastCompletedAt: metadata.lastCompletedAt
+  };
+}
+onMounted(async () => {
+  await fetchAnalyzedFlows();
+  if (import.meta.client) {
+    flowWs.subscribeStats(
+      {
+        onInitial: (data) => {
+          updateFlowStats(data);
+        },
+        onUpdate: (data) => {
+          updateFlowStats(data);
+        }
+      },
+      {
+        autoReconnect: true,
+        onOpen: () => {
+          loading.value = false;
+        },
+        onError: (err) => {
+          console.error("[Flow Stats] Error:", err);
+        }
+      }
+    );
   }
 });
-const flowActionsItems = computed(() => [[
-  {
-    label: "Schedule Flow",
-    icon: "i-lucide-clock",
-    onSelect: () => openScheduleModal()
-  },
-  {
-    label: "Clear History",
-    icon: "i-lucide-trash-2",
-    disabled: clearingHistory.value,
-    onSelect: () => confirmClearHistory()
-  }
-]]);
-watch(flowInputJson, (value) => {
-  try {
-    JSON.parse(value);
-    jsonError.value = "";
-  } catch (err) {
-    jsonError.value = err instanceof Error ? err.message : "Invalid JSON";
-  }
+onBeforeUnmount(() => {
+  flowWs.unsubscribeStats();
+  flowWs.stop();
 });
-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();
-  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 formatDuration = (start, end) => {
-  const startTime = new Date(start).getTime();
-  const endTime = new Date(end).getTime();
-  const diff = endTime - startTime;
-  const seconds = Math.floor(diff / 1e3);
-  const minutes = Math.floor(seconds / 60);
-  const hours = Math.floor(minutes / 60);
-  if (hours > 0) {
-    const remainingMinutes = minutes % 60;
-    return `${hours}h ${remainingMinutes}m`;
-  }
-  if (minutes > 0) {
-    const remainingSeconds = seconds % 60;
-    return `${minutes}m ${remainingSeconds}s`;
+const searchQuery = ref("");
+const filteredFlows = computed(() => {
+  if (!flows.value)
+    return [];
+  if (searchQuery.value) {
+    const query = searchQuery.value.toLowerCase();
+    return flows.value.filter(
+      (flow) => flow.id.toLowerCase().includes(query)
+    );
   }
-  return `${seconds}s`;
-};
-const runSnapshot = computed(() => {
-  const state = flowState.state.value;
-  return {
-    status: state.status,
-    startedAt: state.startedAt,
-    completedAt: state.completedAt,
-    logsCount: state.logs.length,
-    lastLogLevel: state.logs.length > 0 ? state.logs[state.logs.length - 1]?.level : void 0
-  };
+  return flows.value;
 });
-const selectedStepKey = ref(null);
-const timeline = computed(() => {
-  const events = flowState.events.value;
-  if (!selectedStepKey.value) return events;
-  return events.filter((e) => e.stepName === selectedStepKey.value);
+const totalRuns = computed(() => {
+  if (!flows.value)
+    return 0;
+  return flows.value.reduce((acc, flow) => acc + (flow.stats?.total || 0), 0);
 });
-const filteredLogs = computed(() => {
-  const logs = flowState.state.value.logs;
-  if (!selectedStepKey.value) return logs;
-  return logs.filter((log) => log.stepName === selectedStepKey.value);
+const totalSuccess = computed(() => {
+  if (!flows.value)
+    return 0;
+  return flows.value.reduce((acc, flow) => acc + (flow.stats?.success || 0), 0);
 });
-const selectedFlowMeta = computed(() => {
-  const id = selectedFlow.value;
-  if (!id) return null;
-  return (flows.value || []).find((f) => f?.id === id) || null;
+const totalFailure = computed(() => {
+  if (!flows.value)
+    return 0;
+  return flows.value.reduce((acc, flow) => acc + (flow.stats?.failure || 0), 0);
 });
-const handleSelectStep = (stepKey) => {
-  selectedStepKey.value = stepKey;
-};
-const handleCancelFlow = async () => {
-  if (!selectedFlow.value || !selectedRunId.value) return;
-  try {
-    await $fetch(`/api/_flows/${selectedFlow.value}/runs/${selectedRunId.value}/cancel`, {
-      method: "POST"
-    });
-    console.log("Flow canceled successfully");
-  } catch (error) {
-    console.error("Failed to cancel flow:", error);
-  }
-};
-const diagramStepStates = computed(() => {
-  if (!selectedRunId.value) return void 0;
-  return flowState.state.value.steps;
+const totalRunning = computed(() => {
+  if (!flows.value)
+    return 0;
+  return flows.value.reduce((acc, flow) => acc + (flow.stats?.running || 0), 0);
 });
-const selectRun = (runId) => {
-  selectedRunId.value = runId;
-  mainTab.value = "timeline";
-};
-const exportTimelineJson = () => {
-  const blob = new Blob([JSON.stringify(flowState.events.value, null, 2)], { type: "application/json" });
-  const url = URL.createObjectURL(blob);
-  const a = document.createElement("a");
-  a.href = url;
-  a.download = `flow-${selectedFlow.value}-${selectedRunId.value}-events-${(/* @__PURE__ */ new Date()).toISOString()}.json`;
-  document.body.appendChild(a);
-  a.click();
-  a.remove();
-  URL.revokeObjectURL(url);
-};
-const handleNodeAction = async (payload) => {
-  const _stepName = payload.id.split(":")[1];
-  if (!selectedRunId.value) {
-    console.log("[flows/index] No run selected, showing alert");
-    alert("Please select a flow run first to view logs or details.");
-    return;
-  }
-  mainTab.value = "timeline";
-};
-const openStartFlowModal = () => {
-  flowInputJson.value = "{}";
-  jsonError.value = "";
-  startFlowModalOpen.value = true;
-};
-const openScheduleModal = () => {
-  scheduleModalOpen.value = true;
-};
-const handleFlowScheduled = () => {
-  schedulesListRef.value?.loadSchedules();
-};
-const handleSchedulesUpdated = () => {
-  schedulesListRef.value?.loadSchedules();
+const totalAwaiting = computed(() => {
+  if (!flows.value)
+    return 0;
+  return flows.value.reduce((acc, flow) => acc + (flow.stats?.awaiting || 0), 0);
+});
+const getStepCount = (flow) => {
+  if (!flow.steps) return 0;
+  return Object.keys(flow.steps).length;
 };
-const startFlowRun = async () => {
-  if (!selectedFlow.value || jsonError.value) return;
-  try {
-    startingFlow.value = true;
-    const input = JSON.parse(flowInputJson.value);
-    const result = await $fetch(`/api/_flows/${encodeURIComponent(selectedFlow.value)}/start`, {
-      method: "POST",
-      body: input
-    });
-    startFlowModalOpen.value = false;
-    flowInputJson.value = "{}";
-    if (result?.flowId) {
-      selectedRunId.value = result.flowId;
-      mainTab.value = "timeline";
-    }
-    await refreshRuns();
-  } catch (err) {
-    console.error("Failed to start flow:", err);
-    jsonError.value = err instanceof Error ? err.message : "Failed to start flow";
-  } finally {
-    startingFlow.value = false;
-  }
+const getLevelCount = (flow) => {
+  if (!flow.levels) return 0;
+  return Array.isArray(flow.levels) ? flow.levels.length : 0;
 };
-const confirmClearHistory = () => {
-  if (!selectedFlow.value) return;
-  confirmDialogConfig.value = {
-    title: "Clear Flow History",
-    description: `Are you sure you want to clear all history for "${selectedFlow.value}"?`,
-    items: [
-      "All flow run events",
-      "All flow run logs",
-      "The runs index"
-    ],
-    warning: "This action cannot be undone.",
-    onConfirm: () => {
-      clearFlowHistory();
+const getRuntimes = (flow) => {
+  const runtimes = /* @__PURE__ */ new Set();
+  if (!flow.steps) return [];
+  for (const step of Object.values(flow.steps)) {
+    if (step.runtime) {
+      runtimes.add(step.runtime);
     }
-  };
-  confirmDialogOpen.value = true;
-};
-const clearFlowHistory = async () => {
-  if (!selectedFlow.value) return;
-  try {
-    clearingHistory.value = true;
-    await $fetch(`/api/_flows/${encodeURIComponent(selectedFlow.value)}/clear-history`, {
-      method: "DELETE"
-    });
-    confirmDialogOpen.value = false;
-    selectedRunId.value = "";
-    mainTab.value = "diagram";
-    await refreshRuns();
-    console.log(`Successfully cleared history for "${selectedFlow.value}"`);
-  } catch (err) {
-    console.error("Failed to clear history:", err);
-    confirmDialogConfig.value = {
-      title: "Error Clearing History",
-      description: `Failed to clear history: ${err instanceof Error ? err.message : "Unknown error"}`,
-      items: [],
-      warning: "",
-      onConfirm: () => {
-        confirmDialogOpen.value = false;
-      }
-    };
-  } finally {
-    clearingHistory.value = false;
   }
+  return Array.from(runtimes);
 };
+function formatTimeout(ms) {
+  if (ms < 1e3)
+    return `${ms}ms`;
+  if (ms < 6e4)
+    return `${ms / 1e3}s`;
+  return `${ms / 6e4}m`;
+}
+function openFlow(flowId) {
+  router.push(`/flows/${flowId}`);
+}
 </script>