Add support for Luckfox PicoKVM

Signed-off-by: luckfox-eng29 <eng29@luckfox.com>

ui/src/routes/devices.$id.deregister.tsx

@@ -15,57 +15,12 @@ import DashboardNavbar from "@components/Header";
 import { User } from "@/hooks/stores";
 import { checkAuth } from "@/main";
 import Fieldset from "@components/Fieldset";
-import { CLOUD_API } from "@/ui.config";
 
 interface LoaderData {
   device: { id: string; name: string; user: { googleId: string } };
   user: User;
 }
 
-const action = async ({ request }: ActionFunctionArgs) => {
-  const { deviceId } = Object.fromEntries(await request.formData());
-
-  try {
-    const res = await fetch(`${CLOUD_API}/devices/${deviceId}`, {
-      method: "DELETE",
-      credentials: "include",
-      headers: { "Content-Type": "application/json" },
-      mode: "cors",
-    });
-
-    if (!res.ok) {
-      return { message: "There was an error renaming your device. Please try again." };
-    }
-  } catch (e) {
-    console.error(e);
-    return { message: "There was an error renaming your device. Please try again." };
-  }
-
-  return redirect("/devices");
-};
-
-const loader = async ({ params }: LoaderFunctionArgs) => {
-  const user = await checkAuth();
-  const { id } = params;
-
-  try {
-    const res = await fetch(`${CLOUD_API}/devices/${id}`, {
-      method: "GET",
-      credentials: "include",
-      mode: "cors",
-    });
-
-    const { device } = (await res.json()) as {
-      device: { id: string; name: string; user: { googleId: string } };
-    };
-
-    return { device, user };
-  } catch (e) {
-    console.error(e);
-    return { devices: [] };
-  }
-};
-
 export default function DevicesIdDeregister() {
   const { device, user } = useLoaderData() as LoaderData;
   const error = useActionData() as { message: string };
@@ -140,6 +95,3 @@ export default function DevicesIdDeregister() {
     </div>
   );
 }
-
-DevicesIdDeregister.loader = loader;
-DevicesIdDeregister.action = action;

ui/src/routes/devices.$id.other-session.tsx

@@ -2,8 +2,7 @@ import { useNavigate, useOutletContext } from "react-router-dom";
 
 import { GridCard } from "@/components/Card";
 import { Button } from "@components/Button";
