@burdenoff/fluidgrids-fe-sdk 2026.510.105

package/dist/chunk-WD52O45G.js

@@ -0,0 +1,2015 @@
+import { ExecutionDetailDocument, ExecutionLogsDocument, ExecutionStatsDocument, PauseExecutionDocument, ResumeExecutionDocument, CancelExecutionDocument, RetryNodeDocument, TerminateExecutionDocument, ExecutionsListDocument } from './chunk-FGYVIXQ7.js';
+import { getFluidGridsClient } from './chunk-5BDQNSP3.js';
+import { Icon } from '@iconify/react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { create } from 'zustand';
+import { useState, useCallback, useMemo, useEffect } from 'react';
+import { Button } from '@burdenoff/fe-libs/button';
+import { useNavigate } from 'react-router-dom';
+import { gql } from '@apollo/client';
+
+// src/modules/executions/types/index.ts
+var RUN_STATUS_CONFIG = {
+  PENDING: {
+    label: "Pending",
+    color: "text-gray-600 dark:text-gray-400",
+    bgColor: "bg-gray-50 dark:bg-gray-800",
+    borderColor: "border-gray-200 dark:border-gray-700",
+    icon: "mdi:clock-outline"
+  },
+  RUNNING: {
+    label: "Running",
+    color: "text-blue-600 dark:text-blue-400",
+    bgColor: "bg-blue-50 dark:bg-blue-900/20",
+    borderColor: "border-blue-200 dark:border-blue-800",
+    icon: "mdi:play-circle-outline"
+  },
+  COMPLETED: {
+    label: "Completed",
+    color: "text-green-600 dark:text-green-400",
+    bgColor: "bg-green-50 dark:bg-green-900/20",
+    borderColor: "border-green-200 dark:border-green-800",
+    icon: "mdi:check-circle-outline"
+  },
+  FAILED: {
+    label: "Failed",
+    color: "text-red-600 dark:text-red-400",
+    bgColor: "bg-red-50 dark:bg-red-900/20",
+    borderColor: "border-red-200 dark:border-red-800",
+    icon: "mdi:alert-circle-outline"
+  },
+  CANCELLED: {
+    label: "Cancelled",
+    color: "text-orange-600 dark:text-orange-400",
+    bgColor: "bg-orange-50 dark:bg-orange-900/20",
+    borderColor: "border-orange-200 dark:border-orange-800",
+    icon: "mdi:cancel"
+  },
+  WAITING: {
+    label: "Waiting",
+    color: "text-purple-600 dark:text-purple-400",
+    bgColor: "bg-purple-50 dark:bg-purple-900/20",
+    borderColor: "border-purple-200 dark:border-purple-800",
+    icon: "mdi:timer-sand"
+  },
+  TERMINATED: {
+    label: "Terminated",
+    color: "text-gray-600 dark:text-gray-400",
+    bgColor: "bg-gray-50 dark:bg-gray-800",
+    borderColor: "border-gray-300 dark:border-gray-600",
+    icon: "mdi:stop-circle-outline"
+  }
+};
+var NODE_STATUS_CONFIG = {
+  PENDING: {
+    label: "Pending",
+    color: "text-gray-600 dark:text-gray-400",
+    bgColor: "bg-gray-50 dark:bg-gray-800",
+    borderColor: "border-gray-200 dark:border-gray-700",
+    icon: "mdi:clock-outline"
+  },
+  RUNNING: {
+    label: "Running",
+    color: "text-blue-600 dark:text-blue-400",
+    bgColor: "bg-blue-50 dark:bg-blue-900/20",
+    borderColor: "border-blue-200 dark:border-blue-800",
+    icon: "mdi:play-circle-outline"
+  },
+  COMPLETED: {
+    label: "Completed",
+    color: "text-green-600 dark:text-green-400",
+    bgColor: "bg-green-50 dark:bg-green-900/20",
+    borderColor: "border-green-200 dark:border-green-800",
+    icon: "mdi:check-circle-outline"
+  },
+  FAILED: {
+    label: "Failed",
+    color: "text-red-600 dark:text-red-400",
+    bgColor: "bg-red-50 dark:bg-red-900/20",
+    borderColor: "border-red-200 dark:border-red-800",
+    icon: "mdi:alert-circle-outline"
+  },
+  SKIPPED: {
+    label: "Skipped",
+    color: "text-gray-500 dark:text-gray-500",
+    bgColor: "bg-gray-100 dark:bg-gray-700",
+    borderColor: "border-gray-200 dark:border-gray-600",
+    icon: "mdi:skip-next"
+  },
+  DELAYED: {
+    label: "Delayed",
+    color: "text-yellow-600 dark:text-yellow-400",
+    bgColor: "bg-yellow-50 dark:bg-yellow-900/20",
+    borderColor: "border-yellow-200 dark:border-yellow-800",
+    icon: "mdi:clock-alert-outline"
+  },
+  CANCELLED: {
+    label: "Cancelled",
+    color: "text-orange-600 dark:text-orange-400",
+    bgColor: "bg-orange-50 dark:bg-orange-900/20",
+    borderColor: "border-orange-200 dark:border-orange-800",
+    icon: "mdi:cancel"
+  },
+  TIMEOUT: {
+    label: "Timeout",
+    color: "text-red-600 dark:text-red-400",
+    bgColor: "bg-red-50 dark:bg-red-900/20",
+    borderColor: "border-red-200 dark:border-red-800",
+    icon: "mdi:timer-off-outline"
+  },
+  WAITING_SUBWORKFLOW: {
+    label: "Waiting",
+    color: "text-purple-600 dark:text-purple-400",
+    bgColor: "bg-purple-50 dark:bg-purple-900/20",
+    borderColor: "border-purple-200 dark:border-purple-800",
+    icon: "mdi:subdirectory-arrow-right"
+  }
+};
+function ExecutionStatusBadge({
+  status,
+  size = "md",
+  showIcon = true,
+  showLabel = true,
+  animated = true
+}) {
+  const config = RUN_STATUS_CONFIG[status];
+  const sizeClasses = {
+    sm: "px-1.5 py-0.5 text-xs gap-1",
+    md: "px-2 py-1 text-sm gap-1.5",
+    lg: "px-3 py-1.5 text-base gap-2"
+  };
+  const iconSizes = {
+    sm: 12,
+    md: 14,
+    lg: 16
+  };
+  const isRunning = status === "RUNNING";
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: `
+        inline-flex items-center rounded-full font-medium
+        ${config.bgColor} ${config.color} border ${config.borderColor}
+        ${sizeClasses[size]}
+        ${animated && isRunning ? "animate-pulse" : ""}
+      `,
+      children: [
+        showIcon && /* @__PURE__ */ jsx(
+          Icon,
+          {
+            icon: config.icon,
+            width: iconSizes[size],
+            height: iconSizes[size],
+            className: animated && isRunning ? "animate-spin" : ""
+          }
+        ),
+        showLabel && /* @__PURE__ */ jsx("span", { children: config.label })
+      ]
+    }
+  );
+}
+function NodeStatusBadge({
+  status,
+  size = "md",
+  showIcon = true,
+  showLabel = true,
+  animated = true
+}) {
+  const config = NODE_STATUS_CONFIG[status];
+  const sizeClasses = {
+    sm: "px-1.5 py-0.5 text-xs gap-1",
+    md: "px-2 py-1 text-sm gap-1.5",
+    lg: "px-3 py-1.5 text-base gap-2"
+  };
+  const iconSizes = {
+    sm: 12,
+    md: 14,
+    lg: 16
+  };
+  const isRunning = status === "RUNNING";
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: `
+        inline-flex items-center rounded-full font-medium
+        ${config.bgColor} ${config.color} border ${config.borderColor}
+        ${sizeClasses[size]}
+        ${animated && isRunning ? "animate-pulse" : ""}
+      `,
+      children: [
+        showIcon && /* @__PURE__ */ jsx(
+          Icon,
+          {
+            icon: config.icon,
+            width: iconSizes[size],
+            height: iconSizes[size],
+            className: animated && isRunning ? "animate-spin" : ""
+          }
+        ),
+        showLabel && /* @__PURE__ */ jsx("span", { children: config.label })
+      ]
+    }
+  );
+}
+var defaultFilter = {
+  status: "all",
+  workflowKey: "",
+  dateRange: {
+    start: null,
+    end: null,
+    preset: "all"
+  },
+  search: ""
+};
+var defaultPagination = {
+  page: 1,
+  pageSize: 25,
+  total: 0
+};
+var useExecutionsStore = create((set) => ({
+  // Initial state
+  viewMode: "table",
+  selectedExecution: null,
+  expandedRows: /* @__PURE__ */ new Set(),
+  selection: {
+    runIds: [],
+    allSelected: false
+  },
+  filter: defaultFilter,
+  pagination: defaultPagination,
+  isFilterPanelOpen: false,
+  isDetailsPanelOpen: false,
+  autoRefresh: true,
+  autoRefreshInterval: 5e3,
+  liveRunIds: /* @__PURE__ */ new Set(),
+  // Actions - View
+  setViewMode: (mode) => set({ viewMode: mode }),
+  setSelectedExecution: (execution) => set({
+    selectedExecution: execution,
+    isDetailsPanelOpen: execution !== null
+  }),
+  toggleRowExpanded: (runId) => set((state) => {
+    const newExpanded = new Set(state.expandedRows);
+    if (newExpanded.has(runId)) {
+      newExpanded.delete(runId);
+    } else {
+      newExpanded.add(runId);
+    }
+    return { expandedRows: newExpanded };
+  }),
+  // Actions - Selection
+  setSelection: (selection) => set({ selection }),
+  toggleSelectRun: (runId) => set((state) => {
+    const isSelected = state.selection.runIds.includes(runId);
+    const newRunIds = isSelected ? state.selection.runIds.filter((id) => id !== runId) : [...state.selection.runIds, runId];
+    return {
+      selection: {
+        runIds: newRunIds,
+        allSelected: false
+      }
+    };
+  }),
+  selectAll: (runIds) => set((state) => ({
+    selection: {
+      runIds: state.selection.allSelected ? [] : runIds,
+      allSelected: !state.selection.allSelected
+    }
+  })),
+  clearSelection: () => set({
+    selection: {
+      runIds: [],
+      allSelected: false
+    }
+  }),
+  // Actions - Filter
+  updateFilter: (filterUpdate) => set((state) => ({
+    filter: { ...state.filter, ...filterUpdate },
+    pagination: { ...state.pagination, page: 1 }
+  })),
+  setStatusFilter: (status) => set((state) => ({
+    filter: { ...state.filter, status },
+    pagination: { ...state.pagination, page: 1 }
+  })),
+  setWorkflowFilter: (workflowKey) => set((state) => ({
+    filter: { ...state.filter, workflowKey },
+    pagination: { ...state.pagination, page: 1 }
+  })),
+  setDateRange: (dateRange) => set((state) => ({
+    filter: { ...state.filter, dateRange },
+    pagination: { ...state.pagination, page: 1 }
+  })),
+  setSearchQuery: (search) => set((state) => ({
+    filter: { ...state.filter, search },
+    pagination: { ...state.pagination, page: 1 }
+  })),
+  resetFilters: () => set({
+    filter: defaultFilter,
+    pagination: { ...defaultPagination }
+  }),
+  // Actions - Pagination
+  setPage: (page) => set((state) => ({
+    pagination: { ...state.pagination, page }
+  })),
+  setPageSize: (pageSize) => set((state) => ({
+    pagination: { ...state.pagination, pageSize, page: 1 }
+  })),
+  setTotal: (total) => set((state) => ({
+    pagination: { ...state.pagination, total }
+  })),
+  // Actions - UI
+  toggleFilterPanel: () => set((state) => ({
+    isFilterPanelOpen: !state.isFilterPanelOpen
+  })),
+  toggleDetailsPanel: () => set((state) => ({
+    isDetailsPanelOpen: !state.isDetailsPanelOpen
+  })),
+  setAutoRefresh: (enabled) => set({ autoRefresh: enabled }),
+  setAutoRefreshInterval: (interval) => set({ autoRefreshInterval: interval }),
+  // Actions - Real-time
+  addLiveRun: (runId) => set((state) => {
+    const newLiveRunIds = new Set(state.liveRunIds);
+    newLiveRunIds.add(runId);
+    return { liveRunIds: newLiveRunIds };
+  }),
+  removeLiveRun: (runId) => set((state) => {
+    const newLiveRunIds = new Set(state.liveRunIds);
+    newLiveRunIds.delete(runId);
+    return { liveRunIds: newLiveRunIds };
+  }),
+  clearLiveRuns: () => set({ liveRunIds: /* @__PURE__ */ new Set() })
+}));
+var STATUS_OPTIONS = [
+  { value: "all", label: "All Statuses" },
+  { value: "RUNNING", label: "Running" },
+  { value: "COMPLETED", label: "Completed" },
+  { value: "FAILED", label: "Failed" },
+  { value: "PENDING", label: "Pending" },
+  { value: "CANCELLED", label: "Cancelled" },
+  { value: "WAITING", label: "Waiting" },
+  { value: "TERMINATED", label: "Terminated" }
+];
+var DATE_PRESETS = [
+  { value: "all", label: "All Time" },
+  { value: "today", label: "Today" },
+  { value: "yesterday", label: "Yesterday" },
+  { value: "7days", label: "Last 7 Days" },
+  { value: "30days", label: "Last 30 Days" },
+  { value: "90days", label: "Last 90 Days" },
+  { value: "custom", label: "Custom Range" }
+];
+function ExecutionFilters({
+  workflows = [],
+  onRefresh
+}) {
+  const {
+    filter,
+    setStatusFilter,
+    setWorkflowFilter,
+    setDateRange,
+    setSearchQuery,
+    resetFilters,
+    autoRefresh,
+    setAutoRefresh
+  } = useExecutionsStore();
+  const [showCustomDate, setShowCustomDate] = useState(false);
+  const handleDatePresetChange = useCallback(
+    (preset) => {
+      const now = /* @__PURE__ */ new Date();
+      let start = null;
+      let end = null;
+      switch (preset) {
+        case "today":
+          start = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+          end = now;
+          break;
+        case "yesterday":
+          start = new Date(
+            now.getFullYear(),
+            now.getMonth(),
+            now.getDate() - 1
+          );
+          end = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+          break;
+        case "7days":
+          start = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1e3);
+          end = now;
+          break;
+        case "30days":
+          start = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1e3);
+          end = now;
+          break;
+        case "90days":
+          start = new Date(now.getTime() - 90 * 24 * 60 * 60 * 1e3);
+          end = now;
+          break;
+        case "custom":
+          setShowCustomDate(true);
+          return;
+        default:
+          start = null;
+          end = null;
+      }
+      setShowCustomDate(false);
+      setDateRange({ start, end, preset });
+    },
+    [setDateRange]
+  );
+  const activeFiltersCount = [
+    filter.status !== "all",
+    filter.workflowKey !== "",
+    filter.dateRange.preset !== "all",
+    filter.search !== ""
+  ].filter(Boolean).length;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            icon: "mdi:magnify",
+            className: "absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary",
+            width: 18
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            placeholder: "Search by workflow name or run ID...",
+            value: filter.search,
+            onChange: (e) => setSearchQuery(e.target.value),
+            className: "w-full pl-[3.25rem] pr-4 py-2 bg-background-secondary border border-border-secondary rounded-lg text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-action-primary-bg focus:border-transparent"
+          }
+        ),
+        filter.search && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setSearchQuery(""),
+            className: "absolute right-3 top-1/2 -translate-y-1/2 text-text-secondary hover:text-text-primary",
+            children: /* @__PURE__ */ jsx(Icon, { icon: "mdi:close", width: 18 })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        "select",
+        {
+          value: filter.status,
+          onChange: (e) => setStatusFilter(e.target.value),
+          className: "px-3 py-2 bg-background-secondary border border-border-secondary rounded-lg text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg",
+          children: STATUS_OPTIONS.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
+        }
+      ),
+      workflows.length > 0 && /* @__PURE__ */ jsxs(
+        "select",
+        {
+          value: filter.workflowKey,
+          onChange: (e) => setWorkflowFilter(e.target.value),
+          className: "px-3 py-2 bg-background-secondary border border-border-secondary rounded-lg text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg max-w-[200px]",
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "", children: "All Workflows" }),
+            workflows.map((wf) => /* @__PURE__ */ jsx("option", { value: wf.workflowKey, children: wf.name }, wf.workflowKey))
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "select",
+        {
+          value: filter.dateRange.preset,
+          onChange: (e) => handleDatePresetChange(e.target.value),
+          className: "px-3 py-2 bg-background-secondary border border-border-secondary rounded-lg text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg",
+          children: DATE_PRESETS.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
+        }
+      )
+    ] }),
+    showCustomDate && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-3 items-center p-3 bg-background-secondary rounded-lg border border-border-secondary", children: [
+      /* @__PURE__ */ jsx("label", { className: "text-sm text-text-secondary", children: "From:" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "datetime-local",
+          value: filter.dateRange.start?.toISOString().slice(0, 16) ?? "",
+          onChange: (e) => setDateRange({
+            ...filter.dateRange,
+            start: e.target.value ? new Date(e.target.value) : null,
+            preset: "custom"
+          }),
+          className: "px-3 py-1.5 bg-background-primary border border-border-secondary rounded text-text-primary text-sm"
+        }
+      ),
+      /* @__PURE__ */ jsx("label", { className: "text-sm text-text-secondary", children: "To:" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "datetime-local",
+          value: filter.dateRange.end?.toISOString().slice(0, 16) ?? "",
+          onChange: (e) => setDateRange({
+            ...filter.dateRange,
+            end: e.target.value ? new Date(e.target.value) : null,
+            preset: "custom"
+          }),
+          className: "px-3 py-1.5 bg-background-primary border border-border-secondary rounded text-text-primary text-sm"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setShowCustomDate(false),
+          className: "text-text-secondary hover:text-text-primary",
+          children: /* @__PURE__ */ jsx(Icon, { icon: "mdi:close", width: 18 })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxs("label", { className: "inline-flex items-center gap-2 cursor-pointer", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: autoRefresh,
+              onChange: (e) => setAutoRefresh(e.target.checked),
+              className: "w-4 h-4 rounded border-border-secondary text-action-primary-bg focus:ring-action-primary-bg"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-text-secondary", children: "Auto-refresh" })
+        ] }),
+        onRefresh && /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: onRefresh,
+            className: "gap-1.5",
+            children: [
+              /* @__PURE__ */ jsx(Icon, { icon: "mdi:refresh", width: 16 }),
+              "Refresh"
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        activeFiltersCount > 0 && /* @__PURE__ */ jsxs("span", { className: "text-sm text-text-secondary", children: [
+          activeFiltersCount,
+          " filter",
+          activeFiltersCount > 1 ? "s" : "",
+          " ",
+          "active"
+        ] }),
+        activeFiltersCount > 0 && /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            onClick: resetFilters,
+            className: "gap-1.5",
+            children: [
+              /* @__PURE__ */ jsx(Icon, { icon: "mdi:filter-remove", width: 16 }),
+              "Clear Filters"
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function StatCard({
+  label,
+  value,
+  icon,
+  color,
+  trend,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick,
+      disabled: !onClick,
+      className: `
+        flex flex-col p-4 bg-background-secondary rounded-lg border border-border-secondary
+        hover:border-border-primary transition-colors
+        ${onClick ? "cursor-pointer" : "cursor-default"}
+        text-left w-full
+      `,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+          /* @__PURE__ */ jsx(Icon, { icon, className: color, width: 24 }),
+          trend && /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: `text-xs font-medium ${trend.isPositive ? "text-[var(--color-status-success-text)]" : "text-[var(--color-status-error-text)]"}`,
+              children: [
+                trend.isPositive ? "+" : "-",
+                Math.abs(trend.value),
+                "%"
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold text-text-primary", children: value }),
+        /* @__PURE__ */ jsx("div", { className: "text-sm text-text-secondary mt-1", children: label })
+      ]
+    }
+  );
+}
+function ExecutionStats({
+  stats,
+  loading,
+  onFilterByStatus
+}) {
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 gap-4", children: [...Array(6)].map((_, i) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "h-24 bg-background-secondary rounded-lg border border-border-secondary animate-pulse"
+      },
+      i
+    )) });
+  }
+  if (!stats) {
+    return null;
+  }
+  const formatDuration3 = (seconds) => {
+    if (seconds < 60) return `${Math.round(seconds)}s`;
+    if (seconds < 3600) return `${Math.round(seconds / 60)}m`;
+    return `${Math.round(seconds / 3600)}h`;
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4", children: [
+    /* @__PURE__ */ jsx(
+      StatCard,
+      {
+        label: "Total Runs",
+        value: stats.total.toLocaleString(),
+        icon: "mdi:play-box-multiple",
+        color: "text-text-primary",
+        onClick: () => onFilterByStatus?.("all")
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      StatCard,
+      {
+        label: "Running",
+        value: stats.running,
+        icon: "mdi:play-circle",
+        color: "text-[var(--color-status-info-text)]",
+        onClick: () => onFilterByStatus?.("RUNNING")
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      StatCard,
+      {
+        label: "Completed",
+        value: stats.completed.toLocaleString(),
+        icon: "mdi:check-circle",
+        color: "text-[var(--color-status-success-text)]",
+        onClick: () => onFilterByStatus?.("COMPLETED")
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      StatCard,
+      {
+        label: "Failed",
+        value: stats.failed,
+        icon: "mdi:alert-circle",
+        color: "text-[var(--color-status-error-text)]",
+        onClick: () => onFilterByStatus?.("FAILED")
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      StatCard,
+      {
+        label: "Success Rate",
+        value: `${(stats.successRate ?? 0).toFixed(1)}%`,
+        icon: "mdi:percent",
+        color: "text-accent"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      StatCard,
+      {
+        label: "Avg Duration",
+        value: formatDuration3(stats.avgDuration ?? 0),
+        icon: "mdi:timer",
+        color: "text-[var(--color-status-warning-text)]"
+      }
+    )
+  ] });
+}
+function ExecutionTable({
+  executions,
+  loading,
+  onRowClick,
+  onAction
+}) {
+  const navigate = useNavigate();
+  const {
+    selection,
+    toggleSelectRun,
+    selectAll,
+    expandedRows,
+    toggleRowExpanded
+  } = useExecutionsStore();
+  const allRunIds = useMemo(() => executions.map((e) => e.id), [executions]);
+  const formatDuration3 = (ms) => {
+    if (!ms) return "-";
+    if (ms < 1e3) return `${ms}ms`;
+    if (ms < 6e4) return `${(ms / 1e3).toFixed(1)}s`;
+    if (ms < 36e5)
+      return `${Math.round(ms / 6e4)}m ${Math.round(ms % 6e4 / 1e3)}s`;
+    return `${Math.round(ms / 36e5)}h ${Math.round(ms % 36e5 / 6e4)}m`;
+  };
+  const formatDate2 = (dateStr) => {
+    if (!dateStr) return "-";
+    const date = new Date(dateStr);
+    const now = /* @__PURE__ */ new Date();
+    const diff = now.getTime() - date.getTime();
+    if (diff < 6e4) return "Just now";
+    if (diff < 36e5) return `${Math.round(diff / 6e4)}m ago`;
+    if (diff < 864e5) return `${Math.round(diff / 36e5)}h ago`;
+    if (diff < 6048e5) return `${Math.round(diff / 864e5)}d ago`;
+    return date.toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit"
+    });
+  };
+  const getRowActions = (execution) => {
+    const actions = [];
+    switch (execution.status) {
+      case "RUNNING":
+        actions.push({ icon: "mdi:pause", label: "Pause", action: "pause" });
+        actions.push({ icon: "mdi:stop", label: "Cancel", action: "cancel" });
+        break;
+      case "WAITING":
+        actions.push({ icon: "mdi:play", label: "Resume", action: "resume" });
+        actions.push({ icon: "mdi:stop", label: "Cancel", action: "cancel" });
+        break;
+      case "FAILED":
+        actions.push({ icon: "mdi:refresh", label: "Retry", action: "retry" });
+        break;
+      case "PENDING":
+        actions.push({ icon: "mdi:stop", label: "Cancel", action: "cancel" });
+        break;
+    }
+    return actions;
+  };
+  if (loading && executions.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "bg-background-secondary rounded-lg border border-border-secondary overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: "w-full min-w-[800px]", children: [
+      /* @__PURE__ */ jsx("thead", { className: "bg-background-tertiary border-b border-border-secondary", children: /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("th", { className: "w-10 px-4 py-3" }),
+        /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase", children: "Status" }),
+        /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase", children: "Workflow" }),
+        /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase", children: "Run ID" }),
+        /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase", children: "Started" }),
+        /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase", children: "Duration" }),
+        /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase", children: "Progress" }),
+        /* @__PURE__ */ jsx("th", { className: "px-4 py-3" })
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { children: [...Array(5)].map((_, i) => /* @__PURE__ */ jsx("tr", { className: "border-b border-border-secondary", children: /* @__PURE__ */ jsx("td", { colSpan: 8, className: "px-4 py-4", children: /* @__PURE__ */ jsx("div", { className: "h-8 bg-background-tertiary rounded animate-pulse" }) }) }, i)) })
+    ] }) }) });
+  }
+  if (executions.length === 0) {
+    return /* @__PURE__ */ jsxs("div", { className: "bg-background-secondary rounded-lg border border-border-secondary p-12 text-center", children: [
+      /* @__PURE__ */ jsx(
+        Icon,
+        {
+          icon: "mdi:play-box-outline",
+          className: "mx-auto text-text-secondary mb-4",
+          width: 48
+        }
+      ),
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-medium text-text-primary mb-2", children: "No executions found" }),
+      /* @__PURE__ */ jsx("p", { className: "text-text-secondary mb-4", children: "There are no workflow executions matching your filters." }),
+      /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => navigate("../list"), children: "View Workflows" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "bg-background-secondary rounded-lg border border-border-secondary overflow-hidden", children: [
+    /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: "w-full min-w-[800px]", children: [
+      /* @__PURE__ */ jsx("thead", { className: "bg-background-tertiary border-b border-border-secondary", children: /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("th", { className: "w-10 px-4 py-3", children: /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: selection.allSelected,
+            onChange: () => selectAll(allRunIds),
+            className: "w-4 h-4 rounded border-border-secondary"
+          }
+        ) }),
+        /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider", children: "Status" }),
+        /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider", children: "Workflow" }),
+        /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider", children: "Run ID" }),
+        /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider", children: "Started" }),
+        /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider", children: "Duration" }),
+        /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider", children: "Progress" }),
+        /* @__PURE__ */ jsx("th", { className: "px-4 py-3 w-32" })
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { className: "divide-y divide-border-secondary", children: executions.map((execution) => {
+        const isSelected = selection.runIds.includes(execution.id);
+        const isExpanded = expandedRows.has(execution.id);
+        const actions = getRowActions(execution);
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(
+            "tr",
+            {
+              className: `
+                      hover:bg-background-tertiary/50 cursor-pointer transition-colors
+                      ${isSelected ? "bg-action-primary-bg/10" : ""}
+                    `,
+              onClick: () => onRowClick?.(execution),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "td",
+                  {
+                    className: "px-4 py-3",
+                    onClick: (e) => e.stopPropagation(),
+                    children: /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "checkbox",
+                        checked: isSelected,
+                        onChange: () => toggleSelectRun(execution.id),
+                        className: "w-4 h-4 rounded border-border-secondary"
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx(
+                  ExecutionStatusBadge,
+                  {
+                    status: execution.status,
+                    size: "sm"
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-text-primary", children: execution.workflow?.name || execution.workflowKey }),
+                  /* @__PURE__ */ jsxs("span", { className: "text-xs text-text-secondary", children: [
+                    "v",
+                    execution.version
+                  ] })
+                ] }) }),
+                /* @__PURE__ */ jsx("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsxs("span", { className: "text-sm font-mono text-text-secondary", children: [
+                  execution.id.slice(0, 8),
+                  "..."
+                ] }) }),
+                /* @__PURE__ */ jsx("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx("span", { className: "text-sm text-text-secondary", children: formatDate2(execution.startedAt || execution.createdAt) }) }),
+                /* @__PURE__ */ jsx("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx("span", { className: "text-sm text-text-secondary", children: formatDuration3(execution.duration) }) }),
+                /* @__PURE__ */ jsx("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx("div", { className: "flex-1 h-2 bg-background-tertiary rounded-full overflow-hidden max-w-[100px]", children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: `h-full transition-all ${execution.status === "FAILED" ? "bg-[var(--color-status-error-bg)]" : execution.status === "COMPLETED" ? "bg-[var(--color-status-success-bg)]" : "bg-[var(--color-status-info-bg)]"}`,
+                      style: { width: `${execution.progress}%` }
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxs("span", { className: "text-xs text-text-secondary min-w-[45px]", children: [
+                    execution.completedNodes ?? 0,
+                    "/",
+                    execution.totalNodes ?? 0
+                  ] })
+                ] }) }),
+                /* @__PURE__ */ jsx(
+                  "td",
+                  {
+                    className: "px-4 py-3",
+                    onClick: (e) => e.stopPropagation(),
+                    children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: () => toggleRowExpanded(execution.id),
+                          className: "p-1.5 rounded hover:bg-background-tertiary text-text-secondary",
+                          children: /* @__PURE__ */ jsx(
+                            Icon,
+                            {
+                              icon: isExpanded ? "mdi:chevron-up" : "mdi:chevron-down",
+                              width: 18
+                            }
+                          )
+                        }
+                      ),
+                      actions.slice(0, 2).map((action) => /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: () => onAction?.(action.action, execution),
+                          className: "p-1.5 rounded hover:bg-background-tertiary text-text-secondary",
+                          title: action.label,
+                          children: /* @__PURE__ */ jsx(Icon, { icon: action.icon, width: 18 })
+                        },
+                        action.action
+                      )),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: () => navigate(`../runs/${execution.id}`),
+                          className: "p-1.5 rounded hover:bg-background-tertiary text-text-secondary",
+                          title: "View Details",
+                          children: /* @__PURE__ */ jsx(Icon, { icon: "mdi:arrow-right", width: 18 })
+                        }
+                      )
+                    ] })
+                  }
+                )
+              ]
+            },
+            execution.id
+          ),
+          isExpanded && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+            "td",
+            {
+              colSpan: 8,
+              className: "px-4 py-4 bg-background-tertiary/30",
+              children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 lg:grid-cols-4 gap-4", children: [
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("div", { className: "text-xs text-text-secondary mb-1", children: "Trigger Node" }),
+                  /* @__PURE__ */ jsx("div", { className: "text-sm text-text-primary font-medium", children: execution.triggerNodeId })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("div", { className: "text-xs text-text-secondary mb-1", children: "Node Stats" }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex gap-2 text-sm", children: [
+                    /* @__PURE__ */ jsxs("span", { className: "text-[var(--color-status-success-text)]", children: [
+                      execution.completedNodes ?? 0,
+                      " completed"
+                    ] }),
+                    (execution.failedNodes ?? 0) > 0 && /* @__PURE__ */ jsxs("span", { className: "text-[var(--color-status-error-text)]", children: [
+                      execution.failedNodes,
+                      " failed"
+                    ] }),
+                    (execution.skippedNodes ?? 0) > 0 && /* @__PURE__ */ jsxs("span", { className: "text-tertiary", children: [
+                      execution.skippedNodes,
+                      " skipped"
+                    ] })
+                  ] })
+                ] }),
+                execution.errorMessage && /* @__PURE__ */ jsxs("div", { className: "col-span-2", children: [
+                  /* @__PURE__ */ jsx("div", { className: "text-xs text-text-secondary mb-1", children: "Error" }),
+                  /* @__PURE__ */ jsx("div", { className: "text-sm text-[var(--color-status-error-text)] bg-[var(--color-status-error-bg-subtle)] p-2 rounded", children: execution.errorMessage })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("div", { className: "text-xs text-text-secondary mb-1", children: "Full Run ID" }),
+                  /* @__PURE__ */ jsx("div", { className: "text-sm font-mono text-text-secondary break-all", children: execution.id })
+                ] })
+              ] })
+            }
+          ) }, `${execution.id}-expanded`)
+        ] });
+      }) })
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "sm:hidden px-4 py-2 bg-background-tertiary border-t border-border-secondary text-xs text-text-secondary text-center", children: "Swipe to see more columns" })
+  ] });
+}
+function formatDuration(ms) {
+  if (!ms) return "--";
+  if (ms < 1e3) return `${ms}ms`;
+  if (ms < 6e4) return `${(ms / 1e3).toFixed(1)}s`;
+  const mins = Math.floor(ms / 6e4);
+  const secs = Math.floor(ms % 6e4 / 1e3);
+  return `${mins}m ${secs}s`;
+}
+function formatRelativeTime(dateStr) {
+  if (!dateStr) return "--";
+  const date = new Date(dateStr);
+  const now = /* @__PURE__ */ new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 6e4);
+  if (diffMins < 1) return "just now";
+  if (diffMins < 60) return `${diffMins}m ago`;
+  const diffHours = Math.floor(diffMins / 60);
+  if (diffHours < 24) return `${diffHours}h ago`;
+  const diffDays = Math.floor(diffHours / 24);
+  return `${diffDays}d ago`;
+}
+function getProgressColor(status) {
+  switch (status) {
+    case "COMPLETED":
+      return "bg-green-500";
+    case "FAILED":
+    case "TERMINATED":
+      return "bg-red-500";
+    case "RUNNING":
+      return "bg-blue-500";
+    case "CANCELLED":
+      return "bg-orange-500";
+    default:
+      return "bg-gray-400";
+  }
+}
+function ExecutionCards({
+  executions,
+  loading,
+  onCardClick,
+  onAction
+}) {
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4", children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "rounded-lg border border-border-secondary bg-background-secondary p-4 animate-pulse",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-between mb-3", children: [
+            /* @__PURE__ */ jsx("div", { className: "h-4 bg-background-tertiary rounded w-32" }),
+            /* @__PURE__ */ jsx("div", { className: "h-5 bg-background-tertiary rounded-full w-20" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "h-3 bg-background-tertiary rounded w-48 mb-2" }),
+          /* @__PURE__ */ jsx("div", { className: "h-2 bg-background-tertiary rounded w-full mb-3" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+            /* @__PURE__ */ jsx("div", { className: "h-3 bg-background-tertiary rounded w-16" }),
+            /* @__PURE__ */ jsx("div", { className: "h-3 bg-background-tertiary rounded w-24" })
+          ] })
+        ]
+      },
+      i
+    )) });
+  }
+  if (executions.length === 0) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-16 text-text-secondary", children: [
+      /* @__PURE__ */ jsx(
+        Icon,
+        {
+          icon: "mdi:play-circle-outline",
+          width: 48,
+          className: "mb-3 opacity-40"
+        }
+      ),
+      /* @__PURE__ */ jsx("p", { className: "text-lg font-medium", children: "No executions found" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm mt-1", children: "Run a workflow to see results here" })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4", children: executions.map((execution) => {
+    const config = RUN_STATUS_CONFIG[execution.status];
+    const canCancel = execution.status === "RUNNING" || execution.status === "PENDING";
+    const canPause = execution.status === "RUNNING";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        onClick: () => onCardClick(execution),
+        className: `
+              rounded-lg border bg-background-secondary p-4 cursor-pointer
+              transition-all duration-200 hover:shadow-md hover:border-border-primary
+              ${config.borderColor}
+            `,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between mb-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 mr-2", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-text-primary truncate", children: execution.workflowKey }),
+              /* @__PURE__ */ jsxs("p", { className: "text-xs text-text-tertiary mt-0.5", children: [
+                "v",
+                execution.version
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(ExecutionStatusBadge, { status: execution.status, size: "sm" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-xs text-text-tertiary mb-1", children: [
+              /* @__PURE__ */ jsx("span", { children: "Progress" }),
+              /* @__PURE__ */ jsxs("span", { children: [
+                Math.round(execution.progress),
+                "%"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "h-1.5 bg-background-tertiary rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `h-full rounded-full transition-all duration-500 ${getProgressColor(execution.status)}`,
+                style: { width: `${Math.min(execution.progress, 100)}%` }
+              }
+            ) })
+          ] }),
+          (execution.totalNodes ?? 0) > 0 && /* @__PURE__ */ jsxs("div", { className: "flex gap-3 text-xs text-text-secondary mb-3", children: [
+            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  icon: "mdi:check-circle",
+                  width: 12,
+                  className: "text-green-500"
+                }
+              ),
+              execution.completedNodes ?? 0
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  icon: "mdi:alert-circle",
+                  width: 12,
+                  className: "text-red-500"
+                }
+              ),
+              execution.failedNodes ?? 0
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  icon: "mdi:skip-next",
+                  width: 12,
+                  className: "text-gray-400"
+                }
+              ),
+              execution.skippedNodes ?? 0
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 ml-auto", children: [
+              /* @__PURE__ */ jsx(Icon, { icon: "mdi:sigma", width: 12 }),
+              execution.totalNodes
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs text-text-tertiary pt-2 border-t border-border-secondary", children: [
+            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx(Icon, { icon: "mdi:timer-outline", width: 12 }),
+              formatDuration(execution.duration ?? void 0)
+            ] }),
+            /* @__PURE__ */ jsx("span", { children: formatRelativeTime(execution.startedAt ?? execution.createdAt) })
+          ] }),
+          (canCancel || canPause) && /* @__PURE__ */ jsxs("div", { className: "flex gap-1 mt-2 pt-2 border-t border-border-secondary", children: [
+            canPause && /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onAction("pause", execution);
+                },
+                className: "flex items-center gap-1 text-xs px-2 py-1 rounded bg-background-tertiary hover:bg-yellow-50 dark:hover:bg-yellow-900/20 text-text-secondary hover:text-yellow-600 transition-colors",
+                children: [
+                  /* @__PURE__ */ jsx(Icon, { icon: "mdi:pause", width: 12 }),
+                  " Pause"
+                ]
+              }
+            ),
+            canCancel && /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onAction("cancel", execution);
+                },
+                className: "flex items-center gap-1 text-xs px-2 py-1 rounded bg-background-tertiary hover:bg-red-50 dark:hover:bg-red-900/20 text-text-secondary hover:text-red-600 transition-colors",
+                children: [
+                  /* @__PURE__ */ jsx(Icon, { icon: "mdi:stop", width: 12 }),
+                  " Cancel"
+                ]
+              }
+            )
+          ] })
+        ]
+      },
+      execution.id
+    );
+  }) });
+}
+function formatTime(dateStr) {
+  if (!dateStr) return "--";
+  return new Date(dateStr).toLocaleTimeString(void 0, {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  });
+}
+function formatDate(dateStr) {
+  if (!dateStr) return "";
+  return new Date(dateStr).toLocaleDateString(void 0, {
+    weekday: "short",
+    month: "short",
+    day: "numeric"
+  });
+}
+function formatDuration2(ms) {
+  if (!ms) return "--";
+  if (ms < 1e3) return `${ms}ms`;
+  if (ms < 6e4) return `${(ms / 1e3).toFixed(1)}s`;
+  const mins = Math.floor(ms / 6e4);
+  const secs = Math.floor(ms % 6e4 / 1e3);
+  return `${mins}m ${secs}s`;
+}
+function getStatusDotColor(status) {
+  switch (status) {
+    case "COMPLETED":
+      return "bg-green-500";
+    case "FAILED":
+    case "TERMINATED":
+      return "bg-red-500";
+    case "RUNNING":
+      return "bg-blue-500 animate-pulse";
+    case "CANCELLED":
+      return "bg-orange-500";
+    case "WAITING":
+      return "bg-purple-500";
+    case "PENDING":
+    default:
+      return "bg-gray-400";
+  }
+}
+function groupByDate(executions) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const exec of executions) {
+    const dateKey = formatDate(exec.startedAt ?? exec.createdAt);
+    if (!groups.has(dateKey)) {
+      groups.set(dateKey, []);
+    }
+    groups.get(dateKey).push(exec);
+  }
+  return groups;
+}
+function ExecutionTimeline({
+  executions,
+  loading,
+  onItemClick,
+  onAction
+}) {
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { className: "space-y-6 pl-8", children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex gap-4 animate-pulse", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-3 h-3 rounded-full bg-background-tertiary mt-1.5 shrink-0" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+        /* @__PURE__ */ jsx("div", { className: "h-4 bg-background-tertiary rounded w-48 mb-2" }),
+        /* @__PURE__ */ jsx("div", { className: "h-3 bg-background-tertiary rounded w-32 mb-1" }),
+        /* @__PURE__ */ jsx("div", { className: "h-3 bg-background-tertiary rounded w-24" })
+      ] })
+    ] }, i)) });
+  }
+  if (executions.length === 0) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-16 text-text-secondary", children: [
+      /* @__PURE__ */ jsx(Icon, { icon: "mdi:timeline", width: 48, className: "mb-3 opacity-40" }),
+      /* @__PURE__ */ jsx("p", { className: "text-lg font-medium", children: "No executions found" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm mt-1", children: "Run a workflow to see the timeline" })
+    ] });
+  }
+  const grouped = groupByDate(executions);
+  return /* @__PURE__ */ jsx("div", { className: "space-y-8", children: Array.from(grouped.entries()).map(([dateLabel, dateExecutions]) => /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-4", children: [
+      /* @__PURE__ */ jsx(
+        Icon,
+        {
+          icon: "mdi:calendar",
+          width: 14,
+          className: "text-text-tertiary"
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-text-tertiary uppercase tracking-wider", children: dateLabel }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 h-px bg-border-secondary" }),
+      /* @__PURE__ */ jsxs("span", { className: "text-xs text-text-tertiary", children: [
+        dateExecutions.length,
+        " runs"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "relative ml-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute left-[5px] top-0 bottom-0 w-px bg-border-secondary" }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-4", children: dateExecutions.map((execution, idx) => {
+        const isLast = idx === dateExecutions.length - 1;
+        const canCancel = execution.status === "RUNNING" || execution.status === "PENDING";
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            onClick: () => onItemClick(execution),
+            className: "relative flex gap-4 cursor-pointer group",
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "relative z-10 shrink-0 mt-1.5", children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `w-[11px] h-[11px] rounded-full border-2 border-background-primary ${getStatusDotColor(execution.status)}`
+                }
+              ) }),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: `
+                        flex-1 rounded-lg border border-border-secondary bg-background-secondary p-3
+                        transition-all duration-200 group-hover:shadow-sm group-hover:border-border-primary
+                        ${isLast ? "" : "mb-0"}
+                      `,
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+                      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                          /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-text-primary truncate", children: execution.workflowKey }),
+                          /* @__PURE__ */ jsxs("span", { className: "text-xs text-text-tertiary", children: [
+                            "v",
+                            execution.version
+                          ] })
+                        ] }),
+                        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mt-1 text-xs text-text-secondary", children: [
+                          /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+                            /* @__PURE__ */ jsx(Icon, { icon: "mdi:clock-outline", width: 12 }),
+                            formatTime(
+                              execution.startedAt ?? execution.createdAt
+                            )
+                          ] }),
+                          /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+                            /* @__PURE__ */ jsx(Icon, { icon: "mdi:timer-outline", width: 12 }),
+                            formatDuration2(execution.duration ?? void 0)
+                          ] }),
+                          (execution.totalNodes ?? 0) > 0 && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+                            /* @__PURE__ */ jsx(Icon, { icon: "mdi:puzzle-outline", width: 12 }),
+                            execution.completedNodes ?? 0,
+                            "/",
+                            execution.totalNodes,
+                            " nodes"
+                          ] })
+                        ] }),
+                        execution.errorMessage && /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-xs text-red-500 dark:text-red-400 truncate max-w-sm", children: execution.errorMessage })
+                      ] }),
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
+                        /* @__PURE__ */ jsx(
+                          ExecutionStatusBadge,
+                          {
+                            status: execution.status,
+                            size: "sm"
+                          }
+                        ),
+                        canCancel && /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              onAction("cancel", execution);
+                            },
+                            className: "opacity-0 group-hover:opacity-100 p-1 rounded hover:bg-red-50 dark:hover:bg-red-900/20 text-text-tertiary hover:text-red-600 transition-all",
+                            title: "Cancel execution",
+                            children: /* @__PURE__ */ jsx(Icon, { icon: "mdi:stop", width: 14 })
+                          }
+                        )
+                      ] })
+                    ] }),
+                    execution.status === "RUNNING" && /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx("div", { className: "h-1 bg-background-tertiary rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: "h-full bg-blue-500 rounded-full transition-all duration-500 animate-pulse",
+                        style: {
+                          width: `${Math.min(execution.progress, 100)}%`
+                        }
+                      }
+                    ) }) })
+                  ]
+                }
+              )
+            ]
+          },
+          execution.id
+        );
+      }) })
+    ] })
+  ] }, dateLabel)) });
+}
+function NodeTimeline({
+  nodeStates,
+  loading,
+  onRetryNode,
+  onViewChildRun
+}) {
+  const [expandedNodes, setExpandedNodes] = useState(/* @__PURE__ */ new Set());
+  const [selectedTab, setSelectedTab] = useState("output");
+  const toggleNode = (nodeId) => {
+    setExpandedNodes((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(nodeId)) {
+        newSet.delete(nodeId);
+      } else {
+        newSet.add(nodeId);
+      }
+      return newSet;
+    });
+  };
+  const formatDuration3 = (ms) => {
+    if (!ms) return "-";
+    if (ms < 1e3) return `${ms}ms`;
+    return `${(ms / 1e3).toFixed(2)}s`;
+  };
+  const formatTime2 = (dateStr) => {
+    if (!dateStr) return "-";
+    const date = new Date(dateStr);
+    return date.toLocaleTimeString("en-US", {
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+      hour12: false
+    });
+  };
+  const formatJsonData = (data) => {
+    if (data === null || data === void 0) return "No data";
+    try {
+      return JSON.stringify(data, null, 2);
+    } catch {
+      return "Unable to display data";
+    }
+  };
+  const hasMetadata = (metadata) => {
+    if (!metadata || typeof metadata !== "object") return false;
+    return Object.keys(metadata).length > 0;
+  };
+  const sortedNodes = [...nodeStates].sort((a, b) => {
+    if (!a.startTime && !b.startTime) return 0;
+    if (!a.startTime) return 1;
+    if (!b.startTime) return -1;
+    return new Date(a.startTime).getTime() - new Date(b.startTime).getTime();
+  });
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { className: "space-y-4", children: [...Array(4)].map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex gap-4 animate-pulse", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-8 h-8 bg-background-tertiary rounded-full" }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 h-20 bg-background-tertiary rounded-lg" })
+    ] }, i)) });
+  }
+  if (nodeStates.length === 0) {
+    return /* @__PURE__ */ jsxs("div", { className: "text-center py-8 text-text-secondary", children: [
+      /* @__PURE__ */ jsx(Icon, { icon: "mdi:timeline-outline", className: "mx-auto mb-2", width: 32 }),
+      /* @__PURE__ */ jsx("p", { children: "No node executions yet" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute left-4 top-8 bottom-8 w-0.5 bg-border-secondary" }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-4", children: sortedNodes.map((node, index) => {
+      const isExpanded = expandedNodes.has(node.id);
+      const nodeError = node.error;
+      const hasError = node.status === "FAILED" || Boolean(nodeError);
+      const isRunning = node.status === "RUNNING";
+      const isWaitingSubworkflow = node.status === "WAITING_SUBWORKFLOW";
+      const hasChildRun = Boolean(node.childRunId);
+      return /* @__PURE__ */ jsxs("div", { className: "relative flex gap-4", children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `
+                  relative z-10 w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0
+                  ${node.status === "COMPLETED" ? "bg-[var(--color-status-success-bg-subtle)] text-[var(--color-status-success-text)]" : node.status === "FAILED" ? "bg-[var(--color-status-error-bg-subtle)] text-[var(--color-status-error-text)]" : node.status === "RUNNING" ? "bg-[var(--color-status-info-bg-subtle)] text-[var(--color-status-info-text)]" : node.status === "SKIPPED" ? "bg-muted text-tertiary" : "bg-muted text-tertiary"}
+                `,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-bold", children: index + 1 }),
+              isRunning && /* @__PURE__ */ jsx("span", { className: "absolute inset-0 rounded-full border-2 border-[var(--color-status-info-text)] animate-ping" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `
+                  flex-1 rounded-lg border transition-all
+                  ${hasError ? "bg-[var(--color-status-error-bg-subtle)] border-[var(--color-status-error-border)]" : isRunning ? "bg-[var(--color-status-info-bg-subtle)] border-[var(--color-status-info-border)]" : "bg-background-secondary border-border-secondary"}
+                `,
+            children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => toggleNode(node.id),
+                  className: "w-full px-4 py-3 flex items-center justify-between text-left",
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
+                      /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx(
+                        NodeStatusBadge,
+                        {
+                          status: node.status,
+                          size: "sm",
+                          showLabel: false
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                        /* @__PURE__ */ jsx("div", { className: "font-medium text-text-primary truncate", children: node.nodeId }),
+                        /* @__PURE__ */ jsxs("div", { className: "text-xs text-text-secondary", children: [
+                          node.nodeType,
+                          " v",
+                          node.nodeVersion
+                        ] })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 flex-shrink-0", children: [
+                      /* @__PURE__ */ jsxs("div", { className: "text-right text-xs text-text-secondary hidden sm:block", children: [
+                        /* @__PURE__ */ jsx("div", { children: formatTime2(node.startTime) }),
+                        /* @__PURE__ */ jsx("div", { children: formatDuration3(node.duration) })
+                      ] }),
+                      hasChildRun && /* @__PURE__ */ jsxs("span", { className: "px-2 py-0.5 text-xs bg-indigo-100 text-indigo-700 rounded flex items-center gap-1", children: [
+                        /* @__PURE__ */ jsx(Icon, { icon: "mdi:sitemap", width: 12 }),
+                        "Sub-workflow"
+                      ] }),
+                      isWaitingSubworkflow && /* @__PURE__ */ jsx("span", { className: "px-2 py-0.5 text-xs bg-purple-100 text-purple-700 rounded animate-pulse", children: "Waiting..." }),
+                      node.attemptCount > 1 && /* @__PURE__ */ jsxs("span", { className: "px-2 py-0.5 text-xs bg-[var(--color-status-warning-bg-subtle)] text-[var(--color-status-warning-text)] rounded", children: [
+                        "Attempt ",
+                        node.attemptCount
+                      ] }),
+                      /* @__PURE__ */ jsx(
+                        Icon,
+                        {
+                          icon: isExpanded ? "mdi:chevron-up" : "mdi:chevron-down",
+                          className: "text-text-secondary",
+                          width: 20
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              ),
+              isExpanded && /* @__PURE__ */ jsxs("div", { className: "px-4 pb-4 border-t border-border-secondary/50", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex gap-2 mt-3 mb-3", children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: () => setSelectedTab("output"),
+                      className: `px-3 py-1.5 text-sm rounded ${selectedTab === "output" ? "bg-action-primary-bg text-white" : "bg-background-tertiary text-text-secondary"}`,
+                      children: "Output"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: () => setSelectedTab("input"),
+                      className: `px-3 py-1.5 text-sm rounded ${selectedTab === "input" ? "bg-action-primary-bg text-white" : "bg-background-tertiary text-text-secondary"}`,
+                      children: "Input"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "bg-background-primary rounded p-3 max-h-64 overflow-auto", children: /* @__PURE__ */ jsx("pre", { className: "text-xs text-text-primary whitespace-pre-wrap break-words font-mono", children: selectedTab === "output" ? formatJsonData(node.output) : formatJsonData(node.inputArgs) }) }),
+                node.error && /* @__PURE__ */ jsxs("div", { className: "mt-3 p-3 bg-[var(--color-status-error-bg-subtle)] border border-[var(--color-status-error-border)] rounded", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-[var(--color-status-error-text)] mb-1", children: [
+                    /* @__PURE__ */ jsx(Icon, { icon: "mdi:alert-circle", width: 16 }),
+                    /* @__PURE__ */ jsx("span", { className: "font-medium text-sm", children: "Error" }),
+                    node.errorType && /* @__PURE__ */ jsx("span", { className: "text-xs bg-[var(--color-status-error-bg)] px-2 py-0.5 rounded", children: node.errorType })
+                  ] }),
+                  /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--color-status-error-text)]", children: node.error })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "mt-3 flex justify-end gap-2", children: [
+                  hasChildRun && onViewChildRun && /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      onClick: () => onViewChildRun(node.childRunId),
+                      className: "px-3 py-1.5 text-sm bg-indigo-600 text-white rounded hover:bg-indigo-700 flex items-center gap-1.5",
+                      children: [
+                        /* @__PURE__ */ jsx(Icon, { icon: "mdi:sitemap", width: 16 }),
+                        "View Sub-Workflow Run"
+                      ]
+                    }
+                  ),
+                  node.status === "FAILED" && onRetryNode && /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      onClick: () => onRetryNode(node.nodeId),
+                      className: "px-3 py-1.5 text-sm bg-action-primary-bg text-white rounded hover:bg-action-primary-bg/90 flex items-center gap-1.5",
+                      children: [
+                        /* @__PURE__ */ jsx(Icon, { icon: "mdi:refresh", width: 16 }),
+                        "Retry Node"
+                      ]
+                    }
+                  )
+                ] }),
+                hasMetadata(node.metadata) && /* @__PURE__ */ jsxs("details", { className: "mt-3", children: [
+                  /* @__PURE__ */ jsx("summary", { className: "text-xs text-text-secondary cursor-pointer hover:text-text-primary", children: "Metadata" }),
+                  /* @__PURE__ */ jsx("pre", { className: "mt-2 text-xs text-text-secondary bg-background-tertiary p-2 rounded overflow-auto max-h-32", children: formatJsonData(node.metadata) })
+                ] })
+              ] })
+            ]
+          }
+        )
+      ] }, node.id);
+    }) })
+  ] });
+}
+function Pagination({
+  totalItems,
+  showPageSize = true
+}) {
+  const { pagination, setPage, setPageSize } = useExecutionsStore();
+  const { page, pageSize, total } = pagination;
+  const totalPages = Math.ceil((totalItems ?? total) / pageSize);
+  const startItem = (page - 1) * pageSize + 1;
+  const endItem = Math.min(page * pageSize, totalItems ?? total);
+  const pageSizeOptions = [10, 25, 50, 100];
+  const goToPage = (newPage) => {
+    if (newPage >= 1 && newPage <= totalPages) {
+      setPage(newPage);
+    }
+  };
+  const getPageNumbers = () => {
+    const pages = [];
+    const showEllipsisThreshold = 7;
+    if (totalPages <= showEllipsisThreshold) {
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      pages.push(1);
+      if (page > 3) {
+        pages.push("ellipsis");
+      }
+      const start = Math.max(2, page - 1);
+      const end = Math.min(totalPages - 1, page + 1);
+      for (let i = start; i <= end; i++) {
+        pages.push(i);
+      }
+      if (page < totalPages - 2) {
+        pages.push("ellipsis");
+      }
+      pages.push(totalPages);
+    }
+    return pages;
+  };
+  if (totalPages <= 1 && !showPageSize) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row items-center justify-between gap-4 py-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "text-sm text-text-secondary", children: [
+      "Showing",
+      " ",
+      /* @__PURE__ */ jsx("span", { className: "font-medium text-text-primary", children: startItem }),
+      " to",
+      " ",
+      /* @__PURE__ */ jsx("span", { className: "font-medium text-text-primary", children: endItem }),
+      " of",
+      " ",
+      /* @__PURE__ */ jsx("span", { className: "font-medium text-text-primary", children: totalItems ?? total }),
+      " ",
+      "results"
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+      showPageSize && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("label", { className: "text-sm text-text-secondary", children: "Show" }),
+        /* @__PURE__ */ jsx(
+          "select",
+          {
+            value: pageSize,
+            onChange: (e) => setPageSize(Number(e.target.value)),
+            className: "px-2 py-1 bg-background-secondary border border-border-secondary rounded text-sm text-text-primary",
+            children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx("option", { value: size, children: size }, size))
+          }
+        )
+      ] }),
+      totalPages > 1 && /* @__PURE__ */ jsxs("nav", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => goToPage(page - 1),
+            disabled: page === 1,
+            className: "p-2 rounded hover:bg-background-tertiary disabled:opacity-50 disabled:cursor-not-allowed",
+            children: /* @__PURE__ */ jsx(
+              Icon,
+              {
+                icon: "mdi:chevron-left",
+                width: 20,
+                className: "text-text-secondary"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "hidden sm:flex items-center gap-1", children: getPageNumbers().map(
+          (pageNum, index) => pageNum === "ellipsis" ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "px-2 text-text-secondary",
+              children: "..."
+            },
+            `ellipsis-${index}`
+          ) : /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => goToPage(pageNum),
+              className: `
+                      min-w-[32px] h-8 px-2 rounded text-sm font-medium
+                      ${pageNum === page ? "bg-action-primary-bg text-white" : "hover:bg-background-tertiary text-text-secondary"}
+                    `,
+              children: pageNum
+            },
+            pageNum
+          )
+        ) }),
+        /* @__PURE__ */ jsxs("span", { className: "sm:hidden px-3 text-sm text-text-secondary", children: [
+          page,
+          " / ",
+          totalPages
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => goToPage(page + 1),
+            disabled: page === totalPages,
+            className: "p-2 rounded hover:bg-background-tertiary disabled:opacity-50 disabled:cursor-not-allowed",
+            children: /* @__PURE__ */ jsx(
+              Icon,
+              {
+                icon: "mdi:chevron-right",
+                width: 20,
+                className: "text-text-secondary"
+              }
+            )
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+gql`
+  subscription NodeStateUpdated($runId: String!) {
+    _empty
+  }
+`;
+gql`
+  subscription WorkflowCompleted($runId: String!) {
+    _empty
+  }
+`;
+gql`
+  subscription WorkflowError($runId: String!) {
+    _empty
+  }
+`;
+gql`
+  subscription ExecutionUpdated($runId: String!) {
+    _empty
+  }
+`;
+gql`
+  subscription ExecutionNodeStateUpdated($runId: String!) {
+    _empty
+  }
+`;
+gql`
+  subscription ExecutionCompleted($runId: String!) {
+    _empty
+  }
+`;
+gql`
+  subscription ExecutionError($runId: String!) {
+    _empty
+  }
+`;
+
+// src/modules/executions/hooks/useExecutions.ts
+function useExecutions(input = {}) {
+  const [executions, setExecutions] = useState([]);
+  const [total, setTotal] = useState(0);
+  const [hasMore, setHasMore] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const inputKey = JSON.stringify(input);
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const client = getFluidGridsClient();
+      const result = await client.query({
+        query: ExecutionsListDocument,
+        variables: { input: JSON.parse(inputKey) },
+        fetchPolicy: "network-only"
+      });
+      setExecutions(result.data?.workflowRuns?.items ?? []);
+      setTotal(result.data?.workflowRuns?.total ?? 0);
+      setHasMore(result.data?.workflowRuns?.hasMore ?? false);
+    } catch (err) {
+      setError(err);
+    } finally {
+      setLoading(false);
+    }
+  }, [inputKey]);
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+  return {
+    executions,
+    total,
+    hasMore,
+    loading,
+    error,
+    refetch: fetchData
+  };
+}
+function useExecution(id) {
+  const [execution, setExecution] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const fetchData = useCallback(async () => {
+    if (!id) {
+      setLoading(false);
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      const client = getFluidGridsClient();
+      const result = await client.query({
+        query: ExecutionDetailDocument,
+        variables: { id },
+        fetchPolicy: "network-only"
+      });
+      setExecution(result.data?.workflowRun ?? null);
+    } catch (err) {
+      setError(err);
+    } finally {
+      setLoading(false);
+    }
+  }, [id]);
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+  return {
+    execution,
+    loading,
+    error,
+    refetch: fetchData
+  };
+}
+function useExecutionLogs(runId, limit = 100) {
+  const [logs, setLogs] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const fetchData = useCallback(async () => {
+    if (!runId) {
+      setLoading(false);
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      const client = getFluidGridsClient();
+      const result = await client.query({
+        query: ExecutionLogsDocument,
+        variables: { runId, limit },
+        fetchPolicy: "network-only"
+      });
+      setLogs(result.data?.workflowExecutionLogs ?? []);
+    } catch (err) {
+      setError(err);
+    } finally {
+      setLoading(false);
+    }
+  }, [runId, limit]);
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+  return {
+    logs,
+    loading,
+    error,
+    refetch: fetchData
+  };
+}
+function useExecutionStats(options = {}) {
+  const [stats, setStats] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const optionsKey = JSON.stringify(options);
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const client = getFluidGridsClient();
+      const result = await client.query({
+        query: ExecutionStatsDocument,
+        variables: JSON.parse(optionsKey),
+        fetchPolicy: "network-only"
+      });
+      setStats(result.data?.dashboardSummary ?? null);
+    } catch (err) {
+      setError(err);
+    } finally {
+      setLoading(false);
+    }
+  }, [optionsKey]);
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+  return {
+    stats,
+    loading,
+    error,
+    refetch: fetchData
+  };
+}
+function useExecutionActions() {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const pauseExecution = useCallback(async (id) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const client = getFluidGridsClient();
+      const result = await client.mutate({
+        mutation: PauseExecutionDocument,
+        variables: { id }
+      });
+      return result.data?.pauseWorkflowRun ?? null;
+    } catch (err) {
+      setError(err);
+      return null;
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  const resumeExecution = useCallback(async (id) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const client = getFluidGridsClient();
+      const result = await client.mutate({
+        mutation: ResumeExecutionDocument,
+        variables: { id }
+      });
+      return result.data?.resumeWorkflowRun ?? null;
+    } catch (err) {
+      setError(err);
+      return null;
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  const cancelExecution = useCallback(async (id) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const client = getFluidGridsClient();
+      const result = await client.mutate({
+        mutation: CancelExecutionDocument,
+        variables: { id }
+      });
+      return result.data?.cancelWorkflowRun ?? null;
+    } catch (err) {
+      setError(err);
+      return null;
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  const retryNode = useCallback(async (runId, nodeId) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const client = getFluidGridsClient();
+      const result = await client.mutate({
+        mutation: RetryNodeDocument,
+        variables: { id: runId, nodeId }
+      });
+      return result.data?.retryNode ?? null;
+    } catch (err) {
+      setError(err);
+      return null;
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  const terminateExecution = useCallback(
+    async (runId, reason) => {
+      setLoading(true);
+      setError(null);
+      try {
+        const client = getFluidGridsClient();
+        const result = await client.mutate({
+          mutation: TerminateExecutionDocument,
+          variables: { runId, reason }
+        });
+        return result.data?.terminateWorkflow ?? null;
+      } catch (err) {
+        setError(err);
+        return null;
+      } finally {
+        setLoading(false);
+      }
+    },
+    []
+  );
+  return {
+    pauseExecution,
+    resumeExecution,
+    cancelExecution,
+    retryNode,
+    terminateExecution,
+    loading,
+    error
+  };
+}
+function useExecutionsWithStore() {
+  const { filter, pagination, setTotal } = useExecutionsStore();
+  const input = useMemo(() => {
+    const baseInput = {
+      limit: pagination.pageSize,
+      offset: (pagination.page - 1) * pagination.pageSize
+    };
+    if (filter.status !== "all") {
+      baseInput.status = filter.status;
+    }
+    if (filter.workflowKey) {
+      baseInput.workflowKey = filter.workflowKey;
+    }
+    if (filter.dateRange.start) {
+      baseInput.startDate = filter.dateRange.start.toISOString();
+    }
+    if (filter.dateRange.end) {
+      baseInput.endDate = filter.dateRange.end.toISOString();
+    }
+    return baseInput;
+  }, [filter, pagination.page, pagination.pageSize]);
+  const result = useExecutions(input);
+  useEffect(() => {
+    if (result.total !== pagination.total) {
+      setTotal(result.total);
+    }
+  }, [result.total, pagination.total, setTotal]);
+  return result;
+}
+function useAutoRefresh(refetchFn, enabled = true, interval = 5e3) {
+  useEffect(() => {
+    if (!enabled) return;
+    const timer = setInterval(() => {
+      refetchFn();
+    }, interval);
+    return () => clearInterval(timer);
+  }, [enabled, interval, refetchFn]);
+}
+
+export { ExecutionCards, ExecutionFilters, ExecutionStats, ExecutionStatusBadge, ExecutionTable, ExecutionTimeline, NodeTimeline, Pagination, useAutoRefresh, useExecution, useExecutionActions, useExecutionLogs, useExecutionStats, useExecutionsStore, useExecutionsWithStore };
+//# sourceMappingURL=chunk-WD52O45G.js.map
+//# sourceMappingURL=chunk-WD52O45G.js.map