@prorobotech/openapi-k8s-toolkit 1.2.0-alpha.11 → 1.2.0-alpha.13

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('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';
+  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'), require('novnc-next')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'styled-components', 'react', 'antd', '@ant-design/icons', 'react-router-dom', '@tanstack/react-query', 'novnc-next'], 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, global.NoVNC));
+})(this, (function (exports, styled, K, antd, icons, reactRouterDom, reactQuery, RFB) { 'use strict';
 
   const Spacer$1 = styled.div`
   height: ${({ $space, $spaceMob, $samespace }) => {
@@ -1573,7 +1573,7 @@
     justify-content: center;
   }
 `;
-  const Styled$C = {
+  const Styled$E = {
     CustomTreeProvider
   };
 
@@ -1638,7 +1638,7 @@
     });
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(Search$1, { style: { marginBottom: 8 }, placeholder: "Search", onChange }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$C.CustomTreeProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$E.CustomTreeProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         antd.Tree,
         {
           treeData: loop(treeData),
@@ -8196,14 +8196,14 @@
   display: ${({ $displayFlex }) => $displayFlex ? "flex" : "block"};
   flex-flow: ${({ $flexFlow }) => $flexFlow};
 `;
-  const Styled$B = {
+  const Styled$D = {
     ContentContainer
   };
 
   const ContentCard$1 = ({ children, flexGrow, displayFlex, flexFlow, maxHeight }) => {
     const { token } = antd.theme.useToken();
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Styled$B.ContentContainer,
+      Styled$D.ContentContainer,
       {
         $flexGrow: flexGrow,
         $bgColor: token.colorBgContainer,
@@ -8264,13 +8264,13 @@
     padding-inline: 8px;
   }
 `;
-  const Styled$A = {
+  const Styled$C = {
     UncontrolledSelect: UncontrolledSelect$1
   };
 
   const UncontrolledSelect = (props) => {
     const { isCursorPointer } = props;
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$A.UncontrolledSelect, { ...props, $isCursorPointer: isCursorPointer });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$C.UncontrolledSelect, { ...props, $isCursorPointer: isCursorPointer });
   };
 
   const CustomSelect$5 = styled(antd.Select)`
@@ -8318,13 +8318,13 @@
     margin-block: 0 !important;
   }
 `;
-  const Styled$z = {
+  const Styled$B = {
     CustomSelect: CustomSelect$5
   };
 
   const CustomSelect$4 = (props) => {
     const { paddingContainerEnd, ...rest } = props;
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$z.CustomSelect, { $paddingContainerEnd: paddingContainerEnd, ...rest });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$B.CustomSelect, { $paddingContainerEnd: paddingContainerEnd, ...rest });
   };
 
   const CursorPointerTag = styled(antd.Tag)`
@@ -8471,7 +8471,7 @@
   height: min-content;
   margin-right: 4px;
 `;
-  const Styled$y = {
+  const Styled$A = {
     Abbr: Abbr$2
   };
 
@@ -8511,7 +8511,7 @@
       baseFactoriesMapping
     });
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(antd.Flex, { align: "center", gap: 8, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$y.Abbr, { $bgColor: bgColor, children: abbr }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$A.Abbr, { $bgColor: bgColor, children: abbr }),
       resourceLink ? /* @__PURE__ */ jsxRuntimeExports.jsx(
         antd.Typography.Link,
         {
@@ -8550,7 +8550,7 @@
     flex-wrap: nowrap !important;
   }
 `;
-  const Styled$x = {
+  const Styled$z = {
     PositionRelativeContainer,
     FullWidthContainer,
     NoWrapContainer
@@ -8593,9 +8593,9 @@
       };
       return [firstItem, ellipsisItem, lastItem];
     };
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(Styled$x.PositionRelativeContainer, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$x.FullWidthContainer, { ref: containerRef, children: /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Breadcrumb, { separator: ">", items: renderItems() }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$x.NoWrapContainer, { ref: breadcrumbRef, children: /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Breadcrumb, { separator: ">", items, style: { display: "flex", flexWrap: "nowrap" } }) })
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(Styled$z.PositionRelativeContainer, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$z.FullWidthContainer, { ref: containerRef, children: /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Breadcrumb, { separator: ">", items: renderItems() }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$z.NoWrapContainer, { ref: breadcrumbRef, children: /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Breadcrumb, { separator: ">", items, style: { display: "flex", flexWrap: "nowrap" } }) })
     ] });
   };
 
@@ -8603,12 +8603,12 @@
   min-height: 22px;
   width: 100%;
 `;
-  const Styled$w = {
+  const Styled$y = {
     HeightDiv: HeightDiv$1
   };
 
   const ManageableBreadcrumbs = ({ data }) => {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$w.HeightDiv, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CollapsibleBreadcrumb, { items: data.breadcrumbItems }) });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$y.HeightDiv, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CollapsibleBreadcrumb, { items: data.breadcrumbItems }) });
   };
 
   const getKinds = async ({ cluster }) => {
@@ -9594,7 +9594,7 @@
   min-height: 22px;
   width: 100%;
 `;
-  const Styled$v = {
+  const Styled$x = {
     HeightDiv
   };
 
@@ -9623,7 +9623,7 @@
       return null;
     }
     if (rawDataLoading) {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$v.HeightDiv, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Spin, {}) });
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$x.HeightDiv, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Spin, {}) });
     }
     if (!rawData) {
       return null;
@@ -9638,7 +9638,7 @@
       idToCompare
     });
     if (!result) {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$v.HeightDiv, {});
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$x.HeightDiv, {});
     }
     return /* @__PURE__ */ jsxRuntimeExports.jsx(ManageableBreadcrumbs, { data: result }, JSON.stringify(idToCompare));
   };
@@ -9666,7 +9666,7 @@
     margin: 0 !important;
   }
 `;
-  const Styled$u = {
+  const Styled$w = {
     CustomMenu
   };
 
@@ -9693,7 +9693,7 @@
       setSelectedKeys(data.selectedKeys);
     }, [data.selectedKeys]);
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Styled$u.CustomMenu,
+      Styled$w.CustomMenu,
       {
         selectedKeys,
         onSelect: () => {
@@ -33881,7 +33881,7 @@
   white-space: nowrap;
   text-overflow: ellipsis;
 `;
-  const Styled$t = {
+  const Styled$v = {
     ShortenedText
   };
 
@@ -33890,7 +33890,7 @@
       const trimmedText = text.substring(0, trimLength);
       return /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Tooltip, { title: text, placement: "top", children: trimmedText });
     }
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Tooltip, { title: text, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$t.ShortenedText, { $maxWidth: maxWidth, children: text }) });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Tooltip, { title: text, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$v.ShortenedText, { $maxWidth: maxWidth, children: text }) });
   };
 
   const FilterDropdown = ({
@@ -43043,7 +43043,7 @@
   font-size: 16px;
   line-height: 24px;
 `;
-  const Styled$s = {
+  const Styled$u = {
     BorderRadiusContainer: BorderRadiusContainer$1,
     ControlsRowContainer: ControlsRowContainer$1,
     BigText: BigText$1
@@ -43167,7 +43167,7 @@
     };
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
       contextHolder,
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$s.BorderRadiusContainer, { $designNewLayoutHeight: designNewLayoutHeight, $colorBorder: token.colorBorder, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$u.BorderRadiusContainer, { $designNewLayoutHeight: designNewLayoutHeight, $colorBorder: token.colorBorder, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         Ft$1,
         {
           defaultLanguage: "yaml",
@@ -43186,7 +43186,7 @@
           }
         }
       ) }),
-      !readOnly && /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$s.ControlsRowContainer, { $bgColor: token.colorPrimaryBg, $designNewLayout: designNewLayout, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(antd.Flex, { gap: designNewLayout ? 10 : 16, align: "center", children: [
+      !readOnly && /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$u.ControlsRowContainer, { $bgColor: token.colorPrimaryBg, $designNewLayout: designNewLayout, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(antd.Flex, { gap: designNewLayout ? 10 : 16, align: "center", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Button, { type: "primary", onClick: onSubmit, loading: isLoading, children: "Submit" }),
         backlink && /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Button, { onClick: () => navigate(backlink), children: "Cancel" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Button, { onClick: handleReload, children: "Reload" })
@@ -43197,7 +43197,7 @@
           open: !!error,
           onOk: () => setError(void 0),
           onCancel: () => setError(void 0),
-          title: /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Typography.Text, { type: "danger", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$s.BigText, { children: "Error!" }) }),
+          title: /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Typography.Text, { type: "danger", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$u.BigText, { children: "Error!" }) }),
           cancelButtonProps: { style: { display: "none" } },
           children: [
             "An error has occurred: ",
@@ -43313,7 +43313,7 @@
   const VisibilityContainer$2 = styled.div`
   display: ${({ $hidden }) => $hidden ? "none" : "block"};
 `;
-  const Styled$r = {
+  const Styled$t = {
     VisibilityContainer: VisibilityContainer$2
   };
 
@@ -43336,7 +43336,7 @@
     if (isMultiqueryLoading) {
       return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Loading multiquery" });
     }
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$r.VisibilityContainer, { $hidden: valuePrepared === "~undefined-value~", children });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$t.VisibilityContainer, { $hidden: valuePrepared === "~undefined-value~", children });
   };
 
   const unknownToString = (value) => {
@@ -43575,7 +43575,7 @@
     return dispatch;
   };
 
-  const Container$2 = styled.div`
+  const Container$3 = styled.div`
   display: flex;
   flex-direction: column;
   gap: ${({ $designNewLayout }) => $designNewLayout ? "4px" : "8px"};
@@ -43601,8 +43601,8 @@
   display: ${({ $isOpen }) => $isOpen ? "block" : "none"};
   padding: ${({ $designNewLayout }) => $designNewLayout ? "0 0 0 6px" : "4px"};
 `;
-  const Styled$q = {
-    Container: Container$2,
+  const Styled$s = {
+    Container: Container$3,
     TitleBar,
     Content: Content$1
   };
@@ -43628,14 +43628,14 @@
       }
     };
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      Styled$q.Container,
+      Styled$s.Container,
       {
         $designNewLayout: designNewLayout,
         $borderColor: token.colorBorder,
         $bgColor: token.colorBgContainer,
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs(antd.Flex, { justify: "space-between", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(Styled$q.TitleBar, { onClick: () => toggleCollapse(), children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(Styled$s.TitleBar, { onClick: () => toggleCollapse(), children: [
               !designNewLayout && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: isOpen ? /* @__PURE__ */ jsxRuntimeExports.jsx(icons.CaretDownOutlined, { size: 14 }) : /* @__PURE__ */ jsxRuntimeExports.jsx(icons.CaretRightOutlined, { size: 14 }) }),
               /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: title }),
               designNewLayout && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: isOpen ? /* @__PURE__ */ jsxRuntimeExports.jsx(DownIcon, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(UpIcon, {}) })
@@ -43646,7 +43646,7 @@
               persistedCheckbox
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$q.Content, { $isOpen: isOpen, $designNewLayout: designNewLayout, children })
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$s.Content, { $isOpen: isOpen, $designNewLayout: designNewLayout, children })
         ]
       }
     );
@@ -43680,13 +43680,13 @@
   const Content = styled.div`
   padding: ${({ $designNewLayout }) => $designNewLayout ? "0 0 0 6px" : "4px"};
 `;
-  const Styled$p = {
+  const Styled$r = {
     Content
   };
 
   const ArrayInsideContainer = ({ children }) => {
     const designNewLayout = useDesignNewLayout();
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$p.Content, { $designNewLayout: designNewLayout, children });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$r.Content, { $designNewLayout: designNewLayout, children });
   };
 
   const includesPath = (haystack, needle) => haystack.some((h) => h.length === needle.length && h.every((seg, i) => seg === String(needle[i])));
@@ -44239,7 +44239,7 @@
   const ResetedFormList$3 = styled(antd.Form.List)`
   margin-bottom: 8px;
 `;
-  const Styled$o = {
+  const Styled$q = {
     ResetedFormList: ResetedFormList$3
   };
 
@@ -44324,7 +44324,7 @@
               /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Col, { span: cols[3], children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", {}) })
             ] }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(Spacer$1, { $space: 10, $samespace: true }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$o.ResetedFormList, { name: "taints", children: (fields, { add, remove }) => /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$q.ResetedFormList, { name: "taints", children: (fields, { add, remove }) => /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
               fields.map(({ key, name, ...restField }) => /* @__PURE__ */ jsxRuntimeExports.jsxs(antd.Row, { gutter: [16, 16], children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Col, { span: cols[0], children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                   ResetedFormItem$1,
@@ -44564,7 +44564,7 @@
   const ResetedFormList$2 = styled(antd.Form.List)`
   margin-bottom: 8px;
 `;
-  const Styled$n = {
+  const Styled$p = {
     ResetedFormList: ResetedFormList$2
   };
 
@@ -44659,7 +44659,7 @@
               /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Col, { span: cols[4], children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", {}) })
             ] }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(Spacer$1, { $space: 10, $samespace: true }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$n.ResetedFormList, { name: "tolerations", children: (fields, { add, remove }) => /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$p.ResetedFormList, { name: "tolerations", children: (fields, { add, remove }) => /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
               fields.map(({ key, name, ...restField }) => /* @__PURE__ */ jsxRuntimeExports.jsxs(antd.Row, { gutter: [16, 16], children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Col, { span: cols[0], children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                   ResetedFormItem$1,
@@ -44941,7 +44941,7 @@
   const ResetedFormList$1 = styled(antd.Form.List)`
   margin-bottom: 8px;
 `;
-  const Styled$m = {
+  const Styled$o = {
     ResetedFormList: ResetedFormList$1
   };
 
@@ -45031,7 +45031,7 @@
               /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Col, { span: cols[2], children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", {}) })
             ] }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(Spacer$1, { $space: 10, $samespace: true }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$m.ResetedFormList, { name: "annotations", children: (fields, { add, remove }) => /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$o.ResetedFormList, { name: "annotations", children: (fields, { add, remove }) => /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
               fields.map(({ key, name, ...restField }) => /* @__PURE__ */ jsxRuntimeExports.jsxs(antd.Row, { gutter: [16, 16], children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Col, { span: cols[0], children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                   ResetedFormItem$1,
@@ -46180,7 +46180,7 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
     margin-bottom: 0 !important;
   }
 `;
-  const Styled$l = {
+  const Styled$n = {
     NoSelect,
     DisabledInput,
     NotificationOverrides
@@ -46246,10 +46246,10 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
       }
     };
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: containerStyle, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$l.NotificationOverrides, {}),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$n.NotificationOverrides, {}),
       /* @__PURE__ */ jsxRuntimeExports.jsxs(antd.Flex, { gap: 8, ...flexProps, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$l.NoSelect, { style: inputContainerStyle, children: niceLooking ? /* @__PURE__ */ jsxRuntimeExports.jsx(te, { theme, hidden, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Styled$l.DisabledInput,
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$n.NoSelect, { style: inputContainerStyle, children: niceLooking ? /* @__PURE__ */ jsxRuntimeExports.jsx(te, { theme, hidden, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Styled$n.DisabledInput,
           {
             $hidden: hidden,
             ref: inputRef,
@@ -46264,7 +46264,7 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
             value: decodedText
           }
         ) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Styled$l.DisabledInput,
+          Styled$n.DisabledInput,
           {
             $hidden: hidden,
             ref: inputRef,
@@ -46298,7 +46298,7 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
   letter-spacing: 0.02em;
   box-sizing: content-box;
 `;
-  const Styled$k = {
+  const Styled$m = {
     RoundSpan
   };
 
@@ -46337,7 +46337,7 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
       multiQueryData
     }) : getUppercase(parsedValue);
     const bgColor = hslFromString(parsedValue, theme);
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$k.RoundSpan, { $bgColor: bgColor, style, children: parsedAbbreviation });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$m.RoundSpan, { $bgColor: bgColor, style, children: parsedAbbreviation });
   };
 
   const serializeLabelsWithNoEncoding = (input) => {
@@ -47015,6 +47015,50 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
     ] });
   };
 
+  const VMVNC$1 = ({
+    data,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    children
+  }) => {
+    const { data: multiQueryData, isLoading: isMultiqueryLoading } = useMultiQuery();
+    const {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      id,
+      cluster,
+      namespace,
+      vmName,
+      forcedFullWsPath,
+      substractHeight,
+      ...props
+    } = data;
+    const partsOfUrl = usePartsOfUrl();
+    const replaceValues = partsOfUrl.partsOfUrl.reduce((acc, value, index) => {
+      acc[index.toString()] = value;
+      return acc;
+    }, {});
+    const clusterPrepared = cluster ? parseAll({ text: cluster, replaceValues, multiQueryData }) : void 0;
+    const namespacePrepared = namespace ? parseAll({ text: namespace, replaceValues, multiQueryData }) : void 0;
+    const vmNamePrepared = vmName ? parseAll({ text: vmName, replaceValues, multiQueryData }) : void 0;
+    const forcedFullWsPathPrepared = forcedFullWsPath ? parseAll({ text: forcedFullWsPath, replaceValues, multiQueryData }) : void 0;
+    if (isMultiqueryLoading) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Loading multiquery" });
+    }
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        VMVNC,
+        {
+          cluster: clusterPrepared,
+          namespace: namespacePrepared,
+          vmName: vmNamePrepared,
+          forcedFullWsPath: forcedFullWsPathPrepared,
+          substractHeight: substractHeight || 400,
+          ...props
+        }
+      ),
+      children
+    ] });
+  };
+
   const DynamicComponents = {
     DefaultDiv,
     antdText: AntdText,
@@ -47055,7 +47099,8 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
     Events: Events$1,
     OwnerRefs,
     Toggler,
-    TogglerSegmented
+    TogglerSegmented,
+    VMVNC: VMVNC$1
   };
 
   const prepareUrlsToFetchForDynamicRenderer = ({
@@ -48484,7 +48529,7 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
     border-radius: 8px;
   }
 `;
-  const Styled$j = {
+  const Styled$l = {
     BorderRadiusContainer
   };
 
@@ -48531,7 +48576,7 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
         }
       }
     }, [yamlData, editorUri]);
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$j.BorderRadiusContainer, { $colorBorder: token.colorBorder, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$l.BorderRadiusContainer, { $colorBorder: token.colorBorder, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       Ft$1,
       {
         language: "yaml",
@@ -49288,7 +49333,7 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
   const MarginBottom = styled.div`
   margin-bottom: 8px;
 `;
-  const Styled$i = {
+  const Styled$k = {
     MarginBottom
   };
 
@@ -49354,7 +49399,7 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
         },
         arrKey !== void 0 ? arrKey : Array.isArray(name) ? name.slice(-1)[0] : name
       ),
-      isBase64 && /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$i.MarginBottom, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      isBase64 && /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$k.MarginBottom, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         antd.Input.TextArea,
         {
           placeholder: getStringByName(name),
@@ -49381,7 +49426,7 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
   cursor: pointer;
   padding-top: 11px;
 `;
-  const Styled$h = {
+  const Styled$j = {
     SwitchAndCrossContainer,
     CrossContainer
   };
@@ -49406,7 +49451,7 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
           onRemoveByMinus && /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Button, { size: "small", type: "text", onClick: onRemoveByMinus, children: /* @__PURE__ */ jsxRuntimeExports.jsx(MinusIcon, {}) })
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(Styled$h.SwitchAndCrossContainer, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Styled$j.SwitchAndCrossContainer, { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           ResetedFormItem$1,
           {
@@ -49416,7 +49461,7 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
           arrKey !== void 0 ? arrKey : Array.isArray(name) ? name.slice(-1)[0] : name
         ),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Styled$h.CrossContainer,
+          Styled$j.CrossContainer,
           {
             onClick: () => {
               if (makeValueUndefined) {
@@ -49604,7 +49649,7 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
     ] });
   };
 
-  const Container$1 = styled.div`
+  const Container$2 = styled.div`
   height: 140px;
   border: 1px solid ${({ $colorBorder }) => $colorBorder};
   border-radius: 8px;
@@ -49615,8 +49660,8 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
     border-radius: 8px;
   }
 `;
-  const Styled$g = {
-    Container: Container$1
+  const Styled$i = {
+    Container: Container$2
   };
 
   const FormInlineYamlEditor = ({ path, persistedControls, externalValue }) => {
@@ -49669,7 +49714,7 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
         }
       }
     }, [yamlText, modelUri]);
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$g.Container, { $colorBorder: token.colorBorder, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$i.Container, { $colorBorder: token.colorBorder, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       Ft$1,
       {
         language: "yaml",
@@ -49808,7 +49853,7 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
     });
   };
 
-  const Container = styled.div`
+  const Container$1 = styled.div`
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: ${({ $designNewLayout }) => $designNewLayout ? "36px" : "8px"};
@@ -49836,9 +49881,9 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
   font-size: 16px;
   line-height: 24px;
 `;
-  const Styled$f = {
+  const Styled$h = {
     ResetedFormList,
-    Container,
+    Container: Container$1,
     OverflowContainer: OverflowContainer$1,
     ControlsRowContainer,
     DebugContainer,
@@ -50118,7 +50163,7 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
           }
         ),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Styled$f.ResetedFormList,
+          Styled$h.ResetedFormList,
           {
             name: arrName || name,
             rules: !forceNonRequired && required?.includes(getStringByName(name)) ? [
@@ -51559,8 +51604,8 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
       setPersistedKeys([...persistedKeys.filter((arr) => JSON.stringify(arr) !== JSON.stringify(value))]);
     };
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(Styled$f.Container, { $designNewLayout: designNewLayout, $designNewLayoutHeight: designNewLayoutHeight, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$f.OverflowContainer, { ref: overflowRef, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Styled$h.Container, { $designNewLayout: designNewLayout, $designNewLayoutHeight: designNewLayoutHeight, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$h.OverflowContainer, { ref: overflowRef, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
           antd.Form,
           {
             form,
@@ -51614,7 +51659,7 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
         ) })
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(FlexGrow, {}),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$f.ControlsRowContainer, { $bgColor: token.colorPrimaryBg, $designNewLayout: designNewLayout, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(antd.Flex, { gap: designNewLayout ? 10 : 16, align: "center", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$h.ControlsRowContainer, { $bgColor: token.colorPrimaryBg, $designNewLayout: designNewLayout, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(antd.Flex, { gap: designNewLayout ? 10 : 16, align: "center", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Button, { type: "primary", onClick: onSubmit, loading: isLoading, children: "Submit" }),
         backlink && /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Button, { onClick: () => navigate(backlink), children: "Cancel" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Button, { onClick: () => setIsDebugModalOpen(true), icon: /* @__PURE__ */ jsxRuntimeExports.jsx(icons.BugOutlined, {}) }),
@@ -51626,7 +51671,7 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
           open: !!error,
           onOk: () => setError(void 0),
           onCancel: () => setError(void 0),
-          title: /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Typography.Text, { type: "danger", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$f.BigText, { children: "Error!" }) }),
+          title: /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Typography.Text, { type: "danger", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$h.BigText, { children: "Error!" }) }),
           cancelButtonProps: { style: { display: "none" } },
           children: [
             "An error has occurred: ",
@@ -51642,7 +51687,7 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
           onCancel: () => setIsDebugModalOpen(false),
           title: "Debug for properties",
           width: "90vw",
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$f.DebugContainer, { $designNewLayoutHeight: designNewLayoutHeight, children: /* @__PURE__ */ jsxRuntimeExports.jsx(K.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Loading..." }), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$h.DebugContainer, { $designNewLayoutHeight: designNewLayoutHeight, children: /* @__PURE__ */ jsxRuntimeExports.jsx(K.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Loading..." }), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             Editor,
             {
               defaultLanguage: "json",
@@ -51697,7 +51742,7 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
         }
         if (data2.result === "error") {
           setIsError(data2.error);
-          console.log(data2.error);
+          console.warn(data2.error);
           fallbackToManualMode();
         } else {
           setPreparedData({
@@ -51740,15 +51785,15 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
         }
       );
     }
+    if (isError) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Alert, { message: isError, type: "error" });
+    }
     if (!preparedData?.properties && !isError) {
       return null;
     }
     if (!preparedData?.properties) {
       return null;
     }
-    if (isError) {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Alert, { message: isError, type: "error" });
-    }
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       BlackholeForm,
       {
@@ -51779,7 +51824,7 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
     );
   };
 
-  const CustomCard$5 = styled(antd.Card)`
+  const CustomCard$6 = styled(antd.Card)`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -51799,12 +51844,12 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
     padding: 8px;
   }
 `;
-  const Styled$e = {
-    CustomCard: CustomCard$5
+  const Styled$g = {
+    CustomCard: CustomCard$6
   };
 
   const AddCard = ({ onAddClick }) => {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$e.CustomCard, { onClick: onAddClick, children: /* @__PURE__ */ jsxRuntimeExports.jsx(icons.PlusOutlined, {}) });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$g.CustomCard, { onClick: onAddClick, children: /* @__PURE__ */ jsxRuntimeExports.jsx(icons.PlusOutlined, {}) });
   };
 
   const byteToHex = [];
@@ -52021,7 +52066,7 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
     return `/${baseprefix}/${cluster}/${namespace}/forms/builtin/${apiVersion}/${plural}?backlink=${window.location.pathname}`;
   };
 
-  const CustomCard$4 = styled(antd.Card)`
+  const CustomCard$5 = styled(antd.Card)`
   position: relative;
   width: 238px;
   overflow-x: auto;
@@ -52092,8 +52137,8 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
   bottom: 6px;
   right: 6px;
 `;
-  const Styled$d = {
-    CustomCard: CustomCard$4,
+  const Styled$f = {
+    CustomCard: CustomCard$5,
     ImageContainer,
     OverflowContainer,
     TitleContainer,
@@ -52164,14 +52209,14 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
       return null;
     }
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Styled$d.CustomCard,
+      Styled$f.CustomCard,
       {
         $isDisabled: disabled,
         $hoverColor: token.colorPrimary,
         onClick: () => disabled ? null : navigate(navigateUrl),
         children: /* @__PURE__ */ jsxRuntimeExports.jsxs(antd.Flex, { vertical: true, style: { width: "100%", height: "100%" }, justify: "spaceBetween", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs(antd.Flex, { justify: "space-between", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$d.ImageContainer, { dangerouslySetInnerHTML: { __html: decodedIcon } }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$f.ImageContainer, { dangerouslySetInnerHTML: { __html: decodedIcon } }),
             isEditMode && /* @__PURE__ */ jsxRuntimeExports.jsx(
               "div",
               {
@@ -52192,8 +52237,8 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
               }
             )
           ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(Styled$d.OverflowContainer, { children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(Styled$d.TitleContainer, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(Styled$f.OverflowContainer, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(Styled$f.TitleContainer, { children: [
               name,
               " ",
               addedMode && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
@@ -52201,10 +52246,10 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
                 k8sList?.items?.length
               ] })
             ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$d.TagsContainer, { children: tags.map((tag) => /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$d.CustomTag, { children: tag }, tag)) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$d.DescriptionContainer, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Typography.Text, { type: "secondary", children: description }) })
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$f.TagsContainer, { children: tags.map((tag) => /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$f.CustomTag, { children: tag }, tag)) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$f.DescriptionContainer, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Typography.Text, { type: "secondary", children: description }) })
           ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$d.EditButtonContainer, { children: isEditMode && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$f.EditButtonContainer, { children: isEditMode && /* @__PURE__ */ jsxRuntimeExports.jsx(
             "div",
             {
               onClick: (e) => {
@@ -52262,7 +52307,7 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
   line-clamp: 1;
   word-break: break-all;
 `;
-  const Styled$c = {
+  const Styled$e = {
     BigValue
   };
 
@@ -52372,7 +52417,7 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
       /* @__PURE__ */ jsxRuntimeExports.jsxs(antd.Flex, { justify: "space-between", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(antd.Flex, { gap: 12, vertical: true, children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Typography.Text, { type: "secondary", children: "Available Products" }) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$c.BigValue, { children: "Marketplace" }) })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$e.BigValue, { children: "Marketplace" }) })
         ] }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(antd.Flex, { gap: 12, vertical: true, children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(SearchTextInput, { uniqueTags, selectedTags, onSelectedTags: setSelectedTags }),
@@ -52578,7 +52623,7 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
   line-clamp: 1;
   word-break: break-all;
 `;
-  const Styled$b = {
+  const Styled$d = {
     ActionMenuPlaceholder};
 
   const ProjectInfoCard = ({
@@ -52657,7 +52702,7 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
               } : void 0,
               onUpdate: updatePermission.data?.status.allowed ? openUpdate : void 0
             }
-          ) : /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$b.ActionMenuPlaceholder, {}) }),
+          ) : /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$d.ActionMenuPlaceholder, {}) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownAccessGroups, { accessGroups })
         ] }) })
       ] }),
@@ -52730,7 +52775,7 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
 
   var addonFitExports = addonFit.exports;
 
-  const CustomCard$3 = styled.div`
+  const CustomCard$4 = styled.div`
   visibility: ${({ $isVisible }) => $isVisible ? "visible" : "hidden"};
   height: calc(100vh - ${({ $substractHeight }) => $substractHeight}px);
 
@@ -52738,15 +52783,15 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
     scrollbar-width: thin;
   }
 `;
-  const FullWidthDiv$3 = styled.div`
+  const FullWidthDiv$4 = styled.div`
   display: flex;
   justify-content: center;
   width: 100%;
   height: calc(100vh - ${({ $substractHeight }) => $substractHeight}px);
 `;
-  const Styled$a = {
-    FullWidthDiv: FullWidthDiv$3,
-    CustomCard: CustomCard$3
+  const Styled$c = {
+    FullWidthDiv: FullWidthDiv$4,
+    CustomCard: CustomCard$4
   };
 
   const XTerminal$2 = ({ endpoint, namespace, podName, container, substractHeight }) => {
@@ -52829,7 +52874,7 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
       };
     }, [terminal, endpoint, namespace, podName, container]);
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$a.CustomCard, { $isVisible: !isLoading && !error, $substractHeight: substractHeight, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$a.FullWidthDiv, { $substractHeight: substractHeight, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: terminalRef, style: { width: "100%", height: "100%" } }) }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$c.CustomCard, { $isVisible: !isLoading && !error, $substractHeight: substractHeight, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$c.FullWidthDiv, { $substractHeight: substractHeight, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: terminalRef, style: { width: "100%", height: "100%" } }) }) }),
       isLoading && !error && /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Spin, {}),
       error && /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Result, { status: "error", title: "Error", subTitle: JSON.stringify(error) })
     ] });
@@ -52840,7 +52885,7 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
     width: 200px;
   }
 `;
-  const Styled$9 = {
+  const Styled$b = {
     CustomSelect: CustomSelect$3
   };
 
@@ -52851,7 +52896,7 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
       return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: "No Running Containers" });
     }
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$9.CustomSelect, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$b.CustomSelect, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         antd.Select,
         {
           placeholder: "Select container",
@@ -52880,7 +52925,7 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
     ] });
   };
 
