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

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

@@ -1,9 +1,10 @@
 import styled, { createGlobalStyle } from 'styled-components';
 import K, { useState, useRef, useLayoutEffect, useReducer, useEffect, useCallback, useMemo, Fragment, createContext, useContext, memo, createElement, isValidElement, cloneElement, useInsertionEffect, useSyncExternalStore, Suspense } from 'react';
-import { Input, Tree, Modal, Alert, theme, Select, Tag, Flex, Typography, Breadcrumb, Spin, Menu, Tooltip, Space, Button, Card as Card$1, Row, Col, Tabs, notification, Form, Popover, Switch, Segmented, Dropdown, Table, Slider, InputNumber, Result, Progress, Checkbox, Empty } from 'antd';
-import { LoadingOutlined, ExclamationCircleFilled, CloseCircleFilled, CheckCircleFilled, PlusOutlined, ClearOutlined, MinusOutlined, CaretDownOutlined, CaretRightOutlined, InfoCircleOutlined, EyeOutlined, EyeInvisibleOutlined, SearchOutlined, MoreOutlined, CheckOutlined, CloseOutlined, BugOutlined, EllipsisOutlined } from '@ant-design/icons';
+import { Input, Tree, Modal, Alert, theme, Select, Tag, Flex, Typography, Breadcrumb, Spin, Menu, Tooltip, Space, Button, Card as Card$1, Row, Col, Tabs, notification, Form, Popover, Switch, Segmented, Dropdown, Table, Slider, InputNumber, Result, Progress, Radio, Checkbox, Empty } from 'antd';
+import { LoadingOutlined, ExclamationCircleFilled, CloseCircleFilled, CheckCircleFilled, PlusOutlined, ClearOutlined, MinusOutlined, CaretDownOutlined, CaretRightOutlined, InfoCircleOutlined, EyeOutlined, EyeInvisibleOutlined, SearchOutlined, MoreOutlined, CheckOutlined, CloseOutlined, BugOutlined, EllipsisOutlined, PoweroffOutlined, FullscreenExitOutlined, FullscreenOutlined, SettingOutlined, ReloadOutlined } from '@ant-design/icons';
 import { useNavigate, useSearchParams, Link, useLocation, useParams } from 'react-router-dom';
 import { useQuery, useQueries, useQueryClient } from '@tanstack/react-query';
+import RFB from 'novnc-next';
 
 const Spacer$1 = styled.div`
   height: ${({ $space, $spaceMob, $samespace }) => {
@@ -1574,7 +1575,7 @@ const CustomTreeProvider = styled.div`
     justify-content: center;
   }
 `;
-const Styled$C = {
+const Styled$E = {
   CustomTreeProvider
 };
 
@@ -1639,7 +1640,7 @@ const TreeWithSearch = ({ treeData, onSelect }) => {
   });
   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(
       Tree,
       {
         treeData: loop(treeData),
@@ -8197,14 +8198,14 @@ const ContentContainer = styled.div`
   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 } = theme.useToken();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    Styled$B.ContentContainer,
