feat: enhance Guacamole support with RDP and VNC connection settings and UI updates

2025-12-17 19:14:19 -05:00
parent 42e27e7389
commit 2f092bd367
7 changed files with 145 additions and 63 deletions
--- a/src/ui/desktop/DesktopApp.tsx
+++ b/src/ui/desktop/DesktopApp.tsx
@@ -155,7 +155,9 @@ function AppContent() {
  const showTerminalView =
    currentTabData?.type === "terminal" ||
    currentTabData?.type === "server" ||
-    currentTabData?.type === "file_manager";
+    currentTabData?.type === "file_manager" ||
+    currentTabData?.type === "rdp" ||
+    currentTabData?.type === "vnc";
  const showHome = currentTabData?.type === "home";
  const showSshManager = currentTabData?.type === "ssh_manager";
  const showAdmin = currentTabData?.type === "admin";
--- a/src/ui/desktop/apps/guacamole/GuacamoleDisplay.tsx
+++ b/src/ui/desktop/apps/guacamole/GuacamoleDisplay.tsx
@@ -52,7 +52,8 @@ export const GuacamoleDisplay = forwardRef<GuacamoleDisplayHandle, GuacamoleDisp
    ref
  ) {
    const { t } = useTranslation();
-    const displayRef = useRef<HTMLDivElement>(null);
+    const containerRef = useRef<HTMLDivElement>(null); // Outer container for measuring size
+    const displayRef = useRef<HTMLDivElement>(null);   // Inner div for guacamole canvas
    const clientRef = useRef<Guacamole.Client | null>(null);
    const [isConnected, setIsConnected] = useState(false);
    const [isConnecting, setIsConnecting] = useState(false);
@@ -86,7 +87,7 @@ export const GuacamoleDisplay = forwardRef<GuacamoleDisplayHandle, GuacamoleDisp
      },
    }));