-  const CustomCard$2 = styled.div`
+  const CustomCard$3 = styled.div`
   visibility: ${({ $isVisible }) => $isVisible ? "visible" : "hidden"};
   height: calc(100vh - ${({ $substractHeight }) => $substractHeight}px);
 
@@ -52888,7 +52933,7 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
     scrollbar-width: thin;
   }
 `;
-  const FullWidthDiv$2 = styled.div`
+  const FullWidthDiv$3 = styled.div`
   display: flex;
   justify-content: center;
   width: 100%;
@@ -52903,9 +52948,9 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
   align-items: center;
   gap: 8px;
 `;
-  const Styled$8 = {
-    FullWidthDiv: FullWidthDiv$2,
-    CustomCard: CustomCard$2,
+  const Styled$a = {
+    FullWidthDiv: FullWidthDiv$3,
+    CustomCard: CustomCard$3,
     ProgressContainer
   };
 
@@ -53035,8 +53080,8 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
       };
     }, [terminal, endpoint, nodeName, profile]);
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$8.CustomCard, { $isVisible: isTerminalVisible, $substractHeight: substractHeight, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$8.FullWidthDiv, { $substractHeight: substractHeight, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: terminalRef, style: { width: "100%", height: "100%" } }) }) }),
-      !isTerminalVisible && !error && isWarmingUp && /* @__PURE__ */ jsxRuntimeExports.jsxs(Styled$8.ProgressContainer, { $substractHeight: substractHeight, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$a.CustomCard, { $isVisible: isTerminalVisible, $substractHeight: substractHeight, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$a.FullWidthDiv, { $substractHeight: substractHeight, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: terminalRef, style: { width: "100%", height: "100%" } }) }) }),
+      !isTerminalVisible && !error && isWarmingUp && /* @__PURE__ */ jsxRuntimeExports.jsxs(Styled$a.ProgressContainer, { $substractHeight: substractHeight, children: [
         isLoading && /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Spin, {}),
         !isLoading && /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Progress, { type: "circle", percent: progressPercent }),
         warmupMessage && /* @__PURE__ */ jsxRuntimeExports.jsxs(antd.Typography.Text, { children: [
@@ -53057,7 +53102,7 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
     width: 200px;
   }
 `;
-  const Styled$7 = {
+  const Styled$9 = {
     CustomSelect: CustomSelect$2
   };
 
@@ -53066,7 +53111,7 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
     const endpoint = `/api/clusters/${cluster}/openapi-bff-ws/terminal/terminalNode/terminalNode`;
     const profiles = ["legacy", "general", "baseline", "netadmin", "restricted", "sysadmin"];
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$7.CustomSelect, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$9.CustomSelect, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         antd.Select,
         {
           placeholder: "Select profile",
@@ -53091,7 +53136,7 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
     ] });
   };
 
-  const CustomCard$1 = styled.div`
+  const CustomCard$2 = styled.div`
   visibility: ${({ $isVisible }) => $isVisible ? "visible" : "hidden"};
   height: calc(100vh - ${({ $substractHeight }) => $substractHeight}px);
 
@@ -53099,15 +53144,15 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
     scrollbar-width: thin;
   }
 `;
-  const FullWidthDiv$1 = styled.div`
+  const FullWidthDiv$2 = styled.div`
   display: flex;
   justify-content: center;
   width: 100%;
   height: calc(100vh - ${({ $substractHeight }) => $substractHeight}px);
 `;
-  const Styled$6 = {
-    FullWidthDiv: FullWidthDiv$1,
-    CustomCard: CustomCard$1
+  const Styled$8 = {
+    FullWidthDiv: FullWidthDiv$2,
+    CustomCard: CustomCard$2
   };
 
   const XTerminal = ({ endpoint, namespace, podName, container, substractHeight }) => {
@@ -53186,7 +53231,7 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
       };
     }, [terminal, endpoint, namespace, podName, container]);
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$6.CustomCard, { $isVisible: isTerminalVisible, $substractHeight: substractHeight, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$6.FullWidthDiv, { $substractHeight: substractHeight, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: terminalRef, style: { width: "100%", height: "100%" } }) }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$8.CustomCard, { $isVisible: isTerminalVisible, $substractHeight: substractHeight, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$8.FullWidthDiv, { $substractHeight: substractHeight, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: terminalRef, style: { width: "100%", height: "100%" } }) }) }),
       isLoading && !error && /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Spin, {}),
       error && /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Result, { status: "error", title: "Error", subTitle: JSON.stringify(error) })
     ] });
@@ -53197,7 +53242,7 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
     width: 200px;
   }
 `;
-  const Styled$5 = {
+  const Styled$7 = {
     CustomSelect: CustomSelect$1
   };
 
@@ -53208,7 +53253,7 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
       return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: "No Running Containers" });
     }
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$5.CustomSelect, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$7.CustomSelect, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         antd.Select,
         {
           placeholder: "Select container",
@@ -53237,12 +53282,12 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
     ] });
   };
 
