From c280be25aec7f2d78b333ecaa6cc1c9ab97313f3 Mon Sep 17 00:00:00 2001
From: host <arumyantsev@rummail.ru>
Date: Fri, 24 Jul 2026 22:07:49 +0300
Subject: [PATCH] =?UTF-8?q?=D0=9E=D0=B1=D0=BD=D0=BE=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20=D1=84=D0=B0=D0=B9=D0=BB=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/ConsoleViewer.jsx | 42 +++++++++++++++++++----
 1 file changed, 36 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/ConsoleViewer.jsx b/frontend/src/components/ConsoleViewer.jsx
index 8c9505b..8d46759 100644
--- a/frontend/src/components/ConsoleViewer.jsx
+++ b/frontend/src/components/ConsoleViewer.jsx
@@ -1,7 +1,32 @@
-import React, { useEffect, useRef, useState } from "react";
+"""VNC-консоль через noVNC.
+
+noVNC — UMD/IIFE-библиотека, она не экспортирует ES-модули, поэтому
+подключаем её через <script> (лежит в /novnc/rfb.js, копируется из
+node_modules/@novnc/novnc/lib на этапе сборки Docker-образа).
+"""
+
+import { useEffect, useRef, useState } from "react";
 import { api } from "../api.js";
 
-const NOVNC_CDN = "https://cdn.jsdelivr.net/npm/@novnc/novnc@1.4.0/lib/rfb.js";
+const NOVNC_SCRIPT = "/novnc/rfb.js";
+
+let scriptPromise = null;
+
+function loadNoVNC() {
+  if (typeof window !== "undefined" && window.RFB) {
+    return Promise.resolve(window.RFB);
+  }
+  if (scriptPromise) return scriptPromise;
+  scriptPromise = new Promise((resolve, reject) => {
+    const script = document.createElement("script");
+    script.src = NOVNC_SCRIPT;
+    script.async = true;
+    script.onload = () => (window.RFB ? resolve(window.RFB) : reject(new Error("RFB не найден после загрузки скрипта")));
+    script.onerror = () => reject(new Error(`Не удалось загрузить ${NOVNC_SCRIPT}`));
+    document.head.appendChild(script);
+  });
+  return scriptPromise;
+}
 
 export default function ConsoleViewer({ instanceId }) {
   const containerRef = useRef(null);
@@ -15,14 +40,17 @@ export default function ConsoleViewer({ instanceId }) {
     async function connect() {
       try {
         const info = await api.getConsole(instanceId);
-        const { default: RFB } = await import(/* @vite-ignore */ NOVNC_CDN);
+        const RFB = await loadNoVNC();
         if (cancelled) return;
 
         const proto = window.location.protocol === "https:" ? "wss" : "ws";
         const wsUrl =
           `${proto}://${window.location.host}/api/console/ws?` +
-          `node=${encodeURIComponent(info.node)}&vmid=${info.vmid}&guest_type=${info.guest_type}` +
-          `&port=${info.port}&ticket=${encodeURIComponent(info.ticket)}`;
+          `node=${encodeURIComponent(info.node)}` +
+          `&vmid=${info.vmid}` +
+          `&guest_type=${info.guest_type}` +
+          `&port=${info.port}` +
+          `&ticket=${encodeURIComponent(info.ticket)}`;
 
         const rfb = new RFB(containerRef.current, wsUrl);
         rfb.addEventListener("connect", () => !cancelled && setStatus("Подключено"));
@@ -36,7 +64,9 @@ export default function ConsoleViewer({ instanceId }) {
     connect();
     return () => {
       cancelled = true;
-      rfbRef.current?.disconnect?.();
+      if (rfbRef.current && typeof rfbRef.current.disconnect === "function") {
+        try { rfbRef.current.disconnect(); } catch { /* noop */ }
+      }
     };
   }, [instanceId]);