+    Styled$D.ContentContainer,
     {
       $flexGrow: flexGrow,
       $bgColor: token.colorBgContainer,
@@ -8265,13 +8266,13 @@ const UncontrolledSelect$1 = styled(Select)`
     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(Select)`
@@ -8319,13 +8320,13 @@ const CustomSelect$5 = styled(Select)`
     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(Tag)`
@@ -8472,7 +8473,7 @@ const Abbr$2 = styled.span`
   height: min-content;
   margin-right: 4px;
 `;
-const Styled$y = {
+const Styled$A = {
   Abbr: Abbr$2
 };
 
@@ -8512,7 +8513,7 @@ const ResourceLink = ({
     baseFactoriesMapping
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(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(
       Typography.Link,
       {
@@ -8551,7 +8552,7 @@ const NoWrapContainer = styled.div`
     flex-wrap: nowrap !important;
   }
 `;
-const Styled$x = {
+const Styled$z = {
   PositionRelativeContainer,
   FullWidthContainer,
   NoWrapContainer
@@ -8594,9 +8595,9 @@ const CollapsibleBreadcrumb = ({ items }) => {
     };
     return [firstItem, ellipsisItem, lastItem];
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Styled$x.PositionRelativeContainer, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$x.FullWidthContainer, { ref: containerRef, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Breadcrumb, { separator: ">", items: renderItems() }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$x.NoWrapContainer, { ref: breadcrumbRef, children: /* @__PURE__ */ jsxRuntimeExports.jsx(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(Breadcrumb, { separator: ">", items: renderItems() }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$z.NoWrapContainer, { ref: breadcrumbRef, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Breadcrumb, { separator: ">", items, style: { display: "flex", flexWrap: "nowrap" } }) })
   ] });
 };
 
@@ -8604,12 +8605,12 @@ const HeightDiv$1 = styled.div`
   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 }) => {
@@ -9595,7 +9596,7 @@ const HeightDiv = styled.div`
   min-height: 22px;
   width: 100%;
 `;
-const Styled$v = {
+const Styled$x = {
   HeightDiv
 };
 
@@ -9624,7 +9625,7 @@ const ManageableBreadcrumbsProvider = ({
     return null;
   }
   if (rawDataLoading) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$v.HeightDiv, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Spin, {}) });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$x.HeightDiv, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Spin, {}) });
   }
   if (!rawData) {
     return null;
@@ -9639,7 +9640,7 @@ const ManageableBreadcrumbsProvider = ({
     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));
 };
@@ -9667,7 +9668,7 @@ const CustomMenu = styled(Menu)`
     margin: 0 !important;
   }
 `;
-const Styled$u = {
+const Styled$w = {
   CustomMenu
 };
 
@@ -9694,7 +9695,7 @@ const ManageableSidebar = ({ data, noMarginTop }) => {
     setSelectedKeys(data.selectedKeys);
   }, [data.selectedKeys]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    Styled$u.CustomMenu,
+    Styled$w.CustomMenu,
     {
       selectedKeys,
       onSelect: () => {
@@ -33882,7 +33883,7 @@ const ShortenedText = styled.div`
   white-space: nowrap;
   text-overflow: ellipsis;
 `;
-const Styled$t = {
+const Styled$v = {
   ShortenedText
 };
 
@@ -33891,7 +33892,7 @@ const ShortenedTextWithTooltip = ({ text, trimLength, maxWidth = 200 }) => {
     const trimmedText = text.substring(0, trimLength);
     return /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: text, placement: "top", children: trimmedText });
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: text, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$t.ShortenedText, { $maxWidth: maxWidth, children: text }) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: text, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$v.ShortenedText, { $maxWidth: maxWidth, children: text }) });
 };
 
 const FilterDropdown = ({
@@ -43044,7 +43045,7 @@ const BigText$1 = styled.div`
   font-size: 16px;
   line-height: 24px;
 `;
-const Styled$s = {
+const Styled$u = {
   BorderRadiusContainer: BorderRadiusContainer$1,
   ControlsRowContainer: ControlsRowContainer$1,
   BigText: BigText$1
@@ -43168,7 +43169,7 @@ const YamlEditorSingleton$1 = ({
   };
   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",
@@ -43187,7 +43188,7 @@ const YamlEditorSingleton$1 = ({
         }
       }
     ) }),
-    !readOnly && /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$s.ControlsRowContainer, { $bgColor: token.colorPrimaryBg, $designNewLayout: designNewLayout, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Flex, { gap: designNewLayout ? 10 : 16, align: "center", children: [
+    !readOnly && /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$u.ControlsRowContainer, { $bgColor: token.colorPrimaryBg, $designNewLayout: designNewLayout, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Flex, { gap: designNewLayout ? 10 : 16, align: "center", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "primary", onClick: onSubmit, loading: isLoading, children: "Submit" }),
       backlink && /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { onClick: () => navigate(backlink), children: "Cancel" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { onClick: handleReload, children: "Reload" })
@@ -43198,7 +43199,7 @@ const YamlEditorSingleton$1 = ({
         open: !!error,
         onOk: () => setError(void 0),
         onCancel: () => setError(void 0),
-        title: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography.Text, { type: "danger", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$s.BigText, { children: "Error!" }) }),
+        title: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography.Text, { type: "danger", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$u.BigText, { children: "Error!" }) }),
         cancelButtonProps: { style: { display: "none" } },
         children: [
           "An error has occurred: ",
@@ -43314,7 +43315,7 @@ const YamlEditorSingleton = ({
 const VisibilityContainer$2 = styled.div`
   display: ${({ $hidden }) => $hidden ? "none" : "block"};
 `;
-const Styled$r = {
+const Styled$t = {
   VisibilityContainer: VisibilityContainer$2
 };
 
@@ -43337,7 +43338,7 @@ const VisibilityContainer$1 = ({
   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) => {
@@ -43576,7 +43577,7 @@ const useUpdateIsTouchedPersisted = () => {
   return dispatch;
 };
 
-const Container$2 = styled.div`
+const Container$3 = styled.div`
   display: flex;
   flex-direction: column;
   gap: ${({ $designNewLayout }) => $designNewLayout ? "4px" : "8px"};
@@ -43602,8 +43603,8 @@ const Content$1 = styled.div`
   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
 };
@@ -43629,14 +43630,14 @@ const CustomCollapse = ({
     }
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    Styled$q.Container,
+    Styled$s.Container,
     {
       $designNewLayout: designNewLayout,
       $borderColor: token.colorBorder,
       $bgColor: token.colorBgContainer,
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs(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(CaretDownOutlined, { size: 14 }) : /* @__PURE__ */ jsxRuntimeExports.jsx(CaretRightOutlined, { size: 14 }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: title }),
             designNewLayout && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: isOpen ? /* @__PURE__ */ jsxRuntimeExports.jsx(DownIcon, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(UpIcon, {}) })
@@ -43647,7 +43648,7 @@ const CustomCollapse = ({
             persistedCheckbox
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$q.Content, { $isOpen: isOpen, $designNewLayout: designNewLayout, children })
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$s.Content, { $isOpen: isOpen, $designNewLayout: designNewLayout, children })
       ]
     }
   );
@@ -43681,13 +43682,13 @@ const CustomSizeTitle = styled.div`
 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])));
@@ -44240,7 +44241,7 @@ const LabelsToSearchParams = ({ data, children }) => {
 const ResetedFormList$3 = styled(Form.List)`
   margin-bottom: 8px;
 `;
-const Styled$o = {
+const Styled$q = {
   ResetedFormList: ResetedFormList$3
 };
 
@@ -44325,7 +44326,7 @@ const EditModal$2 = ({
             /* @__PURE__ */ jsxRuntimeExports.jsx(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(Row, { gutter: [16, 16], children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(Col, { span: cols[0], children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                 ResetedFormItem$1,
@@ -44565,7 +44566,7 @@ const Taints = ({ data, children }) => {
 const ResetedFormList$2 = styled(Form.List)`
   margin-bottom: 8px;
 `;
-const Styled$n = {
+const Styled$p = {
   ResetedFormList: ResetedFormList$2
 };
 
@@ -44660,7 +44661,7 @@ const EditModal$1 = ({
             /* @__PURE__ */ jsxRuntimeExports.jsx(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(Row, { gutter: [16, 16], children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(Col, { span: cols[0], children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                 ResetedFormItem$1,
@@ -44942,7 +44943,7 @@ const Tolerations = ({
 const ResetedFormList$1 = styled(Form.List)`
   margin-bottom: 8px;
 `;
-const Styled$m = {
+const Styled$o = {
   ResetedFormList: ResetedFormList$1
 };
 
@@ -45032,7 +45033,7 @@ const EditModal = ({
             /* @__PURE__ */ jsxRuntimeExports.jsx(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(Row, { gutter: [16, 16], children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(Col, { span: cols[0], children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                 ResetedFormItem$1,
@@ -46181,7 +46182,7 @@ const NotificationOverrides = createGlobalStyle`
     margin-bottom: 0 !important;
   }
 `;
-const Styled$l = {
+const Styled$n = {
   NoSelect,
   DisabledInput,
   NotificationOverrides
@@ -46247,10 +46248,10 @@ const SecretBase64Plain = ({ data }) => {
     }
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: containerStyle, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$l.NotificationOverrides, {}),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$n.NotificationOverrides, {}),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(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,
@@ -46265,7 +46266,7 @@ const SecretBase64Plain = ({ data }) => {
           value: decodedText
         }
       ) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Styled$l.DisabledInput,
+        Styled$n.DisabledInput,
         {
           $hidden: hidden,
           ref: inputRef,
@@ -46299,7 +46300,7 @@ const RoundSpan = styled.span`
   letter-spacing: 0.02em;
   box-sizing: content-box;
 `;
-const Styled$k = {
+const Styled$m = {
   RoundSpan
 };
 
@@ -46338,7 +46339,7 @@ const ResourceBadge = ({ data }) => {
     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) => {
@@ -47016,6 +47017,50 @@ const TogglerSegmented = ({
   ] });
 };
 
+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,
@@ -47056,7 +47101,8 @@ const DynamicComponents = {
   Events: Events$1,
   OwnerRefs,
   Toggler,
-  TogglerSegmented
+  TogglerSegmented,
+  VMVNC: VMVNC$1
 };
 
 const prepareUrlsToFetchForDynamicRenderer = ({
@@ -48485,7 +48531,7 @@ const BorderRadiusContainer = styled.div`
     border-radius: 8px;
   }
 `;
-const Styled$j = {
+const Styled$l = {
   BorderRadiusContainer
 };
 
@@ -48532,7 +48578,7 @@ const YamlEditor = ({ theme: theme$1, currentValues, onChange, editorUri }) => {
       }
     }
   }, [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",
@@ -49289,7 +49335,7 @@ const fromBase64 = (b64) => {
 const MarginBottom = styled.div`
   margin-bottom: 8px;
 `;
-const Styled$i = {
+const Styled$k = {
   MarginBottom
 };
 
@@ -49355,7 +49401,7 @@ const FormStringMultilineInput = ({
       },
       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(
       Input.TextArea,
       {
         placeholder: getStringByName(name),
@@ -49382,7 +49428,7 @@ const CrossContainer = styled.div`
   cursor: pointer;
   padding-top: 11px;
 `;
-const Styled$h = {
+const Styled$j = {
   SwitchAndCrossContainer,
   CrossContainer
 };
@@ -49407,7 +49453,7 @@ const FormBooleanInput = ({
         onRemoveByMinus && /* @__PURE__ */ jsxRuntimeExports.jsx(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,
         {
@@ -49417,7 +49463,7 @@ const FormBooleanInput = ({
         arrKey !== void 0 ? arrKey : Array.isArray(name) ? name.slice(-1)[0] : name
       ),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Styled$h.CrossContainer,
+        Styled$j.CrossContainer,
         {
           onClick: () => {
             if (makeValueUndefined) {
@@ -49605,7 +49651,7 @@ const FormArrayHeader = ({
   ] });
 };
 
-const Container$1 = styled.div`
+const Container$2 = styled.div`
   height: 140px;
   border: 1px solid ${({ $colorBorder }) => $colorBorder};
   border-radius: 8px;
@@ -49616,8 +49662,8 @@ const Container$1 = styled.div`
     border-radius: 8px;
   }
 `;
-const Styled$g = {
-  Container: Container$1
+const Styled$i = {
+  Container: Container$2
 };
 
 const FormInlineYamlEditor = ({ path, persistedControls, externalValue }) => {
@@ -49670,7 +49716,7 @@ const FormInlineYamlEditor = ({ path, persistedControls, externalValue }) => {
       }
     }
   }, [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",
@@ -49809,7 +49855,7 @@ const getSortedPropertyKeys = ({
   });
 };
 
-const Container = styled.div`
+const Container$1 = styled.div`
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: ${({ $designNewLayout }) => $designNewLayout ? "36px" : "8px"};
@@ -49837,9 +49883,9 @@ const BigText = styled.div`
   font-size: 16px;
   line-height: 24px;
 `;
-const Styled$f = {
+const Styled$h = {
   ResetedFormList,
-  Container,
+  Container: Container$1,
   OverflowContainer: OverflowContainer$1,
   ControlsRowContainer,
   DebugContainer,
@@ -50119,7 +50165,7 @@ const getArrayFormItemFromSwagger = ({
         }
       ),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Styled$f.ResetedFormList,
+        Styled$h.ResetedFormList,
         {
           name: arrName || name,
           rules: !forceNonRequired && required?.includes(getStringByName(name)) ? [
@@ -51560,8 +51606,8 @@ const BlackholeForm = ({
     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(
         Form,
         {
           form,
@@ -51615,7 +51661,7 @@ const BlackholeForm = ({
       ) })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(FlexGrow, {}),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$f.ControlsRowContainer, { $bgColor: token.colorPrimaryBg, $designNewLayout: designNewLayout, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Flex, { gap: designNewLayout ? 10 : 16, align: "center", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$h.ControlsRowContainer, { $bgColor: token.colorPrimaryBg, $designNewLayout: designNewLayout, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Flex, { gap: designNewLayout ? 10 : 16, align: "center", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "primary", onClick: onSubmit, loading: isLoading, children: "Submit" }),
       backlink && /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { onClick: () => navigate(backlink), children: "Cancel" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { onClick: () => setIsDebugModalOpen(true), icon: /* @__PURE__ */ jsxRuntimeExports.jsx(BugOutlined, {}) }),
@@ -51627,7 +51673,7 @@ const BlackholeForm = ({
         open: !!error,
         onOk: () => setError(void 0),
         onCancel: () => setError(void 0),
-        title: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography.Text, { type: "danger", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$f.BigText, { children: "Error!" }) }),
+        title: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography.Text, { type: "danger", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$h.BigText, { children: "Error!" }) }),
         cancelButtonProps: { style: { display: "none" } },
         children: [
           "An error has occurred: ",
@@ -51643,7 +51689,7 @@ const BlackholeForm = ({
         onCancel: () => setIsDebugModalOpen(false),
         title: "Debug for properties",
         width: "90vw",
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$f.DebugContainer, { $designNewLayoutHeight: designNewLayoutHeight, children: /* @__PURE__ */ jsxRuntimeExports.jsx(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(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Loading..." }), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           Editor,
           {
             defaultLanguage: "json",
@@ -51698,7 +51744,7 @@ const BlackholeFormProvider = ({
       }
       if (data2.result === "error") {
         setIsError(data2.error);
-        console.log(data2.error);
+        console.warn(data2.error);
         fallbackToManualMode();
       } else {
         setPreparedData({
@@ -51741,15 +51787,15 @@ const BlackholeFormProvider = ({
       }
     );
   }
+  if (isError) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Alert, { message: isError, type: "error" });
+  }
   if (!preparedData?.properties && !isError) {
     return null;
   }
   if (!preparedData?.properties) {
     return null;
   }
-  if (isError) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(Alert, { message: isError, type: "error" });
-  }
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     BlackholeForm,
     {
@@ -51780,7 +51826,7 @@ const BlackholeFormProvider = ({
   );
 };
 
-const CustomCard$5 = styled(Card$1)`
+const CustomCard$6 = styled(Card$1)`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -51800,12 +51846,12 @@ const CustomCard$5 = styled(Card$1)`
     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(PlusOutlined, {}) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$g.CustomCard, { onClick: onAddClick, children: /* @__PURE__ */ jsxRuntimeExports.jsx(PlusOutlined, {}) });
 };
 
 const byteToHex = [];
