@prorobotech/openapi-k8s-toolkit 1.0.3 → 1.1.0-alpha.1

package/dist/openapi-k8s-toolkit.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('styled-components'), require('react'), require('antd'), require('@ant-design/icons'), require('@tanstack/react-query'), require('react-router-dom')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'styled-components', 'react', 'antd', '@ant-design/icons', '@tanstack/react-query', 'react-router-dom'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@prorobotech/openapi-k8s-toolkit"] = {}, global.styled, global.React, global.antd, global.antdIcons, global.reactQuery, global.ReactRouterDOM));
-})(this, (function (exports, styled, K, antd, icons, reactQuery, reactRouterDom) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('styled-components'), require('react'), require('antd'), require('@ant-design/icons'), require('react-router-dom'), require('@tanstack/react-query')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'styled-components', 'react', 'antd', '@ant-design/icons', 'react-router-dom', '@tanstack/react-query'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@prorobotech/openapi-k8s-toolkit"] = {}, global.styled, global.React, global.antd, global.antdIcons, global.ReactRouterDOM, global.reactQuery));
+})(this, (function (exports, styled, K, antd, icons, reactRouterDom, reactQuery) { 'use strict';
 
   const Spacer$1 = styled.div`
   height: ${({ $space, $spaceMob, $samespace }) => {
@@ -8315,31 +8315,512 @@
   padding: ${({ $padding }) => $padding};
 `;
 
-  const getDirectUnknownResource = async ({ uri }) => {
-    return axios.get(uri);
+  const eventKey$1 = (e) => {
+    const n = e.metadata?.name ?? "";
+    const ns = e.metadata?.namespace ?? "";
+    return `${ns}/${n}`;
+  };
+  const compareRV$1 = (a, b) => {
+    if (a.length !== b.length) return a.length > b.length ? 1 : -1;
+    return a > b ? 1 : a < b ? -1 : 0;
   };
+  const getRV$1 = (item) => item?.metadata?.resourceVersion;
 
-  const useDirectUnknownResource = ({
-    uri,
-    queryKey,
-    refetchInterval,
-    isEnabled
+  const reducer$1 = (state, action) => {
+    switch (action.type) {
+      case "RESET": {
+        const order = action.items.map(eventKey$1);
+        const byKey = {};
+        action.items.forEach((it) => byKey[eventKey$1(it)] = it);
+        return { order, byKey };
+      }
+      case "APPEND_PAGE": {
+        const next = { ...state.byKey };
+        const addKeys = [];
+        action.items.forEach((it) => {
+          const k = eventKey$1(it);
+          if (!next[k]) addKeys.push(k);
+          next[k] = it;
+        });
+        return { order: [...state.order, ...addKeys], byKey: next };
+      }
+      case "UPSERT": {
+        const k = eventKey$1(action.item);
+        const exists = Boolean(state.byKey[k]);
+        const byKey = { ...state.byKey, [k]: action.item };
+        const order = exists ? state.order : [k, ...state.order];
+        return { order, byKey };
+      }
+      case "REMOVE": {
+        if (!state.byKey[action.key]) return state;
+        const byKey = { ...state.byKey };
+        delete byKey[action.key];
+        return { order: state.order.filter((k) => k !== action.key), byKey };
+      }
+      default:
+        return state;
+    }
+  };
+
+  const isRecord = (v) => typeof v === "object" && v !== null;
+  const readString = (obj, key) => {
+    const val = obj[key];
+    return typeof val === "string" ? val : void 0;
+  };
+  const itemRV = (it) => {
+    const fromUtil = getRV$1(it);
+    if (fromUtil) return fromUtil;
+    if (!isRecord(it)) return void 0;
+    const rvTop = readString(it, "resourceVersion");
+    const mdRaw = isRecord(it["metadata"]) ? it["metadata"] : void 0;
+    const rvMeta = mdRaw ? readString(mdRaw, "resourceVersion") : void 0;
+    return rvTop ?? rvMeta;
+  };
+  const getMaxRV$1 = (items) => (items ?? []).reduce((max, it) => {
+    const rv = itemRV(it);
+    return rv && (!max || compareRV$1(rv, max) > 0) ? rv : max;
+  }, void 0);
+  const makeResId = (q) => `${q.apiGroup ?? ""}|${q.apiVersion}|${q.plural}|${q.namespace ?? ""}|${q.fieldSelector ?? ""}|${q.labelSelector ?? ""}`;
+  const useListWatch = ({
+    wsUrl,
+    pageSize,
+    paused = false,
+    ignoreRemove = false,
+    onStatus,
+    onError,
+    autoDrain = false,
+    preserveStateOnUrlChange = true,
+    isEnabled = true,
+    // NEW default: socket gated by this flag
+    query
   }) => {
-    return reactQuery.useQuery({
-      queryKey,
-      queryFn: async () => {
-        const response = await getDirectUnknownResource({
-          uri
+    const resId = `${query.apiGroup ?? ""}|${query.apiVersion}|${query.plural}|${query.namespace ?? ""}|${query.fieldSelector ?? ""}|${query.labelSelector ?? ""}`;
+    const resIdRef = K.useRef(resId);
+    const [state, dispatch] = K.useReducer(reducer$1, { order: [], byKey: {} });
+    const [contToken, setContToken] = K.useState();
+    const [hasMore, setHasMore] = K.useState(false);
+    const [status, setStatus] = K.useState(isEnabled ? "connecting" : "closed");
+    const [lastError, setLastError] = K.useState(void 0);
+    const [isPaused, setIsPaused] = K.useState(paused);
+    const [isRemoveIgnored, setIsRemoveIgnored] = K.useState(ignoreRemove);
+    const queryRef = K.useRef(query);
+    const wsRef = K.useRef(null);
+    const connectingRef = K.useRef(false);
+    const mountedRef = K.useRef(true);
+    const startedRef = K.useRef(false);
+    const reconnectTimerRef = K.useRef(null);
+    const backoffRef = K.useRef(750);
+    const urlRef = K.useRef(wsUrl);
+    const onMessageRef = K.useRef(() => {
+    });
+    const connectRef = K.useRef(() => {
+    });
+    const fetchingRef = K.useRef(false);
+    const anchorRVRef = K.useRef(void 0);
+    const haveAnchorRef = K.useRef(false);
+    const enabledRef = K.useRef(isEnabled);
+    const intentionalCloseRef = K.useRef(false);
+    const suppressErrorsRef = K.useRef(false);
+    const pausedRef = K.useRef(isPaused);
+    const ignoreRemoveRef = K.useRef(isRemoveIgnored);
+    K.useEffect(() => {
+      pausedRef.current = isPaused;
+    }, [isPaused]);
+    K.useEffect(() => {
+      ignoreRemoveRef.current = isRemoveIgnored;
+    }, [isRemoveIgnored]);
+    K.useEffect(() => {
+      enabledRef.current = isEnabled;
+    }, [isEnabled]);
+    const clearErrorSafe = K.useCallback(() => {
+      setLastError(void 0);
+    }, []);
+    const setStatusSafe = K.useCallback(
+      (s) => {
+        setStatus(s);
+        onStatus?.(s);
+      },
+      [onStatus]
+    );
+    const setErrorSafe = K.useCallback(
+      (msg) => {
+        setLastError(msg);
+        if (msg) onError?.(msg);
+      },
+      [onError]
+    );
+    const applyParam = (sp, key, v) => {
+      if (v === void 0 || v === null || v === "") {
+        sp.delete(key);
+        return;
+      }
+      sp.set(key, String(v));
+    };
+    const buildWsUrl = K.useCallback((raw) => {
+      let u;
+      const base = window.location.origin;
+      try {
+        const hasScheme = /^[a-z]+:/i.test(raw);
+        u = hasScheme ? new URL(raw) : new URL(raw.startsWith("/") ? raw : `/${raw}`, base);
+        if (u.protocol === "http:") u.protocol = "ws:";
+        if (u.protocol === "https:") u.protocol = "wss:";
+        if (u.protocol !== "ws:" && u.protocol !== "wss:") {
+          u = new URL(u.pathname + u.search + u.hash, base);
+          u.protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+        }
+      } catch {
+        const origin = window.location.origin.replace(/^http/, "ws");
+        u = new URL(raw.startsWith("/") ? raw : `/${raw}`, origin);
+      }
+      const q = queryRef.current;
+      applyParam(u.searchParams, "namespace", q.namespace);
+      applyParam(u.searchParams, "limit", q.initialLimit);
+      applyParam(u.searchParams, "_continue", q.initialContinue);
+      applyParam(u.searchParams, "apiGroup", q.apiGroup);
+      applyParam(u.searchParams, "apiVersion", q.apiVersion);
+      applyParam(u.searchParams, "plural", q.plural);
+      applyParam(u.searchParams, "fieldSelector", q.fieldSelector);
+      applyParam(u.searchParams, "labelSelector", q.labelSelector);
+      if (haveAnchorRef.current && anchorRVRef.current) {
+        u.searchParams.set("sinceRV", anchorRVRef.current);
+      } else {
+        u.searchParams.delete("sinceRV");
+      }
+      return u.toString();
+    }, []);
+    const closeWS = K.useCallback(() => {
+      try {
+        wsRef.current?.close();
+      } catch {
+      }
+      wsRef.current = null;
+    }, []);
+    const scheduleReconnect = K.useCallback(() => {
+      if (intentionalCloseRef.current) {
+        intentionalCloseRef.current = false;
+        return;
+      }
+      if (!enabledRef.current) {
+        setStatusSafe("closed");
+        connectingRef.current = false;
+        return;
+      }
+      setStatusSafe("closed");
+      connectingRef.current = false;
+      const baseDelay = Math.min(backoffRef.current, 8e3);
+      const jitter = Math.random() * 0.4 + 0.8;
+      const wait = Math.floor(baseDelay * jitter);
+      const next = Math.min(baseDelay * 2, 12e3);
+      backoffRef.current = next;
+      if (reconnectTimerRef.current) {
+        window.clearTimeout(reconnectTimerRef.current);
+        reconnectTimerRef.current = null;
+      }
+      reconnectTimerRef.current = window.setTimeout(() => {
+        if (!mountedRef.current || !enabledRef.current) return;
+        connectRef.current();
+      }, wait);
+    }, [setStatusSafe]);
+    const connect = K.useCallback(() => {
+      if (!mountedRef.current) return;
+      if (!enabledRef.current) {
+        setStatusSafe("closed");
+        return;
+      }
+      if (connectingRef.current) return;
+      if (wsRef.current && (wsRef.current.readyState === WebSocket.OPEN || wsRef.current.readyState === WebSocket.CONNECTING)) {
+        return;
+      }
+      connectingRef.current = true;
+      setStatusSafe("connecting");
+      setErrorSafe(void 0);
+      const url = buildWsUrl(urlRef.current);
+      console.debug("[useListWatch] connecting to", url);
+      const ws = new WebSocket(url);
+      wsRef.current = ws;
+      ws.addEventListener("open", () => {
+        if (!mountedRef.current || !enabledRef.current) return;
+        backoffRef.current = 750;
+        fetchingRef.current = false;
+        setStatusSafe("open");
+        connectingRef.current = false;
+        suppressErrorsRef.current = false;
+      });
+      ws.addEventListener("message", (ev) => onMessageRef.current(ev));
+      ws.addEventListener("close", scheduleReconnect);
+      ws.addEventListener("error", () => {
+        if (intentionalCloseRef.current || suppressErrorsRef.current) return;
+        setErrorSafe("WebSocket error");
+      });
+    }, [buildWsUrl, scheduleReconnect, setErrorSafe, setStatusSafe]);
+    K.useEffect(() => {
+      connectRef.current = connect;
+    }, [connect]);
+    const reconnect = K.useCallback(() => {
+      if (!enabledRef.current) {
+        closeWS();
+        setStatusSafe("closed");
+        return;
+      }
+      if (reconnectTimerRef.current) {
+        window.clearTimeout(reconnectTimerRef.current);
+        reconnectTimerRef.current = null;
+      }
+      intentionalCloseRef.current = true;
+      try {
+        wsRef.current?.close();
+      } catch {
+      }
+      wsRef.current = null;
+      connect();
+    }, [closeWS, connect, setStatusSafe]);
+    K.useEffect(() => {
+      if (!mountedRef.current) return;
+      if (isEnabled) {
+        connect();
+      } else {
+        if (reconnectTimerRef.current) {
+          window.clearTimeout(reconnectTimerRef.current);
+          reconnectTimerRef.current = null;
+        }
+        closeWS();
+        setStatusSafe("closed");
+      }
+    }, [isEnabled, closeWS, connect, setStatusSafe]);
+    const setUrl = K.useCallback(
+      (next) => {
+        const changed = next !== urlRef.current;
+        urlRef.current = next;
+        if (changed) {
+          clearErrorSafe();
+          suppressErrorsRef.current = true;
+          if (!preserveStateOnUrlChange) {
+            dispatch({ type: "RESET", items: [] });
+            setContToken(void 0);
+            setHasMore(false);
+            anchorRVRef.current = void 0;
+            haveAnchorRef.current = false;
+          }
+          if (enabledRef.current) reconnect();
+        }
+      },
+      [preserveStateOnUrlChange, reconnect, clearErrorSafe]
+    );
+    const setQuery = K.useCallback(
+      (q) => {
+        clearErrorSafe();
+        suppressErrorsRef.current = true;
+        const prev = queryRef.current;
+        const prevId = makeResId(prev);
+        const nextId = makeResId(q);
+        queryRef.current = q;
+        if (!preserveStateOnUrlChange) {
+          dispatch({ type: "RESET", items: [] });
+          setContToken(void 0);
+          setHasMore(false);
+        }
+        if (prevId !== nextId) {
+          anchorRVRef.current = void 0;
+          haveAnchorRef.current = false;
+        }
+        if (enabledRef.current && prevId !== nextId) {
+          reconnect();
+        }
+      },
+      [clearErrorSafe, preserveStateOnUrlChange, reconnect]
+    );
+    const total = state.order.length;
+    const continueToken = contToken;
+    K.useEffect(() => {
+      onMessageRef.current = (ev) => {
+        let frame;
+        try {
+          frame = JSON.parse(String(ev.data));
+        } catch {
+          return;
+        }
+        if (!frame) return;
+        if (frame.type === "INITIAL") {
+          dispatch({ type: "RESET", items: frame.items });
+          setContToken(frame.continue);
+          setHasMore(Boolean(frame.continue));
+          setErrorSafe(void 0);
+          fetchingRef.current = false;
+          suppressErrorsRef.current = false;
+          const snapshotRV = frame.resourceVersion || getMaxRV$1(frame.items);
+          if (snapshotRV) {
+            anchorRVRef.current = snapshotRV;
+            haveAnchorRef.current = true;
+          }
+          return;
+        }
+        if (frame.type === "PAGE") {
+          dispatch({ type: "APPEND_PAGE", items: frame.items });
+          setContToken(frame.continue);
+          setHasMore(Boolean(frame.continue));
+          fetchingRef.current = false;
+          const batchRV = getMaxRV$1(frame.items);
+          if (batchRV && (!anchorRVRef.current || compareRV$1(batchRV, anchorRVRef.current) > 0)) {
+            anchorRVRef.current = batchRV;
+          }
+          return;
+        }
+        if (frame.type === "PAGE_ERROR") {
+          setErrorSafe(frame.error || "Failed to load next page");
+          fetchingRef.current = false;
+          return;
+        }
+        if (frame.type === "ADDED" || frame.type === "MODIFIED" || frame.type === "DELETED") {
+          const rv = itemRV(frame.item);
+          if (rv && (!anchorRVRef.current || compareRV$1(rv, anchorRVRef.current) > 0)) {
+            anchorRVRef.current = rv;
+          }
+        }
+        if (!pausedRef.current) {
+          if (frame.type === "ADDED" || frame.type === "MODIFIED") {
+            dispatch({ type: "UPSERT", item: frame.item });
+          }
+          if (!ignoreRemoveRef.current && frame.type === "DELETED") {
+            dispatch({ type: "REMOVE", key: eventKey$1(frame.item) });
+          }
+        }
+      };
+    }, [setErrorSafe]);
+    K.useEffect(() => {
+      if (startedRef.current) return void 0;
+      startedRef.current = true;
+      mountedRef.current = true;
+      if (isEnabled) {
+        connect();
+      } else {
+        setStatusSafe("closed");
+      }
+      return () => {
+        mountedRef.current = false;
+        startedRef.current = false;
+        if (reconnectTimerRef.current) {
+          window.clearTimeout(reconnectTimerRef.current);
+          reconnectTimerRef.current = null;
+        }
+        closeWS();
+        wsRef.current = null;
+        connectingRef.current = false;
+      };
+    }, []);
+    K.useEffect(() => {
+      if (wsUrl !== urlRef.current) setUrl(wsUrl);
+    }, [wsUrl, setUrl]);
+    K.useEffect(() => {
+      if (resIdRef.current !== resId) {
+        clearErrorSafe();
+        suppressErrorsRef.current = true;
+        anchorRVRef.current = void 0;
+        haveAnchorRef.current = false;
+        resIdRef.current = resId;
+        queryRef.current = query;
+        if (enabledRef.current) reconnect();
+      }
+    }, [resId, query, reconnect, clearErrorSafe]);
+    const pageSizeRef = K.useRef(pageSize);
+    K.useEffect(() => {
+      pageSizeRef.current = pageSize;
+    }, [pageSize]);
+    const sendScroll = K.useCallback(() => {
+      if (!enabledRef.current) return;
+      const token = contToken;
+      if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) return;
+      if (!token || fetchingRef.current) return;
+      fetchingRef.current = true;
+      const msg = { type: "SCROLL", continue: token, limit: pageSizeRef.current };
+      wsRef.current.send(JSON.stringify(msg));
+    }, [contToken]);
+    const drainAll = K.useCallback(
+      async (opts) => {
+        if (!enabledRef.current) return 0;
+        const maxPages = opts?.maxPages ?? 999;
+        const maxItems = opts?.maxItems ?? Number.POSITIVE_INFINITY;
+        let pages = 0;
+        let added = 0;
+        const awaitOnce = () => new Promise((resolve) => {
+          const handler = (ev) => {
+            try {
+              const f = JSON.parse(String(ev.data));
+              if (f.type === "PAGE") {
+                const newCount = (f.items || []).reduce((acc, it) => {
+                  const k = eventKey$1(it);
+                  return state.byKey[k] ? acc : acc + 1;
+                }, 0);
+                added += newCount;
+                const ws2 = wsRef.current;
+                if (!ws2) {
+                  resolve("STOP");
+                  return;
+                }
+                resolve("PAGE");
+              }
+            } catch {
+            }
+          };
+          const ws = wsRef.current;
+          if (!ws) {
+            resolve("STOP");
+            return;
+          }
+          const stopCheck = () => {
+            if (!hasMore || !contToken) {
+              resolve("STOP");
+            }
+          };
+          ws.addEventListener("message", handler, { once: true });
+          setTimeout(stopCheck, 0);
         });
-        const data = JSON.parse(JSON.stringify(response.data));
-        if (data.metadata?.resourceVersion) {
-          delete data.metadata.resourceVersion;
+        while (pages < maxPages && hasMore && contToken && wsRef.current?.readyState === WebSocket.OPEN) {
+          if (added >= maxItems) break;
+          if (!fetchingRef.current) sendScroll();
+          const r = await awaitOnce();
+          if (r === "STOP") break;
+          pages += 1;
         }
-        return data;
+        return added;
       },
-      refetchInterval: refetchInterval !== void 0 ? refetchInterval : 5e3,
-      enabled: isEnabled
-    });
+      [contToken, hasMore, sendScroll, state.byKey]
+    );
+    K.useEffect(() => {
+      if (!autoDrain) return;
+      if (!enabledRef.current) return;
+      if (status === "open" && haveAnchorRef.current) {
+        drainAll().catch(() => {
+        });
+      }
+    }, [autoDrain, drainAll, status]);
+    return {
+      state,
+      total,
+      hasMore,
+      continueToken,
+      status,
+      lastError,
+      setPaused: setIsPaused,
+      setIgnoreRemove: setIsRemoveIgnored,
+      sendScroll,
+      drainAll,
+      reconnect,
+      setUrl,
+      setQuery
+    };
+  };
+
+  const useInfiniteSentinel = (sentinelRef, hasMore, onNeedMore) => {
+    K.useEffect(() => {
+      const el = sentinelRef.current;
+      if (!el) return void 0;
+      const io = new IntersectionObserver((entries) => {
+        const visible = entries.some((e) => e.isIntersecting);
+        if (visible && hasMore) onNeedMore();
+      });
+      io.observe(el);
+      return () => io.disconnect();
+    }, [sentinelRef, hasMore, onNeedMore]);
   };
 
   const prepareTemplate = ({
@@ -8380,7 +8861,7 @@
     replaceValues,
     idToCompare
   }) => {
-    const foundData = data.find((el) => el.id === idToCompare);
+    const foundData = data.find((el) => el?.id === idToCompare);
     if (!foundData) {
       return void 0;
     }
@@ -8479,23 +8960,37 @@
     return /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$v.HeightDiv, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CollapsibleBreadcrumb, { items: data.breadcrumbItems }) });
   };
   const ManageableBreadcrumbsWithDataProvider = ({
-    uri,
-    refetchInterval,
+    wsUrl,
+    apiGroup,
+    apiVersion,
+    plural,
     isEnabled,
     replaceValues,
     pathname,
     idToCompare
   }) => {
-    const {
-      data: rawData,
-      isError: rawDataError,
-      isLoading: rawDataLoading
-    } = useDirectUnknownResource({
-      uri,
-      refetchInterval,
-      queryKey: ["breadcrumb", uri],
+    const { state, status, lastError } = useListWatch({
+      wsUrl,
+      paused: false,
+      ignoreRemove: false,
+      autoDrain: true,
+      preserveStateOnUrlChange: true,
+      query: {
+        apiVersion,
+        apiGroup,
+        plural
+      },
       isEnabled
     });
+    const rawDataLoading = status === "connecting";
+    const rawDataError = status === "closed" && lastError ? lastError : void 0;
+    const rawData = {
+      items: state.order.map((key) => {
+        const res = state.byKey[key];
+        return res;
+      })
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    };
     if (rawDataError) {
       return null;
     }
@@ -8681,8 +9176,10 @@
     );
   };
   const ManageableSidebarWithDataProvider = ({
-    uri,
-    refetchInterval,
+    wsUrl,
+    apiGroup,
+    apiVersion,
+    plural,
     isEnabled,
     replaceValues,
     pathname,
@@ -8691,16 +9188,28 @@
     hidden,
     noMarginTop
   }) => {
-    const {
-      data: rawData,
-      isError: rawDataError,
-      isLoading: rawDataLoading
-    } = useDirectUnknownResource({
-      uri,
-      refetchInterval,
-      queryKey: ["sidebar", uri],
+    const { state, status, lastError } = useListWatch({
+      wsUrl,
+      paused: false,
+      ignoreRemove: false,
+      autoDrain: true,
+      preserveStateOnUrlChange: true,
+      query: {
+        apiVersion,
+        apiGroup,
+        plural
+      },
       isEnabled
     });
+    const rawDataLoading = status === "connecting";
+    const rawDataError = status === "closed" && lastError ? lastError : void 0;
+    const rawData = {
+      items: state.order.map((key) => {
+        const res = state.byKey[key];
+        return res;
+      })
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    };
     if (rawDataError) {
       return null;
     }
@@ -33499,6 +34008,33 @@
     });
   };
 
+  const getDirectUnknownResource = async ({ uri }) => {
+    return axios.get(uri);
+  };
+
+  const useDirectUnknownResource = ({
+    uri,
+    queryKey,
+    refetchInterval,
+    isEnabled
+  }) => {
+    return reactQuery.useQuery({
+      queryKey,
+      queryFn: async () => {
+        const response = await getDirectUnknownResource({
+          uri
+        });
+        const data = JSON.parse(JSON.stringify(response.data));
+        if (data.metadata?.resourceVersion) {
+          delete data.metadata.resourceVersion;
+        }
+        return data;
+      },
+      refetchInterval: refetchInterval !== void 0 ? refetchInterval : 5e3,
+      enabled: isEnabled
+    });
+  };
+
   const getBackLinkToTable = ({ fullPath }) => {
     return encodeURIComponent(fullPath);
   };
@@ -49640,22 +50176,6 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
     }
     return `/${baseprefix}/${clusterName}/${namespace}/forms/builtin/${apiVersion}/${typeName}?backlink=${window.location.pathname}`;
   };
-  const getListPath = ({
-    clusterName,
-    namespace,
-    type,
-    typeName,
-    apiGroup,
-    apiVersion
-  }) => {
-    if (type === "crd") {
-      return `/api/clusters/${clusterName}/k8s/apis/${apiGroup}/${apiVersion}${namespace ? `/namespaces/${namespace}` : ""}/${typeName}`;
-    }
-    if (type === "nonCrd") {
-      return `/api/clusters/${clusterName}/k8s/apis/${apiGroup}/${apiVersion}${namespace ? `/namespaces/${namespace}` : ""}/${typeName}`;
-    }
-    return `/api/clusters/${clusterName}/k8s/api/v1${namespace ? `/namespaces/${namespace}` : ""}/${typeName}`;
-  };
 
   const CustomCard$4 = styled(antd.Card)`
   position: relative;
@@ -49788,20 +50308,28 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
       apiVersion,
       baseprefix
     });
-    const listUrl = addedMode && type !== "direct" ? getListPath({
-      clusterName,
-      namespace,
-      type,
-      typeName,
-      apiGroup,
-      apiVersion
-    }) : void 0;
-    const { data: k8sList, error: k8sListError } = useDirectUnknownResource({
-      uri: listUrl || "",
-      queryKey: [listUrl || ""],
-      refetchInterval: false,
-      isEnabled: addedMode && listUrl !== void 0
+    const { state, status, lastError } = useListWatch({
+      wsUrl: `/api/clusters/${clusterName}/openapi-bff-ws/listThenWatch/listWatchWs`,
+      paused: false,
+      ignoreRemove: false,
+      autoDrain: true,
+      preserveStateOnUrlChange: true,
+      query: {
+        namespace,
+        apiVersion: apiVersion || "",
+        apiGroup,
+        plural: type
+      },
+      isEnabled: Boolean(apiVersion && addedMode && type !== "direct")
     });
+    const k8sListError = status === "closed" && lastError ? lastError : void 0;
+    const k8sList = {
+      items: state.order.map((key) => {
+        const res = state.byKey[key];
+        return res;
+      })
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    };
     if (addedMode && (k8sListError || type === "direct") && !showZeroResources) {
       return null;
     }
@@ -49930,16 +50458,30 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
     const [filteredAndSortedData, setFilterAndSortedData] = K.useState([]);
     const [uniqueTags, setUniqueTags] = K.useState([]);
     const [selectedTags, setSelectedTags] = K.useState([]);
-    const {
-      data: marketplacePanels,
-      isLoading,
-      error
-    } = useDirectUnknownResource({
-      uri: `/api/clusters/${clusterName}/k8s/apis/${baseApiGroup}/${baseApiVersion}/${mpResourceName}/`,
-      refetchInterval: 5e3,
-      queryKey: ["marketplacePanels", clusterName || "no-cluster"],
+    const { state, status, lastError } = useListWatch({
+      wsUrl: `/api/clusters/${clusterName}/openapi-bff-ws/listThenWatch/listWatchWs`,
+      paused: false,
+      ignoreRemove: false,
+      autoDrain: true,
+      preserveStateOnUrlChange: true,
+      query: {
+        apiVersion: baseApiVersion,
+        apiGroup: baseApiGroup,
+        plural: mpResourceName
+      },
       isEnabled: clusterName !== void 0
     });
+    const isLoading = status === "connecting";
+    const error = status === "closed" && lastError ? lastError : void 0;
+    const marketplacePanels = K.useMemo(() => {
+      return {
+        items: state.order.map((key) => {
+          const res = state.byKey[key];
+          return res;
+        })
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      };
+    }, [state]);
     const createPermission = usePermissions({
       group: baseApiGroup,
       resource: mpResourceName,
@@ -50238,26 +50780,52 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
     children
   }) => {
     const navigate = reactRouterDom.useNavigate();
-    const {
-      data: marketplacePanels,
-      isLoading: marketplaceIsLoading
-      // error: marketplaceError,
-    } = useDirectUnknownResource({
-      uri: `/api/clusters/${clusterName}/k8s/apis/${baseApiGroup}/${baseApiVersion}/${mpResourceName}/`,
-      refetchInterval: 5e3,
-      queryKey: ["marketplacePanels", clusterName || "no-cluster"],
+    const { state, status } = useListWatch({
+      wsUrl: `/api/clusters/${clusterName}/openapi-bff-ws/listThenWatch/listWatchWs`,
+      paused: false,
+      ignoreRemove: false,
+      autoDrain: true,
+      preserveStateOnUrlChange: true,
+      query: {
+        apiVersion: baseApiVersion,
+        apiGroup: baseApiGroup,
+        plural: mpResourceName
+      },
       isEnabled: clusterName !== void 0
     });
+    const marketplaceIsLoading = status === "connecting";
+    const marketplacePanels = {
+      items: state.order.map((key) => {
+        const res = state.byKey[key];
+        return res;
+      })
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    };
     const {
-      data: project,
-      isLoading,
-      error
-    } = useDirectUnknownResource({
-      uri: `/api/clusters/${clusterName}/k8s/apis/${baseProjectApiGroup}/${baseProjectVersion}/${projectResourceName}/${namespace}`,
-      refetchInterval: 5e3,
-      queryKey: ["projects", clusterName || "no-cluster"],
+      state: stateProject,
+      status: statusProject,
+      lastError: lastErrorProject
+    } = useListWatch({
+      wsUrl: `/api/clusters/${clusterName}/openapi-bff-ws/listThenWatch/listWatchWs`,
+      paused: false,
+      ignoreRemove: false,
+      autoDrain: true,
+      preserveStateOnUrlChange: true,
+      query: {
+        apiVersion: baseProjectVersion,
+        apiGroup: baseProjectApiGroup,
+        plural: projectResourceName,
+        fieldSelector: `metadata.name=${namespace}`
+      },
       isEnabled: clusterName !== void 0
     });
+    const isLoading = statusProject === "connecting";
+    const error = statusProject === "closed" && lastErrorProject ? lastErrorProject : void 0;
+    const projectArr = stateProject.order.map((key) => {
+      const res = stateProject.byKey[key];
+      return res;
+    });
+    const project = projectArr.length > 0 ? projectArr[0] : void 0;
     const [isDeleteModalOpen, setIsDeleteModalOpen] = K.useState(false);
     const updatePermission = usePermissions({
       group: baseProjectApiGroup,
@@ -53016,6 +53584,8 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
   exports.useCrdResourceSingle = useCrdResourceSingle;
   exports.useCrdResources = useCrdResources;
   exports.useDirectUnknownResource = useDirectUnknownResource;
+  exports.useInfiniteSentinel = useInfiniteSentinel;
+  exports.useListWatch = useListWatch;
   exports.usePermissions = usePermissions;
 
   Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });