From 16f3b356d3a0f39f94c3d46796d51ab331c6f4c0 Mon Sep 17 00:00:00 2001
From: Siyuan Miao <i@xswan.net>
Date: Mon, 24 Nov 2025 13:20:41 +0100
Subject: [PATCH] backport: versioning cloud app (0.4.9)

---
 ui/package-lock.json          |  8 ++++----
 ui/package.json               |  1 +
 ui/src/components/Button.tsx  |  6 +++---
 ui/src/components/KvmCard.tsx | 27 ++++++++++++++++++++++++++-
 ui/src/main.tsx               |  3 ++-
 ui/src/routes/devices.tsx     |  9 ++++++++-
 6 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/ui/package-lock.json b/ui/package-lock.json
index 7d4faf36..ebb7d2ec 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -35,6 +35,7 @@
         "react-use-websocket": "^4.13.0",
         "react-xtermjs": "^1.0.10",
         "recharts": "^3.2.1",
+        "semver": "^7.7.3",
         "tailwind-merge": "^3.3.1",
         "usehooks-ts": "^3.1.1",
         "validator": "^13.15.15",
@@ -6213,10 +6214,9 @@
       "license": "MIT"
     },
     "node_modules/semver": {
-      "version": "7.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
-      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
-      "dev": true,
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
diff --git a/ui/package.json b/ui/package.json
index 412b407c..c1575148 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -46,6 +46,7 @@
     "react-use-websocket": "^4.13.0",
     "react-xtermjs": "^1.0.10",
     "recharts": "^3.2.1",
+    "semver": "^7.7.3",
     "tailwind-merge": "^3.3.1",
     "usehooks-ts": "^3.1.1",
     "validator": "^13.15.15",
diff --git a/ui/src/components/Button.tsx b/ui/src/components/Button.tsx
index b1dc3ab9..5985fc0a 100644
--- a/ui/src/components/Button.tsx
+++ b/ui/src/components/Button.tsx
@@ -212,7 +212,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonPropsType>(
 
 Button.displayName = "Button";
 
-type LinkPropsType = Pick<LinkProps, "to"> &
+type LinkPropsType = Pick<LinkProps, "to" | "target" | "reloadDocument"> &
   React.ComponentProps<typeof ButtonContent> & { disabled?: boolean };
 export const LinkButton = ({ to, ...props }: LinkPropsType) => {
   const classes = cx(
@@ -225,13 +225,13 @@ export const LinkButton = ({ to, ...props }: LinkPropsType) => {
 
   if (to.toString().startsWith("http")) {
     return (
-      <ExtLink href={to.toString()} className={classes}>
+      <ExtLink href={to.toString()} className={classes} target={props.target}>
         <ButtonContent {...props} />
       </ExtLink>
     );
   } else {
     return (
-      <Link to={to} className={classes}>
+      <Link to={to} className={classes} target={props.target} reloadDocument={props.reloadDocument}>
         <ButtonContent {...props} />
       </Link>
     );
diff --git a/ui/src/components/KvmCard.tsx b/ui/src/components/KvmCard.tsx
index ab34976b..3b5b896e 100644
--- a/ui/src/components/KvmCard.tsx
+++ b/ui/src/components/KvmCard.tsx
@@ -2,6 +2,8 @@ import { MdConnectWithoutContact } from "react-icons/md";
 import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
 import { Link } from "react-router";
 import { LuEllipsisVertical } from "react-icons/lu";
+import semver from "semver";
+import { useMemo } from "react";
 
 import Card from "@components/Card";
 import { Button, LinkButton } from "@components/Button";
@@ -44,12 +46,33 @@ export default function KvmCard({
   id,
   online,
   lastSeen,
+  appVersion,
 }: {
   title: string;
   id: string;
   online: boolean;
   lastSeen: Date | null;
+  appVersion: string;
 }) {
+  /**
+   * Constructs the URL for connecting to this KVM device's interface.
+   *
+   * Version 0.4.91 is the last backwards-compatible UI that works with older devices.
+   * Devices on v0.4.91 or below are served that version, while newer devices get
+   * their actual version. Unparseable versions fall back to 0.4.91 for safety.
+   */
+  const kvmUrl = useMemo(() => {
+    const BACKWARDS_COMPATIBLE_VERSION = "0.4.91";
+
+    // Use device version if valid and >= 0.4.91, otherwise fall back to backwards-compatible version
+    const shouldUseDeviceVersion =
+      semver.valid(appVersion) && semver.gte(appVersion, BACKWARDS_COMPATIBLE_VERSION);
+    const version = shouldUseDeviceVersion ? appVersion : BACKWARDS_COMPATIBLE_VERSION;
+
+    return new URL(`/v/${version}/devices/${id}`, window.location.origin).toString();
+  }, [appVersion, id]);
+
+
   return (
     <Card>
       <div className="px-5 py-5 space-y-3">
@@ -88,7 +111,9 @@ export default function KvmCard({
                 text="Connect to KVM"
                 LeadingIcon={MdConnectWithoutContact}
                 textAlign="center"
-                to={`/devices/${id}`}
+                reloadDocument
+                target="_self"
+                to={kvmUrl}
               />
             ) : (
               <Button
diff --git a/ui/src/main.tsx b/ui/src/main.tsx
index 79ca6717..ff167239 100644
--- a/ui/src/main.tsx
+++ b/ui/src/main.tsx
@@ -369,7 +369,8 @@ if (isOnDevice) {
         },
       ],
     },
-  ]);
+  // We only need to do this for the cloud deployment, because the device doesn't need to be versioned
+  ], { basename: import.meta.env.BASE_URL });
 }
 
 document.addEventListener("DOMContentLoaded", () => {
diff --git a/ui/src/routes/devices.tsx b/ui/src/routes/devices.tsx
index 1dac696d..4f2c704a 100644
--- a/ui/src/routes/devices.tsx
+++ b/ui/src/routes/devices.tsx
@@ -13,7 +13,13 @@ import { checkAuth } from "@/main";
 import { CLOUD_API } from "@/ui.config";
 
 interface LoaderData {
-  devices: { id: string; name: string; online: boolean; lastSeen: string }[];
+  devices: {
+    id: string;
+    name: string;
+    online: boolean;
+    lastSeen: string;
+    version: string;
+  }[];
   user: User;
 }
 
@@ -90,6 +96,7 @@ export default function DevicesRoute() {
                         title={x.name ?? x.id}
                         lastSeen={x.lastSeen ? new Date(x.lastSeen) : null}
                         online={x.online}
+                        appVersion={x.version}
                       />
                     );
                   })}