-import LogoBlue from "@/assets/logo-blue.svg";
-import LogoWhite from "@/assets/logo-white.svg";
+import LogoLuckfox from "@/assets/logo-luckfox.png";
 
 interface ContextType {
   setupPeerConnection: () => Promise<void>;
@@ -24,8 +23,8 @@ export default function OtherSessionRoute() {
       <div className="p-10">
         <div className="flex min-h-[140px] flex-col items-start justify-start space-y-4 text-left">
           <div className="h-[24px]">
-            <img src={LogoBlue} alt="" className="h-full dark:hidden" />
-            <img src={LogoWhite} alt="" className="hidden h-full dark:block" />
+            <img src={LogoLuckfox} alt="" className="h-full dark:hidden" />
+            <img src={LogoLuckfox} alt="" className="hidden h-full dark:block" />
           </div>
 
           <div className="text-left">

ui/src/routes/devices.$id.rename.tsx

@@ -16,7 +16,6 @@ import DashboardNavbar from "@components/Header";
 import { User } from "@/hooks/stores";
 import { checkAuth } from "@/main";
 import Fieldset from "@components/Fieldset";
-import { CLOUD_API } from "@/ui.config";
 
 import api from "../api";
 
@@ -33,43 +32,9 @@ const action = async ({ params, request }: ActionFunctionArgs) => {
     return { message: "Please specify a name" };
   }
 
-  try {
-    const res = await api.PUT(`${CLOUD_API}/devices/${id}`, {
-      name,
-    });
-    if (!res.ok) {
-      return { message: "There was an error renaming your device. Please try again." };
-    }
-  } catch (e) {
-    console.error(e);
-    return { message: "There was an error renaming your device. Please try again." };
-  }
-
   return redirect("/devices");
 };
 
-const loader = async ({ params }: LoaderFunctionArgs) => {
-  const user = await checkAuth();
-  const { id } = params;
-
-  try {
-    const res = await fetch(`${CLOUD_API}/devices/${id}`, {
-      method: "GET",
-      credentials: "include",
-      mode: "cors",
-    });
-
-    const { device } = (await res.json()) as {
-      device: { id: string; name: string; user: { googleId: string } };
-    };
-
-    return { device, user };
-  } catch (e) {
-    console.error(e);
-    return { devices: [] };
-  }
-};
-
 export default function DeviceIdRename() {
   const { device, user } = useLoaderData() as LoaderData;
   const error = useActionData() as { message: string };
@@ -135,5 +100,4 @@ export default function DeviceIdRename() {
   );
 }
 
-DeviceIdRename.loader = loader;
 DeviceIdRename.action = action;

ui/src/routes/devices.$id.settings.access._index.tsx

@@ -19,6 +19,21 @@ import { TextAreaWithLabel } from "@components/TextArea";
 import { LocalDevice } from "./devices.$id";
 import { SettingsItem } from "./devices.$id.settings";
 import { CloudState } from "./adopt";
+import { useVpnStore } from "@/hooks/stores";
+import Checkbox from "../components/Checkbox";
+
+export interface TailScaleResponse {
+  state: string;
+  loginUrl: string;
+  ip: string;
+  xEdge: boolean;
+}
+
+export interface ZeroTierResponse {
+  state: string;
+  networkID: string;
+  ip: string;
+}
 
 export interface TLSState {
   mode: "self-signed" | "custom" | "disabled";
@@ -40,41 +55,34 @@ export default function SettingsAccessIndexRoute() {
   const loaderData = useLoaderData() as LocalDevice | null;
 
   const { navigateTo } = useDeviceUiNavigation();
-  const navigate = useNavigate();
 
   const [send] = useJsonRpc();
 
-  const [isAdopted, setAdopted] = useState(false);
   const [deviceId, setDeviceId] = useState<string | null>(null);
-  const [cloudApiUrl, setCloudApiUrl] = useState("");
-  const [cloudAppUrl, setCloudAppUrl] = useState("");
 
   // Use a simple string identifier for the selected provider
-  const [selectedProvider, setSelectedProvider] = useState<string>("jetkvm");
   const [tlsMode, setTlsMode] = useState<string>("unknown");
   const [tlsCert, setTlsCert] = useState<string>("");
   const [tlsKey, setTlsKey] = useState<string>("");
+    
+  const tailScaleConnectionState = useVpnStore(state => state.tailScaleConnectionState);
+  const tailScaleLoginUrl = useVpnStore(state => state.tailScaleLoginUrl);
+  const tailScaleXEdge = useVpnStore(state => state.tailScaleXEdge)
+  const tailScaleIP = useVpnStore(state => state.tailScaleIP);
+  const setTailScaleConnectionState = useVpnStore(state => state.setTailScaleConnectionState);
+  const setTailScaleLoginUrl = useVpnStore(state => state.setTailScaleLoginUrl); 
+  const setTailScaleXEdge = useVpnStore(state => state.setTailScaleXEdge);
+  const setTailScaleIP = useVpnStore(state => state.setTailScaleIP);
+  
+  const zeroTierConnectionState = useVpnStore(state => state.zeroTierConnectionState);
+  const zeroTierNetworkID = useVpnStore(state => state.zeroTierNetworkID);
+  const zeroTierIP = useVpnStore(state => state.zeroTierIP);
+  const setZeroTierConnectionState = useVpnStore(state => state.setZeroTierConnectionState);
+  const setZeroTierNetworkID = useVpnStore(state => state.setZeroTierNetworkID);
+  const setZeroTierIP = useVpnStore(state => state.setZeroTierIP);
 
-  const getCloudState = useCallback(() => {
-    send("getCloudState", {}, resp => {
-      if ("error" in resp) return console.error(resp.error);
-      const cloudState = resp.result as CloudState;
-      setAdopted(cloudState.connected);
-      setCloudApiUrl(cloudState.url);
-
-      if (cloudState.appUrl) setCloudAppUrl(cloudState.appUrl);
-
-      // Find if the API URL matches any of our predefined providers
-      const isAPIJetKVMProd = cloudState.url === "https://api.jetkvm.com";
-      const isAppJetKVMProd = cloudState.appUrl === "https://app.jetkvm.com";
-
-      if (isAPIJetKVMProd && isAppJetKVMProd) {
-        setSelectedProvider("jetkvm");
-      } else {
-        setSelectedProvider("custom");
-      }
-    });
-  }, [send]);
+  const [tempNetworkID, setTempNetworkID] = useState("");
+  const [isDisconnecting, setIsDisconnecting] = useState(false);
 
   const getTLSState = useCallback(() => {
     send("getTLSState", {}, resp => {
@@ -87,66 +95,6 @@ export default function SettingsAccessIndexRoute() {
     });
   }, [send]);
 
-  const deregisterDevice = async () => {
-    send("deregisterDevice", {}, resp => {
-      if ("error" in resp) {
-        notifications.error(
-          `Failed to de-register device: ${resp.error.data || "Unknown error"}`,
-        );
-        return;
-      }
-
-      getCloudState();
-      // In cloud mode, we need to navigate to the device overview page, as we don't a connection anymore
-      if (!isOnDevice) navigate("/");
-      return;
-    });
-  };
-
-  const onCloudAdoptClick = useCallback(
-    (cloudApiUrl: string, cloudAppUrl: string) => {
-      if (!deviceId) {
-        notifications.error("No device ID available");
-        return;
-      }
-
-      send("setCloudUrl", { apiUrl: cloudApiUrl, appUrl: cloudAppUrl }, resp => {
-        if ("error" in resp) {
-          notifications.error(
-            `Failed to update cloud URL: ${resp.error.data || "Unknown error"}`,
-          );
-          return;
-        }
-
-        const returnTo = new URL(window.location.href);
-        returnTo.pathname = "/adopt";
-        returnTo.search = "";
-        returnTo.hash = "";
-        window.location.href =
-          cloudAppUrl +
-          "/signup?deviceId=" +
-          deviceId +
-          `&returnTo=${returnTo.toString()}`;
-      });
-    },
-    [deviceId, send],
-  );
-
-  // Handle provider selection change
-  const handleProviderChange = (value: string) => {
-    setSelectedProvider(value);
-
-    // If selecting a predefined provider, update both URLs
-    if (value === "jetkvm") {
-      setCloudApiUrl("https://api.jetkvm.com");
-      setCloudAppUrl("https://app.jetkvm.com");
-    } else {
-      if (cloudApiUrl || cloudAppUrl) return;
-      setCloudApiUrl("");
-      setCloudAppUrl("");
-    }
-  };
-
   // Function to update TLS state - accepts a mode parameter
   const updateTlsState = useCallback(
     (mode: string, cert?: string, key?: string) => {
@@ -195,14 +143,124 @@ export default function SettingsAccessIndexRoute() {
 
   // Fetch device ID and cloud state on component mount
   useEffect(() => {
-    getCloudState();
     getTLSState();
 
     send("getDeviceID", {}, async resp => {
       if ("error" in resp) return console.error(resp.error);
       setDeviceId(resp.result as string);
     });
-  }, [send, getCloudState, getTLSState]);
+  }, [send, getTLSState]);
+
+  const handleTailScaleLogin = useCallback(() => {
+    setTailScaleConnectionState("connecting");
+
+    send("loginTailScale", { xEdge: tailScaleXEdge }, resp => {
+      if ("error" in resp) {
+        notifications.error(
+          `Failed to login TailScale: ${resp.error.data || "Unknown error"}`,
+        );
+        setTailScaleConnectionState("closed");
+        setTailScaleLoginUrl("");
+        setTailScaleIP("");
+        return;
+      }
+      const result = resp.result as TailScaleResponse;
+      const validState = ["closed", "connecting", "connected", "disconnected" , "logined"].includes(result.state)
+      ? result.state as "closed" | "connecting" | "connected" | "disconnected" | "logined"
+      : "closed";
+      setTailScaleConnectionState(validState);
+      setTailScaleLoginUrl(result.loginUrl);
+      setTailScaleIP(result.ip);
+    });
+  }, [send, tailScaleXEdge]);
+
+  const handleTailScaleXEdgeChange = (enabled: boolean) => {
+    setTailScaleXEdge(enabled);
+  };
+
+  const handleTailScaleLogout = useCallback(() => { 
+    setIsDisconnecting(true);
+    send("logoutTailScale", {}, resp => {
+      if ("error" in resp) {
+        notifications.error(
+          `Failed to logout TailScale: ${resp.error.data || "Unknown error"}`,
+        );  
+        setIsDisconnecting(false);
+        return;
+      }
+      setTailScaleConnectionState("disconnected"); 
+      setTailScaleLoginUrl("");
+      setTailScaleIP("");  
+      setIsDisconnecting(false);
+    });
+  },[send]);
+
+  const handleTailScaleCanel = useCallback(() => { 
+    setIsDisconnecting(true);
+    send("canelTailScale", {}, resp => {
+      if ("error" in resp) {
+        notifications.error(
+          `Failed to logout TailScale: ${resp.error.data || "Unknown error"}`,
+        );  
+        setIsDisconnecting(false);
+        return;
+      }
+      setTailScaleConnectionState("disconnected"); 
+      setTailScaleLoginUrl("");
+      setTailScaleIP("");  
+      setIsDisconnecting(false);
+    });
+  },[send]);
+
+  const handleZeroTierLogin = useCallback(() => {  
+    setZeroTierConnectionState("connecting");
+    const currentNetworkID = tempNetworkID;
+    
+    if (!/^[0-9a-f]{16}$/.test(currentNetworkID)) {
+      notifications.error("Please enter a valid Network ID");
+    setZeroTierConnectionState("disconnected");
+      return;      
+    }
+    setZeroTierNetworkID(currentNetworkID);
+    send("loginZeroTier", { networkID: currentNetworkID }, resp => {
+      if ("error" in resp) {
+        notifications.error(
+          `Failed to login ZeroTier: ${resp.error.data || "Unknown error"}`,
+        );
+
+        setZeroTierConnectionState("closed"); 
+        setZeroTierNetworkID("");
+        setZeroTierIP("");
+        return;
+      }
+
+      const result = resp.result as ZeroTierResponse;
+      const validState = ["closed", "connecting", "connected", "disconnected" , "logined" ].includes(result.state)
+      ? result.state as "closed" | "connecting" | "connected" | "disconnected" | "logined"
+      : "closed";
+      setZeroTierConnectionState(validState);
+      setZeroTierIP(result.ip);
+    });
+  }, [send, tempNetworkID]);
+  
+  const handleZeroTierNetworkIdChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value.trim();
+    setTempNetworkID(value);
+  }, []);
+
+  const handleZeroTierLogout = useCallback(() => {  
+    send("logoutZeroTier", { networkID: zeroTierNetworkID }, resp => {
+      if ("error" in resp) {
+        notifications.error(
+          `Failed to logout ZeroTier: ${resp.error.data || "Unknown error"}`,
+        );
+        return;
+      }
+      setZeroTierConnectionState("disconnected");
+      setZeroTierNetworkID("");
+      setZeroTierIP("");
+    });
+  },[send, zeroTierNetworkID]);
 
   return (
     <div className="space-y-4">
@@ -334,136 +392,172 @@ export default function SettingsAccessIndexRoute() {
           description="Manage the mode of Remote access to the device"
         />
 
-        <div className="space-y-4">
-          {!isAdopted && (
-            <>
-              <SettingsItem
-                title="Cloud Provider"
-                description="Select the cloud provider for your device"
-              >
-                <SelectMenuBasic
-                  size="SM"
-                  value={selectedProvider}
-                  onChange={e => handleProviderChange(e.target.value)}
-                  options={[
-                    { value: "jetkvm", label: "JetKVM Cloud" },
-                    { value: "custom", label: "Custom" },
-                  ]}
-                />
-              </SettingsItem>
-
-              {selectedProvider === "custom" && (
-                <div className="mt-4 space-y-4">
-                  <div className="flex items-end gap-x-2">
-                    <InputFieldWithLabel
-                      size="SM"
-                      label="Cloud API URL"
-                      value={cloudApiUrl}
-                      onChange={e => setCloudApiUrl(e.target.value)}
-                      placeholder="https://api.example.com"
-                    />
-                  </div>
-                  <div className="flex items-end gap-x-2">
-                    <InputFieldWithLabel
-                      size="SM"
-                      label="Cloud App URL"
-                      value={cloudAppUrl}
-                      onChange={e => setCloudAppUrl(e.target.value)}
-                      placeholder="https://app.example.com"
-                    />
-                  </div>
-                </div>
-              )}
-            </>
-          )}
-
-          {/* Show security info for JetKVM Cloud */}
-          {selectedProvider === "jetkvm" && (
-            <GridCard>
-              <div className="flex items-start gap-x-4 p-4">
-                <ShieldCheckIcon className="mt-1 h-8 w-8 shrink-0 text-blue-600 dark:text-blue-500" />
-                <div className="space-y-3">
-                  <div className="space-y-2">
-                    <h3 className="text-base font-bold text-slate-900 dark:text-white">
-                      Cloud Security
-                    </h3>
-                    <div>
-                      <ul className="list-disc space-y-1 pl-5 text-xs text-slate-700 dark:text-slate-300">
-                        <li>End-to-end encryption using WebRTC (DTLS and SRTP)</li>
-                        <li>Zero Trust security model</li>
-                        <li>OIDC (OpenID Connect) authentication</li>
-                        <li>All streams encrypted in transit</li>
-                      </ul>
-                    </div>
-
-                    <div className="text-xs text-slate-700 dark:text-slate-300">
-                      All cloud components are open-source and available on{" "}
-                      <a
-                        href="https://github.com/jetkvm"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="font-medium text-blue-600 hover:text-blue-800 dark:text-blue-500 dark:hover:text-blue-400"
-                      >
-                        GitHub
-                      </a>
-                      .
-                    </div>
-                  </div>
-                  <hr className="block w-full border-slate-800/20 dark:border-slate-300/20" />
-
-                  <div>
-                    <LinkButton
-                      to="https://jetkvm.com/docs/networking/remote-access"
-                      size="SM"
-                      theme="light"
-                      text="Learn about our cloud security"
-                    />
-                  </div>
-                </div>
-              </div>
-            </GridCard>
-          )}
-
-          {!isAdopted ? (
-            <div className="flex items-end gap-x-2">
+      <div className="space-y-4">
+        {/* Add TailScale settings item */}
+        <SettingsItem
+          title="TailScale"
+          badge="Experimental"
+          description="Connect to TailScale VPN network"
+        >
+          <div className="space-y-4">
+            { ((tailScaleConnectionState === "disconnected") || (tailScaleConnectionState === "closed")) && (
               <Button
-                onClick={() => onCloudAdoptClick(cloudApiUrl, cloudAppUrl)}
                 size="SM"
-                theme="primary"
-                text="Adopt KVM to Cloud"
+                theme="light"
+                text="Enable TailScale"
+                onClick={handleTailScaleLogin}
+              />
+            )}
+          </div>
+        </SettingsItem>
+        <SettingsItem
+          title=""
+          description="TailScale use xEdge server"
+        >
+          <Checkbox
+            checked={tailScaleXEdge}
+            onChange={e => {
+              if (tailScaleConnectionState !== "disconnected") {
+                notifications.error("TailScale is running and this setting cannot be modified");
+                return;
+              }
+              handleTailScaleXEdgeChange(e.target.checked);
+            }}
+          />
+        </SettingsItem>
+      </div>
+              
+      <div className="space-y-4">
+        {tailScaleConnectionState === "connecting" && (
+          <div className="flex items-center justify-between gap-x-2">
+            <p>Connecting...</p>
+            <Button
+              size="SM"
+              theme="light"
+              text="Canel"
+              onClick={handleTailScaleCanel}
+            /> 
+          </div>
+        )}
+        {tailScaleConnectionState === "connected" && (
+          <div className="space-y-4">
+            <div className="flex items-center gap-x-2 justify-between">
+              {tailScaleLoginUrl && (
+                <p>Login URL: <a href={tailScaleLoginUrl} target="_blank" rel="noopener noreferrer" className="text-blue-600 dark:text-blue-400">LoginUrl</a></p> 
+              )}
+              {!tailScaleLoginUrl && (
+                <p>Wait to obtain the Login URL</p> 
+              )} 
+              <Button
+                size="SM"
+                theme="light"
+                text= { isDisconnecting  ? "Quitting..." : "Quit"}
+                onClick={handleTailScaleLogout}
+                disabled={ isDisconnecting === true }
               />
             </div>
-          ) : (
-            <div>
-              <div className="space-y-2">
-                <p className="text-sm text-slate-600 dark:text-slate-300">
-                  Your device is adopted to the Cloud
-                </p>
-                <div>
-                  <Button
-                    size="SM"
-                    theme="light"
-                    text="De-register from Cloud"
-                    className="text-red-600"
-                    onClick={() => {
-                      if (deviceId) {
-                        if (
-                          window.confirm(
-                            "Are you sure you want to de-register this device?",
-                          )
-                        ) {
-                          deregisterDevice();
-                        }
-                      } else {
-                        notifications.error("No device ID available");
-                      }
-                    }}
-                  />
-                </div>
-              </div>
+          </div>
+        )}
+        {tailScaleConnectionState === "logined" && (
+          <div className="space-y-4">
+            <div className="flex items-center gap-x-2 justify-between">
+              <p>IP: {tailScaleIP}</p>
+              <Button
+                size="SM"
+                theme="light"
+                text= { isDisconnecting  ? "Quitting..." : "Quit"}
+                onClick={handleTailScaleLogout}
+                disabled={ isDisconnecting === true }
+              />
             </div>
-          )}
-        </div>
+          </div>
+        )}
+        {tailScaleConnectionState === "closed" && (
+          <div className="text-sm text-red-600 dark:text-red-400">
+            <p>Connect fail, please retry</p>
+          </div>    
+        )}  
+      </div>
+
+      <div className="space-y-4">
+        {/* Add ZeroTier settings item */}
+        <SettingsItem
+          title="ZeroTier"
+          badge="Experimental"
+          description="Connect to ZeroTier VPN network"
+        >
+        </SettingsItem>
+      </div>
+
+      <div className="space-y-4"> 
+        {zeroTierConnectionState === "connecting" && (
+          <div className="text-sm text-slate-700 dark:text-slate-300">
+            <p>Connecting...</p>
+          </div>
+        )}
+        {zeroTierConnectionState === "connected" && (
+          <div className="space-y-4">
+            <div className="flex items-center gap-x-2 justify-between">
+              <p>Network ID: {zeroTierNetworkID}</p>
+              <Button
+                size="SM"
+                theme="light"
+                text="Quit"
+                onClick={handleZeroTierLogout}
+              />
+            </div>
+          </div>
+        )}
+       {zeroTierConnectionState === "logined" && (
+          <div className="space-y-4">
+            <div className="flex items-center gap-x-2 justify-between">
+              <p>Network ID: {zeroTierNetworkID}</p>
+              <Button
+                size="SM"
+                theme="light"
+                text="Quit"
+                onClick={handleZeroTierLogout}
+              />              
+            </div>
+            <div className="flex items-center gap-x-2 justify-between">
+              <p>Network IP: {zeroTierIP}</p>
+            </div>
+          </div>
+       )} 
+       {zeroTierConnectionState === "closed" && (
+          <div className="flex items-center gap-x-2 justify-between">
+            <p>Connect fail, please retry</p>
+            <Button
+              size="SM"
+              theme="light"
+              text="Retry"
+              onClick={handleZeroTierLogout}
+            /> 
+          </div>
+        )
+       }
+      </div>
+      
+      <div className="space-y-4"> 
+        {(zeroTierConnectionState === "disconnected") && (
+          <div className="flex items-end gap-x-2">
+            <InputFieldWithLabel
+              size="SM"
+              label="Network ID"
+              value={tempNetworkID}
+              onChange={handleZeroTierNetworkIdChange}
+              placeholder="Enter ZeroTier Network ID"
+            /> 
+            <Button
+              size="SM"
+              theme="light"
+              text="Join in"
+              onClick={handleZeroTierLogin}
+            />
+          </div> 
+        )}
+      </div>    
+
       </div>
     </div>
   );

ui/src/routes/devices.$id.settings.advanced.tsx

@@ -27,12 +27,6 @@ export default function SettingsAdvancedRoute() {
   const settings = useSettingsStore();
 
   useEffect(() => {
-    send("getDevModeState", {}, resp => {
-      if ("error" in resp) return;
-      const result = resp.result as { enabled: boolean };
-      setDeveloperMode(result.enabled);
-    });
-
     send("getSSHKeyState", {}, resp => {
       if ("error" in resp) return;
       setSSHKey(resp.result as string);
@@ -43,11 +37,6 @@ export default function SettingsAdvancedRoute() {
       setUsbEmulationEnabled(resp.result as boolean);
     });
 
-    send("getDevChannelState", {}, resp => {
-      if ("error" in resp) return;
-      setDevChannel(resp.result as boolean);
-    });
-
     send("getLocalLoopbackOnly", {}, resp => {
       if ("error" in resp) return;
       setLocalLoopbackOnly(resp.result as boolean);
@@ -101,36 +90,6 @@ export default function SettingsAdvancedRoute() {
     });
   }, [send, sshKey]);
 
-  const handleDevModeChange = useCallback(
-    (developerMode: boolean) => {
-      send("setDevModeState", { enabled: developerMode }, resp => {
-        if ("error" in resp) {
-          notifications.error(
-            `Failed to set dev mode: ${resp.error.data || "Unknown error"}`,
-          );
-          return;
-        }
-        setDeveloperMode(developerMode);
-      });
-    },
-    [send, setDeveloperMode],
-  );
-
-  const handleDevChannelChange = useCallback(
-    (enabled: boolean) => {
-      send("setDevChannelState", { enabled }, resp => {
-        if ("error" in resp) {
-          notifications.error(
-            `Failed to set dev channel state: ${resp.error.data || "Unknown error"}`,
-          );
-          return;
-        }
-        setDevChannel(enabled);
-      });
-    },
-    [send, setDevChannel],
-  );
-
   const applyLoopbackOnlyMode = useCallback(
     (enabled: boolean) => {
       send("setLocalLoopbackOnly", { enabled }, resp => {
@@ -181,63 +140,6 @@ export default function SettingsAdvancedRoute() {
       />
 
       <div className="space-y-4">
-        <SettingsItem
-          title="Dev Channel Updates"
-          description="Receive early updates from the development channel"
-        >
-          <Checkbox
-            checked={devChannel}
-            onChange={e => {
-              handleDevChannelChange(e.target.checked);
-            }}
-          />
-        </SettingsItem>
-        <SettingsItem
-          title="Developer Mode"
-          description="Enable advanced features for developers"
-        >
-          <Checkbox
-            checked={settings.developerMode}
-            onChange={e => handleDevModeChange(e.target.checked)}
-          />
-        </SettingsItem>
-
-        {settings.developerMode && (
-          <GridCard>
-            <div className="flex items-start gap-x-4 p-4 select-none">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="currentColor"
-                className="mt-1 h-8 w-8 shrink-0 text-amber-600 dark:text-amber-500"
-              >
-                <path
-                  fillRule="evenodd"
-                  d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z"
-                  clipRule="evenodd"
-                />
-              </svg>
-              <div className="space-y-3">
-                <div className="space-y-2">
-                  <h3 className="text-base font-bold text-slate-900 dark:text-white">
-                    Developer Mode Enabled
-                  </h3>
-                  <div>
-                    <ul className="list-disc space-y-1 pl-5 text-xs text-slate-700 dark:text-slate-300">
-                      <li>Security is weakened while active</li>
-                      <li>Only use if you understand the risks</li>
-                    </ul>
-                  </div>
-                </div>
-
-                <div className="text-xs text-slate-700 dark:text-slate-300">
-                  For advanced users only. Not for production use.
-                </div>
-              </div>
-            </div>
-          </GridCard>
-        )}
-
         <SettingsItem
           title="Loopback-Only Mode"
           description="Restrict web interface access to localhost only (127.0.0.1)"
@@ -248,7 +150,7 @@ export default function SettingsAdvancedRoute() {
           />
         </SettingsItem>
 
-        {isOnDevice && settings.developerMode && (
+        {isOnDevice && (
           <div className="space-y-4">
             <SettingsItem
               title="SSH Access"

ui/src/routes/devices.$id.settings.appearance.tsx

@@ -32,7 +32,7 @@ export default function SettingsAppearanceRoute() {
     <div className="space-y-4">
       <SettingsPageHeader
         title="Appearance"
-        description="Customize the look and feel of your JetKVM interface"
+        description="Customize the look and feel of your KVM interface"
       />
       <SettingsItem title="Theme" description="Choose your preferred color theme">
         <SelectMenuBasic

ui/src/routes/devices.$id.settings.ctrlaltdel.tsx

@@ -13,7 +13,7 @@ export default function SettingsCtrlAltDelRoute() {
     <div className="space-y-4">
       <SettingsPageHeader
         title="Action Bar"
-        description="Customize the action bar of your JetKVM interface"
+        description="Customize the action bar of your KVM interface"
       />
       <div className="space-y-4">
         <SettingsItem title="Enable Ctrl-Alt-Del" description="Enable the Ctrl-Alt-Del key on the virtual keyboard">

ui/src/routes/devices.$id.settings.general._index.tsx

@@ -53,7 +53,7 @@ export default function SettingsGeneralRoute() {
         <div className="space-y-4 pb-2">
           <div className="mt-2 flex items-center justify-between gap-x-2">
             <SettingsItem
-              title="Check for Updates"
+              title="Version"
               description={
                 currentVersions ? (
                   <>
@@ -79,7 +79,7 @@ export default function SettingsGeneralRoute() {
               />
             </div>
           </div>
-          <div className="space-y-4">
+          <div className="hidden space-y-4">
             <SettingsItem
               title="Auto Update"
               description="Automatically update the device to the latest version"

ui/src/routes/devices.$id.settings.general.update.tsx

@@ -9,6 +9,13 @@ import { UpdateState, useDeviceStore, useUpdateStore } from "@/hooks/stores";
 import notifications from "@/notifications";
 import LoadingSpinner from "@/components/LoadingSpinner";
 import { useDeviceUiNavigation } from "@/hooks/useAppNavigation";
+import { SelectMenuBasic } from "../components/SelectMenuBasic";
+import { SettingsItem } from "./devices.$id.settings";
+
+const updateSourceOptions = [
+  { value: "github", label:"github"},
+  { value: "gitee", label:"gitee"},
+];
 
 export default function SettingsGeneralUpdateRoute() {
   const navigate = useNavigate();
@@ -49,6 +56,12 @@ export interface SystemVersionInfo {
   error?: string;
 }
 
+export interface LocalVersionInfo {
+  appVersion: string; 
+  systemVersion: string;
+}
+
+
 export function Dialog({
   onClose,
   onConfirmUpdate,
@@ -435,6 +448,23 @@ function UpdateAvailableState({
   onConfirmUpdate: () => void;
   onClose: () => void;
 }) {
+  
+  const [send] = useJsonRpc();
+  const [updateSource, setUpdateSource] = useState("github");
+  const handleUpdateSourceChange = (source: string) => {
+    send("setUpdateSource", { source: source }, resp => {
+      if ("error" in resp) {
+        notifications.error(
+          `Failed to set stream quality: ${resp.error.data || "Unknown error"}`,
+        );
+        return;
+      }
+      
+      notifications.success(`Update source set to ${updateSourceOptions.find(x => x.value === source)?.label}`);
+      setUpdateSource(source);
+    }); 
+  };
+  
   return (
     <div className="flex flex-col items-start justify-start space-y-4 text-left">
       <div className="text-left">
@@ -460,9 +490,27 @@ function UpdateAvailableState({
             </>
           ) : null}
         </p>
-        <div className="flex items-center justify-start gap-x-2">
-          <Button size="SM" theme="primary" text="Update Now" onClick={onConfirmUpdate} />
-          <Button size="SM" theme="light" text="Do it later" onClick={onClose} />
+          
+        <div className="space-y-4">
+            <SettingsItem
+              title="Update Source"
+              description="Select the update source"
+            >
+              <SelectMenuBasic
+                size="SM"
+                label=""
+                value={updateSource}
+                options={updateSourceOptions}
+                onChange={e => handleUpdateSourceChange(e.target.value)}
+              />
+            </SettingsItem>  
+        </div>
+
+        <div className="space-y-4">
+          <div className="flex items-center justify-start gap-x-2">
+            <Button size="SM" theme="primary" text="Update Now" onClick={onConfirmUpdate} />
+            <Button size="SM" theme="light" text="Do it later" onClick={onClose} />
+          </div>
         </div>
       </div>
     </div>

ui/src/routes/devices.$id.settings.hardware.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useCallback } from "react";
 
 import { SettingsPageHeader } from "@components/SettingsPageheader";
 import { SettingsItem } from "@routes/devices.$id.settings";
@@ -6,6 +6,8 @@ import { BacklightSettings, useSettingsStore } from "@/hooks/stores";
 import { useJsonRpc } from "@/hooks/useJsonRpc";
 import { SelectMenuBasic } from "@components/SelectMenuBasic";
 import { UsbDeviceSetting } from "@components/UsbDeviceSetting";
+import { InputField } from "@/components/InputField";
+import { Button, LinkButton } from "@/components/Button";
 
 import notifications from "../notifications";
 import { UsbInfoSetting } from "../components/UsbInfoSetting";
@@ -71,11 +73,96 @@ export default function SettingsHardwareRoute() {
     });
   }, [send, setBacklightSettings]);
 
+  const setTimeZone = useSettingsStore(state => state.setTimeZone);
+
+  const handleTimeZoneSave = () => {
+    send("setTimeZone", { timeZone: settings.timeZone }, resp => {
+      if ("error" in resp) {
+        notifications.error(
+          `Failed to set time zone: ${resp.error.data || "Unknown error"}`,
+        );
+        return;
+      }
+      notifications.success("Time zone updated successfully");
+    });
+  };
+  
+  const handleTimeZoneChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value.trim();
+    setTimeZone(value);
+  }, []);
+
+  useEffect(() => {
+    send("getTimeZone", {}, resp => {
+      if ("error" in resp) {
+        return notifications.error(
+          `Failed to get time zone: ${resp.error.data || "Unknown error"}`,
+        );
+      }
+      console.log("Time zone:", resp.result);
+      const result = resp.result as string;
+      setTimeZone(result);
+    });
+  }, [send, setTimeZone]);
+  
+  const setLedGreenMode = useSettingsStore(state => state.setLedGreenMode);
+  const setLedYellowMode = useSettingsStore(state => state.setLedYellowMode);
+
+  const handleLedGreenModeChange = (mode: string) => {
+    setLedGreenMode(mode);
+    send("setLedGreenMode", { mode }, resp => {
+      if ("error" in resp) {
+        notifications.error(
+          `Failed to set LED-Green mode: ${resp.error.data || "Unknown error"}`,
+        );
+        return;
+      }
+      notifications.success("LED-Green mode updated successfully");
+    });
+  };
+
+  const handleLedYellowModeChange = (mode: string) => {
+    setLedYellowMode(mode);
+    send("setLedYellowMode", { mode }, resp => {
+      if ("error" in resp) {
+        notifications.error(
+          `Failed to set LED-Yellow mode: ${resp.error.data || "Unknown error"}`,
+        );
+        return;
+      }
+      notifications.success("LED-Yellow mode updated successfully");
+    });
+  };
+  
+  useEffect(() => {
+    send("getLedGreenMode", {}, resp => {
+      if ("error" in resp) {
+        return notifications.error(
+          `Failed to get LED-Green mode: ${resp.error.data || "Unknown error"}`,
+        );
+      }
+      console.log("LED-Green mode:", resp.result);
+      const result = resp.result as string;
+      setLedGreenMode(result);
+    });    
+
+    send("getLedYellowMode", {}, resp => {
+      if ("error" in resp) {
+        return notifications.error(
+          `Failed to get LED-Yellow mode: ${resp.error.data || "Unknown error"}`,
+        );
+      }
+      console.log("LED-Yellow mode:", resp.result);
+      const result = resp.result as string;
+      setLedYellowMode(result);
+    });    
+  }, [send, setLedGreenMode, setLedYellowMode]);
+  
   return (
     <div className="space-y-4">
       <SettingsPageHeader
         title="Hardware"
-        description="Configure display settings and hardware options for your JetKVM device"
+        description="Configure display settings and hardware options for your KVM device"
       />
       <div className="space-y-4">
         <SettingsItem
@@ -87,8 +174,10 @@ export default function SettingsHardwareRoute() {
             label=""
             value={settings.displayRotation.toString()}
             options={[
-              { value: "270", label: "Normal" },
-              { value: "90", label: "Inverted" },
+              { value: "180", label: "Normal" },
+              { value: "90", label: "90" },
+              { value: "0", label: "180" },
+              { value: "270", label: "270" },
             ]}
             onChange={e => {
               settings.displayRotation = e.target.value;
@@ -106,9 +195,9 @@ export default function SettingsHardwareRoute() {
             value={settings.backlightSettings.max_brightness.toString()}
             options={[
               { value: "0", label: "Off" },
-              { value: "10", label: "Low" },
-              { value: "35", label: "Medium" },
-              { value: "64", label: "High" },
+              { value: "64", label: "Low" },
+              { value: "128", label: "Medium" },
+              { value: "200", label: "High" },
             ]}
             onChange={e => {
               settings.backlightSettings.max_brightness = parseInt(e.target.value);
@@ -170,11 +259,78 @@ export default function SettingsHardwareRoute() {
                 }}
               />
             </SettingsItem>
+          
+            <p className="text-xs text-slate-600 dark:text-slate-400">
+              The display will wake up when the connection state changes, or when touched.
+            </p>
+
           </>
         )}
-        <p className="text-xs text-slate-600 dark:text-slate-400">
-          The display will wake up when the connection state changes, or when touched.
-        </p>
+
+        <SettingsItem
+          title="Time Zone"
+          description="Set the time zone for the clock"
+        >
+        </SettingsItem>
+        <div className="space-y-4">  
+          <div className="flex items-end gap-x-2">
+            <InputField
+              size="SM"
+              value={settings.timeZone.toString()}
+              onChange={handleTimeZoneChange}
+              placeholder="Enter Time Zone"
+            /> 
+            <Button
+              size="SM"
+              theme="light"
+              text="Set"
+              onClick={handleTimeZoneSave}
+            />
+          </div> 
+        </div>
+
+        <SettingsItem
+          title="LED-Green Type"
+          description="Set the type of system status indicated by the LED-Green"
+        >
+          <SelectMenuBasic
+            size="SM"
+            label=""
+            value={settings.ledGreenMode.toString()}
+            options={[
+              { value: "network-link", label: "network-link" },
+              { value: "network-tx", label: "network-tx" },
+              { value: "network-rx", label: "network-rx" },
+              { value: "kernel-activity", label: "kernel-activity" },
+            ]}
+            onChange={e => {
+              settings.ledGreenMode = e.target.value;
+              handleLedGreenModeChange(settings.ledGreenMode);
+            }}
+          />
+        </SettingsItem>
+
+        <SettingsItem
+          title="LED-Yellow Type"
+          description="Set the type of system status indicated by the LED-Yellow"
+        >
+          <SelectMenuBasic
+            size="SM"
+            label=""
+            value={settings.ledYellowMode.toString()}
+            options={[
+              { value: "network-link", label: "network-link" },
+              { value: "network-tx", label: "network-tx" },
+              { value: "network-rx", label: "network-rx" },
+              { value: "kernel-activity", label: "kernel-activity" },
+            ]}
+            onChange={e => {
+              settings.ledYellowMode = e.target.value;
+              handleLedYellowModeChange(settings.ledYellowMode);
+            }}
+          />
+        </SettingsItem>
+
       </div>
 
       <FeatureFlag minAppVersion="0.3.8">

ui/src/routes/devices.$id.settings.keyboard.tsx

@@ -87,7 +87,7 @@ export default function SettingsKeyboardRoute() {
           />
         </SettingsItem>
         <p className="text-xs text-slate-600 dark:text-slate-400">
-          Pasting text sends individual key strokes to the target device. The keyboard layout determines which key codes are being sent. Ensure that the keyboard layout in JetKVM matches the settings in the operating system.
+          Pasting text sends individual key strokes to the target device. The keyboard layout determines which key codes are being sent. Ensure that the keyboard layout in KVM matches the settings in the operating system.
         </p>
       </div>
 

ui/src/routes/devices.$id.settings.network.tsx

@@ -86,7 +86,7 @@ export default function SettingsNetworkRoute() {
   const [networkSettingsLoaded, setNetworkSettingsLoaded] = useState(false);
 
   const [customDomain, setCustomDomain] = useState<string>("");
-  const [selectedDomainOption, setSelectedDomainOption] = useState<string>("dhcp");
+  const [selectedDomainOption, setSelectedDomainOption] = useState<string>("local");
 
   useEffect(() => {
     if (networkSettings.domain && networkSettingsLoaded) {
@@ -243,7 +243,8 @@ export default function SettingsNetworkRoute() {
                 <InputField
                   size="SM"
                   type="text"
-                  placeholder="jetkvm"
+                  value={networkSettings.hostname}
+                  placeholder={networkSettings.hostname}
                   defaultValue={networkSettings.hostname}
                   onChange={e => {
                     handleHostnameChange(e.target.value);

ui/src/routes/devices.$id.settings.video.tsx

@@ -15,7 +15,7 @@ const defaultEdid =
 const edids = [
   {
     value: defaultEdid,
-    label: "JetKVM Default",
+    label: "KVM Default",
   },
   {
     value:
@@ -40,9 +40,16 @@ const streamQualityOptions = [
   { value: "0.1", label: "Low" },
 ];
 
+const audioModeOptions = [
+  { value: "disabled", label: "Disabled"},
+  { value: "usb", label: "USB"},
+  //{ value: "hdmi", label: "HDMI"},
+]
+
 export default function SettingsVideoRoute() {
   const [send] = useJsonRpc();
   const [streamQuality, setStreamQuality] = useState("1");
+  const [audioMode, setAudioMode] = useState("disabled");
   const [customEdidValue, setCustomEdidValue] = useState<string | null>(null);
   const [edid, setEdid] = useState<string | null>(null);
 
@@ -55,6 +62,11 @@ export default function SettingsVideoRoute() {
   const setVideoContrast = useSettingsStore(state => state.setVideoContrast);
 
   useEffect(() => {
+    send("getAudioMode", {}, resp => {
+      if ("error" in resp) return;
+      setAudioMode(String(resp.result));
+    });
+
     send("getStreamQualityFactor", {}, resp => {
       if ("error" in resp) return;
       setStreamQuality(String(resp.result));
@@ -84,6 +96,20 @@ export default function SettingsVideoRoute() {
     });
   }, [send]);
 
+  const handleAudioModeChange = (mode: string) => {
+    send("setAudioMode", { mode }, resp => {
+      if ("error" in resp) {
+        notifications.error(
+          `Failed to set Audio Mode: ${resp.error.data || "Unknown error"}`,
+        );
+        return;
+      }
+
+      notifications.success(`Audio Mode set to ${audioModeOptions.find(x => x.value === mode )?.label}.It takes effect after refreshing the page`);
+      setAudioMode(mode);
+    });
+  };
+  
   const handleStreamQualityChange = (factor: string) => {
     send("setStreamQualityFactor", { factor: Number(factor) }, resp => {
       if ("error" in resp) {
@@ -123,6 +149,20 @@ export default function SettingsVideoRoute() {
 
         <div className="space-y-4">
           <div className="space-y-4">
+            <SettingsItem
+              title="Audio Mode"
+              badge="Experimental"
+              description="Set the working mode of the audio"
+            >
+              <SelectMenuBasic
+                size="SM"
+                label=""
+                value={audioMode}
+                options={audioModeOptions}
+                onChange={e => handleAudioModeChange(e.target.value)}
+              />
+            </SettingsItem>
+
             <SettingsItem
               title="Stream Quality"
               description="Adjust the quality of the video stream"
@@ -169,7 +209,7 @@ export default function SettingsVideoRoute() {
                   step="0.1"
                   value={videoBrightness}
                   onChange={e => setVideoBrightness(parseFloat(e.target.value))}
-                  className="w-32 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
+                  className="w-32 h-2 appearance-none bg-gray-200 dark:bg-gray-700 rounded-lg cursor-pointer"
                 />
               </SettingsItem>
 

ui/src/routes/devices.$id.setup.tsx

@@ -16,37 +16,9 @@ import Fieldset from "@components/Fieldset";
 import { InputFieldWithLabel } from "@components/InputField";
 import { Button } from "@components/Button";
 import { checkAuth } from "@/main";
-import { CLOUD_API } from "@/ui.config";
 
 import api from "../api";
 
-const loader = async ({ params }: LoaderFunctionArgs) => {
-  await checkAuth();
-  const res = await fetch(`${CLOUD_API}/devices/${params.id}`, {
-    method: "GET",
-    mode: "cors",
-    credentials: "include",
-  });
-
-  if (res.ok) {
-    return res.json();
-  } else {
-    return redirect("/devices");
-  }
-};
-
-const action = async ({ request }: ActionFunctionArgs) => {
-  // Handle form submission
-  const { name, id, returnTo } = Object.fromEntries(await request.formData());
-  const res = await api.PUT(`${CLOUD_API}/devices/${id}`, { name });
-
-  if (res.ok) {
-    return redirect(returnTo?.toString() ?? `/devices/${id}`);
-  } else {
-    return { error: "There was an error creating your device" };
-  }
-};
-
 export default function SetupRoute() {
   const action = useActionData() as { error?: string };
   const { id } = useParams() as { id: string };
@@ -105,6 +77,3 @@ export default function SetupRoute() {
     </>
   );
 }
-
-SetupRoute.loader = loader;
-SetupRoute.action = action;

ui/src/routes/devices.$id.tsx

@@ -39,7 +39,7 @@ import DashboardNavbar from "@components/Header";
 import ConnectionStatsSidebar from "@/components/sidebar/connectionStats";
 import { JsonRpcRequest, useJsonRpc } from "@/hooks/useJsonRpc";
 import Terminal from "@components/Terminal";
-import { CLOUD_API, DEVICE_API } from "@/ui.config";
+import { DEVICE_API } from "@/ui.config";
 
 import UpdateInProgressStatusCard from "../components/UpdateInProgressStatusCard";
 import api from "../api";
@@ -54,7 +54,10 @@ import { FeatureFlagProvider } from "../providers/FeatureFlagProvider";
 import notifications from "../notifications";
 
 import { DeviceStatus } from "./welcome-local";
-import { SystemVersionInfo } from "./devices.$id.settings.general.update";
+import { SystemVersionInfo, LocalVersionInfo } from "./devices.$id.settings.general.update";
+
+import { useVpnStore } from "@/hooks/stores";
+
 
 interface LocalLoaderResp {
   authMode: "password" | "noPassword" | null;
@@ -74,12 +77,25 @@ export interface LocalDevice {
   deviceId: string;
 }
 
+interface TailScaleResponse {
+  state: string;
+  loginUrl: string;
+  ip: string;
+  xEdge: boolean;
+}
+
+interface ZeroTierResponse {
+  state: string;
+  networkID: string;
+  ip: string;
+}
+
 const deviceLoader = async () => {
   const res = await api
     .GET(`${DEVICE_API}/device/status`)
     .then(res => res.json() as Promise<DeviceStatus>);
 
-  if (!res.isSetup) return redirect("/welcome");
+  if (!res.isSetup) return redirect("/mode");
 
   const deviceRes = await api.GET(`${DEVICE_API}/device`);
   if (deviceRes.status === 401) return redirect("/login-local");
@@ -91,31 +107,9 @@ const deviceLoader = async () => {
   throw new Error("Error fetching device");
 };
 
-const cloudLoader = async (params: Params<string>): Promise<CloudLoaderResp> => {
-  const user = await checkAuth();
 
-  const iceResp = await api.POST(`${CLOUD_API}/webrtc/ice_config`);
-  const iceConfig = await iceResp.json();
-
-  const deviceResp = await api.GET(`${CLOUD_API}/devices/${params.id}`);
-
-  if (!deviceResp.ok) {
-    if (deviceResp.status === 404) {
-      throw new Response("Device not found", { status: 404 });
-    }
-
-    throw new Error("Error fetching device");
-  }
-
-  const { device } = (await deviceResp.json()) as {
-    device: { id: string; name: string; user: { googleId: string } };
-  };
-
-  return { user, iceConfig, deviceName: device.name || device.id };
-};
-
-const loader = async ({ params }: LoaderFunctionArgs) => {
-  return import.meta.env.MODE === "device" ? deviceLoader() : cloudLoader(params);
+const loader = async ({}: LoaderFunctionArgs) => {
+  return deviceLoader();
 };
 
 export default function KvmIdRoute() {
@@ -139,6 +133,7 @@ export default function KvmIdRoute() {
   const setDiskChannel = useRTCStore(state => state.setDiskChannel);
   const setRpcDataChannel = useRTCStore(state => state.setRpcDataChannel);
   const setTransceiver = useRTCStore(state => state.setTransceiver);
+  const setAudioTransceiver = useRTCStore(state => state.setAudioTransceiver);
   const location = useLocation();
 
   const isLegacySignalingEnabled = useRef(false);
@@ -238,9 +233,7 @@ export default function KvmIdRoute() {
   const wsProtocol = window.location.protocol === "https:" ? "wss:" : "ws:";
 
   const { sendMessage, getWebSocket } = useWebSocket(
-    isOnDevice
-      ? `${wsProtocol}//${window.location.host}/webrtc/signaling/client`
-      : `${CLOUD_API.replace("http", "ws")}/webrtc/signaling/client?id=${params.id}`,
+    `${wsProtocol}//${window.location.host}/webrtc/signaling/client?id=${params.id}`,
     {
       heartbeat: true,
       retryOnError: true,
@@ -358,42 +351,6 @@ export default function KvmIdRoute() {
     [sendMessage],
   );
 
-  const legacyHTTPSignaling = useCallback(
-    async (pc: RTCPeerConnection) => {
-      const sd = btoa(JSON.stringify(pc.localDescription));
-
-      // Legacy mode == UI in cloud with updated code connecting to older device version.
-      // In device mode, old devices wont server this JS, and on newer devices legacy mode wont be enabled
-      const sessionUrl = `${CLOUD_API}/webrtc/session`;
-
-      console.log("Trying to get remote session description");
-      setLoadingMessage(
-        `Getting remote session description...  ${signalingAttempts.current > 0 ? `(attempt ${signalingAttempts.current + 1})` : ""}`,
-      );
-      const res = await api.POST(sessionUrl, {
-        sd,
-        // When on device, we don't need to specify the device id, as it's already known
-        ...(isOnDevice ? {} : { id: params.id }),
-      });
-
-      const json = await res.json();
-      if (res.status === 401) return navigate(isOnDevice ? "/login-local" : "/login");
-      if (!res.ok) {
-        console.error("Error getting SDP", { status: res.status, json });
-        cleanupAndStopReconnecting();
-        return;
-      }
-
-      console.log("Successfully got Remote Session Description. Setting.");
-      setLoadingMessage("Setting remote session description...");
-
-      const decodedSd = atob(json.sd);
-      const parsedSd = JSON.parse(decodedSd);
-      setRemoteSessionDescription(pc, new RTCSessionDescription(parsedSd));
-    },
-    [cleanupAndStopReconnecting, navigate, params.id, setRemoteSessionDescription],
-  );
-
   const setupPeerConnection = useCallback(async () => {
     console.log("[setupPeerConnection] Setting up peer connection");
     setConnectionFailed(false);
@@ -464,10 +421,6 @@ export default function KvmIdRoute() {
         console.log("ICE Gathering completed");
         setLoadingMessage("ICE Gathering completed");
 
-        if (isLegacySignalingEnabled.current) {
-          // We can now start the https/ws connection to get the remote session description from the KVM device
-          legacyHTTPSignaling(pc);
-        }
       } else if (pc.iceGatheringState === "gathering") {
         console.log("ICE Gathering Started");
         setLoadingMessage("Gathering ICE candidates...");
@@ -479,6 +432,7 @@ export default function KvmIdRoute() {
     };
 
     setTransceiver(pc.addTransceiver("video", { direction: "recvonly" }));
+    pc.addTransceiver("audio", { direction: "recvonly" });
 
     const rpcDataChannel = pc.createDataChannel("rpc");
     rpcDataChannel.onopen = () => {
@@ -494,7 +448,6 @@ export default function KvmIdRoute() {
   }, [
     cleanupAndStopReconnecting,
     iceConfig?.iceServers,
-    legacyHTTPSignaling,
     sendWebRTCSignal,
     setDiskChannel,
     setMediaMediaStream,
@@ -502,6 +455,7 @@ export default function KvmIdRoute() {
     setPeerConnectionState,
     setRpcDataChannel,
     setTransceiver,
+    setAudioTransceiver,
   ]);
 
   useEffect(() => {
@@ -547,40 +501,57 @@ export default function KvmIdRoute() {
 
     setIsTurnServerInUse(localCandidateIsUsingTurn || remoteCandidateIsUsingTurn);
   }, [peerConnectionState, setIsTurnServerInUse]);
+  
+  // Vpn State Update
+  const tailScaleConnectionState = useVpnStore(state => state.tailScaleConnectionState);
+  const setTailScaleConnectionState = useVpnStore(state => state.setTailScaleConnectionState);
+  const tailScaleXEdge = useVpnStore(state => state.tailScaleXEdge);
+  const setTailScaleXEdge = useVpnStore(state => state.setTailScaleXEdge);
+  const setTailScaleLoginUrl = useVpnStore(state => state.setTailScaleLoginUrl); 
+  
+  const setTailScaleIP = useVpnStore(state => state.setTailScaleIP);
 
-  // TURN server usage reporting
-  const isTurnServerInUse = useRTCStore(state => state.isTurnServerInUse);
-  const lastBytesReceived = useRef<number>(0);
-  const lastBytesSent = useRef<number>(0);
+  const zeroTierConnectionState = useVpnStore(state => state.zeroTierConnectionState);
+  const zeroTierNetworkID = useVpnStore(state => state.zeroTierNetworkID);
+  const setZeroTierConnectionState = useVpnStore(state => state.setZeroTierConnectionState); 
+  const setZeroTierNetworkID = useVpnStore(state => state.setZeroTierNetworkID);
+  const setZeroTierIP = useVpnStore(state => state.setZeroTierIP);
+ 
+  const updateVpnStates = () => {
+    // TailScaleState
+    if (tailScaleConnectionState !== "connecting" && tailScaleConnectionState !== "closed") {
+      send("getTailScaleSettings", {}, resp => {
+        if ("error" in resp) return;
+        const result = resp.result as TailScaleResponse;
+        const validState = ["closed", "connecting", "connected", "disconnected", "logined"].includes(result.state)
+          ? result.state as "closed" | "connecting" | "connected" | "disconnected" | "logined"
+          : "closed";
 
-  useInterval(() => {
-    // Don't report usage if we're not using the turn server
-    if (!isTurnServerInUse) return;
-    const { candidatePairStats } = useRTCStore.getState();
-
-    const lastCandidatePair = Array.from(candidatePairStats).pop();
-    const report = lastCandidatePair?.[1];
-    if (!report) return;
-
-    let bytesReceivedDelta = 0;
-    let bytesSentDelta = 0;
-
-    if (report.bytesReceived) {
-      bytesReceivedDelta = report.bytesReceived - lastBytesReceived.current;
-      lastBytesReceived.current = report.bytesReceived;
+        if(tailScaleConnectionState !== "disconnected" ) {
+          setTailScaleXEdge(result.xEdge);
+        }
+        setTailScaleConnectionState(validState);
+        setTailScaleLoginUrl(result.loginUrl);
+        setTailScaleIP(result.ip);
+      });
     }
-
-    if (report.bytesSent) {
-      bytesSentDelta = report.bytesSent - lastBytesSent.current;
-      lastBytesSent.current = report.bytesSent;
+    
+    // ZeroTier
+    if (zeroTierConnectionState !== "connecting" && zeroTierConnectionState !== "closed") { 
+      send("getZeroTierSettings", {}, resp => {
+        if ("error" in resp) return;
+        const result = resp.result as ZeroTierResponse;
+        const validState = ["closed", "connecting", "connected", "disconnected", "logined"].includes(result.state)
+          ? result.state as "closed" | "connecting" | "connected" | "disconnected" | "logined"
+          : "closed";
+        setZeroTierConnectionState(validState);
+        setZeroTierNetworkID(result.networkID);
+        setZeroTierIP(result.ip);
+      });
     }
+  }
 
-    // Fire and forget
-    api.POST(`${CLOUD_API}/webrtc/turn_activity`, {
-      bytesReceived: bytesReceivedDelta,
-      bytesSent: bytesSentDelta,
-    });
-  }, 10000);
+  useInterval(updateVpnStates, 5000);
 
   const setNetworkState = useNetworkStateStore(state => state.setNetworkState);
 
@@ -654,6 +625,7 @@ export default function KvmIdRoute() {
       if ("error" in resp) return;
       setHdmiState(resp.result as Parameters<VideoState["setHdmiState"]>[0]);
     });
+    updateVpnStates();
   }, [rpcDataChannel?.readyState, send, setHdmiState]);
 
   // request keyboard led state from the device
@@ -714,14 +686,20 @@ export default function KvmIdRoute() {
 
   useEffect(() => {
     if (!peerConnection) return;
-    if (!kvmTerminal) {
-      setKvmTerminal(peerConnection.createDataChannel("terminal"));
-    }
+    //if (!kvmTerminal) {
+    //  setKvmTerminal(peerConnection.createDataChannel("terminal"));
+    //}
 
-    if (!serialConsole) {
-      setSerialConsole(peerConnection.createDataChannel("serial"));
-    }
-  }, [kvmTerminal, peerConnection, serialConsole]);
+    //if (!serialConsole) {
+    //  setSerialConsole(peerConnection.createDataChannel("serial"));
+    //}
+    const terminalChannel = peerConnection.createDataChannel("terminal");
+    setKvmTerminal(terminalChannel);
+    const serialChannel = peerConnection.createDataChannel("serial");
+    setSerialConsole(serialChannel);
+
+  //}, [kvmTerminal, peerConnection, serialConsole]);
+  }, [peerConnection]);
 
   const outlet = useOutlet();
   const onModalClose = useCallback(() => {
@@ -735,19 +713,15 @@ export default function KvmIdRoute() {
   useEffect(() => {
     if (appVersion) return;
 
-    send("getUpdateStatus", {}, async resp => {
+    send("getLocalUpdateStatus", {}, async resp => {
       if ("error" in resp) {
         notifications.error(`Failed to get device version: ${resp.error}`);
         return 
       }
 
-      const result = resp.result as SystemVersionInfo;
-      if (result.error) {
-        notifications.error(`Failed to get device version: ${result.error}`);
-      }
-
-      setAppVersion(result.local.appVersion);
-      setSystemVersion(result.local.systemVersion);
+      const result = resp.result as LocalVersionInfo;
+      setAppVersion(result.appVersion);
+      setSystemVersion(result.systemVersion);
     });
   }, [appVersion, send, setAppVersion, setSystemVersion]);
 
@@ -824,7 +798,7 @@ export default function KvmIdRoute() {
             isLoggedIn={authMode === "password" || !!user}
             userEmail={user?.email}
             picture={user?.picture}
-            kvmName={deviceName ?? "JetKVM Device"}
+            kvmName={deviceName ?? "KVM Device"}
           />
 
           <div className="relative flex h-full w-full overflow-hidden">

ui/src/routes/devices.tsx

@@ -9,31 +9,12 @@ import KvmCard from "@components/KvmCard";
 import { LinkButton } from "@components/Button";
 import { User } from "@/hooks/stores";
 import { checkAuth } from "@/main";
-import { CLOUD_API } from "@/ui.config";
 
 interface LoaderData {
   devices: { id: string; name: string; online: boolean; lastSeen: string }[];
   user: User;
 }
 
-const loader = async () => {
-  const user = await checkAuth();
-
-  try {
-    const res = await fetch(`${CLOUD_API}/devices`, {
-      method: "GET",
-      credentials: "include",
-      mode: "cors",
-    });
-
-    const { devices } = await res.json();
-    return { devices, user };
-  } catch (e) {
-    console.error(e);
-    return { devices: [] };
-  }
-};
-
 export default function DevicesRoute() {
   const { devices, user } = useLoaderData() as LoaderData;
   const revalidate = useRevalidator();
@@ -66,10 +47,10 @@ export default function DevicesRoute() {
                 <EmptyCard
                   IconElm={LuMonitorSmartphone}
                   headline="No devices found"
-                  description="You don't have any devices with enabled JetKVM Cloud yet."
+                  description="You don't have any devices with enabled KVM Cloud yet."
                   BtnElm={
                     <LinkButton
-                      to="https://jetkvm.com/docs/networking/remote-access"
+                      to="https://wiki.luckfox.com/intro"
                       size="SM"
                       theme="primary"
                       TrailingIcon={ArrowRightIcon}
@@ -101,5 +82,3 @@ export default function DevicesRoute() {
     </div>
   );
 }
-
-DevicesRoute.loader = loader;

ui/src/routes/login-local.tsx

@@ -8,8 +8,7 @@ import Container from "@components/Container";
 import Fieldset from "@components/Fieldset";
 import { InputFieldWithLabel } from "@components/InputField";
 import { Button } from "@components/Button";
-import LogoBlueIcon from "@/assets/logo-blue.png";
-import LogoWhiteIcon from "@/assets/logo-white.svg";
+import LogoLuckfox from "@/assets/logo-luckfox.png";
 import { DEVICE_API } from "@/ui.config";
 
 import api from "../api";
@@ -63,19 +62,19 @@ export default function LoginLocalRoute() {
             <div className="-mt-32 max-w-2xl space-y-8">
               <div className="flex items-center justify-center">
                 <img
-                  src={LogoWhiteIcon}
+                  src={LogoLuckfox}
                   alt=""
                   className="-ml-4 hidden h-[32px] dark:block"
                 />
-                <img src={LogoBlueIcon} alt="" className="-ml-4 h-[32px] dark:hidden" />
+                <img src={LogoLuckfox} alt="" className="-ml-4 h-[32px] dark:hidden" />
               </div>
 
               <div className="space-y-2 text-center">
                 <h1 className="text-4xl font-semibold text-black dark:text-white">
-                  Welcome back to JetKVM
+                  Welcome back to KVM
                 </h1>
                 <p className="font-medium text-slate-600 dark:text-slate-400">
-                  Enter your password to access your JetKVM.
+                  Enter your password to access your KVM.
                 </p>
               </div>
 
@@ -120,7 +119,7 @@ export default function LoginLocalRoute() {
 
                   <div className="mt-4 flex justify-start text-xs text-slate-500 dark:text-slate-400">
                     <ExtLink
-                      href="https://jetkvm.com/docs/networking/local-access#reset-password"
+                      href="https://wiki.luckfox.com/intro"
                       className="hover:underline"
                     >
                       Forgot password?

ui/src/routes/login.tsx

@@ -11,9 +11,8 @@ export default function LoginRoute() {
     return (
       <AuthLayout
         showCounter={true}
-        title="Connect your JetKVM to the cloud"
+        title="Connect your KVM to the cloud"
         description="Unlock remote access and advanced features for your device"
-        action="Log in & Connect device"
         // Header CTA
         cta="Don't have an account?"
         ctaHref={`/signup?${sq.toString()}`}
@@ -23,11 +22,10 @@ export default function LoginRoute() {
 
   return (
     <AuthLayout
-      title="Log in to your JetKVM account"
+      title="Log in to your KVM account"
       description="Log in to access and manage your devices securely"
-      action="Log in"
       // Header CTA
-      cta="New to JetKVM?"
+      cta="New to KVM?"
       ctaHref={`/signup?${sq.toString()}`}
     />
   );

ui/src/routes/signup.tsx

@@ -11,9 +11,8 @@ export default function SignupRoute() {
     return (
       <AuthLayout
         showCounter={true}
-        title="Connect your JetKVM to the cloud"
+        title="Connect your KVM to the cloud"
         description="Unlock remote access and advanced features for your device."
-        action="Signup & Connect device"
         cta="Already have an account?"
         ctaHref={`/login?${sq.toString()}`}
       />
@@ -22,9 +21,8 @@ export default function SignupRoute() {
 
   return (
     <AuthLayout
-      title="Create your JetKVM account"
+      title="Create your KVM account"
       description="Create your account and start managing your devices with ease."
-      action="Create Account"
       // Header CTA
       cta="Already have an account?"
       ctaHref={`/login?${sq.toString()}`}

ui/src/routes/welcome-local.mode.tsx

@@ -4,8 +4,7 @@ import { useState } from "react";
 import GridBackground from "@components/GridBackground";
 import Container from "@components/Container";
 import { Button } from "@components/Button";
-import LogoBlueIcon from "@/assets/logo-blue.png";
-import LogoWhiteIcon from "@/assets/logo-white.svg";
+import LogoLuckfox from "@/assets/logo-luckfox.png";
 import { DEVICE_API } from "@/ui.config";
 
 import { GridCard } from "../components/Card";
@@ -29,7 +28,7 @@ const action = async ({ request }: ActionFunctionArgs) => {
   if (!localAuthMode) return { error: "Please select an authentication mode" };
 
   if (localAuthMode === "password") {
-    return redirect("/welcome/password");
+    return redirect("/mode/password");
   }
 
   if (localAuthMode === "noPassword") {
@@ -62,11 +61,11 @@ export default function WelcomeLocalModeRoute() {
             <div className="max-w-xl space-y-8">
               <div className="animate-fadeIn flex items-center justify-center opacity-0">
                 <img
-                  src={LogoWhiteIcon}
+                  src={LogoLuckfox}
                   alt=""
                   className="-ml-4 hidden h-[32px] dark:block"
                 />
-                <img src={LogoBlueIcon} alt="" className="-ml-4 h-[32px] dark:hidden" />
+                <img src={LogoLuckfox} alt="" className="-ml-4 h-[32px] dark:hidden" />
               </div>
 
               <div
@@ -77,7 +76,7 @@ export default function WelcomeLocalModeRoute() {
                   Local Authentication Method
                 </h1>
                 <p className="font-medium text-slate-600 dark:text-slate-400">
-                  Select how you{"'"}d like to secure your JetKVM device locally.
+                  Select how you{"'"}d like to secure your KVM device locally.
                 </p>
               </div>
 

ui/src/routes/welcome-local.password.tsx

@@ -7,8 +7,7 @@ import Container from "@components/Container";
 import Fieldset from "@components/Fieldset";
 import { InputFieldWithLabel } from "@components/InputField";
 import { Button } from "@components/Button";
-import LogoBlueIcon from "@/assets/logo-blue.png";
-import LogoWhiteIcon from "@/assets/logo-white.svg";
+import LogoLuckfox from "@/assets/logo-luckfox.png";
 import { DEVICE_API } from "@/ui.config";
 
 import api from "../api";
@@ -73,11 +72,11 @@ export default function WelcomeLocalPasswordRoute() {
             <div className="max-w-2xl space-y-8">
               <div className="animate-fadeIn flex items-center justify-center opacity-0">
                 <img
-                  src={LogoWhiteIcon}
+                  src={LogoLuckfox}
                   alt=""
                   className="-ml-4 hidden h-[32px] dark:block"
                 />
-                <img src={LogoBlueIcon} alt="" className="-ml-4 h-[32px] dark:hidden" />
+                <img src={LogoLuckfox} alt="" className="-ml-4 h-[32px] dark:hidden" />
               </div>
 
               <div
@@ -88,7 +87,7 @@ export default function WelcomeLocalPasswordRoute() {
                   Set a Password
                 </h1>
                 <p className="font-medium text-slate-600 dark:text-slate-400">
-                  Create a strong password to secure your JetKVM device locally.
+                  Create a strong password to secure your KVM device locally.
                 </p>
               </div>
 

ui/src/routes/welcome-local.tsx

@@ -5,9 +5,7 @@ import { redirect } from "react-router-dom";
 import GridBackground from "@components/GridBackground";
 import Container from "@components/Container";
 import { LinkButton } from "@components/Button";
-import LogoBlueIcon from "@/assets/logo-blue.png";
-import LogoWhiteIcon from "@/assets/logo-white.svg";
-import DeviceImage from "@/assets/jetkvm-device-still.png";
+import LogoLuckfox from "@/assets/logo-luckfox.png";
 import LogoMark from "@/assets/logo-mark.png";
 import { DEVICE_API } from "@/ui.config";
 
@@ -27,19 +25,12 @@ const loader = async () => {
 };
 
 export default function WelcomeRoute() {
-  const [imageLoaded, setImageLoaded] = useState(false);
-
-  useEffect(() => {
-    const img = new Image();
-    img.src = DeviceImage;
-    img.onload = () => setImageLoaded(true);
-  }, []);
 
   return (
     <>
       <GridBackground />
       <div className="grid min-h-screen">
-        {imageLoaded && (
+
           <Container>
             <div className="isolate flex h-full w-full items-center justify-center">
               <div className="max-w-3xl text-center">
@@ -47,60 +38,51 @@ export default function WelcomeRoute() {
                   <div className="space-y-4">
                     <div className="animate-fadeIn animation-delay-1000 flex items-center justify-center opacity-0">
                       <img
-                        src={LogoWhiteIcon}
-                        alt="JetKVM Logo"
+                        src={LogoLuckfox}
+                        alt="KVM Logo"
                         className="hidden h-[32px] dark:block"
                       />
                       <img
-                        src={LogoBlueIcon}
-                        alt="JetKVM Logo"
+                        src={LogoLuckfox}
+                        alt="KVM Logo"
                         className="h-[32px] dark:hidden"
                       />
                     </div>
 
                     <div className="animate-fadeIn animation-delay-1500 space-y-1 opacity-0">
                       <h1 className="text-4xl font-semibold text-black dark:text-white">
-                        Welcome to JetKVM
+                        Welcome to KVM
                       </h1>
                       <p className="text-lg font-medium text-slate-600 dark:text-slate-400">
                         Control any computer remotely
                       </p>
                     </div>
                   </div>
-
-                  <div className="-mt-2! -ml-6 flex items-center justify-center">
-                    <img
-                      src={DeviceImage}
-                      alt="JetKVM Device"
-                      className="animation-delay-300 animate-fadeInScaleFloat max-w-md scale-[0.98] opacity-0 transition-all duration-1000 ease-out"
-                    />
-                  </div>
                 </div>
                 <div className="-mt-8 space-y-4">
                   <p
                     style={{ animationDelay: "2000ms" }}
                     className="animate-fadeIn mx-auto max-w-lg text-lg text-slate-700 opacity-0 dark:text-slate-300"
                   >
-                    JetKVM combines powerful hardware with intuitive software to provide a
+                    KVM combines powerful hardware with intuitive software to provide a
                     seamless remote control experience.
                   </p>
                   <div className="animate-fadeIn animation-delay-2300 opacity-0">
                     <LinkButton
                       size="LG"
                       theme="light"
-                      text="Set up your JetKVM"
+                      text="Set up your KVM"
                       LeadingIcon={({ className }) => (
                         <img src={LogoMark} className={cx(className, "mr-1.5 h-5!")} />
                       )}
                       textAlign="center"
-                      to="/welcome/mode"
+                      to="/mode"
                     />
                   </div>
                 </div>
               </div>
             </div>
           </Container>
-        )}
       </div>
     </>
   );