-  const FullWidthDiv = styled.div`
+  const FullWidthDiv$1 = styled.div`
   display: flex;
   justify-content: center;
   width: 100%;
 `;
-  const CustomCard = styled.div`
+  const CustomCard$1 = styled.div`
   visibility: ${({ $isVisible }) => $isVisible ? "visible" : "hidden"};
   max-height: calc(100vh - 158px);
 
@@ -53258,9 +53303,9 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
   cursor: pointer;
   user-select: none;
 `;
-  const Styled$4 = {
-    FullWidthDiv,
-    CustomCard,
+  const Styled$6 = {
+    FullWidthDiv: FullWidthDiv$1,
+    CustomCard: CustomCard$1,
     VisibilityContainer,
     CursorPointerDiv: CursorPointerDiv$1
   };
@@ -53337,9 +53382,9 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
       };
     }, [endpoint, namespace, podName, container, previous, editorReady]);
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$4.VisibilityContainer, { $isVisible: isTerminalVisible, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(antd.Flex, { justify: "start", align: "center", gap: 16, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$6.VisibilityContainer, { $isVisible: isTerminalVisible, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(antd.Flex, { justify: "start", align: "center", gap: 16, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Styled$4.CursorPointerDiv,
+          Styled$6.CursorPointerDiv,
           {
             onClick: () => {
               if (isPaused) {
@@ -53364,7 +53409,7 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: isPaused ? "Not streaming events" : "Streaming events" })
       ] }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Spacer$1, { $space: 16, $samespace: true }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$4.CustomCard, { $isVisible: isTerminalVisible, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$4.FullWidthDiv, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$6.CustomCard, { $isVisible: isTerminalVisible, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$6.FullWidthDiv, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         Ft$1,
         {
           defaultLanguage: "plaintext",
@@ -53395,7 +53440,7 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
     width: 200px;
   }
 `;
-  const Styled$3 = {
+  const Styled$5 = {
     TopRowContent,
     CustomSelect
   };
@@ -53441,8 +53486,8 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
       }
     ];
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$3.TopRowContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(antd.Flex, { gap: 16, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$3.CustomSelect, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$5.TopRowContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(antd.Flex, { gap: 16, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$5.CustomSelect, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           antd.Select,
           {
             placeholder: "Select container",
@@ -53457,7 +53502,7 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
             }
           }
         ) }),
-        currentContainer && /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$3.CustomSelect, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        currentContainer && /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$5.CustomSelect, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           antd.Select,
           {
             placeholder: "Select current/previous",
@@ -53493,6 +53538,621 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
     ] });
   };
 
+  const buildDefaultWsPath = (cluster, namespace, vmName) => {
+    const base = cluster ? `/k8s/clusters/${encodeURIComponent(cluster)}` : `/k8s`;
+    return `${base}/apis/subresources.kubevirt.io/v1/namespaces/${encodeURIComponent(
+    namespace
+  )}/virtualmachineinstances/${encodeURIComponent(vmName)}/vnc`;
+  };
+  const normalizePath = (p) => p.startsWith("/") ? p : `/${p}`;
+  const useVNCClient = ({
+    cluster,
+    namespace,
+    vmName,
+    forcedFullWsPath
+  }) => {
+    const [isLoading, setIsLoading] = K.useState(true);
+    const [error, setError] = K.useState(null);
+    const [status, setStatus] = K.useState("Loading VNC client...");
+    const [isConnected, setIsConnected] = K.useState(false);
+    const [showDotCursor, setShowDotCursor] = K.useState(false);
+    const [scalingMode, setScalingModeState] = K.useState("local");
+    const [screenEl, setScreenEl] = K.useState(null);
+    const screenRef = K.useCallback((node) => {
+      setScreenEl(node);
+    }, []);
+    const rfbRef = K.useRef(null);
+    const [isManuallyDisconnected, setIsManuallyDisconnected] = K.useState(false);
+    const [, setReconnectAttempts] = K.useState(0);
+    const [shouldReconnect, setShouldReconnect] = K.useState(true);
+    const [connectionKey, setConnectionKey] = K.useState(0);
+    const reconnectTimeoutRef = K.useRef(null);
+    const isManuallyDisconnectedRef = K.useRef(false);
+    const shouldReconnectRef = K.useRef(true);
+    const showDotCursorRef = K.useRef(showDotCursor);
+    const maxReconnectAttempts = 5;
+    const reconnectDelay = 3e3;
+    K.useEffect(() => {
+      isManuallyDisconnectedRef.current = isManuallyDisconnected;
+    }, [isManuallyDisconnected]);
+    K.useEffect(() => {
+      shouldReconnectRef.current = shouldReconnect;
+    }, [shouldReconnect]);
+    K.useEffect(() => {
+      showDotCursorRef.current = showDotCursor;
+      if (rfbRef.current && typeof rfbRef.current.showDotCursor !== "undefined") {
+        try {
+          rfbRef.current.showDotCursor = showDotCursor;
+        } catch (err) {
+          console.error("Error updating dot cursor:", err);
+        }
+      }
+    }, [showDotCursor, isConnected]);
+    const applyScalingMode = (rfb, mode) => {
+      if (!rfb) return;
+      if (mode === "none") {
+        rfb.scaleViewport = false;
+        rfb.resizeSession = false;
+      } else if (mode === "local") {
+        rfb.scaleViewport = true;
+        rfb.resizeSession = false;
+      } else {
+        rfb.scaleViewport = false;
+        rfb.resizeSession = true;
+      }
+    };
+    const setScalingMode = K.useCallback((mode) => {
+      setScalingModeState(mode);
+      if (rfbRef.current) {
+        applyScalingMode(rfbRef.current, mode);
+      }
+    }, []);
+    K.useEffect(() => {
+      console.log("[VMVNC hook] effect run", {
+        cluster,
+        namespace,
+        vmName,
+        connectionKey,
+        hasScreenEl: !!screenEl,
+        forcedFullWsPath
+      });
+      const hasForced = !!forcedFullWsPath;
+      const hasNamespaceVm = !!namespace && !!vmName;
+      if (!hasForced && !hasNamespaceVm) {
+        setIsLoading(false);
+        setIsConnected(false);
+        setStatus("VNC not configured");
+        setError("Provide forcedFullWsPath or both namespace and vmName for VNC connection");
+        return;
+      }
+      if (!screenEl) {
+        setIsLoading(true);
+        setError(null);
+        setStatus("Waiting for VNC container...");
+        return;
+      }
+      if (reconnectTimeoutRef.current) {
+        window.clearTimeout(reconnectTimeoutRef.current);
+        reconnectTimeoutRef.current = null;
+      }
+      setIsLoading(true);
+      setError(null);
+      setStatus("Connecting...");
+      const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+      const { host } = window.location;
+      const defaultWsPath = namespace && vmName ? buildDefaultWsPath(cluster, namespace, vmName) : void 0;
+      const wsPath = (() => {
+        if (forcedFullWsPath && !forcedFullWsPath.startsWith("ws")) {
+          return normalizePath(forcedFullWsPath);
+        }
+        return defaultWsPath;
+      })();
+      const wsUrl = forcedFullWsPath && forcedFullWsPath.startsWith("ws") ? forcedFullWsPath : `${protocol}//${host}${wsPath ?? ""}`;
+      console.log(`[VMVNC ${namespace ?? "no-ns"}/${vmName ?? "no-vm"}]: WebSocket URL: ${wsUrl}`);
+      console.log(`[VMVNC ${namespace ?? "no-ns"}/${vmName ?? "no-vm"}]: WebSocket path: ${wsPath}`);
+      if (!forcedFullWsPath?.startsWith("ws") && !wsPath) {
+        setIsLoading(false);
+        setIsConnected(false);
+        setStatus("VNC not configured");
+        setError("Unable to build WebSocket path. Provide forcedFullWsPath or namespace+vmName.");
+        return;
+      }
+      let cancelled = false;
+      try {
+        const rfb = new RFB(screenEl, wsUrl, {
+          credentials: { password: "" },
+          showDotCursor: showDotCursorRef.current
+        });
+        rfbRef.current = rfb;
+        applyScalingMode(rfb, scalingMode);
+        if (typeof rfb.showDotCursor !== "undefined") {
+          try {
+            rfb.showDotCursor = showDotCursorRef.current;
+          } catch (err) {
+            console.error("Error setting dot cursor on RFB instance:", err);
+          }
+        }
+        const handleConnect = () => {
+          if (cancelled) return;
+          console.log(`[VMVNC ${namespace}/${vmName}]: Connected`);
+          setStatus("Connected");
+          setIsLoading(false);
+          setError(null);
+          setIsConnected(true);
+          setReconnectAttempts(0);
+          if (reconnectTimeoutRef.current) {
+            window.clearTimeout(reconnectTimeoutRef.current);
+            reconnectTimeoutRef.current = null;
+          }
+        };
+        const handleDisconnect = (e) => {
+          if (cancelled) return;
+          const detail = e?.detail;
+          const wasManuallyDisconnected = isManuallyDisconnectedRef.current;
+          const autoReconnectEnabled = shouldReconnectRef.current;
+          console.log(
+            `[VMVNC ${namespace}/${vmName}]: Disconnected (clean=${detail?.clean}, manual=${wasManuallyDisconnected}, autoReconnect=${autoReconnectEnabled})`
+          );
+          setIsConnected(false);
+          setIsLoading(false);
+          if (wasManuallyDisconnected) {
+            setStatus("Disconnected");
+            setError(null);
+            return;
+          }
+          if (!autoReconnectEnabled) {
+            if (detail?.clean) {
+              setStatus("Disconnected");
+            } else {
+              setStatus("Connection closed");
+              setError("Connection closed unexpectedly");
+            }
+            return;
+          }
+          if (detail?.clean) {
+            setStatus("Disconnected - Reconnecting...");
+            setError(null);
+          } else {
+            setStatus("Connection closed - Reconnecting...");
+            setError("Connection closed unexpectedly");
+          }
+          reconnectTimeoutRef.current = window.setTimeout(() => {
+            if (isManuallyDisconnectedRef.current || !shouldReconnectRef.current) {
+              console.log(`[VMVNC ${namespace}/${vmName}]: Reconnect cancelled before attempting`);
+              return;
+            }
+            setReconnectAttempts((prev) => {
+              const next = prev + 1;
+              if (next > maxReconnectAttempts) {
+                console.log(`[VMVNC ${namespace}/${vmName}]: Max reconnect attempts reached (${maxReconnectAttempts})`);
+                setStatus("Connection failed - Max reconnect attempts reached");
+                setError("Failed to reconnect after multiple attempts");
+                setIsLoading(false);
+                setShouldReconnect(false);
+                return prev;
+              }
+              console.log(
+                `[VMVNC ${namespace}/${vmName}]: Reconnect attempt ${next}/${maxReconnectAttempts} (bump connectionKey)`
+              );
+              setStatus(`Reconnecting... (Attempt ${next}/${maxReconnectAttempts})`);
+              setIsLoading(true);
+              setError(null);
+              setConnectionKey((k) => k + 1);
+              return next;
+            });
+          }, reconnectDelay);
+        };
+        const handleCredentialsRequired = () => {
+          if (cancelled) return;
+          console.log(`[VMVNC ${namespace}/${vmName}]: Credentials required`);
+          setStatus("Credentials required");
+        };
+        const handleSecurityFailure = (e) => {
+          if (cancelled) return;
+          const detail = e?.detail;
+          console.error(`[VMVNC ${namespace}/${vmName}]: Security failure`, detail);
+          setError(`Security failure: ${detail?.reason || "Unknown error"}`);
+          setIsLoading(false);
+          setIsConnected(false);
+        };
+        const handleDesktopName = (e) => {
+          if (cancelled) return;
+          const detail = e?.detail;
+          if (detail?.name) {
+            console.log(`[VMVNC ${namespace}/${vmName}]: Desktop name: ${detail.name}`);
+            setStatus(`Connected to ${detail.name}`);
+          }
+        };
+        rfb.addEventListener("connect", handleConnect);
+        rfb.addEventListener("disconnect", handleDisconnect);
+        rfb.addEventListener("credentialsrequired", handleCredentialsRequired);
+        rfb.addEventListener("securityfailure", handleSecurityFailure);
+        rfb.addEventListener("desktopname", handleDesktopName);
+        return () => {
+          cancelled = true;
+          console.log(`[VMVNC ${namespace}/${vmName}]: Cleaning up connection`);
+          if (reconnectTimeoutRef.current) {
+            window.clearTimeout(reconnectTimeoutRef.current);
+            reconnectTimeoutRef.current = null;
+          }
+          if (rfbRef.current) {
+            try {
+              rfbRef.current.disconnect();
+            } catch (err) {
+              console.error("Error disconnecting RFB during cleanup:", err);
+            }
+            rfbRef.current = null;
+          }
+          if (screenEl) {
+            while (screenEl.firstChild) {
+              screenEl.removeChild(screenEl.firstChild);
+            }
+          }
+        };
+      } catch (err) {
+        console.error(`[VMVNC ${namespace}/${vmName}]: Error creating RFB connection:`, err);
+        setError(`Failed to create VNC connection: ${err instanceof Error ? err.message : "Unknown error"}`);
+        setIsLoading(false);
+        setIsConnected(false);
+        setStatus("Failed to create VNC connection");
+      }
+    }, [cluster, namespace, vmName, forcedFullWsPath, scalingMode, connectionKey, screenEl]);
+    const disconnect = K.useCallback(() => {
+      isManuallyDisconnectedRef.current = true;
+      shouldReconnectRef.current = false;
+      setIsManuallyDisconnected(true);
+      setShouldReconnect(false);
+      if (reconnectTimeoutRef.current) {
+        window.clearTimeout(reconnectTimeoutRef.current);
+        reconnectTimeoutRef.current = null;
+      }
+      if (rfbRef.current) {
+        try {
+          rfbRef.current.disconnect();
+        } catch (err) {
+          console.error("Error disconnecting RFB:", err);
+        }
+        rfbRef.current = null;
+      }
+      setStatus("Disconnected");
+      setIsLoading(false);
+      setIsConnected(false);
+    }, []);
+    const reconnect = K.useCallback(() => {
+      isManuallyDisconnectedRef.current = false;
+      shouldReconnectRef.current = true;
+      setIsManuallyDisconnected(false);
+      setShouldReconnect(true);
+      setReconnectAttempts(0);
+      setError(null);
+      setIsLoading(true);
+      setStatus("Reconnecting...");
+      if (reconnectTimeoutRef.current) {
+        window.clearTimeout(reconnectTimeoutRef.current);
+        reconnectTimeoutRef.current = null;
+      }
+      if (rfbRef.current) {
+        try {
+          rfbRef.current.disconnect();
+        } catch (err) {
+          console.error("Error disconnecting RFB before manual reconnect:", err);
+        }
+        rfbRef.current = null;
+      }
+      setConnectionKey((k) => k + 1);
+    }, []);
+    const sendCtrlAltDel = () => {
+      if (!rfbRef.current) return;
+      try {
+        rfbRef.current.sendCtrlAltDel();
+      } catch (err) {
+        console.error("Error sending Ctrl+Alt+Del:", err);
+      }
+    };
+    return {
+      screenRef,
+      isLoading,
+      error,
+      status,
+      isConnected,
+      showDotCursor,
+      scalingMode,
+      setShowDotCursor,
+      setScalingMode,
+      disconnect,
+      reconnect,
+      sendCtrlAltDel
+    };
+  };
+
+  const ShowCursorDiv = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  min-width: 200px;
+`;
+  const ScalingModeContainer = styled.div`
+  min-width: 200px;
+`;
+  const ScalingModeTitle = styled.div`
+  margin-bottom: 8px;
+  font-weight: 500;
+`;
+  const StatusBar = styled.div`
+  background-color: #2d2d2d;
+  color: white;
+  padding: 8px 16px;
+  font-size: 12px;
+  border-bottom: 1px solid #3d3d3d;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-shrink: 0;
+  z-index: 10;
+  flex-wrap: wrap;
+  gap: 4px;
+`;
+  const StatusDivider = styled.span`
+  color: #666;
+  margin: 0 8px;
+  user-select: none;
+`;
+  const Styled$4 = {
+    ShowCursorDiv,
+    ScalingModeContainer,
+    ScalingModeTitle,
+    StatusBar,
+    StatusDivider
+  };
+
+  const VMVNCToolbar = ({
+    status,
+    isConnected,
+    isFullscreen,
+    isLoading,
+    showDotCursor,
+    scalingMode,
+    onSendCtrlAltDel,
+    onToggleFullscreen,
+    onReconnect,
+    onShowDotCursorChange,
+    onScalingModeChange
+  }) => {
+    const optionsMenuItems = K.useMemo(
+      () => [
+        {
+          key: "show-cursor",
+          label: /* @__PURE__ */ jsxRuntimeExports.jsxs(Styled$4.ShowCursorDiv, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Show Cursor" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Switch, { checked: showDotCursor, onChange: onShowDotCursorChange, disabled: !isConnected, size: "small" })
+          ] })
+        },
+        {
+          type: "divider"
+        },
+        {
+          key: "scaling-mode",
+          label: /* @__PURE__ */ jsxRuntimeExports.jsxs(Styled$4.ScalingModeContainer, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$4.ScalingModeTitle, { children: "Scaling Mode" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              antd.Radio.Group,
+              {
+                value: scalingMode,
+                onChange: (e) => onScalingModeChange(e.target.value),
+                disabled: !isConnected,
+                style: { display: "flex", flexDirection: "column", gap: 8 },
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Radio, { value: "none", children: "None" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Radio, { value: "local", children: "Local scaling" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Radio, { value: "remote", children: "Remote resizing" })
+                ]
+              }
+            )
+          ] })
+        }
+      ],
+      [showDotCursor, scalingMode, isConnected, onShowDotCursorChange, onScalingModeChange]
+    );
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$4.StatusBar, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(antd.Space, { size: "small", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Tooltip, { title: "Send Ctrl+Alt+Del", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        antd.Button,
+        {
+          type: "text",
+          size: "small",
+          icon: /* @__PURE__ */ jsxRuntimeExports.jsx(icons.PoweroffOutlined, {}),
+          onClick: onSendCtrlAltDel,
+          disabled: !isConnected,
+          style: { color: "#ffffff" },
+          children: "Send Ctrl+Alt+Del"
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Tooltip, { title: isFullscreen ? "Exit Fullscreen" : "Fullscreen", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        antd.Button,
+        {
+          type: "text",
+          size: "small",
+          icon: isFullscreen ? /* @__PURE__ */ jsxRuntimeExports.jsx(icons.FullscreenExitOutlined, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(icons.FullscreenOutlined, {}),
+          onClick: onToggleFullscreen,
+          disabled: !isConnected,
+          style: { color: "#ffffff" },
+          children: "Fullscreen"
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Dropdown, { menu: { items: optionsMenuItems }, trigger: ["click"], placement: "bottomRight", children: /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Button, { type: "text", size: "small", icon: /* @__PURE__ */ jsxRuntimeExports.jsx(icons.SettingOutlined, {}), style: { color: "#ffffff" }, children: "Options" }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Tooltip, { title: "Reconnect", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        antd.Button,
+        {
+          type: "text",
+          size: "small",
+          icon: /* @__PURE__ */ jsxRuntimeExports.jsx(icons.ReloadOutlined, {}),
+          onClick: onReconnect,
+          loading: isLoading,
+          style: { color: "#ffffff" },
+          children: "Reconnect"
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$4.StatusDivider, { children: "|" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: status })
+    ] }) });
+  };
+
+  const Container = styled.div`
+  height: calc(100vh - ${({ $substractHeight }) => $substractHeight}px);
+  display: flex;
+  flex-direction: column;
+  background-color: #1e1e1e;
+  position: relative;
+
+  * {
+    scrollbar-width: thin;
+  }
+`;
+  const CustomCard = styled.div`
+  visibility: ${({ $isVisible }) => $isVisible ? "visible" : "hidden"};
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: #1e1e1e;
+  position: relative;
+
+  * {
+    scrollbar-width: thin;
+  }
+`;
+  const ContentWrapper = styled.div`
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+  min-width: 0; /* Allow flex item to shrink */
+`;
+  const FullWidthDiv = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex: 1;
+  overflow: hidden;
+  background-color: black;
+  min-width: 0; /* Allow flex item to shrink */
+  transition: margin-right 0.3s ease;
+`;
+  const LoadingContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px;
+  color: white;
+`;
+  const ErrorContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px;
+  color: white;
+`;
+  const Styled$3 = {
+    Container,
+    CustomCard,
+    ContentWrapper,
+    FullWidthDiv,
+    LoadingContainer,
+    ErrorContainer
+  };
+
+  const VMVNC = ({ cluster, namespace, vmName, forcedFullWsPath, substractHeight }) => {
+    const containerRef = K.useRef(null);
+    const [isFullscreen, setIsFullscreen] = K.useState(false);
+    const {
+      screenRef,
+      isLoading,
+      error,
+      status,
+      isConnected,
+      showDotCursor,
+      scalingMode,
+      setShowDotCursor,
+      setScalingMode,
+      disconnect,
+      reconnect,
+      sendCtrlAltDel
+    } = useVNCClient({ cluster, namespace, vmName, forcedFullWsPath });
+    const handleToggleFullscreen = () => {
+      const element = containerRef.current;
+      if (!element) return;
+      if (!isFullscreen) {
+        if (element.requestFullscreen) {
+          element.requestFullscreen();
+        } else if (element.webkitRequestFullscreen) {
+          element.webkitRequestFullscreen();
+        } else if (element.msRequestFullscreen) {
+          element.msRequestFullscreen();
+        }
+        return;
+      }
+      const fullscreenDoc = document;
+      if (fullscreenDoc.exitFullscreen) {
+        fullscreenDoc.exitFullscreen();
+      } else if (fullscreenDoc.webkitExitFullscreen) {
+        fullscreenDoc.webkitExitFullscreen();
+      } else if (fullscreenDoc.msExitFullscreen) {
+        fullscreenDoc.msExitFullscreen();
+      }
+    };
+    K.useEffect(() => {
+      const handleFullscreenChange = () => {
+        setIsFullscreen(!!document.fullscreenElement);
+      };
+      document.addEventListener("fullscreenchange", handleFullscreenChange);
+      document.addEventListener("webkitfullscreenchange", handleFullscreenChange);
+      document.addEventListener("msfullscreenchange", handleFullscreenChange);
+      return () => {
+        document.removeEventListener("fullscreenchange", handleFullscreenChange);
+        document.removeEventListener("webkitfullscreenchange", handleFullscreenChange);
+        document.removeEventListener("msfullscreenchange", handleFullscreenChange);
+      };
+    }, []);
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(Styled$3.Container, { ref: containerRef, $substractHeight: substractHeight, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Styled$3.CustomCard, { $isVisible: !isLoading && !error, $substractHeight: substractHeight, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          VMVNCToolbar,
+          {
+            status,
+            isConnected,
+            isFullscreen,
+            isLoading,
+            showDotCursor,
+            scalingMode,
+            onSendCtrlAltDel: sendCtrlAltDel,
+            onToggleFullscreen: handleToggleFullscreen,
+            onReconnect: reconnect,
+            onShowDotCursorChange: setShowDotCursor,
+            onScalingModeChange: setScalingMode
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$3.ContentWrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$3.FullWidthDiv, { $substractHeight: substractHeight, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, ref: screenRef }) }) })
+      ] }),
+      isLoading && !error && /* @__PURE__ */ jsxRuntimeExports.jsxs(Styled$3.LoadingContainer, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Spin, { size: "large" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Spacer$1, { $space: 16, $samespace: true }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: status })
+      ] }),
+      error && !isLoading && /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$3.ErrorContainer, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        antd.Result,
+        {
+          status: "error",
+          title: "VNC Connection Error",
+          subTitle: error,
+          extra: /* @__PURE__ */ jsxRuntimeExports.jsxs(antd.Space, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Button, { onClick: disconnect, children: "Disconnect" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Button, { type: "primary", onClick: reconnect, loading: isLoading, children: "Reconnect" })
+          ] })
+        }
+      ) })
+    ] });
+  };
+
   const SelectTag = styled(antd.Tag)`
   margin-inline-end: 4px;
   padding: 4px 6px;
@@ -55208,6 +55868,7 @@ if (_IS_WORKLET) registerPaint("spoiler", SpoilerPainterWorklet);
   exports.UncontrolledSelect = UncontrolledSelect;
   exports.UnlockedIcon = UnlockedIcon;
   exports.UpIcon = UpIcon;
+  exports.VMVNC = VMVNC;
   exports.YamlEditorSingleton = YamlEditorSingleton$1;
   exports.checkIfApiInstanceNamespaceScoped = checkIfApiInstanceNamespaceScoped;
   exports.checkIfBuiltInInstanceNamespaceScoped = checkIfBuiltInInstanceNamespaceScoped;