@workflow/web 5.0.0-beta.5 → 5.0.0-beta.50

package/build/client/assets/{home-B6UmDDP6.js → home-BbyW_T74.js}

@@ -1,61 +1,43 @@
-import { r as reactExports, D as ReactDOM, j as jsxRuntimeExports, A as Link, f as reactDomExports, C as useSearchParams, B as useNavigate, G as useLocation, w as withComponentProps } from "./index-BsV8i_Jn.js";
-import { R as ResolveHookModal, S as Send, a as Skeleton, u as unwrapOrThrow, W as WorkflowWebAPIError, b as RelativeTime, A as Alert, C as CircleAlert, c as AlertTitle, d as AlertDescription, g as getErrorMessage, e as CopyableText, D as DropdownMenu, f as DropdownMenuTrigger, E as Ellipsis, h as DropdownMenuContent, i as DropdownMenuItem, j as ChevronRight, r as resumeHook, k as createCollection, l as hideOthers, m as ReactRemoveScroll, n as useDirection, o as ChevronDown, p as Check, X, q as useControllableState$1, P as Primitive$1, s as composeEventHandlers$1, t as Presence, v as useSize, w as createContextScope$1, x as cancelRun, y as reenqueueRun, z as parseWorkflowName, B as StatusBadge, Z as Zap, F as CircleX, G as RunActionsDropdownItems, H as unwrapServerActionResult, I as WorkflowGraphViewer, T as Tabs, J as TabsList, K as TabsTrigger, L as TabsContent, M as ErrorBoundary } from "./workflow-graph-viewer-yqeN-U_2.js";
-import { g as useLayoutEffect2, P as Primitive, c as createLucideIcon, h as useToast, d as cn, D as DEFAULT_PAGE_SIZE, i as fetchRuns, j as fetchHooks, k as getPaginationDisplay, T as Tooltip, a as TooltipTrigger, B as Button, b as TooltipContent, l as fetchEvents, m as useCallbackRef, n as useComposedRefs, A as Anchor, o as composeEventHandlers, p as useId, q as createPopperScope, s as DismissableLayer, v as createContextScope, w as createSlot, C as Content$1, x as useControllableState, y as Root2$1, V as VISUALLY_HIDDEN_STYLES, z as Arrow, E as useComposedRefs$1, u as useServerConfig, t as toast, L as LoaderCircle, F as fetchRun, G as cva, H as Presence$1, I as createContext2, J as fetchWorkflowsManifest } from "./mermaid-3ZIDBTTL-BQLU7GUr.js";
-import "./index-B4xuge0I.js";
-var PORTAL_NAME$2 = "Portal";
-var Portal$2 = reactExports.forwardRef((props, forwardedRef) => {
-  var _a;
-  const { container: containerProp, ...portalProps } = props;
-  const [mounted, setMounted] = reactExports.useState(false);
-  useLayoutEffect2(() => setMounted(true), []);
-  const container = containerProp || mounted && ((_a = globalThis == null ? void 0 : globalThis.document) == null ? void 0 : _a.body);
-  return container ? ReactDOM.createPortal(/* @__PURE__ */ jsxRuntimeExports.jsx(Primitive.div, { ...portalProps, ref: forwardedRef }), container) : null;
-});
-Portal$2.displayName = PORTAL_NAME$2;
+import { r as reactExports, j as jsxRuntimeExports, c as Link, R as ReactExports, o as reactDomExports, e as useSearchParams, d as useNavigate, C as useLocation, w as withComponentProps } from "./index-PFjW8YjQ.js";
+import { R as ResolveHookModal, S as Send, r as requireShim, u as unwrapOrThrow, W as WorkflowWebAPIError, f as fetchHookToken, a as Skeleton, b as RelativeTime, A as Alert, C as CircleAlert, c as AlertTitle, g as getErrorTitle, d as AlertDescription, e as getErrorMessage, h as CopyableText, D as DropdownMenu, i as DropdownMenuTrigger, E as Ellipsis, j as DropdownMenuContent, k as DropdownMenuItem, l as resumeHook, m as createCollection, n as hideOthers, o as ReactRemoveScroll, p as useDirection, q as ChevronUp, X, s as useControllableState$1, P as Primitive$1, t as composeEventHandlers$1, v as Presence, w as useSize, x as createContextScope$1, y as bulkCancelRuns, z as reenqueueRun, B as parseWorkflowName, F as StatusBadge, Z as Zap, G as CircleX, H as RunActionsDropdownItems, I as unwrapServerActionResult, J as WorkflowGraphViewer, T as Tabs, K as TabsList, L as TabsTrigger, M as TabsContent, N as ErrorBoundary } from "./workflow-graph-viewer-C-1D0sAn.js";
+import { c as createLucideIcon, h as useToast, e as cn, i as fetchRuns, j as fetchHooks, k as getPaginationDisplay, T as Tooltip, a as TooltipTrigger, C as Check, l as Copy, b as TooltipContent, D as DEFAULT_PAGE_SIZE, B as Button, m as ChevronRight, n as fetchEvents, o as useCallbackRef, p as useComposedRefs, P as Primitive, A as Anchor, q as composeEventHandlers, s as useLayoutEffect2, v as Portal$2, w as useId, x as createPopperScope, y as DismissableLayer, z as createContextScope, E as createSlot, F as Content$1, G as useControllableState, H as Root2$1, V as VISUALLY_HIDDEN_STYLES, I as Arrow, J as ChevronDown, L as useComposedRefs$1, u as useServerConfig, M as BULK_CANCEL_MAX_RUN_IDS, t as toast, N as fetchRun, O as cva, U as Presence$1, W as createContext2, X as fetchWorkflowsManifest } from "./mermaid-3ZIDBTTL-BKwl_LgA.js";
+import { L as LoaderCircle } from "./loader-circle-BX6ycuOI.js";
 /**
  * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$7 = [
+const __iconNode$6 = [
   ["path", { d: "m3 16 4 4 4-4", key: "1co6wj" }],
   ["path", { d: "M7 20V4", key: "1yoxec" }],
   ["path", { d: "M20 8h-5", key: "1vsyxs" }],
   ["path", { d: "M15 10V6.5a2.5 2.5 0 0 1 5 0V10", key: "ag13bf" }],
   ["path", { d: "M15 14h5l-5 6h5", key: "ur5jdg" }]
 ];
-const ArrowDownAZ = createLucideIcon("arrow-down-a-z", __iconNode$7);
+const ArrowDownAZ = createLucideIcon("arrow-down-a-z", __iconNode$6);
 /**
  * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$6 = [
+const __iconNode$5 = [
   ["path", { d: "m3 8 4-4 4 4", key: "11wl7u" }],
   ["path", { d: "M7 4v16", key: "1glfcx" }],
   ["path", { d: "M20 8h-5", key: "1vsyxs" }],
   ["path", { d: "M15 10V6.5a2.5 2.5 0 0 1 5 0V10", key: "ag13bf" }],
   ["path", { d: "M15 14h5l-5 6h5", key: "ur5jdg" }]
 ];
-const ArrowUpAZ = createLucideIcon("arrow-up-a-z", __iconNode$6);
+const ArrowUpAZ = createLucideIcon("arrow-up-a-z", __iconNode$5);
 /**
  * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$5 = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
-const ChevronLeft = createLucideIcon("chevron-left", __iconNode$5);
-/**
- * @license lucide-react v0.575.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$4 = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
-const ChevronUp = createLucideIcon("chevron-up", __iconNode$4);
+const __iconNode$4 = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
+const ChevronLeft = createLucideIcon("chevron-left", __iconNode$4);
 /**
  * @license lucide-react v0.575.0 - ISC
  *
@@ -101,6 +83,9 @@ const __iconNode = [
   ["rect", { width: "8", height: "8", x: "13", y: "13", rx: "2", key: "1cgmvn" }]
 ];
 const Workflow = createLucideIcon("workflow", __iconNode);
+function pluralize(singular, plural, count2) {
+  return count2 === 1 ? singular : plural;
+}
 function useHookActions({ onResolve, callbacks }) {
   const toast2 = useToast();
   const [isResolving, setIsResolving] = reactExports.useState(false);
@@ -303,101 +288,1309 @@ const TableCaption = reactExports.forwardRef(({ className, ...props }, ref) => /
   }
 ));
 TableCaption.displayName = "TableCaption";
-function TableSkeleton({
-  rows = DEFAULT_PAGE_SIZE,
-  variant = "runs"
-}) {
-  const renderRow = (i) => {
-    switch (variant) {
-      case "runs":
-        return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          "div",
-          {
-            className: "grid grid-cols-[1fr_1.5fr_0.8fr_1fr_1fr_40px] items-center gap-4 py-3 px-4",
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-3/4" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-4/5" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-1", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-3 w-14" }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-2 w-8" })
-              ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-3 w-3/4" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-3 w-3/4" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-6 w-6 rounded" })
-            ]
-          },
-          `skeleton-row-${i}`
-        );
-      case "hooks":
-        return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          "div",
-          {
-            className: "grid grid-cols-[1.2fr_1.2fr_0.8fr_1fr_0.5fr_40px] items-center gap-4 py-3 px-4",
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-4/5" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-4/5" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-3/4" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-3 w-3/4" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-8" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-6 w-6 rounded" })
-            ]
-          },
-          `skeleton-row-${i}`
-        );
-      case "workflows":
-        return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          "div",
-          {
-            className: "grid grid-cols-[1fr_1.5fr_0.5fr] items-center gap-4 py-3 px-4",
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-3/4" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-4/5" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-5 w-16 rounded-full mx-auto" })
-            ]
-          },
-          `skeleton-row-${i}`
-        );
-      default:
-        return null;
+var shimExports = requireShim();
+const FOCUS_EVENT = 0;
+const RECONNECT_EVENT = 1;
+const MUTATE_EVENT = 2;
+const ERROR_REVALIDATE_EVENT = 3;
+var has = Object.prototype.hasOwnProperty;
+function dequal(foo, bar) {
+  var ctor, len;
+  if (foo === bar) return true;
+  if (foo && bar && (ctor = foo.constructor) === bar.constructor) {
+    if (ctor === Date) return foo.getTime() === bar.getTime();
+    if (ctor === RegExp) return foo.toString() === bar.toString();
+    if (ctor === Array) {
+      if ((len = foo.length) === bar.length) {
+        while (len-- && dequal(foo[len], bar[len])) ;
+      }
+      return len === -1;
+    }
+    if (!ctor || typeof foo === "object") {
+      len = 0;
+      for (ctor in foo) {
+        if (has.call(foo, ctor) && ++len && !has.call(bar, ctor)) return false;
+        if (!(ctor in bar) || !dequal(foo[ctor], bar[ctor])) return false;
+      }
+      return Object.keys(bar).length === len;
+    }
+  }
+  return foo !== foo && bar !== bar;
+}
+const SWRGlobalState = /* @__PURE__ */ new WeakMap();
+const noop$1 = () => {
+};
+const UNDEFINED$1 = (
+  /*#__NOINLINE__*/
+  noop$1()
+);
+const OBJECT$1 = Object;
+const isUndefined$1 = (v) => v === UNDEFINED$1;
+const isFunction$1 = (v) => typeof v == "function";
+const mergeObjects = (a, b) => ({
+  ...a,
+  ...b
+});
+const isPromiseLike = (x) => isFunction$1(x.then);
+const EMPTY_CACHE = {};
+const INITIAL_CACHE = {};
+const STR_UNDEFINED = "undefined";
+const isWindowDefined = typeof window != STR_UNDEFINED;
+const isDocumentDefined = typeof document != STR_UNDEFINED;
+const isLegacyDeno = isWindowDefined && "Deno" in window;
+const hasRequestAnimationFrame = () => isWindowDefined && typeof window["requestAnimationFrame"] != STR_UNDEFINED;
+const createCacheHelper = (cache2, key) => {
+  const state = SWRGlobalState.get(cache2);
+  return [
+    // Getter
+    () => !isUndefined$1(key) && cache2.get(key) || EMPTY_CACHE,
+    // Setter
+    (info) => {
+      if (!isUndefined$1(key)) {
+        const prev = cache2.get(key);
+        if (!(key in INITIAL_CACHE)) {
+          INITIAL_CACHE[key] = prev;
+        }
+        state[5](key, mergeObjects(prev, info), prev || EMPTY_CACHE);
+      }
+    },
+    // Subscriber
+    state[6],
+    // Get server cache snapshot
+    () => {
+      if (!isUndefined$1(key)) {
+        if (key in INITIAL_CACHE) return INITIAL_CACHE[key];
+      }
+      return !isUndefined$1(key) && cache2.get(key) || EMPTY_CACHE;
     }
+  ];
+};
+let online = true;
+const isOnline = () => online;
+const [onWindowEvent, offWindowEvent] = isWindowDefined && window.addEventListener ? [
+  window.addEventListener.bind(window),
+  window.removeEventListener.bind(window)
+] : [
+  noop$1,
+  noop$1
+];
+const isVisible = () => {
+  const visibilityState = isDocumentDefined && document.visibilityState;
+  return isUndefined$1(visibilityState) || visibilityState !== "hidden";
+};
+const initFocus = (callback) => {
+  if (isDocumentDefined) {
+    document.addEventListener("visibilitychange", callback);
+  }
+  onWindowEvent("focus", callback);
+  return () => {
+    if (isDocumentDefined) {
+      document.removeEventListener("visibilitychange", callback);
+    }
+    offWindowEvent("focus", callback);
   };
-  const renderHeader = () => {
-    switch (variant) {
-      case "runs":
-        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-[1fr_1.5fr_0.8fr_1fr_1fr_40px] items-center gap-4 py-3 px-4 border-b", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-20" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-14" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-12" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-14" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-20" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-6" })
-        ] });
-      case "hooks":
-        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-[1.2fr_1.2fr_0.8fr_1fr_0.5fr_40px] items-center gap-4 py-3 px-4 border-b", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-16" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-14" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-12" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-14" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-20" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-6" })
-        ] });
-      case "workflows":
-        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-[1fr_1.5fr_0.5fr] items-center gap-4 py-3 px-4 border-b", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-20" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-10" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-12 mx-auto" })
-        ] });
-      default:
-        return null;
+};
+const initReconnect = (callback) => {
+  const onOnline = () => {
+    online = true;
+    callback();
+  };
+  const onOffline = () => {
+    online = false;
+  };
+  onWindowEvent("online", onOnline);
+  onWindowEvent("offline", onOffline);
+  return () => {
+    offWindowEvent("online", onOnline);
+    offWindowEvent("offline", onOffline);
+  };
+};
+const preset = {
+  isOnline,
+  isVisible
+};
+const defaultConfigOptions = {
+  initFocus,
+  initReconnect
+};
+const IS_REACT_LEGACY = !ReactExports.useId;
+const IS_SERVER = !isWindowDefined || isLegacyDeno;
+const rAF = (f) => hasRequestAnimationFrame() ? window["requestAnimationFrame"](f) : setTimeout(f, 1);
+const useIsomorphicLayoutEffect = IS_SERVER ? reactExports.useEffect : reactExports.useLayoutEffect;
+const navigatorConnection = typeof navigator !== "undefined" && navigator.connection;
+const slowConnection = !IS_SERVER && navigatorConnection && ([
+  "slow-2g",
+  "2g"
+].includes(navigatorConnection.effectiveType) || navigatorConnection.saveData);
+const table$1 = /* @__PURE__ */ new WeakMap();
+const getTypeName$1 = (value) => OBJECT$1.prototype.toString.call(value);
+const isObjectTypeName$1 = (typeName, type) => typeName === `[object ${type}]`;
+let counter$1 = 0;
+const stableHash$1 = (arg) => {
+  const type = typeof arg;
+  const typeName = getTypeName$1(arg);
+  const isDate = isObjectTypeName$1(typeName, "Date");
+  const isRegex = isObjectTypeName$1(typeName, "RegExp");
+  const isPlainObject = isObjectTypeName$1(typeName, "Object");
+  let result;
+  let index;
+  if (OBJECT$1(arg) === arg && !isDate && !isRegex) {
+    result = table$1.get(arg);
+    if (result) return result;
+    result = ++counter$1 + "~";
+    table$1.set(arg, result);
+    if (Array.isArray(arg)) {
+      result = "@";
+      for (index = 0; index < arg.length; index++) {
+        result += stableHash$1(arg[index]) + ",";
+      }
+      table$1.set(arg, result);
+    }
+    if (isPlainObject) {
+      result = "#";
+      const keys = OBJECT$1.keys(arg).sort();
+      while (!isUndefined$1(index = keys.pop())) {
+        if (!isUndefined$1(arg[index])) {
+          result += index + ":" + stableHash$1(arg[index]) + ",";
+        }
+      }
+      table$1.set(arg, result);
     }
+  } else {
+    result = isDate ? arg.toJSON() : type == "symbol" ? arg.toString() : type == "string" ? JSON.stringify(arg) : "" + arg;
+  }
+  return result;
+};
+const serialize$1 = (key) => {
+  if (isFunction$1(key)) {
+    try {
+      key = key();
+    } catch (err) {
+      key = "";
+    }
+  }
+  const args = key;
+  key = typeof key == "string" ? key : (Array.isArray(key) ? key.length : key) ? stableHash$1(key) : "";
+  return [
+    key,
+    args
+  ];
+};
+let __timestamp = 0;
+const getTimestamp = () => ++__timestamp;
+async function internalMutate(...args) {
+  const [cache2, _key, _data, _opts] = args;
+  const options = mergeObjects({
+    populateCache: true,
+    throwOnError: true
+  }, typeof _opts === "boolean" ? {
+    revalidate: _opts
+  } : _opts || {});
+  let populateCache = options.populateCache;
+  const rollbackOnErrorOption = options.rollbackOnError;
+  let optimisticData = options.optimisticData;
+  const rollbackOnError = (error) => {
+    return typeof rollbackOnErrorOption === "function" ? rollbackOnErrorOption(error) : rollbackOnErrorOption !== false;
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { className: "overflow-hidden mt-4 bg-background", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "p-0", children: [
-    renderHeader(),
-    Array.from({ length: rows }, (_, i) => renderRow(i))
-  ] }) });
+  const throwOnError = options.throwOnError;
+  if (isFunction$1(_key)) {
+    const keyFilter = _key;
+    const matchedKeys = [];
+    const it = cache2.keys();
+    for (const key of it) {
+      if (
+        // Skip the special useSWRInfinite and useSWRSubscription keys.
+        !/^\$(inf|sub)\$/.test(key) && keyFilter(cache2.get(key)._k)
+      ) {
+        matchedKeys.push(key);
+      }
+    }
+    return Promise.all(matchedKeys.map(mutateByKey));
+  }
+  return mutateByKey(_key);
+  async function mutateByKey(_k) {
+    const [key] = serialize$1(_k);
+    if (!key) return;
+    const [get, set] = createCacheHelper(cache2, key);
+    const [EVENT_REVALIDATORS, MUTATION, FETCH, PRELOAD] = SWRGlobalState.get(cache2);
+    const startRevalidate = () => {
+      const revalidators = EVENT_REVALIDATORS[key];
+      const revalidate = isFunction$1(options.revalidate) ? options.revalidate(get().data, _k) : options.revalidate !== false;
+      if (revalidate) {
+        delete FETCH[key];
+        delete PRELOAD[key];
+        if (revalidators && revalidators[0]) {
+          return revalidators[0](MUTATE_EVENT).then(() => get().data);
+        }
+      }
+      return get().data;
+    };
+    if (args.length < 3) {
+      return startRevalidate();
+    }
+    let data = _data;
+    let error;
+    let isError = false;
+    const beforeMutationTs = getTimestamp();
+    MUTATION[key] = [
+      beforeMutationTs,
+      0
+    ];
+    const hasOptimisticData = !isUndefined$1(optimisticData);
+    const state = get();
+    const displayedData = state.data;
+    const currentData = state._c;
+    const committedData = isUndefined$1(currentData) ? displayedData : currentData;
+    if (hasOptimisticData) {
+      optimisticData = isFunction$1(optimisticData) ? optimisticData(committedData, displayedData) : optimisticData;
+      set({
+        data: optimisticData,
+        _c: committedData
+      });
+    }
+    if (isFunction$1(data)) {
+      try {
+        data = data(committedData);
+      } catch (err) {
+        error = err;
+        isError = true;
+      }
+    }
+    if (data && isPromiseLike(data)) {
+      data = await data.catch((err) => {
+        error = err;
+        isError = true;
+      });
+      if (beforeMutationTs !== MUTATION[key][0]) {
+        if (isError) throw error;
+        return data;
+      } else if (isError && hasOptimisticData && rollbackOnError(error)) {
+        populateCache = true;
+        set({
+          data: committedData,
+          _c: UNDEFINED$1
+        });
+      }
+    }
+    if (populateCache) {
+      if (!isError) {
+        if (isFunction$1(populateCache)) {
+          const populateCachedData = populateCache(data, committedData);
+          set({
+            data: populateCachedData,
+            error: UNDEFINED$1,
+            _c: UNDEFINED$1
+          });
+        } else {
+          set({
+            data,
+            error: UNDEFINED$1,
+            _c: UNDEFINED$1
+          });
+        }
+      }
+    }
+    MUTATION[key][1] = getTimestamp();
+    Promise.resolve(startRevalidate()).then(() => {
+      set({
+        _c: UNDEFINED$1
+      });
+    });
+    if (isError) {
+      if (throwOnError) throw error;
+      return;
+    }
+    return data;
+  }
 }
-function pluralize(singular, plural, count2) {
-  return count2 === 1 ? singular : plural;
+const revalidateAllKeys = (revalidators, type) => {
+  for (const key in revalidators) {
+    if (revalidators[key][0]) revalidators[key][0](type);
+  }
+};
+const initCache = (provider, options) => {
+  if (!SWRGlobalState.has(provider)) {
+    const opts = mergeObjects(defaultConfigOptions, options);
+    const EVENT_REVALIDATORS = /* @__PURE__ */ Object.create(null);
+    const mutate2 = internalMutate.bind(UNDEFINED$1, provider);
+    let unmount = noop$1;
+    const subscriptions = /* @__PURE__ */ Object.create(null);
+    const subscribe = (key, callback) => {
+      const subs = subscriptions[key] || [];
+      subscriptions[key] = subs;
+      subs.push(callback);
+      return () => subs.splice(subs.indexOf(callback), 1);
+    };
+    const setter = (key, value, prev) => {
+      provider.set(key, value);
+      const subs = subscriptions[key];
+      if (subs) {
+        for (const fn of subs) {
+          fn(value, prev);
+        }
+      }
+    };
+    const initProvider = () => {
+      if (!SWRGlobalState.has(provider)) {
+        SWRGlobalState.set(provider, [
+          EVENT_REVALIDATORS,
+          /* @__PURE__ */ Object.create(null),
+          /* @__PURE__ */ Object.create(null),
+          /* @__PURE__ */ Object.create(null),
+          mutate2,
+          setter,
+          subscribe
+        ]);
+        if (!IS_SERVER) {
+          const releaseFocus = opts.initFocus(setTimeout.bind(UNDEFINED$1, revalidateAllKeys.bind(UNDEFINED$1, EVENT_REVALIDATORS, FOCUS_EVENT)));
+          const releaseReconnect = opts.initReconnect(setTimeout.bind(UNDEFINED$1, revalidateAllKeys.bind(UNDEFINED$1, EVENT_REVALIDATORS, RECONNECT_EVENT)));
+          unmount = () => {
+            releaseFocus && releaseFocus();
+            releaseReconnect && releaseReconnect();
+            SWRGlobalState.delete(provider);
+          };
+        }
+      }
+    };
+    initProvider();
+    return [
+      provider,
+      mutate2,
+      initProvider,
+      unmount
+    ];
+  }
+  return [
+    provider,
+    SWRGlobalState.get(provider)[4]
+  ];
+};
+const onErrorRetry = (_, __, config, revalidate, opts) => {
+  const maxRetryCount = config.errorRetryCount;
+  const currentRetryCount = opts.retryCount;
+  const timeout = ~~((Math.random() + 0.5) * (1 << (currentRetryCount < 8 ? currentRetryCount : 8))) * config.errorRetryInterval;
+  if (!isUndefined$1(maxRetryCount) && currentRetryCount > maxRetryCount) {
+    return;
+  }
+  setTimeout(revalidate, timeout, opts);
+};
+const compare = dequal;
+const [cache, mutate] = initCache(/* @__PURE__ */ new Map());
+const defaultConfig = mergeObjects(
+  {
+    // events
+    onLoadingSlow: noop$1,
+    onSuccess: noop$1,
+    onError: noop$1,
+    onErrorRetry,
+    onDiscarded: noop$1,
+    // switches
+    revalidateOnFocus: true,
+    revalidateOnReconnect: true,
+    revalidateIfStale: true,
+    shouldRetryOnError: true,
+    // timeouts
+    errorRetryInterval: slowConnection ? 1e4 : 5e3,
+    focusThrottleInterval: 5 * 1e3,
+    dedupingInterval: 2 * 1e3,
+    loadingTimeout: slowConnection ? 5e3 : 3e3,
+    // providers
+    compare,
+    isPaused: () => false,
+    cache,
+    mutate,
+    fallback: {}
+  },
+  // use web preset by default
+  preset
+);
+const mergeConfigs = (a, b) => {
+  const v = mergeObjects(a, b);
+  if (b) {
+    const { use: u1, fallback: f1 } = a;
+    const { use: u2, fallback: f2 } = b;
+    if (u1 && u2) {
+      v.use = u1.concat(u2);
+    }
+    if (f1 && f2) {
+      v.fallback = mergeObjects(f1, f2);
+    }
+  }
+  return v;
+};
+const SWRConfigContext = reactExports.createContext({});
+const INFINITE_PREFIX = "$inf$";
+const enableDevtools = isWindowDefined && window.__SWR_DEVTOOLS_USE__;
+const use$1 = enableDevtools ? window.__SWR_DEVTOOLS_USE__ : [];
+const setupDevTools = () => {
+  if (enableDevtools) {
+    window.__SWR_DEVTOOLS_REACT__ = ReactExports;
+  }
+};
+const normalize = (args) => {
+  return isFunction$1(args[1]) ? [
+    args[0],
+    args[1],
+    args[2] || {}
+  ] : [
+    args[0],
+    null,
+    (args[1] === null ? args[2] : args[1]) || {}
+  ];
+};
+const useSWRConfig = () => {
+  const parentConfig = reactExports.useContext(SWRConfigContext);
+  const mergedConfig = reactExports.useMemo(() => mergeObjects(defaultConfig, parentConfig), [
+    parentConfig
+  ]);
+  return mergedConfig;
+};
+const middleware = (useSWRNext) => (key_, fetcher_, config) => {
+  const fetcher = fetcher_ && ((...args) => {
+    const [key] = serialize$1(key_);
+    const [, , , PRELOAD] = SWRGlobalState.get(cache);
+    if (key.startsWith(INFINITE_PREFIX)) {
+      return fetcher_(...args);
+    }
+    const req = PRELOAD[key];
+    if (isUndefined$1(req)) return fetcher_(...args);
+    delete PRELOAD[key];
+    return req;
+  });
+  return useSWRNext(key_, fetcher, config);
+};
+const BUILT_IN_MIDDLEWARE = use$1.concat(middleware);
+const withArgs = (hook) => {
+  return function useSWRArgs(...args) {
+    const fallbackConfig = useSWRConfig();
+    const [key, fn, _config] = normalize(args);
+    const config = mergeConfigs(fallbackConfig, _config);
+    let next = hook;
+    const { use: use2 } = config;
+    const middleware2 = (use2 || []).concat(BUILT_IN_MIDDLEWARE);
+    for (let i = middleware2.length; i--; ) {
+      next = middleware2[i](next);
+    }
+    return next(key, fn || config.fetcher || null, config);
+  };
+};
+const subscribeCallback = (key, callbacks, callback) => {
+  const keyedRevalidators = callbacks[key] || (callbacks[key] = []);
+  keyedRevalidators.push(callback);
+  return () => {
+    const index = keyedRevalidators.indexOf(callback);
+    if (index >= 0) {
+      keyedRevalidators[index] = keyedRevalidators[keyedRevalidators.length - 1];
+      keyedRevalidators.pop();
+    }
+  };
+};
+const withMiddleware = (useSWR2, middleware2) => {
+  return (...args) => {
+    const [key, fn, config] = normalize(args);
+    const uses = (config.use || []).concat(middleware2);
+    return useSWR2(key, fn, {
+      ...config,
+      use: uses
+    });
+  };
+};
+setupDevTools();
+const use = ReactExports.use || // This extra generic is to avoid TypeScript mixing up the generic and JSX sytax
+// and emitting an error.
+// We assume that this is only for the `use(thenable)` case, not `use(context)`.
+// https://github.com/facebook/react/blob/aed00dacfb79d17c53218404c52b1c7aa59c4a89/packages/react-server/src/ReactFizzThenable.js#L45
+((thenable) => {
+  switch (thenable.status) {
+    case "pending":
+      throw thenable;
+    case "fulfilled":
+      return thenable.value;
+    case "rejected":
+      throw thenable.reason;
+    default:
+      thenable.status = "pending";
+      thenable.then((v) => {
+        thenable.status = "fulfilled";
+        thenable.value = v;
+      }, (e) => {
+        thenable.status = "rejected";
+        thenable.reason = e;
+      });
+      throw thenable;
+  }
+});
+const WITH_DEDUPE = {
+  dedupe: true
+};
+const resolvedUndef = Promise.resolve(UNDEFINED$1);
+const useSWRHandler = (_key, fetcher, config) => {
+  const { cache: cache2, compare: compare2, suspense, fallbackData, revalidateOnMount, revalidateIfStale, refreshInterval, refreshWhenHidden, refreshWhenOffline, keepPreviousData } = config;
+  const [EVENT_REVALIDATORS, MUTATION, FETCH, PRELOAD] = SWRGlobalState.get(cache2);
+  const [key, fnArg] = serialize$1(_key);
+  const initialMountedRef = reactExports.useRef(false);
+  const unmountedRef = reactExports.useRef(false);
+  const keyRef = reactExports.useRef(key);
+  const fetcherRef = reactExports.useRef(fetcher);
+  const configRef = reactExports.useRef(config);
+  const getConfig = () => configRef.current;
+  const isActive = () => getConfig().isVisible() && getConfig().isOnline();
+  const [getCache, setCache, subscribeCache, getInitialCache] = createCacheHelper(cache2, key);
+  const stateDependencies = reactExports.useRef({}).current;
+  const fallback = isUndefined$1(fallbackData) ? isUndefined$1(config.fallback) ? UNDEFINED$1 : config.fallback[key] : fallbackData;
+  const isEqual = (prev, current) => {
+    for (const _ in stateDependencies) {
+      const t = _;
+      if (t === "data") {
+        if (!compare2(prev[t], current[t])) {
+          if (!isUndefined$1(prev[t])) {
+            return false;
+          }
+          if (!compare2(returnedData, current[t])) {
+            return false;
+          }
+        }
+      } else {
+        if (current[t] !== prev[t]) {
+          return false;
+        }
+      }
+    }
+    return true;
+  };
+  const getSnapshot = reactExports.useMemo(() => {
+    const shouldStartRequest = (() => {
+      if (!key) return false;
+      if (!fetcher) return false;
+      if (!isUndefined$1(revalidateOnMount)) return revalidateOnMount;
+      if (getConfig().isPaused()) return false;
+      if (suspense) return false;
+      return revalidateIfStale !== false;
+    })();
+    const getSelectedCache = (state) => {
+      const snapshot = mergeObjects(state);
+      delete snapshot._k;
+      if (!shouldStartRequest) {
+        return snapshot;
+      }
+      return {
+        isValidating: true,
+        isLoading: true,
+        ...snapshot
+      };
+    };
+    const cachedData2 = getCache();
+    const initialData = getInitialCache();
+    const clientSnapshot = getSelectedCache(cachedData2);
+    const serverSnapshot = cachedData2 === initialData ? clientSnapshot : getSelectedCache(initialData);
+    let memorizedSnapshot = clientSnapshot;
+    return [
+      () => {
+        const newSnapshot = getSelectedCache(getCache());
+        const compareResult = isEqual(newSnapshot, memorizedSnapshot);
+        if (compareResult) {
+          memorizedSnapshot.data = newSnapshot.data;
+          memorizedSnapshot.isLoading = newSnapshot.isLoading;
+          memorizedSnapshot.isValidating = newSnapshot.isValidating;
+          memorizedSnapshot.error = newSnapshot.error;
+          return memorizedSnapshot;
+        } else {
+          memorizedSnapshot = newSnapshot;
+          return newSnapshot;
+        }
+      },
+      () => serverSnapshot
+    ];
+  }, [
+    cache2,
+    key
+  ]);
+  const cached = shimExports.useSyncExternalStore(reactExports.useCallback(
+    (callback) => subscribeCache(key, (current, prev) => {
+      if (!isEqual(prev, current)) callback();
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      cache2,
+      key
+    ]
+  ), getSnapshot[0], getSnapshot[1]);
+  const isInitialMount = !initialMountedRef.current;
+  const hasRevalidator = EVENT_REVALIDATORS[key] && EVENT_REVALIDATORS[key].length > 0;
+  const cachedData = cached.data;
+  const data = isUndefined$1(cachedData) ? fallback && isPromiseLike(fallback) ? use(fallback) : fallback : cachedData;
+  const error = cached.error;
+  const laggyDataRef = reactExports.useRef(data);
+  const returnedData = keepPreviousData ? isUndefined$1(cachedData) ? isUndefined$1(laggyDataRef.current) ? data : laggyDataRef.current : cachedData : data;
+  const shouldDoInitialRevalidation = (() => {
+    if (hasRevalidator && !isUndefined$1(error)) return false;
+    if (isInitialMount && !isUndefined$1(revalidateOnMount)) return revalidateOnMount;
+    if (getConfig().isPaused()) return false;
+    if (suspense) return isUndefined$1(data) ? false : revalidateIfStale;
+    return isUndefined$1(data) || revalidateIfStale;
+  })();
+  const defaultValidatingState = !!(key && fetcher && isInitialMount && shouldDoInitialRevalidation);
+  const isValidating = isUndefined$1(cached.isValidating) ? defaultValidatingState : cached.isValidating;
+  const isLoading = isUndefined$1(cached.isLoading) ? defaultValidatingState : cached.isLoading;
+  const revalidate = reactExports.useCallback(
+    async (revalidateOpts) => {
+      const currentFetcher = fetcherRef.current;
+      if (!key || !currentFetcher || unmountedRef.current || getConfig().isPaused()) {
+        return false;
+      }
+      let newData;
+      let startAt;
+      let loading = true;
+      const opts = revalidateOpts || {};
+      const shouldStartNewRequest = !FETCH[key] || !opts.dedupe;
+      const callbackSafeguard = () => {
+        if (IS_REACT_LEGACY) {
+          return !unmountedRef.current && key === keyRef.current && initialMountedRef.current;
+        }
+        return key === keyRef.current;
+      };
+      const finalState = {
+        isValidating: false,
+        isLoading: false
+      };
+      const finishRequestAndUpdateState = () => {
+        setCache(finalState);
+      };
+      const cleanupState = () => {
+        const requestInfo = FETCH[key];
+        if (requestInfo && requestInfo[1] === startAt) {
+          delete FETCH[key];
+        }
+      };
+      const initialState = {
+        isValidating: true
+      };
+      if (isUndefined$1(getCache().data)) {
+        initialState.isLoading = true;
+      }
+      try {
+        if (shouldStartNewRequest) {
+          setCache(initialState);
+          if (config.loadingTimeout && isUndefined$1(getCache().data)) {
+            setTimeout(() => {
+              if (loading && callbackSafeguard()) {
+                getConfig().onLoadingSlow(key, config);
+              }
+            }, config.loadingTimeout);
+          }
+          FETCH[key] = [
+            currentFetcher(fnArg),
+            getTimestamp()
+          ];
+        }
+        ;
+        [newData, startAt] = FETCH[key];
+        newData = await newData;
+        if (shouldStartNewRequest) {
+          setTimeout(cleanupState, config.dedupingInterval);
+        }
+        if (!FETCH[key] || FETCH[key][1] !== startAt) {
+          if (shouldStartNewRequest) {
+            if (callbackSafeguard()) {
+              getConfig().onDiscarded(key);
+            }
+          }
+          return false;
+        }
+        finalState.error = UNDEFINED$1;
+        const mutationInfo = MUTATION[key];
+        if (!isUndefined$1(mutationInfo) && // case 1
+        (startAt <= mutationInfo[0] || // case 2
+        startAt <= mutationInfo[1] || // case 3
+        mutationInfo[1] === 0)) {
+          finishRequestAndUpdateState();
+          if (shouldStartNewRequest) {
+            if (callbackSafeguard()) {
+              getConfig().onDiscarded(key);
+            }
+          }
+          return false;
+        }
+        const cacheData = getCache().data;
+        finalState.data = compare2(cacheData, newData) ? cacheData : newData;
+        if (shouldStartNewRequest) {
+          if (callbackSafeguard()) {
+            getConfig().onSuccess(newData, key, config);
+          }
+        }
+      } catch (err) {
+        cleanupState();
+        const currentConfig = getConfig();
+        const { shouldRetryOnError } = currentConfig;
+        if (!currentConfig.isPaused()) {
+          finalState.error = err;
+          if (shouldStartNewRequest && callbackSafeguard()) {
+            currentConfig.onError(err, key, currentConfig);
+            if (shouldRetryOnError === true || isFunction$1(shouldRetryOnError) && shouldRetryOnError(err)) {
+              if (!getConfig().revalidateOnFocus || !getConfig().revalidateOnReconnect || isActive()) {
+                currentConfig.onErrorRetry(err, key, currentConfig, (_opts) => {
+                  const revalidators = EVENT_REVALIDATORS[key];
+                  if (revalidators && revalidators[0]) {
+                    revalidators[0](ERROR_REVALIDATE_EVENT, _opts);
+                  }
+                }, {
+                  retryCount: (opts.retryCount || 0) + 1,
+                  dedupe: true
+                });
+              }
+            }
+          }
+        }
+      }
+      loading = false;
+      finishRequestAndUpdateState();
+      return true;
+    },
+    // `setState` is immutable, and `eventsCallback`, `fnArg`, and
+    // `keyValidating` are depending on `key`, so we can exclude them from
+    // the deps array.
+    //
+    // FIXME:
+    // `fn` and `config` might be changed during the lifecycle,
+    // but they might be changed every render like this.
+    // `useSWR('key', () => fetch('/api/'), { suspense: true })`
+    // So we omit the values from the deps array
+    // even though it might cause unexpected behaviors.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      key,
+      cache2
+    ]
+  );
+  const boundMutate = reactExports.useCallback(
+    // Use callback to make sure `keyRef.current` returns latest result every time
+    (...args) => {
+      return internalMutate(cache2, keyRef.current, ...args);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  useIsomorphicLayoutEffect(() => {
+    fetcherRef.current = fetcher;
+    configRef.current = config;
+    if (!isUndefined$1(cachedData)) {
+      laggyDataRef.current = cachedData;
+    }
+  });
+  useIsomorphicLayoutEffect(() => {
+    if (!key) return;
+    const softRevalidate = revalidate.bind(UNDEFINED$1, WITH_DEDUPE);
+    let nextFocusRevalidatedAt = 0;
+    if (getConfig().revalidateOnFocus) {
+      const initNow = Date.now();
+      nextFocusRevalidatedAt = initNow + getConfig().focusThrottleInterval;
+    }
+    const onRevalidate = (type, opts = {}) => {
+      if (type == FOCUS_EVENT) {
+        const now = Date.now();
+        if (getConfig().revalidateOnFocus && now > nextFocusRevalidatedAt && isActive()) {
+          nextFocusRevalidatedAt = now + getConfig().focusThrottleInterval;
+          softRevalidate();
+        }
+      } else if (type == RECONNECT_EVENT) {
+        if (getConfig().revalidateOnReconnect && isActive()) {
+          softRevalidate();
+        }
+      } else if (type == MUTATE_EVENT) {
+        return revalidate();
+      } else if (type == ERROR_REVALIDATE_EVENT) {
+        return revalidate(opts);
+      }
+      return;
+    };
+    const unsubEvents = subscribeCallback(key, EVENT_REVALIDATORS, onRevalidate);
+    unmountedRef.current = false;
+    keyRef.current = key;
+    initialMountedRef.current = true;
+    setCache({
+      _k: fnArg
+    });
+    if (shouldDoInitialRevalidation) {
+      if (!FETCH[key]) {
+        if (isUndefined$1(data) || IS_SERVER) {
+          softRevalidate();
+        } else {
+          rAF(softRevalidate);
+        }
+      }
+    }
+    return () => {
+      unmountedRef.current = true;
+      unsubEvents();
+    };
+  }, [
+    key
+  ]);
+  useIsomorphicLayoutEffect(() => {
+    let timer;
+    function next() {
+      const interval = isFunction$1(refreshInterval) ? refreshInterval(getCache().data) : refreshInterval;
+      if (interval && timer !== -1) {
+        timer = setTimeout(execute, interval);
+      }
+    }
+    function execute() {
+      if (!getCache().error && (refreshWhenHidden || getConfig().isVisible()) && (refreshWhenOffline || getConfig().isOnline())) {
+        revalidate(WITH_DEDUPE).then(next);
+      } else {
+        next();
+      }
+    }
+    next();
+    return () => {
+      if (timer) {
+        clearTimeout(timer);
+        timer = -1;
+      }
+    };
+  }, [
+    refreshInterval,
+    refreshWhenHidden,
+    refreshWhenOffline,
+    key
+  ]);
+  reactExports.useDebugValue(returnedData);
+  if (suspense) {
+    const hasKeyButNoData = key && isUndefined$1(data);
+    if (!IS_REACT_LEGACY && IS_SERVER && hasKeyButNoData) {
+      throw new Error("Fallback data is required when using Suspense in SSR.");
+    }
+    if (hasKeyButNoData) {
+      fetcherRef.current = fetcher;
+      configRef.current = config;
+      unmountedRef.current = false;
+    }
+    const req = PRELOAD[key];
+    const mutateReq = !isUndefined$1(req) && hasKeyButNoData ? boundMutate(req) : resolvedUndef;
+    use(mutateReq);
+    if (!isUndefined$1(error) && hasKeyButNoData) {
+      throw error;
+    }
+    const revalidation = hasKeyButNoData ? revalidate(WITH_DEDUPE) : resolvedUndef;
+    if (!isUndefined$1(returnedData) && hasKeyButNoData) {
+      revalidation.status = "fulfilled";
+      revalidation.value = true;
+    }
+    use(revalidation);
+  }
+  const swrResponse = {
+    mutate: boundMutate,
+    get data() {
+      stateDependencies.data = true;
+      return returnedData;
+    },
+    get error() {
+      stateDependencies.error = true;
+      return error;
+    },
+    get isValidating() {
+      stateDependencies.isValidating = true;
+      return isValidating;
+    },
+    get isLoading() {
+      stateDependencies.isLoading = true;
+      return isLoading;
+    }
+  };
+  return swrResponse;
+};
+const useSWR = withArgs(useSWRHandler);
+const noop = () => {
+};
+const UNDEFINED = (
+  /*#__NOINLINE__*/
+  noop()
+);
+const OBJECT = Object;
+const isUndefined = (v) => v === UNDEFINED;
+const isFunction = (v) => typeof v == "function";
+const table = /* @__PURE__ */ new WeakMap();
+const getTypeName = (value) => OBJECT.prototype.toString.call(value);
+const isObjectTypeName = (typeName, type) => typeName === `[object ${type}]`;
+let counter = 0;
+const stableHash = (arg) => {
+  const type = typeof arg;
+  const typeName = getTypeName(arg);
+  const isDate = isObjectTypeName(typeName, "Date");
+  const isRegex = isObjectTypeName(typeName, "RegExp");
+  const isPlainObject = isObjectTypeName(typeName, "Object");
+  let result;
+  let index;
+  if (OBJECT(arg) === arg && !isDate && !isRegex) {
+    result = table.get(arg);
+    if (result) return result;
+    result = ++counter + "~";
+    table.set(arg, result);
+    if (Array.isArray(arg)) {
+      result = "@";
+      for (index = 0; index < arg.length; index++) {
+        result += stableHash(arg[index]) + ",";
+      }
+      table.set(arg, result);
+    }
+    if (isPlainObject) {
+      result = "#";
+      const keys = OBJECT.keys(arg).sort();
+      while (!isUndefined(index = keys.pop())) {
+        if (!isUndefined(arg[index])) {
+          result += index + ":" + stableHash(arg[index]) + ",";
+        }
+      }
+      table.set(arg, result);
+    }
+  } else {
+    result = isDate ? arg.toJSON() : type == "symbol" ? arg.toString() : type == "string" ? JSON.stringify(arg) : "" + arg;
+  }
+  return result;
+};
+const serialize = (key) => {
+  if (isFunction(key)) {
+    try {
+      key = key();
+    } catch (err) {
+      key = "";
+    }
+  }
+  const args = key;
+  key = typeof key == "string" ? key : (Array.isArray(key) ? key.length : key) ? stableHash(key) : "";
+  return [
+    key,
+    args
+  ];
+};
+const getFirstPageKey = (getKey) => {
+  return serialize(getKey ? getKey(0, null) : null)[0];
+};
+const EMPTY_PROMISE = Promise.resolve();
+const infinite = (useSWRNext) => (getKey, fn, config) => {
+  const didMountRef = reactExports.useRef(false);
+  const { cache: cache$1, initialSize = 1, revalidateAll = false, persistSize = false, revalidateFirstPage = true, revalidateOnMount = false, parallel = false } = config;
+  const [, , , PRELOAD] = SWRGlobalState.get(cache);
+  let infiniteKey;
+  try {
+    infiniteKey = getFirstPageKey(getKey);
+    if (infiniteKey) infiniteKey = INFINITE_PREFIX + infiniteKey;
+  } catch (err) {
+  }
+  const [get, set, subscribeCache] = createCacheHelper(cache$1, infiniteKey);
+  const getSnapshot = reactExports.useCallback(() => {
+    const size = isUndefined$1(get()._l) ? initialSize : get()._l;
+    return size;
+  }, [
+    cache$1,
+    infiniteKey,
+    initialSize
+  ]);
+  shimExports.useSyncExternalStore(reactExports.useCallback(
+    (callback) => {
+      if (infiniteKey) return subscribeCache(infiniteKey, () => {
+        callback();
+      });
+      return () => {
+      };
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      cache$1,
+      infiniteKey
+    ]
+  ), getSnapshot, getSnapshot);
+  const resolvePageSize = reactExports.useCallback(() => {
+    const cachedPageSize = get()._l;
+    return isUndefined$1(cachedPageSize) ? initialSize : cachedPageSize;
+  }, [
+    infiniteKey,
+    initialSize
+  ]);
+  const lastPageSizeRef = reactExports.useRef(resolvePageSize());
+  useIsomorphicLayoutEffect(() => {
+    if (!didMountRef.current) {
+      didMountRef.current = true;
+      return;
+    }
+    if (infiniteKey) {
+      set({
+        _l: persistSize ? lastPageSizeRef.current : resolvePageSize()
+      });
+    }
+  }, [
+    infiniteKey,
+    cache$1
+  ]);
+  const shouldRevalidateOnMount = revalidateOnMount && !didMountRef.current;
+  const swr = useSWRNext(infiniteKey, async (key) => {
+    const forceRevalidateAll = get()._i;
+    const shouldRevalidatePage = get()._r;
+    set({
+      _r: UNDEFINED$1
+    });
+    const data = [];
+    const pageSize = resolvePageSize();
+    const [getCache] = createCacheHelper(cache$1, key);
+    const cacheData = getCache().data;
+    const revalidators = [];
+    let previousPageData = null;
+    for (let i = 0; i < pageSize; ++i) {
+      const [pageKey, pageArg] = serialize$1(getKey(i, parallel ? null : previousPageData));
+      if (!pageKey) {
+        break;
+      }
+      const [getSWRCache, setSWRCache] = createCacheHelper(cache$1, pageKey);
+      let pageData = getSWRCache().data;
+      const shouldFetchPage = revalidateAll || forceRevalidateAll || isUndefined$1(pageData) || revalidateFirstPage && !i && !isUndefined$1(cacheData) || shouldRevalidateOnMount || cacheData && !isUndefined$1(cacheData[i]) && !config.compare(cacheData[i], pageData);
+      if (fn && (typeof shouldRevalidatePage === "function" ? shouldRevalidatePage(pageData, pageArg) : shouldFetchPage)) {
+        const revalidate = async () => {
+          const hasPreloadedRequest = pageKey in PRELOAD;
+          if (!hasPreloadedRequest) {
+            pageData = await fn(pageArg);
+          } else {
+            const req = PRELOAD[pageKey];
+            delete PRELOAD[pageKey];
+            pageData = await req;
+          }
+          setSWRCache({
+            data: pageData,
+            _k: pageArg
+          });
+          data[i] = pageData;
+        };
+        if (parallel) {
+          revalidators.push(revalidate);
+        } else {
+          await revalidate();
+        }
+      } else {
+        data[i] = pageData;
+      }
+      if (!parallel) {
+        previousPageData = pageData;
+      }
+    }
+    if (parallel) {
+      await Promise.all(revalidators.map((r) => r()));
+    }
+    set({
+      _i: UNDEFINED$1
+    });
+    return data;
+  }, config);
+  const mutate2 = reactExports.useCallback(
+    // eslint-disable-next-line func-names
+    function(data, opts) {
+      const options = typeof opts === "boolean" ? {
+        revalidate: opts
+      } : opts || {};
+      const shouldRevalidate = options.revalidate !== false;
+      if (!infiniteKey) return EMPTY_PROMISE;
+      if (shouldRevalidate) {
+        if (!isUndefined$1(data)) {
+          set({
+            _i: false,
+            _r: options.revalidate
+          });
+        } else {
+          set({
+            _i: true,
+            _r: options.revalidate
+          });
+        }
+      }
+      return arguments.length ? swr.mutate(data, {
+        ...options,
+        revalidate: shouldRevalidate
+      }) : swr.mutate();
+    },
+    // swr.mutate is always the same reference
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      infiniteKey,
+      cache$1
+    ]
+  );
+  const setSize = reactExports.useCallback(
+    (arg) => {
+      if (!infiniteKey) return EMPTY_PROMISE;
+      const [, changeSize] = createCacheHelper(cache$1, infiniteKey);
+      let size;
+      if (isFunction$1(arg)) {
+        size = arg(resolvePageSize());
+      } else if (typeof arg == "number") {
+        size = arg;
+      }
+      if (typeof size != "number") return EMPTY_PROMISE;
+      changeSize({
+        _l: size
+      });
+      lastPageSizeRef.current = size;
+      const data = [];
+      const [getInfiniteCache] = createCacheHelper(cache$1, infiniteKey);
+      let previousPageData = null;
+      for (let i = 0; i < size; ++i) {
+        const [pageKey] = serialize$1(getKey(i, previousPageData));
+        const [getCache] = createCacheHelper(cache$1, pageKey);
+        const pageData = pageKey ? getCache().data : UNDEFINED$1;
+        if (isUndefined$1(pageData)) {
+          return mutate2(getInfiniteCache().data);
+        }
+        data.push(pageData);
+        previousPageData = pageData;
+      }
+      return mutate2(data);
+    },
+    // exclude getKey from the dependencies, which isn't allowed to change during the lifecycle
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      infiniteKey,
+      cache$1,
+      mutate2,
+      resolvePageSize
+    ]
+  );
+  return {
+    size: resolvePageSize(),
+    setSize,
+    mutate: mutate2,
+    get data() {
+      return swr.data;
+    },
+    get error() {
+      return swr.error;
+    },
+    get isValidating() {
+      return swr.isValidating;
+    },
+    get isLoading() {
+      return swr.isLoading;
+    }
+  };
+};
+const useSWRInfinite = withMiddleware(useSWR, infinite);
+function useInfiniteList(cacheKey, fetchFn, getItemKey) {
+  var _a;
+  const getKey = reactExports.useCallback(
+    (_index, prev) => {
+      if (prev && (!prev.hasMore || !prev.cursor)) return null;
+      return [cacheKey, (prev == null ? void 0 : prev.cursor) ?? null];
+    },
+    [cacheKey]
+  );
+  const {
+    data: pages,
+    error,
+    isLoading,
+    isValidating,
+    size,
+    setSize,
+    mutate: mutate2
+  } = useSWRInfinite(
+    getKey,
+    ([, cursor]) => fetchFn(cursor ?? void 0),
+    {
+      revalidateFirstPage: false,
+      revalidateIfStale: false,
+      revalidateOnFocus: false,
+      keepPreviousData: true
+    }
+  );
+  const items = reactExports.useMemo(() => {
+    if (!pages) return [];
+    const seen = /* @__PURE__ */ new Set();
+    const result = [];
+    for (const page of pages) {
+      for (const item of page.data) {
+        const key = getItemKey(item);
+        if (seen.has(key)) continue;
+        seen.add(key);
+        result.push(item);
+      }
+    }
+    return result;
+  }, [pages, getItemKey]);
+  const lastPage = pages == null ? void 0 : pages[pages.length - 1];
+  const hasMore = Boolean((lastPage == null ? void 0 : lastPage.hasMore) && (lastPage == null ? void 0 : lastPage.cursor));
+  const isLoadingMore = size > 0 && Boolean(pages) && pages.length < size;
+  const loadMore = reactExports.useCallback(() => {
+    if (isValidating || !hasMore) return;
+    void setSize((s) => s + 1);
+  }, [isValidating, hasMore, setSize]);
+  const reload = reactExports.useCallback(() => {
+    void setSize(1);
+    void mutate2();
+  }, [setSize, mutate2]);
+  const normalizedError = error ? error instanceof Error ? error : new WorkflowWebAPIError(String(error), { layer: "client" }) : null;
+  return {
+    items,
+    error: normalizedError,
+    isLoading,
+    isLoadingMore,
+    hasMore,
+    loadMore,
+    reload,
+    refresh: reload,
+    pageInfo: (_a = pages == null ? void 0 : pages[0]) == null ? void 0 : _a.pageInfo
+  };
+}
+function useWorkflowRunsInfinite(env, params) {
+  const {
+    workflowName,
+    status,
+    limit = 25,
+    sortOrder = "desc",
+    startTime,
+    endTime
+  } = params;
+  const cacheKey = `workflow-runs:${workflowName ?? ""}:${status ?? ""}:${sortOrder}:${limit}:${startTime ?? ""}:${endTime ?? ""}`;
+  const fetchFn = reactExports.useCallback(
+    (cursor) => unwrapOrThrow(
+      fetchRuns(env, {
+        cursor,
+        sortOrder,
+        limit,
+        workflowName,
+        status,
+        startTime,
+        endTime
+      })
+    ),
+    [env, workflowName, limit, sortOrder, status, startTime, endTime]
+  );
+  const getItemKey = reactExports.useCallback((run) => run.runId, []);
+  return useInfiniteList(cacheKey, fetchFn, getItemKey);
+}
+function useLoadMoreOnScroll(loadMore, {
+  hasMore,
+  isLoadingMore,
+  root = null,
+  rootMargin = "400px"
+}) {
+  const sentinelRef = reactExports.useRef(null);
+  const loadMoreRef = reactExports.useRef(loadMore);
+  reactExports.useEffect(() => {
+    loadMoreRef.current = loadMore;
+  }, [loadMore]);
+  reactExports.useEffect(() => {
+    const sentinel = sentinelRef.current;
+    if (!sentinel || !hasMore || isLoadingMore) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            loadMoreRef.current();
+            break;
+          }
+        }
+      },
+      { root, rootMargin, threshold: 0 }
+    );
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [hasMore, isLoadingMore, root, rootMargin]);
+  return sentinelRef;
 }
 function usePaginatedList(fetchFn) {
   var _a;
@@ -431,7 +1624,8 @@ function usePaginatedList(fetchFn) {
             newMap.set(pageIndex, {
               data: cached.data,
               isLoading: false,
-              error: null
+              error: null,
+              pageInfo: cached.pageInfo
             });
             return newMap;
           });
@@ -445,14 +1639,16 @@ function usePaginatedList(fetchFn) {
         pageCache.current.set(cacheKey, {
           data: result.data,
           cursor: result.cursor,
-          hasMore: result.hasMore
+          hasMore: result.hasMore,
+          pageInfo: result.pageInfo
         });
         setAllPageResults((prev) => {
           const newMap = new Map(prev);
           newMap.set(pageIndex, {
             data: result.data,
             isLoading: false,
-            error: null
+            error: null,
+            pageInfo: result.pageInfo
           });
           return newMap;
         });
@@ -548,19 +1744,10 @@ function usePaginatedList(fetchFn) {
     hasPreviousPage: currentPage > 0,
     reload,
     refresh,
-    pageInfo
+    pageInfo,
+    analyticsPageInfo: currentPageResult.pageInfo
   };
 }
-function useWorkflowRuns(env, params) {
-  const { workflowName, status, limit = 10, sortOrder = "desc" } = params;
-  const fetchFn = reactExports.useCallback(
-    (cursor) => unwrapOrThrow(
-      fetchRuns(env, { cursor, sortOrder, limit, workflowName, status })
-    ),
-    [env, workflowName, limit, sortOrder, status]
-  );
-  return usePaginatedList(fetchFn);
-}
 function useWorkflowHooks(env, params) {
   const { runId, limit = 10, sortOrder = "desc" } = params;
   const fetchFn = reactExports.useCallback(
@@ -569,6 +1756,137 @@ function useWorkflowHooks(env, params) {
   );
   return usePaginatedList(fetchFn);
 }
+function HookTokenCell({ env, runId, hookId }) {
+  const [status, setStatus] = reactExports.useState("idle");
+  const [error, setError] = reactExports.useState(null);
+  const handleCopy = async (e) => {
+    e.stopPropagation();
+    if (status === "loading") return;
+    setStatus("loading");
+    setError(null);
+    try {
+      const token = await fetchHookToken(env, runId, hookId);
+      await navigator.clipboard.writeText(token);
+      setStatus("copied");
+      setTimeout(() => setStatus("idle"), 2e3);
+    } catch (err) {
+      console.error("Failed to copy hook token:", err);
+      setError("Failed to copy token");
+      setStatus("idle");
+    }
+  };
+  const tooltip = error ? error : status === "copied" ? "Copied!" : status === "loading" ? "Fetching token…" : "Copy token";
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "relative group/copy inline-block", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-muted-foreground", children: "••••••••••••" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleCopy,
+          disabled: status === "loading",
+          className: "absolute right-0 top-1/2 -translate-y-1/2 opacity-0 group-hover/copy:opacity-100 transition-opacity bg-background/80 backdrop-blur-sm p-1 rounded",
+          "aria-label": "Copy token",
+          children: status === "loading" ? /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "h-3 w-3 text-muted-foreground animate-spin" }) : status === "copied" ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "h-3 w-3 text-muted-foreground" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "h-3 w-3 text-muted-foreground hover:text-foreground" })
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: tooltip }) })
+    ] })
+  ] });
+}
+function TableSkeleton({
+  rows = DEFAULT_PAGE_SIZE,
+  variant = "runs"
+}) {
+  const renderRow = (i) => {
+    switch (variant) {
+      case "runs":
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "div",
+          {
+            className: "grid grid-cols-[1fr_1.5fr_0.8fr_1fr_1fr_40px] items-center gap-4 py-3 px-4",
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-3/4" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-4/5" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-1", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-3 w-14" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-2 w-8" })
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-3 w-3/4" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-3 w-3/4" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-6 w-6 rounded" })
+            ]
+          },
+          `skeleton-row-${i}`
+        );
+      case "hooks":
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "div",
+          {
+            className: "grid grid-cols-[1.2fr_1.2fr_0.8fr_1fr_0.5fr_40px] items-center gap-4 py-3 px-4",
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-4/5" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-4/5" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-3/4" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-3 w-3/4" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-8" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-6 w-6 rounded" })
+            ]
+          },
+          `skeleton-row-${i}`
+        );
+      case "workflows":
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "div",
+          {
+            className: "grid grid-cols-[1fr_1.5fr_0.5fr] items-center gap-4 py-3 px-4",
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-3/4" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-4/5" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-5 w-16 rounded-full mx-auto" })
+            ]
+          },
+          `skeleton-row-${i}`
+        );
+      default:
+        return null;
+    }
+  };
+  const renderHeader = () => {
+    switch (variant) {
+      case "runs":
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-[1fr_1.5fr_0.8fr_1fr_1fr_40px] items-center gap-4 py-3 px-4 border-b", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-20" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-14" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-12" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-14" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-20" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-6" })
+        ] });
+      case "hooks":
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-[1.2fr_1.2fr_0.8fr_1fr_0.5fr_40px] items-center gap-4 py-3 px-4 border-b", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-16" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-14" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-12" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-14" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-20" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-6" })
+        ] });
+      case "workflows":
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-[1fr_1.5fr_0.5fr] items-center gap-4 py-3 px-4 border-b", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-20" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-10" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-12 mx-auto" })
+        ] });
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { className: "overflow-hidden mt-4 bg-background", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { className: "p-0", children: [
+    renderHeader(),
+    Array.from({ length: rows }, (_, i) => renderRow(i))
+  ] }) });
+}
 function HooksTable({
   runId,
   onHookClick,
@@ -593,7 +1911,8 @@ function HooksTable({
   });
   const hookActions = useHookActions({
     onResolve: async (hook, payload) => {
-      await resumeHook(env, hook.token, payload);
+      const token = await fetchHookToken(env, hook.runId, hook.hookId);
+      await resumeHook(env, token, payload);
     },
     callbacks: {
       onSuccess: refresh
@@ -728,7 +2047,7 @@ function HooksTable({
     ] }),
     error ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Alert, { variant: "destructive", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { className: "h-4 w-4" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(AlertTitle, { children: "Error loading hooks" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(AlertTitle, { children: getErrorTitle(error, "Error loading hooks") }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(AlertDescription, { children: getErrorMessage(error) })
     ] }) : !loading && (!hooks || hooks.length === 0) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center py-8 text-muted-foreground", children: [
       "No active hooks found. ",
@@ -753,7 +2072,14 @@ function HooksTable({
             children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { className: "font-mono text-xs py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CopyableText, { text: hook.hookId, overlay: true, children: hook.hookId }) }),
               /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { className: "font-mono text-xs py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CopyableText, { text: hook.runId, overlay: true, children: hook.runId }) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { className: "font-mono text-xs py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CopyableText, { text: hook.token, overlay: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-muted-foreground", children: "••••••••••••" }) }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { className: "font-mono text-xs py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                HookTokenCell,
+                {
+                  env,
+                  runId: hook.runId,
+                  hookId: hook.hookId
+                }
+              ) }),
               /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { className: "py-2 text-muted-foreground text-xs", children: hook.createdAt ? /* @__PURE__ */ jsxRuntimeExports.jsx(RelativeTime, { date: hook.createdAt }) : "-" }),
               /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { className: "py-2", children: renderInvocationCount(hook) }),
               /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { className: "py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(DropdownMenu, { children: [
@@ -2301,6 +3627,37 @@ const SelectSeparator = reactExports.forwardRef(({ className, ...props }, ref) =
   }
 ));
 SelectSeparator.displayName = Separator.displayName;
+function bulkCancelToastSeverity(summary) {
+  const succeeded = summary.cancelled + summary.alreadyCancelled;
+  const hadProblem = summary.failed + summary.notCancellable + summary.notFound > 0;
+  if (succeeded === 0) return "error";
+  if (hadProblem) return "warning";
+  return "success";
+}
+function shouldRetainSelectionAfterBulkCancel(result) {
+  return result.outcome === "failed" && result.retryable;
+}
+const windows = /* @__PURE__ */ new Map();
+function createWindow(periodMs) {
+  const end = Date.now();
+  return {
+    startTime: new Date(end - periodMs).toISOString(),
+    endTime: new Date(end).toISOString()
+  };
+}
+function getListingWindow(periodId, periodMs) {
+  let window2 = windows.get(periodId);
+  if (!window2) {
+    window2 = createWindow(periodMs);
+    windows.set(periodId, window2);
+  }
+  return window2;
+}
+function advanceListingWindow(periodId, periodMs) {
+  const window2 = createWindow(periodMs);
+  windows.set(periodId, window2);
+  return window2;
+}
 function useTableSelection({
   getItemId
 }) {
@@ -2723,6 +4080,20 @@ const statusMap = {
   failed: { label: "Failed", color: "bg-red-600 dark:bg-red-400" },
   cancelled: { label: "Cancelled", color: "bg-gray-600 dark:bg-gray-400" }
 };
+const HOUR_MS = 60 * 60 * 1e3;
+const DAY_MS = 24 * HOUR_MS;
+const PERIOD_PRESETS = [
+  { id: "1h", label: "Last hour", ms: HOUR_MS },
+  { id: "6h", label: "Last 6 hours", ms: 6 * HOUR_MS },
+  { id: "24h", label: "Last 24 hours", ms: DAY_MS },
+  { id: "3d", label: "Last 3 days", ms: 3 * DAY_MS },
+  { id: "7d", label: "Last 7 days", ms: 7 * DAY_MS },
+  { id: "30d", label: "Last 30 days", ms: 30 * DAY_MS }
+];
+const DEFAULT_PERIOD = "24h";
+function isPeriodId(value) {
+  return PERIOD_PRESETS.some((preset2) => preset2.id === value);
+}
 function useWorkflowFilter() {
   const navigate = useNavigate();
   const { pathname } = useLocation();
@@ -2758,15 +4129,36 @@ function useStatusFilter() {
     [navigate, pathname, searchParams]
   );
 }
+function usePeriodFilter() {
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+  const [searchParams] = useSearchParams();
+  return reactExports.useCallback(
+    (value) => {
+      const params = new URLSearchParams(searchParams.toString());
+      if (value === DEFAULT_PERIOD) {
+        params.delete("period");
+      } else {
+        params.set("period", value);
+      }
+      navigate(`${pathname}?${params.toString()}`);
+    },
+    [navigate, pathname, searchParams]
+  );
+}
 function FilterControls({
   workflowNameFilter,
   status,
   seenWorkflowNames,
   sortOrder,
   loading,
-  statusFilterRequiresWorkflowNameFilter,
+  period,
+  showPeriodPicker,
+  planWindowMs,
+  planUpgradeAvailable,
   onWorkflowChange,
   onStatusChange,
+  onPeriodChange,
   onSortToggle,
   onRefresh,
   lastRefreshTime
@@ -2784,6 +4176,35 @@ function FilterControls({
       )
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-4", children: [
+      showPeriodPicker && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          Select,
+          {
+            value: period,
+            onValueChange: onPeriodChange,
+            disabled: loading,
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "w-[150px] h-9", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "Time window" }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(SelectContent, { children: PERIOD_PRESETS.map((preset2) => {
+                const beyondPlan = planWindowMs !== void 0 && preset2.ms > planWindowMs;
+                return /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  SelectItem,
+                  {
+                    value: preset2.id,
+                    disabled: beyondPlan,
+                    children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
+                      preset2.label,
+                      beyondPlan && planUpgradeAvailable && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-muted-foreground", children: "Observability Plus" })
+                    ] })
+                  },
+                  preset2.id
+                );
+              }) })
+            ]
+          }
+        ) }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: planUpgradeAvailable ? "Time window for the runs list. Longer windows require Observability Plus." : "Time window for the runs list" })
+      ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs(
         Select,
         {
@@ -2808,7 +4229,7 @@ function FilterControls({
           {
             value: status || "all",
             onValueChange: onStatusChange,
-            disabled: loading || statusFilterRequiresWorkflowNameFilter && !workflowNameFilter,
+            disabled: loading,
             children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "w-[140px] h-9", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "Filter by status" }) }),
               /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
@@ -2828,7 +4249,7 @@ function FilterControls({
             ]
           }
         ) }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: statusFilterRequiresWorkflowNameFilter && workflowNameFilter === "all" ? "Select a workflow first to filter by status" : "Filter runs by status" })
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Filter runs by status" })
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -2866,7 +4287,7 @@ function FilterControls({
   ] });
 }
 function RunsTable({ onRunClick }) {
-  var _a, _b, _c, _d;
+  var _a, _b, _c;
   const [searchParams] = useSearchParams();
   const handleWorkflowFilter = useWorkflowFilter();
   const handleStatusFilter = useStatusFilter();
@@ -2875,6 +4296,10 @@ function RunsTable({ onRunClick }) {
   const validStatuses = Object.keys(statusMap);
   const status = rawStatus === "all" || rawStatus && validStatuses.includes(rawStatus) ? rawStatus : void 0;
   const workflowNameFilter = searchParams.get("workflow");
+  const rawPeriod = searchParams.get("period");
+  const period = isPeriodId(rawPeriod) ? rawPeriod : DEFAULT_PERIOD;
+  const periodPreset = PERIOD_PRESETS.find((preset2) => preset2.id === period) ?? PERIOD_PRESETS[2];
+  const handlePeriodFilter = usePeriodFilter();
   const [sortOrder, setSortOrder] = reactExports.useState("desc");
   const [lastRefreshTime, setLastRefreshTime] = reactExports.useState(
     () => /* @__PURE__ */ new Date()
@@ -2884,35 +4309,62 @@ function RunsTable({ onRunClick }) {
   const isLocal = serverConfig.backendId === "local" || serverConfig.backendId === "@workflow/world-local";
   const localDataDirPath = (_a = serverConfig.displayInfo) == null ? void 0 : _a["local.dataDirPath"];
   const localShortName = (_b = serverConfig.displayInfo) == null ? void 0 : _b["local.shortName"];
-  const statusFilterRequiresWorkflowNameFilter = ((_c = serverConfig.backendId) == null ? void 0 : _c.includes("vercel")) || false;
   const [seenWorkflowNames, setSeenWorkflowNames] = reactExports.useState(
     /* @__PURE__ */ new Set()
   );
+  const isVercelBackend = ((_c = serverConfig.backendId) == null ? void 0 : _c.includes("vercel")) ?? false;
+  const [listingWindow, setListingWindow] = reactExports.useState(
+    () => isVercelBackend ? getListingWindow(period, periodPreset.ms) : void 0
+  );
+  reactExports.useEffect(() => {
+    setListingWindow(
+      isVercelBackend ? getListingWindow(period, periodPreset.ms) : void 0
+    );
+  }, [isVercelBackend, period, periodPreset.ms]);
+  const refreshListingWindow = reactExports.useCallback(() => {
+    if (isVercelBackend) {
+      setListingWindow(advanceListingWindow(period, periodPreset.ms));
+    }
+  }, [isVercelBackend, period, periodPreset.ms]);
   const {
-    data,
+    items: runs,
     error,
-    nextPage,
-    previousPage,
-    hasNextPage,
-    hasPreviousPage,
+    isLoading,
+    isLoadingMore,
+    hasMore,
+    loadMore,
     reload,
     refresh,
-    pageInfo
-  } = useWorkflowRuns(env, {
+    pageInfo: analyticsPageInfo
+  } = useWorkflowRunsInfinite(env, {
     sortOrder,
     workflowName: workflowNameFilter === "all" ? void 0 : workflowNameFilter,
-    status: status === "all" ? void 0 : status
+    status: status === "all" ? void 0 : status,
+    startTime: listingWindow == null ? void 0 : listingWindow.startTime,
+    endTime: listingWindow == null ? void 0 : listingWindow.endTime
+  });
+  const [planInfo, setPlanInfo] = reactExports.useState(void 0);
+  reactExports.useEffect(() => {
+    if (analyticsPageInfo) {
+      setPlanInfo(analyticsPageInfo);
+    }
+  }, [analyticsPageInfo]);
+  const planWindowMs = planInfo !== void 0 ? planInfo.currentLookbackDays * DAY_MS : void 0;
+  const [scrollRoot, setScrollRoot] = reactExports.useState(null);
+  const sentinelRef = useLoadMoreOnScroll(loadMore, {
+    hasMore,
+    isLoadingMore,
+    root: scrollRoot
   });
   const selection = useTableSelection({
     getItemId: (run) => run.runId
   });
-  const runs = data.data ?? [];
   const [isBulkCancelling, setIsBulkCancelling] = reactExports.useState(false);
   const [isBulkReenqueuing, setIsBulkReenqueuing] = reactExports.useState(false);
-  const isLocalAndHasMissingData = isLocal && (!localDataDirPath || !((_d = data == null ? void 0 : data.data) == null ? void 0 : _d.length));
+  const isLocalAndHasMissingData = isLocal && (!localDataDirPath || !runs.length);
   reactExports.useEffect(() => {
-    if (data.data && data.data.length > 0) {
-      const newNames = new Set(data.data.map((run) => run.workflowName));
+    if (runs.length > 0) {
+      const newNames = new Set(runs.map((run) => run.workflowName));
       setSeenWorkflowNames((prev) => {
         const updated = new Set(prev);
         for (const name of newNames) {
@@ -2921,8 +4373,8 @@ function RunsTable({ onRunClick }) {
         return updated;
       });
     }
-  }, [data.data]);
-  const loading = data.isLoading;
+  }, [runs]);
+  const loading = isLoading;
   reactExports.useEffect(() => {
     if (!loading && !hasLoadedOnce) {
       setHasLoadedOnce(true);
@@ -2934,12 +4386,14 @@ function RunsTable({ onRunClick }) {
   const onReload = reactExports.useCallback(() => {
     setLastRefreshTime(() => /* @__PURE__ */ new Date());
     setHasLoadedOnce(false);
+    refreshListingWindow();
     reload();
-  }, [reload]);
+  }, [reload, refreshListingWindow]);
   const onRefresh = reactExports.useCallback(() => {
     setLastRefreshTime(() => /* @__PURE__ */ new Date());
+    refreshListingWindow();
     refresh();
-  }, [refresh]);
+  }, [refresh, refreshListingWindow]);
   const selectedRuns = reactExports.useMemo(() => {
     return runs.filter((run) => selection.selectedIds.has(run.runId));
   }, [runs, selection.selectedIds]);
@@ -2949,27 +4403,39 @@ function RunsTable({ onRunClick }) {
     );
   }, [selectedRuns]);
   const hasCancellableSelection = cancellableSelectedRuns.length > 0;
+  const exceedsBulkCancelLimit = cancellableSelectedRuns.length > BULK_CANCEL_MAX_RUN_IDS;
   const handleBulkCancel = reactExports.useCallback(async () => {
-    if (isBulkCancelling || cancellableSelectedRuns.length === 0) return;
+    if (isBulkCancelling || cancellableSelectedRuns.length === 0 || cancellableSelectedRuns.length > BULK_CANCEL_MAX_RUN_IDS) {
+      return;
+    }
     setIsBulkCancelling(true);
     try {
-      const results = await Promise.allSettled(
-        cancellableSelectedRuns.map((run) => cancelRun(env, run.runId))
+      const { summary, results } = await bulkCancelRuns(
+        env,
+        cancellableSelectedRuns.map((run) => run.runId)
       );
-      const succeeded = results.filter((r) => r.status === "fulfilled").length;
-      const failed = results.filter((r) => r.status === "rejected").length;
-      if (failed === 0) {
-        toast.success(
-          `Cancelled ${succeeded} run${succeeded !== 1 ? "s" : ""}`
-        );
-      } else if (succeeded === 0) {
-        toast.error(`Failed to cancel ${failed} run${failed !== 1 ? "s" : ""}`);
+      const parts = [];
+      if (summary.cancelled > 0) parts.push(`${summary.cancelled} cancelled`);
+      if (summary.alreadyCancelled > 0)
+        parts.push(`${summary.alreadyCancelled} already cancelled`);
+      if (summary.notCancellable > 0)
+        parts.push(`${summary.notCancellable} not cancellable`);
+      if (summary.notFound > 0) parts.push(`${summary.notFound} not found`);
+      if (summary.failed > 0) parts.push(`${summary.failed} failed`);
+      const message = parts.join(", ") || "No runs cancelled";
+      const severity = bulkCancelToastSeverity(summary);
+      if (severity === "error") {
+        toast.error(message);
+      } else if (severity === "warning") {
+        toast.warning(message);
       } else {
-        toast.warning(
-          `Cancelled ${succeeded} run${succeeded !== 1 ? "s" : ""}, ${failed} failed`
-        );
+        toast.success(message);
+      }
+      for (const result of results) {
+        if (!shouldRetainSelectionAfterBulkCancel(result)) {
+          selection.deselectById(result.runId);
+        }
       }
-      selection.clearSelection();
       onReload();
     } catch (err) {
       toast.error("Failed to cancel runs", {
@@ -3046,120 +4512,122 @@ function RunsTable({ onRunClick }) {
         seenWorkflowNames,
         sortOrder,
         loading,
-        statusFilterRequiresWorkflowNameFilter,
+        period,
+        showPeriodPicker: isVercelBackend,
+        planWindowMs,
+        planUpgradeAvailable: (planInfo == null ? void 0 : planInfo.upgradeAvailable) ?? false,
         onWorkflowChange: handleWorkflowFilter,
         onStatusChange: handleStatusFilter,
+        onPeriodChange: handlePeriodFilter,
         onSortToggle: toggleSortOrder,
         onRefresh: onReload,
         lastRefreshTime
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { className: "overflow-hidden mt-4 bg-background", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardContent, { className: "p-0 max-h-[calc(100vh-280px)] overflow-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Table, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(TableHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(TableRow, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(TableHead, { className: "sticky top-0 bg-background z-10 border-b shadow-sm h-10 w-10", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Checkbox,
-          {
-            checked: selection.isAllSelected(runs),
-            indeterminate: selection.isSomeSelected(runs),
-            onCheckedChange: () => selection.toggleSelectAll(runs),
-            "aria-label": "Select all runs",
-            disabled: !runs.length
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(TableHead, { className: "sticky top-0 bg-background z-10 border-b shadow-sm h-10", children: "Workflow" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(TableHead, { className: "sticky top-0 bg-background z-10 border-b shadow-sm h-10", children: "Run ID" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(TableHead, { className: "sticky top-0 bg-background z-10 border-b shadow-sm h-10", children: "Status" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(TableHead, { className: "sticky top-0 bg-background z-10 border-b shadow-sm h-10", children: "Started" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(TableHead, { className: "sticky top-0 bg-background z-10 border-b shadow-sm h-10", children: "Completed" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(TableHead, { className: "sticky top-0 bg-background z-10 border-b shadow-sm h-10 w-10" })
-      ] }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(TableBody, { children: error ? /* @__PURE__ */ jsxRuntimeExports.jsx(TableRow, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { colSpan: 7, className: "h-[400px]", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Alert, { variant: "destructive", className: "max-w-md", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { className: "h-4 w-4" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(AlertTitle, { children: "Error loading runs" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(AlertDescription, { children: getErrorMessage(error) })
-      ] }) }) }) }) : loading && !hasLoadedOnce ? /* @__PURE__ */ jsxRuntimeExports.jsx(TableRow, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { colSpan: 7, className: "h-[400px]", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "h-8 w-8 animate-spin text-muted-foreground" }) }) }) }) : !data.data || data.data.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(TableRow, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { colSpan: 7, className: "h-[400px]", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-sm text-center text-muted-foreground flex flex-col items-center justify-center gap-3 h-full", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm", children: [
-          "No workflow runs found",
-          isLocalAndHasMissingData ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-            " in ",
-            localDirText
-          ] }) : "",
-          "."
-        ] }),
-        isLocalAndHasMissingData && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm flex items-center gap-2", children: "This view will update once you run a workflow." })
-      ] }) }) }) : runs.map((run) => {
-        var _a2;
-        return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          TableRow,
-          {
-            className: "cursor-pointer group relative",
-            onClick: () => onRunClick(run.runId),
-            "data-selected": selection.isSelected(run),
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { className: "py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { className: "overflow-hidden mt-4 bg-background", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      CardContent,
+      {
+        ref: setScrollRoot,
+        className: "p-0 max-h-[calc(100vh-280px)] overflow-auto",
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(Table, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(TableHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(TableRow, { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TableHead, { className: "sticky top-0 bg-background z-10 border-b shadow-sm h-10 w-10", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                 Checkbox,
                 {
-                  checked: selection.isSelected(run),
-                  onCheckedChange: () => selection.toggleSelection(run),
-                  "aria-label": `Select run ${run.runId}`
+                  checked: selection.isAllSelected(runs),
+                  indeterminate: selection.isSomeSelected(runs),
+                  onCheckedChange: () => selection.toggleSelectAll(runs),
+                  "aria-label": "Select all runs",
+                  disabled: !runs.length
                 }
               ) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { className: "py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CopyableText, { text: run.workflowName, overlay: true, children: ((_a2 = parseWorkflowName(run.workflowName)) == null ? void 0 : _a2.shortName) || "?" }) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { className: "font-mono text-xs py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CopyableText, { text: run.runId, overlay: true, children: run.runId }) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { className: "py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                StatusBadge,
-                {
-                  status: run.status,
-                  context: run,
-                  durationMs: run.startedAt ? (run.completedAt ? new Date(run.completedAt).getTime() : Date.now()) - new Date(run.startedAt).getTime() : void 0
-                }
-              ) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { className: "py-2 text-muted-foreground text-xs", children: run.startedAt ? /* @__PURE__ */ jsxRuntimeExports.jsx(RelativeTime, { date: run.startedAt }) : "-" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { className: "py-2 text-muted-foreground text-xs", children: run.completedAt ? /* @__PURE__ */ jsxRuntimeExports.jsx(RelativeTime, { date: run.completedAt }) : "-" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { className: "py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                LazyDropdownMenu,
-                {
-                  env,
-                  runId: run.runId,
-                  runStatus: run.status,
-                  onSuccess: onReload
-                }
-              ) })
-            ]
-          },
-          run.runId
-        );
-      }) })
-    ] }) }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mt-4", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-muted-foreground", children: pageInfo }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2 items-center", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          Button,
-          {
-            variant: "outline",
-            size: "sm",
-            onClick: previousPage,
-            disabled: !hasPreviousPage,
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronLeft, {}),
-              "Previous"
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          Button,
-          {
-            variant: "outline",
-            size: "sm",
-            onClick: nextPage,
-            disabled: !hasNextPage,
-            children: [
-              "Next",
-              /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, {})
-            ]
-          }
-        )
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TableHead, { className: "sticky top-0 bg-background z-10 border-b shadow-sm h-10", children: "Workflow" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TableHead, { className: "sticky top-0 bg-background z-10 border-b shadow-sm h-10", children: "Run ID" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TableHead, { className: "sticky top-0 bg-background z-10 border-b shadow-sm h-10", children: "Status" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TableHead, { className: "sticky top-0 bg-background z-10 border-b shadow-sm h-10", children: "Started" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TableHead, { className: "sticky top-0 bg-background z-10 border-b shadow-sm h-10", children: "Completed" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TableHead, { className: "sticky top-0 bg-background z-10 border-b shadow-sm h-10 w-10" })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(TableBody, { children: [
+              error ? /* @__PURE__ */ jsxRuntimeExports.jsx(TableRow, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { colSpan: 7, className: "h-[400px]", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Alert, { variant: "destructive", className: "max-w-md", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { className: "h-4 w-4" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(AlertTitle, { children: getErrorTitle(error, "Error loading runs") }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(AlertDescription, { children: getErrorMessage(error) })
+              ] }) }) }) }) : loading && !hasLoadedOnce ? /* @__PURE__ */ jsxRuntimeExports.jsx(TableRow, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { colSpan: 7, className: "h-[400px]", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "h-8 w-8 animate-spin text-muted-foreground" }) }) }) }) : runs.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(TableRow, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { colSpan: 7, className: "h-[400px]", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-sm text-center text-muted-foreground flex flex-col items-center justify-center gap-3 h-full", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm", children: [
+                  "No workflow runs found",
+                  isLocalAndHasMissingData ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                    " in ",
+                    localDirText
+                  ] }) : "",
+                  "."
+                ] }),
+                isLocalAndHasMissingData && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm flex items-center gap-2", children: "This view will update once you run a workflow." })
+              ] }) }) }) : runs.map((run) => {
+                var _a2;
+                return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                  TableRow,
+                  {
+                    className: "cursor-pointer group relative",
+                    onClick: () => onRunClick(run.runId),
+                    "data-selected": selection.isSelected(run),
+                    children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { className: "py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        Checkbox,
+                        {
+                          checked: selection.isSelected(run),
+                          onCheckedChange: () => selection.toggleSelection(run),
+                          "aria-label": `Select run ${run.runId}`
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { className: "py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CopyableText, { text: run.workflowName, overlay: true, children: ((_a2 = parseWorkflowName(run.workflowName)) == null ? void 0 : _a2.shortName) || "?" }) }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { className: "font-mono text-xs py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CopyableText, { text: run.runId, overlay: true, children: run.runId }) }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { className: "py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        StatusBadge,
+                        {
+                          status: run.status,
+                          context: run,
+                          durationMs: run.startedAt ? (run.completedAt ? new Date(run.completedAt).getTime() : Date.now()) - new Date(run.startedAt).getTime() : void 0
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { className: "py-2 text-muted-foreground text-xs", children: run.startedAt ? /* @__PURE__ */ jsxRuntimeExports.jsx(RelativeTime, { date: run.startedAt }) : "-" }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { className: "py-2 text-muted-foreground text-xs", children: run.completedAt ? /* @__PURE__ */ jsxRuntimeExports.jsx(RelativeTime, { date: run.completedAt }) : "-" }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { className: "py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        LazyDropdownMenu,
+                        {
+                          env,
+                          runId: run.runId,
+                          runStatus: run.status,
+                          onSuccess: onReload
+                        }
+                      ) })
+                    ]
+                  },
+                  run.runId
+                );
+              }),
+              isLoadingMore && /* @__PURE__ */ jsxRuntimeExports.jsx(TableRow, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(TableCell, { colSpan: 7, className: "py-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center gap-2 text-sm text-muted-foreground", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "h-4 w-4 animate-spin" }),
+                "Loading more runs…"
+              ] }) }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: sentinelRef, "aria-hidden": true, className: "h-px" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mt-4 text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: runs.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        "Showing ",
+        runs.length,
+        " run",
+        runs.length === 1 ? "" : "s",
+        !hasMore && !loading ? " · end of list" : ""
+      ] }) }),
+      isVercelBackend && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+        periodPreset.label,
+        (planInfo == null ? void 0 : planInfo.upgradeAvailable) ? ` · plan window ${planInfo.currentLookbackDays} day${planInfo.currentLookbackDays === 1 ? "" : "s"}` : ""
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -3186,23 +4654,26 @@ function RunsTable({ onRunClick }) {
             ) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Re-enqueue the workflow orchestration layer for selected runs. Useful if workflows appear stuck." })
           ] }),