-    const getWebSocketUrl = useCallback(async (): Promise<string | null> => {
+    const getWebSocketUrl = useCallback(async (containerWidth: number, containerHeight: number): Promise<string | null> => {
      const jwtToken = getCookie("jwt");
      if (!jwtToken) {
        setConnectionError("Authentication required");
@@ -118,7 +119,13 @@ export const GuacamoleDisplay = forwardRef<GuacamoleDisplayHandle, GuacamoleDisp

        const { token } = await response.json();

-        // Build WebSocket URL
+        // Build WebSocket URL with width/height/dpi as query parameters
+        // These are passed as unencrypted settings to guacamole-lite
+        // Use actual container dimensions, fall back to 720p
+        const width = connectionConfig.width || containerWidth || 1280;
+        const height = connectionConfig.height || containerHeight || 720;
+        const dpi = connectionConfig.dpi || 96;
+
        const wsBase = isDev
          ? `ws://localhost:30007`
          : isElectron()
@@ -128,7 +135,7 @@ export const GuacamoleDisplay = forwardRef<GuacamoleDisplayHandle, GuacamoleDisp
              })()
            : `${window.location.protocol === "https:" ? "wss" : "ws"}://${window.location.host}/guacamole/websocket/`;

-        return `${wsBase}?token=${encodeURIComponent(token)}`;
+        return `${wsBase}?token=${encodeURIComponent(token)}&width=${width}&height=${height}&dpi=${dpi}`;
      } catch (error) {
        const errorMessage = error instanceof Error ? error.message : "Unknown error";
        setConnectionError(errorMessage);
@@ -142,7 +149,21 @@ export const GuacamoleDisplay = forwardRef<GuacamoleDisplayHandle, GuacamoleDisp
      setIsConnecting(true);
      setConnectionError(null);

-      const wsUrl = await getWebSocketUrl();
+      // Get container dimensions for the WebSocket URL
+      // Use the outer container ref which has h-full w-full
+      let containerWidth = containerRef.current?.clientWidth || 0;
+      let containerHeight = containerRef.current?.clientHeight || 0;
+
+      console.log(`[Guacamole] Container size: ${containerWidth}x${containerHeight}`);
+
+      // If container size is too small or unavailable, use 720p default
+      if (containerWidth < 100 || containerHeight < 100) {
+        console.log(`[Guacamole] Container too small, using 720p default`);
+        containerWidth = 1280;
+        containerHeight = 720;
+      }
+
+      const wsUrl = await getWebSocketUrl(containerWidth, containerHeight);
      if (!wsUrl) {
        setIsConnecting(false);
        return;
@@ -154,26 +175,35 @@ export const GuacamoleDisplay = forwardRef<GuacamoleDisplayHandle, GuacamoleDisp

      // Set up display
      const display = client.getDisplay();
+      const displayElement = display.getElement();
+
      if (displayRef.current) {
        displayRef.current.innerHTML = "";
-        const displayElement = display.getElement();
-        displayElement.style.width = "100%";
-        displayElement.style.height = "100%";
        displayRef.current.appendChild(displayElement);
      }

-      // Handle display sync (when frames arrive) - scale to fit container
-      display.onresize = (width: number, height: number) => {
-        if (displayRef.current) {
-          const containerWidth = displayRef.current.clientWidth;
-          const containerHeight = displayRef.current.clientHeight;
-          const scale = Math.min(containerWidth / width, containerHeight / height);
+      // Function to rescale display to fit container
+      const rescaleDisplay = () => {
+        if (!containerRef.current) return;
+
+        const cWidth = containerRef.current.clientWidth;
+        const cHeight = containerRef.current.clientHeight;
+        const displayWidth = display.getWidth();
+        const displayHeight = display.getHeight();
+
+        if (displayWidth > 0 && displayHeight > 0 && cWidth > 0 && cHeight > 0) {
+          const scale = Math.min(cWidth / displayWidth, cHeight / displayHeight);
          display.scale(scale);
        }
      };

-      // Set up mouse input
-      const mouse = new Guacamole.Mouse(displayRef.current!);
+      // Handle display sync (when frames arrive)
+      display.onresize = () => {
+        rescaleDisplay();
+      };
+
+      // Set up mouse input on the display element (not the container)
+      const mouse = new Guacamole.Mouse(displayElement);
      mouse.onmousedown = mouse.onmouseup = mouse.onmousemove = (state: Guacamole.Mouse.State) => {
        client.sendMouseState(state);
      };
@@ -237,12 +267,8 @@ export const GuacamoleDisplay = forwardRef<GuacamoleDisplayHandle, GuacamoleDisp
        }
      };

-      // Connect with display size
-      const width = connectionConfig.width || displayRef.current?.clientWidth || 1024;
-      const height = connectionConfig.height || displayRef.current?.clientHeight || 768;
-      const dpi = connectionConfig.dpi || 96;
-
-      client.connect(`width=${width}&height=${height}&dpi=${dpi}`);
+      // Connect - the width/height/dpi are already in the WebSocket URL
+      client.connect();
    }, [isConnecting, isConnected, getWebSocketUrl, connectionConfig, onConnect, onDisconnect, onError, t]);

    // Track if we've initiated a connection to prevent re-triggering
@@ -264,26 +290,40 @@ export const GuacamoleDisplay = forwardRef<GuacamoleDisplayHandle, GuacamoleDisp
      };
    }, []);