@@ -52022,7 +52068,7 @@ const getCreatePathToNav = ({
   return `/${baseprefix}/${cluster}/${namespace}/forms/builtin/${apiVersion}/${plural}?backlink=${window.location.pathname}`;
 };
 
-const CustomCard$4 = styled(Card$1)`
+const CustomCard$5 = styled(Card$1)`
   position: relative;
   width: 238px;
   overflow-x: auto;
@@ -52093,8 +52139,8 @@ const EditButtonContainer = styled.div`
   bottom: 6px;
   right: 6px;
 `;
-const Styled$d = {
-  CustomCard: CustomCard$4,
+const Styled$f = {
+  CustomCard: CustomCard$5,
   ImageContainer,
   OverflowContainer,
   TitleContainer,
@@ -52165,14 +52211,14 @@ const MarketplaceCard = ({
     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(Flex, { vertical: true, style: { width: "100%", height: "100%" }, justify: "spaceBetween", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs(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",
             {
@@ -52193,8 +52239,8 @@ const MarketplaceCard = ({
             }
           )
         ] }),
-        /* @__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: [
@@ -52202,10 +52248,10 @@ const MarketplaceCard = ({
               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(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(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) => {
@@ -52263,7 +52309,7 @@ const BigValue = styled.div`
   line-clamp: 1;
   word-break: break-all;
 `;
-const Styled$c = {
+const Styled$e = {
   BigValue
 };
 
@@ -52373,7 +52419,7 @@ const MarketPlace = ({
     /* @__PURE__ */ jsxRuntimeExports.jsxs(Flex, { justify: "space-between", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Flex, { gap: 12, vertical: true, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(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(Flex, { gap: 12, vertical: true, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(SearchTextInput, { uniqueTags, selectedTags, onSelectedTags: setSelectedTags }),
@@ -52579,7 +52625,7 @@ styled.div`
   line-clamp: 1;
   word-break: break-all;
 `;
-const Styled$b = {
+const Styled$d = {
   ActionMenuPlaceholder};
 
 const ProjectInfoCard = ({
@@ -52658,7 +52704,7 @@ const ProjectInfoCard = ({
             } : 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 })
       ] }) })
     ] }),
@@ -52731,7 +52777,7 @@ var addonFit = {exports: {}};
 
 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);
 
@@ -52739,15 +52785,15 @@ const CustomCard$3 = styled.div`
     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 }) => {
@@ -52830,7 +52876,7 @@ const XTerminal$2 = ({ endpoint, namespace, podName, container, substractHeight
     };
   }, [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(Spin, {}),
     error && /* @__PURE__ */ jsxRuntimeExports.jsx(Result, { status: "error", title: "Error", subTitle: JSON.stringify(error) })
   ] });
@@ -52841,7 +52887,7 @@ const CustomSelect$3 = styled.div`
     width: 200px;
   }
 `;
-const Styled$9 = {
+const Styled$b = {
   CustomSelect: CustomSelect$3
 };
 
@@ -52852,7 +52898,7 @@ const PodTerminal = ({ cluster, namespace, podName, containers, substractHeight
     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(
       Select,
       {
         placeholder: "Select container",
@@ -52881,7 +52927,7 @@ const PodTerminal = ({ cluster, namespace, podName, containers, substractHeight
   ] });
 };
 
-const CustomCard$2 = styled.div`
+const CustomCard$3 = styled.div`
   visibility: ${({ $isVisible }) => $isVisible ? "visible" : "hidden"};
   height: calc(100vh - ${({ $substractHeight }) => $substractHeight}px);
 
@@ -52889,7 +52935,7 @@ const CustomCard$2 = styled.div`
     scrollbar-width: thin;
   }
 `;
-const FullWidthDiv$2 = styled.div`
+const FullWidthDiv$3 = styled.div`
   display: flex;
   justify-content: center;
   width: 100%;
@@ -52904,9 +52950,9 @@ const ProgressContainer = styled.div`
   align-items: center;
   gap: 8px;
 `;
-const Styled$8 = {
-  FullWidthDiv: FullWidthDiv$2,
-  CustomCard: CustomCard$2,
+const Styled$a = {
+  FullWidthDiv: FullWidthDiv$3,
+  CustomCard: CustomCard$3,
   ProgressContainer
 };
 
@@ -53036,8 +53082,8 @@ const XTerminal$1 = ({ endpoint, nodeName, profile, substractHeight }) => {
     };
   }, [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(Spin, {}),
       !isLoading && /* @__PURE__ */ jsxRuntimeExports.jsx(Progress, { type: "circle", percent: progressPercent }),
       warmupMessage && /* @__PURE__ */ jsxRuntimeExports.jsxs(Typography.Text, { children: [
@@ -53058,7 +53104,7 @@ const CustomSelect$2 = styled.div`
     width: 200px;
   }
 `;
-const Styled$7 = {
+const Styled$9 = {
   CustomSelect: CustomSelect$2
 };
 
@@ -53067,7 +53113,7 @@ const NodeTerminal = ({ cluster, nodeName, substractHeight, defaultProfile }) =>
   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(
       Select,
       {
         placeholder: "Select profile",
@@ -53092,7 +53138,7 @@ const NodeTerminal = ({ cluster, nodeName, substractHeight, defaultProfile }) =>
   ] });
 };
 
-const CustomCard$1 = styled.div`
+const CustomCard$2 = styled.div`
   visibility: ${({ $isVisible }) => $isVisible ? "visible" : "hidden"};
   height: calc(100vh - ${({ $substractHeight }) => $substractHeight}px);
 
@@ -53100,15 +53146,15 @@ const CustomCard$1 = styled.div`
     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 }) => {
@@ -53187,7 +53233,7 @@ const XTerminal = ({ endpoint, namespace, podName, container, substractHeight })
     };
   }, [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(Spin, {}),
     error && /* @__PURE__ */ jsxRuntimeExports.jsx(Result, { status: "error", title: "Error", subTitle: JSON.stringify(error) })
   ] });
@@ -53198,7 +53244,7 @@ const CustomSelect$1 = styled.div`
     width: 200px;
   }
 `;
-const Styled$5 = {
+const Styled$7 = {
   CustomSelect: CustomSelect$1
 };
 
@@ -53209,7 +53255,7 @@ const PodLogs = ({ cluster, namespace, podName, containers, substractHeight }) =
     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(
       Select,
       {
         placeholder: "Select container",
@@ -53238,12 +53284,12 @@ const PodLogs = ({ cluster, namespace, podName, containers, substractHeight }) =
   ] });
 };
 
-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);
 
@@ -53259,9 +53305,9 @@ const CursorPointerDiv$1 = styled.div`
   cursor: pointer;
   user-select: none;
 `;
-const Styled$4 = {
-  FullWidthDiv,
-  CustomCard,
+const Styled$6 = {
+  FullWidthDiv: FullWidthDiv$1,
+  CustomCard: CustomCard$1,
   VisibilityContainer,
   CursorPointerDiv: CursorPointerDiv$1
 };
@@ -53338,9 +53384,9 @@ const MonacoEditor = ({
     };
   }, [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(Flex, { justify: "start", align: "center", gap: 16, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$6.VisibilityContainer, { $isVisible: isTerminalVisible, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Flex, { justify: "start", align: "center", gap: 16, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Styled$4.CursorPointerDiv,
+        Styled$6.CursorPointerDiv,
         {
           onClick: () => {
             if (isPaused) {
@@ -53365,7 +53411,7 @@ const MonacoEditor = ({
       /* @__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",
@@ -53396,7 +53442,7 @@ const CustomSelect = styled.div`
     width: 200px;
   }
 `;
-const Styled$3 = {
+const Styled$5 = {
   TopRowContent,
   CustomSelect
 };
@@ -53442,8 +53488,8 @@ const PodLogsMonaco = ({
     }
   ];
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$3.TopRowContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Flex, { gap: 16, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$3.CustomSelect, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$5.TopRowContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Flex, { gap: 16, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$5.CustomSelect, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         Select,
         {
           placeholder: "Select container",
@@ -53458,7 +53504,7 @@ const PodLogsMonaco = ({
           }
         }
       ) }),
-      currentContainer && /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$3.CustomSelect, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      currentContainer && /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$5.CustomSelect, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         Select,
         {
           placeholder: "Select current/previous",
@@ -53494,6 +53540,621 @@ const PodLogsMonaco = ({
   ] });
 };
 
+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] = useState(true);
+  const [error, setError] = useState(null);
+  const [status, setStatus] = useState("Loading VNC client...");
+  const [isConnected, setIsConnected] = useState(false);
+  const [showDotCursor, setShowDotCursor] = useState(false);
+  const [scalingMode, setScalingModeState] = useState("local");
+  const [screenEl, setScreenEl] = useState(null);
+  const screenRef = useCallback((node) => {
+    setScreenEl(node);
+  }, []);
+  const rfbRef = useRef(null);
+  const [isManuallyDisconnected, setIsManuallyDisconnected] = useState(false);
+  const [, setReconnectAttempts] = useState(0);
+  const [shouldReconnect, setShouldReconnect] = useState(true);
+  const [connectionKey, setConnectionKey] = useState(0);
+  const reconnectTimeoutRef = useRef(null);
+  const isManuallyDisconnectedRef = useRef(false);
+  const shouldReconnectRef = useRef(true);
+  const showDotCursorRef = useRef(showDotCursor);
+  const maxReconnectAttempts = 5;
+  const reconnectDelay = 3e3;
+  useEffect(() => {
+    isManuallyDisconnectedRef.current = isManuallyDisconnected;
+  }, [isManuallyDisconnected]);
+  useEffect(() => {
+    shouldReconnectRef.current = shouldReconnect;
+  }, [shouldReconnect]);
+  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 = useCallback((mode) => {
+    setScalingModeState(mode);
+    if (rfbRef.current) {
+      applyScalingMode(rfbRef.current, mode);
+    }
+  }, []);
+  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 = 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 = 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 = useMemo(
+    () => [
+      {
+        key: "show-cursor",
+        label: /* @__PURE__ */ jsxRuntimeExports.jsxs(Styled$4.ShowCursorDiv, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Show Cursor" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(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(
+            Radio.Group,
+            {
+              value: scalingMode,
+              onChange: (e) => onScalingModeChange(e.target.value),
+              disabled: !isConnected,
+              style: { display: "flex", flexDirection: "column", gap: 8 },
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Radio, { value: "none", children: "None" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Radio, { value: "local", children: "Local scaling" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Radio, { value: "remote", children: "Remote resizing" })
+              ]
+            }
+          )
+        ] })
+      }
+    ],
+    [showDotCursor, scalingMode, isConnected, onShowDotCursorChange, onScalingModeChange]
+  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$4.StatusBar, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Space, { size: "small", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: "Send Ctrl+Alt+Del", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Button,
+      {
+        type: "text",
+        size: "small",
+        icon: /* @__PURE__ */ jsxRuntimeExports.jsx(PoweroffOutlined, {}),
+        onClick: onSendCtrlAltDel,
+        disabled: !isConnected,
+        style: { color: "#ffffff" },
+        children: "Send Ctrl+Alt+Del"
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: isFullscreen ? "Exit Fullscreen" : "Fullscreen", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Button,
+      {
+        type: "text",
+        size: "small",
+        icon: isFullscreen ? /* @__PURE__ */ jsxRuntimeExports.jsx(FullscreenExitOutlined, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(FullscreenOutlined, {}),
+        onClick: onToggleFullscreen,
+        disabled: !isConnected,
+        style: { color: "#ffffff" },
+        children: "Fullscreen"
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Dropdown, { menu: { items: optionsMenuItems }, trigger: ["click"], placement: "bottomRight", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "text", size: "small", icon: /* @__PURE__ */ jsxRuntimeExports.jsx(SettingOutlined, {}), style: { color: "#ffffff" }, children: "Options" }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: "Reconnect", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Button,
+      {
+        type: "text",
+        size: "small",
+        icon: /* @__PURE__ */ jsxRuntimeExports.jsx(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 = useRef(null);
+  const [isFullscreen, setIsFullscreen] = 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();
+    }
+  };
+  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(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(
+      Result,
+      {
+        status: "error",
+        title: "VNC Connection Error",
+        subTitle: error,
+        extra: /* @__PURE__ */ jsxRuntimeExports.jsxs(Space, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { onClick: disconnect, children: "Disconnect" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "primary", onClick: reconnect, loading: isLoading, children: "Reconnect" })
+        ] })
+      }
+    ) })
+  ] });
+};
+
 const SelectTag = styled(Tag)`
   margin-inline-end: 4px;
   padding: 4px 6px;
@@ -55162,5 +55823,5 @@ const useResourceScope = ({ plural, cluster, apiGroup, apiVersion }) => {
   });
 };
 
-export { BackToDefaultIcon, BlackholeForm, BlackholeFormProvider, ContentCard$1 as ContentCard, CursorDefaultDiv, CursorPointerTag, CursorPointerTagMinContent, CustomSelect$4 as CustomSelect, DeleteIcon, DeleteModal, DeleteModalMany, DownIcon, DynamicComponents, DynamicRenderer, DynamicRendererWithProviders, EarthIcon, EditIcon, EnrichedTable, EnrichedTableProvider, Events, FlexGrow, LockedIcon, LookingGlassIcon, ManageableBreadcrumbs, ManageableBreadcrumbsProvider, ManageableSidebar, ManageableSidebarProvider, MarketPlace, MarketplaceCard, MinusIcon, NodeTerminal, PaddingContainer, PauseCircleIcon, PlusIcon, PodLogs, PodLogsMonaco, PodTerminal, ProjectInfoCard, ResourceLink, ResumeCircleIcon, Search, Spacer$1 as Spacer, SuccessIcon, TreeWithSearch, UncontrolledSelect, UnlockedIcon, UpIcon, YamlEditorSingleton$1 as YamlEditorSingleton, checkIfApiInstanceNamespaceScoped, checkIfBuiltInInstanceNamespaceScoped, checkPermission, convertBytes, convertCompute, convertCores, convertStorage, createContextFactory, createNewEntry, deepMerge, deleteEntry, feedbackIcons, filterIfApiInstanceNamespaceScoped, filterIfBuiltInInstanceNamespaceScoped, filterSelectOptions, floorToDecimal, formatBytesAuto, formatCoresAuto, getAllPathsFromObj, getApiResourceSingle, getApiResourceTypes, getApiResourceTypesByApiGroup, getApiResources, getBuiltinResourceSingle, getBuiltinResourceTypes, getBuiltinResources, getBuiltinTreeData, getClusterList, getCrdData, getCrdResourceSingle, getCrdResources, getDirectUnknownResource, getEnrichedColumns, getEnrichedColumnsWithControls, getGroupsByCategory, getKinds, getLinkToApiForm, getLinkToBuiltinForm, getLinkToForm, getNamespaceLink, getObjectFormItemsDraft, getPrefixSubarrays, getResourceLink, getSortedKinds, getSortedKindsAll, getStringByName, getSwagger, getUppercase, groupsToTreeData, hslFromString, includesArray, isFlatObject, isMultilineFromYaml, isMultilineString, kindByGvr, namespacedByGvr, normalizeValuesForQuotasToNumber, parseCoresWithUnit, parseQuotaValue, parseQuotaValueCpu, parseQuotaValueMemoryAndStorage, parseValueWithUnit, pluralByKind, prepareDataForManageableBreadcrumbs, prepareDataForManageableSidebar, prepareTemplate, prepareUrlsToFetchForDynamicRenderer, toBytes, toCores, updateEntry, useApiResourceSingle, useApiResourceTypesByGroup, useApiResources, useApisResourceTypes, useBuiltinResourceSingle, useBuiltinResourceTypes, useBuiltinResources, useClusterList, useCrdData, useCrdResourceSingle, useCrdResources, useDirectUnknownResource, useInfiniteSentinel, useK8sSmartResource, useK8sVerbs, useListWatch, useManyK8sSmartResource, usePermissions, useResourceScope, useSmartResourceParams };
+export { BackToDefaultIcon, BlackholeForm, BlackholeFormProvider, ContentCard$1 as ContentCard, CursorDefaultDiv, CursorPointerTag, CursorPointerTagMinContent, CustomSelect$4 as CustomSelect, DeleteIcon, DeleteModal, DeleteModalMany, DownIcon, DynamicComponents, DynamicRenderer, DynamicRendererWithProviders, EarthIcon, EditIcon, EnrichedTable, EnrichedTableProvider, Events, FlexGrow, LockedIcon, LookingGlassIcon, ManageableBreadcrumbs, ManageableBreadcrumbsProvider, ManageableSidebar, ManageableSidebarProvider, MarketPlace, MarketplaceCard, MinusIcon, NodeTerminal, PaddingContainer, PauseCircleIcon, PlusIcon, PodLogs, PodLogsMonaco, PodTerminal, ProjectInfoCard, ResourceLink, ResumeCircleIcon, Search, Spacer$1 as Spacer, SuccessIcon, TreeWithSearch, UncontrolledSelect, UnlockedIcon, UpIcon, VMVNC, YamlEditorSingleton$1 as YamlEditorSingleton, checkIfApiInstanceNamespaceScoped, checkIfBuiltInInstanceNamespaceScoped, checkPermission, convertBytes, convertCompute, convertCores, convertStorage, createContextFactory, createNewEntry, deepMerge, deleteEntry, feedbackIcons, filterIfApiInstanceNamespaceScoped, filterIfBuiltInInstanceNamespaceScoped, filterSelectOptions, floorToDecimal, formatBytesAuto, formatCoresAuto, getAllPathsFromObj, getApiResourceSingle, getApiResourceTypes, getApiResourceTypesByApiGroup, getApiResources, getBuiltinResourceSingle, getBuiltinResourceTypes, getBuiltinResources, getBuiltinTreeData, getClusterList, getCrdData, getCrdResourceSingle, getCrdResources, getDirectUnknownResource, getEnrichedColumns, getEnrichedColumnsWithControls, getGroupsByCategory, getKinds, getLinkToApiForm, getLinkToBuiltinForm, getLinkToForm, getNamespaceLink, getObjectFormItemsDraft, getPrefixSubarrays, getResourceLink, getSortedKinds, getSortedKindsAll, getStringByName, getSwagger, getUppercase, groupsToTreeData, hslFromString, includesArray, isFlatObject, isMultilineFromYaml, isMultilineString, kindByGvr, namespacedByGvr, normalizeValuesForQuotasToNumber, parseCoresWithUnit, parseQuotaValue, parseQuotaValueCpu, parseQuotaValueMemoryAndStorage, parseValueWithUnit, pluralByKind, prepareDataForManageableBreadcrumbs, prepareDataForManageableSidebar, prepareTemplate, prepareUrlsToFetchForDynamicRenderer, toBytes, toCores, updateEntry, useApiResourceSingle, useApiResourceTypesByGroup, useApiResources, useApisResourceTypes, useBuiltinResourceSingle, useBuiltinResourceTypes, useBuiltinResources, useClusterList, useCrdData, useCrdResourceSingle, useCrdResources, useDirectUnknownResource, useInfiniteSentinel, useK8sSmartResource, useK8sVerbs, useListWatch, useManyK8sSmartResource, usePermissions, useResourceScope, useSmartResourceParams };
 //# sourceMappingURL=openapi-k8s-toolkit.es.js.map