-          hasCancellableSelection && /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            Button,
-            {
-              variant: "ghost",
-              size: "sm",
-              className: "h-7 text-primary-foreground hover:bg-primary-foreground/10 hover:text-primary-foreground",
-              onClick: handleBulkCancel,
-              disabled: isBulkCancelling,
-              children: [
-                isBulkCancelling ? /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "h-4 w-4 mr-1 animate-spin" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(CircleX, { className: "h-4 w-4 mr-1" }),
-                "Cancel",
-                " ",
-                cancellableSelectedRuns.length !== selection.selectionCount ? `${cancellableSelectedRuns.length} ` : "",
-                isBulkCancelling ? "cancelling..." : ""
-              ]
-            }
-          )
+          hasCancellableSelection && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "inline-flex", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                className: "h-7 text-primary-foreground hover:bg-primary-foreground/10 hover:text-primary-foreground",
+                onClick: handleBulkCancel,
+                disabled: isBulkCancelling || exceedsBulkCancelLimit,
+                children: [
+                  isBulkCancelling ? /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "h-4 w-4 mr-1 animate-spin" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(CircleX, { className: "h-4 w-4 mr-1" }),
+                  "Cancel",
+                  " ",
+                  cancellableSelectedRuns.length !== selection.selectionCount ? `${cancellableSelectedRuns.length} ` : "",
+                  isBulkCancelling ? "cancelling..." : ""
+                ]
+              }
+            ) }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: exceedsBulkCancelLimit ? `Select up to ${BULK_CANCEL_MAX_RUN_IDS} runs at a time.` : "Cancel the selected pending and running runs." })
+          ] })
         ] })
       }
     )