-    // Handle window resize
+    // Handle window resize - rescale display to fit container
    useEffect(() => {
      const handleResize = () => {
-        if (clientRef.current && displayRef.current) {
+        if (clientRef.current && containerRef.current) {
          const display = clientRef.current.getDisplay();
-          const width = displayRef.current.clientWidth;
-          const height = displayRef.current.clientHeight;
-          display.scale(Math.min(width / display.getWidth(), height / display.getHeight()));
+          const cWidth = containerRef.current.clientWidth;
+          const cHeight = containerRef.current.clientHeight;
+          const displayWidth = display.getWidth();
+          const displayHeight = display.getHeight();
+
+          if (displayWidth > 0 && displayHeight > 0 && cWidth > 0 && cHeight > 0) {
+            const scale = Math.min(cWidth / displayWidth, cHeight / displayHeight);
+            display.scale(scale);
+          }
        }
      };

      window.addEventListener("resize", handleResize);
-      return () => window.removeEventListener("resize", handleResize);
+      // Also trigger on initial render after a short delay
+      const initialTimeout = setTimeout(handleResize, 100);
+      return () => {
+        window.removeEventListener("resize", handleResize);
+        clearTimeout(initialTimeout);
+      };
    }, []);

    return (
-      <div className="h-full w-full relative bg-black">
+      <div
+        ref={containerRef}
+        className="h-full w-full relative bg-black flex items-center justify-center overflow-hidden"
+      >
        <div
          ref={displayRef}
-          className="h-full w-full"
+          className="relative"
          style={{ cursor: isConnected ? "none" : "default" }}
        />

--- a/src/ui/desktop/apps/guacamole/GuacamoleTestDialog.tsx
+++ b/src/ui/desktop/apps/guacamole/GuacamoleTestDialog.tsx
@@ -13,7 +13,8 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { PasswordInput } from "@/components/ui/password-input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Monitor, MonitorPlay, Terminal } from "lucide-react";
-import { GuacamoleDisplay, GuacamoleConnectionConfig } from "./GuacamoleDisplay";
+import { useTabs } from "@/ui/desktop/navigation/tabs/TabContext";
+import type { GuacamoleConnectionConfig } from "./GuacamoleDisplay";

 interface GuacamoleTestDialogProps {
  trigger?: React.ReactNode;
@@ -21,8 +22,7 @@ interface GuacamoleTestDialogProps {

 export function GuacamoleTestDialog({ trigger }: GuacamoleTestDialogProps) {
  const [isOpen, setIsOpen] = useState(false);
-  const [isConnecting, setIsConnecting] = useState(false);
-  const [connectionConfig, setConnectionConfig] = useState<GuacamoleConnectionConfig | null>(null);
+  const { addTab } = useTabs();

  const [connectionType, setConnectionType] = useState<"rdp" | "vnc" | "telnet">("rdp");
  const [hostname, setHostname] = useState("");
@@ -48,22 +48,22 @@ export function GuacamoleTestDialog({ trigger }: GuacamoleTestDialogProps) {
      "ignore-cert": true,
    };

-    setConnectionConfig(config);
-    setIsConnecting(true);
-  };
+    // Add a new tab for the remote desktop connection
+    const tabType = connectionType === "rdp" ? "rdp" : connectionType === "vnc" ? "vnc" : "rdp";
+    const title = `${connectionType.toUpperCase()} - ${hostname}`;

-  const handleDisconnect = () => {
-    setConnectionConfig(null);
-    setIsConnecting(false);
-  };
+    addTab({
+      type: tabType,
+      title,
+      connectionConfig: config,
+    });

-  const handleClose = () => {
-    handleDisconnect();
+    // Close the dialog
    setIsOpen(false);
  };

  return (
-    <Dialog open={isOpen} onOpenChange={(open) => open ? setIsOpen(true) : handleClose()}>
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
      <DialogTrigger asChild>
        {trigger || (
          <Button variant="outline" className="gap-2">
@@ -72,16 +72,15 @@ export function GuacamoleTestDialog({ trigger }: GuacamoleTestDialogProps) {
          </Button>
        )}
      </DialogTrigger>
-      <DialogContent className={isConnecting ? "sm:max-w-4xl h-[80vh]" : "sm:max-w-md"}>
+      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <Monitor className="w-5 h-5" />
-            {isConnecting ? `Connected to ${hostname}` : "Test Remote Connection"}
+            Remote Connection
          </DialogTitle>
        </DialogHeader>

-        {!isConnecting ? (
-          <div className="space-y-4">
+        <div className="space-y-4">
            <Tabs value={connectionType} onValueChange={(v) => {
              setConnectionType(v as "rdp" | "vnc" | "telnet");
              setPort("");
@@ -177,16 +176,6 @@ export function GuacamoleTestDialog({ trigger }: GuacamoleTestDialogProps) {
              Connect
            </Button>
          </div>
-        ) : (
-          <div className="flex-1 h-full min-h-[500px]">
-            <GuacamoleDisplay
-              connectionConfig={connectionConfig!}
-              isVisible={true}
-              onDisconnect={handleDisconnect}
-              onError={(err) => console.error("Guacamole error:", err)}
-            />
-          </div>
-        )}
      </DialogContent>
    </Dialog>
  );
--- a/src/ui/desktop/navigation/AppView.tsx
+++ b/src/ui/desktop/navigation/AppView.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState, useMemo } from "react";
 import { Terminal } from "@/ui/desktop/apps/terminal/Terminal.tsx";
 import { Server as ServerView } from "@/ui/desktop/apps/server/Server.tsx";
 import { FileManager } from "@/ui/desktop/apps/file-manager/FileManager.tsx";
+import { GuacamoleDisplay, type GuacamoleConnectionConfig } from "@/ui/desktop/apps/guacamole/GuacamoleDisplay.tsx";
 import { useTabs } from "@/ui/desktop/navigation/tabs/TabContext.tsx";
 import {
  ResizablePanelGroup,
@@ -16,7 +17,6 @@ import {
  TERMINAL_THEMES,
  DEFAULT_TERMINAL_CONFIG,
 } from "@/constants/terminal-themes";
-import { SSHAuthDialog } from "@/ui/desktop/navigation/SSHAuthDialog.tsx";

 interface TabData {
  id: number;
@@ -30,6 +30,7 @@ interface TabData {
    };
  };
  hostConfig?: any;
+  connectionConfig?: GuacamoleConnectionConfig;
  [key: string]: unknown;
 }

@@ -58,7 +59,9 @@ export function AppView({
        (tab: TabData) =>
          tab.type === "terminal" ||
          tab.type === "server" ||
-          tab.type === "file_manager",
+          tab.type === "file_manager" ||
+          tab.type === "rdp" ||
+          tab.type === "vnc",
      ),
    [tabs],
  );
@@ -317,6 +320,19 @@ export function AppView({
                    isTopbarOpen={isTopbarOpen}
                    embedded
                  />
+                ) : t.type === "rdp" || t.type === "vnc" ? (
+                  t.connectionConfig ? (
+                    <GuacamoleDisplay
+                      connectionConfig={t.connectionConfig}
+                      isVisible={effectiveVisible}
+                      onDisconnect={() => removeTab(t.id)}
+                      onError={(err) => console.error("Guacamole error:", err)}
+                    />
+                  ) : (
+                    <div className="flex items-center justify-center h-full text-red-500">
+                      Missing connection configuration
+                    </div>
+                  )
                ) : (
                  <FileManager
                    embedded
--- a/src/ui/desktop/navigation/tabs/Tab.tsx
+++ b/src/ui/desktop/navigation/tabs/Tab.tsx
@@ -10,6 +10,7 @@ import {
  Server as ServerIcon,
  Folder as FolderIcon,
  User as UserIcon,
+  Monitor as MonitorIcon,
 } from "lucide-react";

 interface TabProps {
@@ -119,11 +120,14 @@ export function Tab({
    tabType === "terminal" ||
    tabType === "server" ||
    tabType === "file_manager" ||
-    tabType === "user_profile"
+    tabType === "user_profile" ||
+    tabType === "rdp" ||
+    tabType === "vnc"
  ) {
    const isServer = tabType === "server";
    const isFileManager = tabType === "file_manager";
    const isUserProfile = tabType === "user_profile";
+    const isRemoteDesktop = tabType === "rdp" || tabType === "vnc";

    const displayTitle =
      title ||
@@ -133,7 +137,9 @@ export function Tab({
          ? t("nav.fileManager")
          : isUserProfile
            ? t("nav.userProfile")
-            : t("nav.terminal"));
+            : isRemoteDesktop
+              ? tabType.toUpperCase()
+              : t("nav.terminal"));

    const { base, suffix } = splitTitle(displayTitle);

@@ -153,6 +159,8 @@ export function Tab({
            <FolderIcon className="h-4 w-4 flex-shrink-0" />
          ) : isUserProfile ? (
            <UserIcon className="h-4 w-4 flex-shrink-0" />
+          ) : isRemoteDesktop ? (
+            <MonitorIcon className="h-4 w-4 flex-shrink-0" />
          ) : (
            <TerminalIcon className="h-4 w-4 flex-shrink-0" />
          )}