Merge 87f36167f3 into f3b4dbce49

* feat(ntp): use ntp server from dhcp info

* feat(ntp): use ntp server from dhcp info

* feat(ntp): add delay between time sync attempts

* chore(ntp): more logging

.devcontainer/default/devcontainer.json

@@ -1,5 +1,5 @@
 {
-	"name": "JetKVM",
+	"name": "JetKVM Default",
 	"image": "mcr.microsoft.com/devcontainers/go:1-1.23-bookworm",
 	"features": {
 		"ghcr.io/devcontainers/features/node:1": {

.devcontainer/podman/devcontainer.json

@@ -0,0 +1,19 @@
+{
+	"name": "JetKVM Podman",
+	"image": "mcr.microsoft.com/devcontainers/go:1-1.23-bookworm",
+	"features": {
+		"ghcr.io/devcontainers/features/node:1": {
+			// Should match what is defined in ui/package.json
+			"version": "21.1.0"
+		}
+	},
+	"runArgs": [
+		"--userns=keep-id",
+		"--security-opt=label=disable",
+		"--security-opt=label=nested"
+	],
+	"containerUser": "vscode",
+	"containerEnv": {
+		"HOME": "/home/vscode"
+	}
+}

config.go

@@ -12,24 +12,30 @@ type WakeOnLanDevice struct {
 }
 
 type Config struct {
-	CloudURL          string            `json:"cloud_url"`
+	CloudURL             string            `json:"cloud_url"`
-	CloudToken        string            `json:"cloud_token"`
+	CloudToken           string            `json:"cloud_token"`
-	GoogleIdentity    string            `json:"google_identity"`
+	GoogleIdentity       string            `json:"google_identity"`
-	JigglerEnabled    bool              `json:"jiggler_enabled"`
+	JigglerEnabled       bool              `json:"jiggler_enabled"`
-	AutoUpdateEnabled bool              `json:"auto_update_enabled"`
+	AutoUpdateEnabled    bool              `json:"auto_update_enabled"`
-	IncludePreRelease bool              `json:"include_pre_release"`
+	IncludePreRelease    bool              `json:"include_pre_release"`
-	HashedPassword    string            `json:"hashed_password"`
+	HashedPassword       string            `json:"hashed_password"`
-	LocalAuthToken    string            `json:"local_auth_token"`
+	LocalAuthToken       string            `json:"local_auth_token"`
-	LocalAuthMode     string            `json:"localAuthMode"` //TODO: fix it with migration
+	LocalAuthMode        string            `json:"localAuthMode"` //TODO: fix it with migration
-	WakeOnLanDevices  []WakeOnLanDevice `json:"wake_on_lan_devices"`
+	WakeOnLanDevices     []WakeOnLanDevice `json:"wake_on_lan_devices"`
 	EdidString        string            `json:"hdmi_edid_string"`
+  DisplayMaxBrightness int               `json:"display_max_brightness"`
+	DisplayDimAfterSec   int               `json:"display_dim_after_sec"`
+	DisplayOffAfterSec   int               `json:"display_off_after_sec"`
 }
 
 const configPath = "/userdata/kvm_config.json"
 
 var defaultConfig = &Config{
-	CloudURL:          "https://api.jetkvm.com",
+	CloudURL:             "https://api.jetkvm.com",
-	AutoUpdateEnabled: true, // Set a default value
+	AutoUpdateEnabled:    true, // Set a default value
+	DisplayMaxBrightness: 64,
+	DisplayDimAfterSec:   120,  // 2 minutes
+	DisplayOffAfterSec:   1800, // 30 minutes
 }
 
 var config *Config

dev_deploy.sh

@@ -1,3 +1,5 @@
+#!/bin/bash
+
 # Exit immediately if a command exits with a non-zero status
 set -e
 

display.go

@@ -1,12 +1,26 @@
 package kvm
 
 import (
+	"errors"
 	"fmt"
 	"log"
+	"os"
+	"strconv"
 	"time"
 )
 
 var currentScreen = "ui_Boot_Screen"
+var backlightState = 0 // 0 - NORMAL, 1 - DIMMED, 2 - OFF
+
+var (
+	dimTicker *time.Ticker
+	offTicker *time.Ticker
+)
+
+const (
+	touchscreenDevice     string = "/dev/input/event1"
+	backlightControlClass string = "/sys/class/backlight/backlight/brightness"
+)
 
 func switchToScreen(screen string) {
 	_, err := CallCtrlAction("lv_scr_load", map[string]interface{}{"obj": screen})
@@ -65,6 +79,7 @@ func requestDisplayUpdate() {
 		return
 	}
 	go func() {
+		wakeDisplay(false)
 		fmt.Println("display updating........................")
 		//TODO: only run once regardless how many pending updates
 		updateDisplay()
@@ -83,6 +98,156 @@ func updateStaticContents() {
 	updateLabelIfChanged("ui_Status_Content_Device_Id_Content_Label", GetDeviceID())
 }
 
+// setDisplayBrightness sets /sys/class/backlight/backlight/brightness to alter
+// the backlight brightness of the JetKVM hardware's display.
+func setDisplayBrightness(brightness int) error {
+	// NOTE: The actual maximum value for this is 255, but out-of-the-box, the value is set to 64.
+	// The maximum set here is set to 100 to reduce the risk of drawing too much power (and besides, 255 is very bright!).
+	if brightness > 100 || brightness < 0 {
+		return errors.New("brightness value out of bounds, must be between 0 and 100")
+	}
+
+	// Check the display backlight class is available
+	if _, err := os.Stat(backlightControlClass); errors.Is(err, os.ErrNotExist) {
+		return errors.New("brightness value cannot be set, possibly not running on JetKVM hardware")
+	}
+
+	// Set the value
+	bs := []byte(strconv.Itoa(brightness))
+	err := os.WriteFile(backlightControlClass, bs, 0644)
+	if err != nil {
+		return err
+	}
+
+	fmt.Printf("display: set brightness to %v\n", brightness)
+	return nil
+}
+
+// tick_displayDim() is called when when dim ticker expires, it simply reduces the brightness
+// of the display by half of the max brightness.
+func tick_displayDim() {
+	err := setDisplayBrightness(config.DisplayMaxBrightness / 2)
+	if err != nil {
+		fmt.Printf("display: failed to dim display: %s\n", err)
+	}
+
+	dimTicker.Stop()
+
+	backlightState = 1
+}
+
+// tick_displayOff() is called when the off ticker expires, it turns off the display
+// by setting the brightness to zero.
+func tick_displayOff() {
+	err := setDisplayBrightness(0)
+	if err != nil {
+		fmt.Printf("display: failed to turn off display: %s\n", err)
+	}
+
+	offTicker.Stop()
+
+	backlightState = 2
+}
+
+// wakeDisplay sets the display brightness back to config.DisplayMaxBrightness and stores the time the display
+// last woke, ready for displayTimeoutTick to put the display back in the dim/off states.
+// Set force to true to skip the backlight state check, this should be done if altering the tickers.
+func wakeDisplay(force bool) {
+	if backlightState == 0 && !force {
+		return
+	}
+
+	// Don't try to wake up if the display is turned off.
+	if config.DisplayMaxBrightness == 0 {
+		return
+	}
+
+	err := setDisplayBrightness(config.DisplayMaxBrightness)
+	if err != nil {
+		fmt.Printf("display wake failed, %s\n", err)
+	}
+
+	if config.DisplayDimAfterSec != 0 {
+		dimTicker.Reset(time.Duration(config.DisplayDimAfterSec) * time.Second)
+	}
+
+	if config.DisplayOffAfterSec != 0 {
+		offTicker.Reset(time.Duration(config.DisplayOffAfterSec) * time.Second)
+	}
+	backlightState = 0
+}
+
+// watchTsEvents monitors the touchscreen for events and simply calls wakeDisplay() to ensure the
+// touchscreen interface still works even with LCD dimming/off.
+// TODO: This is quite a hack, really we should be getting an event from jetkvm_native, or the whole display backlight
+// control should be hoisted up to jetkvm_native.
+func watchTsEvents() {
+	ts, err := os.OpenFile(touchscreenDevice, os.O_RDONLY, 0666)
+	if err != nil {
+		fmt.Printf("display: failed to open touchscreen device: %s\n", err)
+		return
+	}
+
+	defer ts.Close()
+
+	// This buffer is set to 24 bytes as that's the normal size of events on /dev/input
+	// Reference: https://www.kernel.org/doc/Documentation/input/input.txt
+	// This could potentially be set higher, to require multiple events to wake the display.
+	buf := make([]byte, 24)
+	for {
+		_, err := ts.Read(buf)
+		if err != nil {
+			fmt.Printf("display: failed to read from touchscreen device: %s\n", err)
+			return
+		}
+
+		wakeDisplay(false)
+	}
+}
+
+// startBacklightTickers starts the two tickers for dimming and switching off the display
+// if they're not already set. This is done separately to the init routine as the "never dim"
+// option has the value set to zero, but time.NewTicker only accept positive values.
+func startBacklightTickers() {
+	LoadConfig()
+	// Don't start the tickers if the display is switched off.
+	// Set the display to off if that's the case.
+	if config.DisplayMaxBrightness == 0 {
+		setDisplayBrightness(0)
+		return
+	}
+
+	if dimTicker == nil && config.DisplayDimAfterSec != 0 {
+		fmt.Printf("display: dim_ticker has started\n")
+		dimTicker = time.NewTicker(time.Duration(config.DisplayDimAfterSec) * time.Second)
+		defer dimTicker.Stop()
+
+		go func() {
+			for {
+				select {
+				case <-dimTicker.C:
+					tick_displayDim()
+				}
+			}
+		}()
+	}
+
+	if offTicker == nil && config.DisplayOffAfterSec != 0 {
+		fmt.Printf("display: off_ticker has started\n")
+		offTicker = time.NewTicker(time.Duration(config.DisplayOffAfterSec) * time.Second)
+		defer offTicker.Stop()
+
+		go func() {
+			for {
+				select {
+				case <-offTicker.C:
+					tick_displayOff()
+				}
+			}
+		}()
+	}
+}
+
 func init() {
 	go func() {
 		waitCtrlClientConnected()
@@ -91,6 +256,10 @@ func init() {
 		updateStaticContents()
 		displayInited = true
 		fmt.Println("display inited")
+		startBacklightTickers()
+		wakeDisplay(true)
 		requestDisplayUpdate()
 	}()
+
+	go watchTsEvents()
 }

go.mod

@@ -14,6 +14,7 @@ require (
 	github.com/google/uuid v1.6.0
 	github.com/gwatts/rootcerts v0.0.0-20240401182218-3ab9db955caf
 	github.com/hanwen/go-fuse/v2 v2.5.1
+	github.com/hashicorp/go-envparse v0.1.0
 	github.com/openstadia/go-usb-gadget v0.0.0-20231115171102-aebd56bbb965
 	github.com/pion/logging v0.2.2
 	github.com/pion/mdns/v2 v2.0.7

go.sum

@@ -49,6 +49,8 @@ github.com/gwatts/rootcerts v0.0.0-20240401182218-3ab9db955caf h1:JO6ISZIvEUitto
 github.com/gwatts/rootcerts v0.0.0-20240401182218-3ab9db955caf/go.mod h1:5Kt9XkWvkGi2OHOq0QsGxebHmhCcqJ8KCbNg/a6+n+g=
 github.com/hanwen/go-fuse/v2 v2.5.1 h1:OQBE8zVemSocRxA4OaFJbjJ5hlpCmIWbGr7r0M4uoQQ=
 github.com/hanwen/go-fuse/v2 v2.5.1/go.mod h1:xKwi1cF7nXAOBCXujD5ie0ZKsxc8GGSA1rlMJc+8IJs=
+github.com/hashicorp/go-envparse v0.1.0 h1:bE++6bhIsNCPLvgDZkYqo3nA+/PFI51pkrHdmPSDFPY=
+github.com/hashicorp/go-envparse v0.1.0/go.mod h1:OHheN1GoygLlAkTlXLXvAdnXdZxy8JUweQ1rAXx1xnc=
 github.com/json-iterator/go v1.1.12 h1:PV8peI4a0ysnczrg+LtxykD8LfKY9ML6u2jnxaEnrnM=
 github.com/json-iterator/go v1.1.12/go.mod h1:e30LSqwooZae/UwlEbR2852Gd8hjQvJoHmT4TnhNGBo=
 github.com/klauspost/cpuid/v2 v2.0.9/go.mod h1:FInQzS24/EEf25PyTYn52gqo7WaD8xa0213Md/qVLRg=

jsonrpc.go

@@ -34,6 +34,12 @@ type JSONRPCEvent struct {
 	Params  interface{} `json:"params,omitempty"`
 }
 
+type BacklightSettings struct {
+	MaxBrightness int `json:"max_brightness"`
+	DimAfter      int `json:"dim_after"`
+	OffAfter      int `json:"off_after"`
+}
+
 func writeJSONRPCResponse(response JSONRPCResponse, session *Session) {
 	responseBytes, err := json.Marshal(response)
 	if err != nil {
@@ -225,6 +231,56 @@ func rpcTryUpdate() error {
 	return nil
 }
 
+func rpcSetBacklightSettings(params BacklightSettings) error {
+	LoadConfig()
+
+	blConfig := params
+
+	// NOTE: by default, the frontend limits the brightness to 64, as that's what the device originally shipped with.
+	if blConfig.MaxBrightness > 255 || blConfig.MaxBrightness < 0 {
+		return fmt.Errorf("maxBrightness must be between 0 and 255")
+	}
+
+	if blConfig.DimAfter < 0 {
+		return fmt.Errorf("dimAfter must be a positive integer")
+	}
+
+	if blConfig.OffAfter < 0 {
+		return fmt.Errorf("offAfter must be a positive integer")
+	}
+
+	config.DisplayMaxBrightness = blConfig.MaxBrightness
+	config.DisplayDimAfterSec = blConfig.DimAfter
+	config.DisplayOffAfterSec = blConfig.OffAfter
+
+	if err := SaveConfig(); err != nil {
+		return fmt.Errorf("failed to save config: %w", err)
+	}
+
+	log.Printf("rpc: display: settings applied, max_brightness: %d, dim after: %ds, off after: %ds", config.DisplayMaxBrightness, config.DisplayDimAfterSec, config.DisplayOffAfterSec)
+
+	// If the device started up with auto-dim and/or auto-off set to zero, the display init
+	// method will not have started the tickers. So in case that has changed, attempt to start the tickers now.
+	startBacklightTickers()
+
+	// Wake the display after the settings are altered, this ensures the tickers
+	// are reset to the new settings, and will bring the display up to maxBrightness.
+	// Calling with force set to true, to ignore the current state of the display, and force
+	// it to reset the tickers.
+	wakeDisplay(true)
+	return nil
+}
+
+func rpcGetBacklightSettings() (*BacklightSettings, error) {
+	LoadConfig()
+
+	return &BacklightSettings{
+		MaxBrightness: config.DisplayMaxBrightness,
+		DimAfter:      int(config.DisplayDimAfterSec),
+		OffAfter:      int(config.DisplayOffAfterSec),
+	}, nil
+}
+
 const (
 	devModeFile = "/userdata/jetkvm/devmode.enable"
 	sshKeyDir   = "/userdata/dropbear/.ssh"
@@ -385,7 +441,7 @@ func callRPCHandler(handler RPCHandler, params map[string]interface{}) (interfac
 				}
 				args[i] = reflect.ValueOf(newStruct).Elem()
 			} else {
-				return nil, fmt.Errorf("invalid parameter type for: %s", paramName)
+				return nil, fmt.Errorf("invalid parameter type for: %s, type: %s", paramName, paramType.Kind())
 			}
 		} else {
 			args[i] = convertedValue.Convert(paramType)
@@ -560,4 +616,6 @@ var rpcHandlers = map[string]RPCHandler{
 	"getWakeOnLanDevices":    {Func: rpcGetWakeOnLanDevices},
 	"setWakeOnLanDevices":    {Func: rpcSetWakeOnLanDevices, Params: []string{"params"}},
 	"resetConfig":            {Func: rpcResetConfig},
+	"setBacklightSettings":   {Func: rpcSetBacklightSettings, Params: []string{"params"}},
+	"getBacklightSettings":   {Func: rpcGetBacklightSettings},
 }

network.go

@@ -1,13 +1,19 @@
 package kvm
 
 import (
+	"bytes"
 	"fmt"
+	"net"
+	"os"
+	"strings"
+	"time"
+
+	"os/exec"
+
+	"github.com/hashicorp/go-envparse"
 	"github.com/pion/mdns/v2"
 	"golang.org/x/net/ipv4"
 	"golang.org/x/net/ipv6"
-	"net"
-	"os/exec"
-	"time"
 
 	"github.com/vishvananda/netlink"
 	"github.com/vishvananda/netlink/nl"
@@ -15,11 +21,15 @@ import (
 
 var mDNSConn *mdns.Conn
 
-var networkState struct {
+var networkState NetworkState
+
+type NetworkState struct {
 	Up   bool
 	IPv4 string
 	IPv6 string
 	MAC  string
+
+	checked bool
 }
 
 type LocalIpInfo struct {
@@ -28,43 +38,45 @@ type LocalIpInfo struct {
 	MAC  string
 }
 
+const (
+	NetIfName     = "eth0"
+	DHCPLeaseFile = "/run/udhcpc.%s.info"
+)
+
 // setDhcpClientState sends signals to udhcpc to change it's current mode
 // of operation. Setting active to true will force udhcpc to renew the DHCP lease.
 // Setting active to false will put udhcpc into idle mode.
 func setDhcpClientState(active bool) {
-	var signal string;
+	var signal string
 	if active {
 		signal = "-SIGUSR1"
 	} else {
 		signal = "-SIGUSR2"
 	}
 
-	cmd := exec.Command("/usr/bin/killall", signal, "udhcpc");
+	cmd := exec.Command("/usr/bin/killall", signal, "udhcpc")
 	if err := cmd.Run(); err != nil {
 		fmt.Printf("network: setDhcpClientState: failed to change udhcpc state: %s\n", err)
 	}
 }
 
 func checkNetworkState() {
-	iface, err := netlink.LinkByName("eth0")
+	iface, err := netlink.LinkByName(NetIfName)
 	if err != nil {
-		fmt.Printf("failed to get eth0 interface: %v\n", err)
+		fmt.Printf("failed to get [%s] interface: %v\n", NetIfName, err)
 		return
 	}
 
-	newState := struct {
+	newState := NetworkState{
-		Up   bool
-		IPv4 string
-		IPv6 string
-		MAC  string
-	}{
 		Up:  iface.Attrs().OperState == netlink.OperUp,
 		MAC: iface.Attrs().HardwareAddr.String(),
+
+		checked: true,
 	}
 
 	addrs, err := netlink.AddrList(iface, nl.FAMILY_ALL)
 	if err != nil {
-		fmt.Printf("failed to get addresses for eth0: %v\n", err)
+		fmt.Printf("failed to get addresses for [%s]: %v\n", NetIfName, err)
 	}
 
 	// If the link is going down, put udhcpc into idle mode.
@@ -94,7 +106,7 @@ func checkNetworkState() {
 
 	if newState != networkState {
 		fmt.Println("network state changed")
-		//restart MDNS
+		// restart MDNS
 		startMDNS()
 		networkState = newState
 		requestDisplayUpdate()
@@ -102,7 +114,7 @@ func checkNetworkState() {
 }
 
 func startMDNS() error {
-	//If server was previously running, stop it
+	// If server was previously running, stop it
 	if mDNSConn != nil {
 		fmt.Printf("Stopping mDNS server\n")
 		err := mDNSConn.Close()
@@ -111,7 +123,7 @@ func startMDNS() error {
 		}
 	}
 
-	//Start a new server
+	// Start a new server
 	fmt.Printf("Starting mDNS server on jetkvm.local\n")
 	addr4, err := net.ResolveUDPAddr("udp4", mdns.DefaultAddressIPv4)
 	if err != nil {
@@ -144,6 +156,39 @@ func startMDNS() error {
 	return nil
 }
 
+func getNTPServersFromDHCPInfo() ([]string, error) {
+	buf, err := os.ReadFile(fmt.Sprintf(DHCPLeaseFile, NetIfName))
+	if err != nil {
+		// do not return error if file does not exist
+		if os.IsNotExist(err) {
+			return nil, nil
+		}
+		return nil, fmt.Errorf("failed to load udhcpc info: %w", err)
+	}
+
+	// parse udhcpc info
+	env, err := envparse.Parse(bytes.NewReader(buf))
+	if err != nil {
+		return nil, fmt.Errorf("failed to parse udhcpc info: %w", err)
+	}
+
+	val, ok := env["ntpsrv"]
+	if !ok {
+		return nil, nil
+	}
+
+	var servers []string
+
+	for _, server := range strings.Fields(val) {
+		if net.ParseIP(server) == nil {
+			fmt.Printf("invalid NTP server IP: %s, ignoring ... \n", server)
+		}
+		servers = append(servers, server)
+	}
+
+	return servers, nil
+}
+
 func init() {
 	updates := make(chan netlink.LinkUpdate)
 	done := make(chan struct{})
@@ -162,7 +207,7 @@ func init() {
 		for {
 			select {
 			case update := <-updates:
-				if update.Link.Attrs().Name == "eth0" {
+				if update.Link.Attrs().Name == NetIfName {
 					fmt.Printf("link update: %+v\n", update)
 					checkNetworkState()
 				}

ntp.go

@@ -11,20 +11,56 @@ import (
 	"github.com/beevik/ntp"
 )
 
-var timeSynced = false
+const (
+	timeSyncRetryStep     = 5 * time.Second
+	timeSyncRetryMaxInt   = 1 * time.Minute
+	timeSyncWaitNetChkInt = 100 * time.Millisecond
+	timeSyncWaitNetUpInt  = 3 * time.Second
+	timeSyncInterval      = 1 * time.Hour
+	timeSyncTimeout       = 2 * time.Second
+)
+
+var (
+	timeSynced            = false
+	timeSyncRetryInterval = 0 * time.Second
+	defaultNTPServers     = []string{
+		"time.cloudflare.com",
+		"time.apple.com",
+	}
+)
 
 func TimeSyncLoop() {
 	for {
-		fmt.Println("Syncing system time")
+		if !networkState.checked {
+			time.Sleep(timeSyncWaitNetChkInt)
+			continue
+		}
+
+		if !networkState.Up {
+			log.Printf("Waiting for network to come up")
+			time.Sleep(timeSyncWaitNetUpInt)
+			continue
+		}
+
+		log.Printf("Syncing system time")
 		start := time.Now()
 		err := SyncSystemTime()
 		if err != nil {
 			log.Printf("Failed to sync system time: %v", err)
+
+			// retry after a delay
+			timeSyncRetryInterval += timeSyncRetryStep
+			time.Sleep(timeSyncRetryInterval)
+			// reset the retry interval if it exceeds the max interval
+			if timeSyncRetryInterval > timeSyncRetryMaxInt {
+				timeSyncRetryInterval = 0
+			}
+
 			continue
 		}
 		log.Printf("Time sync successful, now is: %v, time taken: %v", time.Now(), time.Since(start))
 		timeSynced = true
-		time.Sleep(1 * time.Hour) //once the first sync is done, sync every hour
+		time.Sleep(timeSyncInterval) // after the first sync is done
 	}
 }
 
@@ -41,13 +77,22 @@ func SyncSystemTime() (err error) {
 }
 
 func queryNetworkTime() (*time.Time, error) {
-	ntpServers := []string{
+	ntpServers, err := getNTPServersFromDHCPInfo()
-		"time.cloudflare.com",
+	if err != nil {
-		"time.apple.com",
+		log.Printf("failed to get NTP servers from DHCP info: %v\n", err)
 	}
+
+	if ntpServers == nil {
+		ntpServers = defaultNTPServers
+		log.Printf("Using default NTP servers: %v\n", ntpServers)
+	} else {
+		log.Printf("Using NTP servers from DHCP: %v\n", ntpServers)
+	}
+
 	for _, server := range ntpServers {
-		now, err := queryNtpServer(server, 2*time.Second)
+		now, err := queryNtpServer(server, timeSyncTimeout)
 		if err == nil {
+			log.Printf("NTP server [%s] returned time: %v\n", server, now)
 			return now, nil
 		}
 	}
@@ -56,7 +101,7 @@ func queryNetworkTime() (*time.Time, error) {
 		"http://cloudflare.com",
 	}
 	for _, url := range httpUrls {
-		now, err := queryHttpTime(url, 2*time.Second)
+		now, err := queryHttpTime(url, timeSyncTimeout)
 		if err == nil {
 			return now, nil
 		}

ui/.env.development

@@ -2,3 +2,5 @@ VITE_SIGNAL_API=http://localhost:3000
 
 VITE_CLOUD_APP=http://localhost:5173
 VITE_CLOUD_API=http://localhost:3000
+
+VITE_JETKVM_HEAD=

ui/.env.device

@@ -2,3 +2,5 @@ VITE_SIGNAL_API= # Uses the KVM device's IP address as the signal API endpoint
 
 VITE_CLOUD_APP=https://app.jetkvm.com
 VITE_CLOUD_API=https://api.jetkvm.com
+
+VITE_JETKVM_HEAD=<script src="/device/ui-config.js"></script>

ui/.env.production

@@ -1,4 +1,6 @@
 VITE_SIGNAL_API=https://api.jetkvm.com
 
 VITE_CLOUD_APP=https://app.jetkvm.com
-VITE_CLOUD_API=https://api.jetkvm.com
+VITE_CLOUD_API=https://api.jetkvm.com
+
+VITE_JETKVM_HEAD=

ui/index.html

@@ -28,6 +28,7 @@
     <title>JetKVM</title>
     <link rel="stylesheet" href="/fonts/fonts.css" />
     <link rel="icon" href="/favicon.png" />
+    %VITE_JETKVM_HEAD%
     <script>
       // Initial theme setup
       document.documentElement.classList.toggle(

ui/src/components/AuthLayout.tsx

@@ -6,6 +6,7 @@ import { useLocation, useNavigation, useSearchParams } from "react-router-dom";
 import Fieldset from "@components/Fieldset";
 import GridBackground from "@components/GridBackground";
 import StepCounter from "@components/StepCounter";
+import { CLOUD_API } from "@/ui.config";
 
 type AuthLayoutProps = {
   title: string;
@@ -62,7 +63,7 @@ export default function AuthLayout({
               <Fieldset className="space-y-12">
                 <div className="max-w-sm mx-auto space-y-4">
                   <form
-                    action={`${import.meta.env.VITE_CLOUD_API}/oidc/google`}
+                    action={`${CLOUD_API}/oidc/google`}
                     method="POST"
                   >
                     {/*This could be the KVM ID*/}

ui/src/components/Header.tsx

@@ -14,6 +14,7 @@ import PeerConnectionStatusCard from "@components/PeerConnectionStatusCard";
 import api from "../api";
 import { isOnDevice } from "../main";
 import { Button, LinkButton } from "./Button";
+import { CLOUD_API, SIGNAL_API } from "@/ui.config";
 
 interface NavbarProps {
   isLoggedIn: boolean;
@@ -37,8 +38,8 @@ export default function DashboardNavbar({
   const navigate = useNavigate();
   const onLogout = useCallback(async () => {
     const logoutUrl = isOnDevice
-      ? `${import.meta.env.VITE_SIGNAL_API}/auth/logout`
+      ? `${SIGNAL_API}/auth/logout`
-      : `${import.meta.env.VITE_CLOUD_API}/logout`;
+      : `${CLOUD_API}/logout`;
     const res = await api.POST(logoutUrl);
     if (!res.ok) return;
 

ui/src/components/MountMediaDialog.tsx

@@ -35,6 +35,7 @@ import { ExclamationTriangleIcon } from "@heroicons/react/20/solid";
 import notifications from "../notifications";
 import Fieldset from "./Fieldset";
 import { isOnDevice } from "../main";
+import { SIGNAL_API } from "@/ui.config";
 
 export default function MountMediaModal({
   open,
@@ -1119,7 +1120,7 @@ function UploadFileView({
     alreadyUploadedBytes: number,
     dataChannel: string,
   ) {
-    const uploadUrl = `${import.meta.env.VITE_SIGNAL_API}/storage/upload?uploadId=${dataChannel}`;
+    const uploadUrl = `${SIGNAL_API}/storage/upload?uploadId=${dataChannel}`;
 
     const xhr = new XMLHttpRequest();
     xhr.open("POST", uploadUrl, true);

ui/src/components/sidebar/settings.tsx

@@ -1,5 +1,6 @@
 import SidebarHeader from "@components/SidebarHeader";
 import {
+  BacklightSettings,
   useLocalAuthModalStore,
   useSettingsStore,
   useUiStore,
@@ -25,6 +26,7 @@ import LocalAuthPasswordDialog from "@/components/LocalAuthPasswordDialog";
 import { LocalDevice } from "@routes/devices.$id";
 import { useRevalidator } from "react-router-dom";
 import { ShieldCheckIcon } from "@heroicons/react/20/solid";
+import { CLOUD_APP, SIGNAL_API } from "@/ui.config";
 
 export function SettingsItem({
   title,
@@ -95,6 +97,7 @@ export default function SettingsSidebar() {
   const hideCursor = useSettingsStore(state => state.isCursorHidden);
   const setHideCursor = useSettingsStore(state => state.setCursorVisibility);
   const setDeveloperMode = useSettingsStore(state => state.setDeveloperMode);
+  const setBacklightSettings = useSettingsStore(state => state.setBacklightSettings);
 
   const [currentVersions, setCurrentVersions] = useState<{
     appVersion: string;
@@ -228,6 +231,28 @@ export default function SettingsSidebar() {
     [send, setDeveloperMode],
   );
 
+  const handleBacklightSettingsChange = (settings: BacklightSettings) => {
+    // If the user has set the display to dim after it turns off, set the dim_after
+    // value to never.
+    if (settings.dim_after > settings.off_after && settings.off_after != 0) {
+      settings.dim_after = 0;
+    }
+
+    setBacklightSettings(settings);
+  }
+
+  const handleBacklightSettingsSave = () => {
+    send("setBacklightSettings", { params: settings.backlightSettings }, resp => {
+      if ("error" in resp) {
+        notifications.error(
+          `Failed to set backlight settings: ${resp.error.data || "Unknown error"}`,
+        );
+        return;
+      }
+      notifications.success("Backlight settings updated successfully");
+    });
+  };
+
   const handleUpdateSSHKey = useCallback(() => {
     send("setSSHKeyState", { sshKey }, resp => {
       if ("error" in resp) {
@@ -302,6 +327,17 @@ export default function SettingsSidebar() {
       }
     });
 
+    send("getBacklightSettings", {}, resp => {
+      if ("error" in resp) {
+        notifications.error(
+          `Failed to get backlight settings: ${resp.error.data || "Unknown error"}`,
+        );
+        return;
+      }
+      const result = resp.result as BacklightSettings;
+      setBacklightSettings(result);
+    })
+
     send("getDevModeState", {}, resp => {
       if ("error" in resp) return;
       const result = resp.result as { enabled: boolean };
@@ -331,7 +367,7 @@ export default function SettingsSidebar() {
   const getDevice = useCallback(async () => {
     try {
       const status = await api
-        .GET(`${import.meta.env.VITE_SIGNAL_API}/device`)
+        .GET(`${SIGNAL_API}/device`)
         .then(res => res.json() as Promise<LocalDevice>);
       setLocalDevice(status);
     } catch (error) {
@@ -642,7 +678,7 @@ export default function SettingsSidebar() {
                 <div>
                   <LinkButton
                     to={
-                      import.meta.env.VITE_CLOUD_APP +
+                      CLOUD_APP +
                       "/signup?deviceId=" +
                       deviceId +
                       `&returnTo=${location.href}adopt`
@@ -797,6 +833,80 @@ export default function SettingsSidebar() {
           />
         </SettingsItem>
         <div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" />
+        <div className="pb-2 space-y-4">
+          <SectionHeader
+            title="Hardware"
+            description="Configure the JetKVM Hardware"
+          />
+        </div>
+        <SettingsItem title="Display Brightness" description="Set the brightness of the display">
+          <SelectMenuBasic
+            size="SM"
+            label=""
+            value={settings.backlightSettings.max_brightness.toString()}
+            options={[
+              { value: "0", label: "Off" },
+              { value: "10", label: "Low" },
+              { value: "35", label: "Medium" },
+              { value: "64", label: "High" },
+            ]}
+            onChange={e => {
+              settings.backlightSettings.max_brightness = parseInt(e.target.value)
+              handleBacklightSettingsChange(settings.backlightSettings);
+            }}
+          />
+        </SettingsItem>
+        {settings.backlightSettings.max_brightness != 0 && (
+          <>
+          <SettingsItem title="Dim Display After" description="Set how long to wait before dimming the display">
+            <SelectMenuBasic
+              size="SM"
+              label=""
+              value={settings.backlightSettings.dim_after.toString()}
+              options={[
+                { value: "0", label: "Never" },
+                { value: "60", label: "1 Minute" },
+                { value: "300", label: "5 Minutes" },
+                { value: "600", label: "10 Minutes" },
+                { value: "1800", label: "30 Minutes" },
+                { value: "3600", label: "1 Hour" },
+              ]}
+              onChange={e => {
+                settings.backlightSettings.dim_after = parseInt(e.target.value)
+                handleBacklightSettingsChange(settings.backlightSettings);
+              }}
+            />
+          </SettingsItem>
+          <SettingsItem title="Turn off Display After" description="Set how long to wait before turning off the display">
+            <SelectMenuBasic
+              size="SM"
+              label=""
+              value={settings.backlightSettings.off_after.toString()}
+              options={[
+                { value: "0", label: "Never" },
+                { value: "300", label: "5 Minutes" },
+                { value: "600", label: "10 Minutes" },
+                { value: "1800", label: "30 Minutes" },
+                { value: "3600", label: "1 Hour" },
+              ]}
+              onChange={e => {
+                settings.backlightSettings.off_after = parseInt(e.target.value)
+                handleBacklightSettingsChange(settings.backlightSettings);
+              }}
+            />
+          </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>
+        <Button
+          size="SM"
+          theme="primary"
+          text="Save Display Settings"
+          onClick={handleBacklightSettingsSave}
+        />
+        <div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" />
         <div className="pb-2 space-y-4">
           <SectionHeader
             title="Advanced"

ui/src/hooks/stores.ts

@@ -229,6 +229,12 @@ export interface VideoState {
   }) => void;
 }
 
+export interface BacklightSettings {
+  max_brightness: number;
+  dim_after: number;
+  off_after: number;
+}
+
 export const useVideoStore = create<VideoState>(set => ({
   width: 0,
   height: 0,
@@ -270,6 +276,9 @@ interface SettingsState {
   // Add new developer mode state
   developerMode: boolean;
   setDeveloperMode: (enabled: boolean) => void;
+
+  backlightSettings: BacklightSettings;
+  setBacklightSettings: (settings: BacklightSettings) => void;
 }
 
 export const useSettingsStore = create(
@@ -287,6 +296,13 @@ export const useSettingsStore = create(
       // Add developer mode with default value
       developerMode: false,
       setDeveloperMode: enabled => set({ developerMode: enabled }),
+
+      backlightSettings: {
+        max_brightness: 100,
+        dim_after: 10000,
+        off_after: 50000,
+      },
+      setBacklightSettings: (settings: BacklightSettings) => set({ backlightSettings: settings }),
     }),
     {
       name: "settings",

ui/src/main.tsx

@@ -27,12 +27,13 @@ import LoginLocalRoute from "./routes/login-local";
 import WelcomeLocalModeRoute from "./routes/welcome-local.mode";
 import WelcomeRoute from "./routes/welcome-local";
 import WelcomeLocalPasswordRoute from "./routes/welcome-local.password";
+import { CLOUD_API } from "./ui.config";
 
 export const isOnDevice = import.meta.env.MODE === "device";
 export const isInCloud = !isOnDevice;
 
 export async function checkAuth() {
-  const res = await fetch(`${import.meta.env.VITE_CLOUD_API}/me`, {
+  const res = await fetch(`${CLOUD_API}/me`, {
     mode: "cors",
     credentials: "include",
     headers: { "Content-Type": "application/json" },

ui/src/routes/adopt.tsx

@@ -1,5 +1,6 @@
 import { LoaderFunctionArgs, redirect } from "react-router-dom";
 import api from "../api";
+import { CLOUD_API, CLOUD_APP, SIGNAL_API } from "@/ui.config";
 
 const loader = async ({ request }: LoaderFunctionArgs) => {
   const url = new URL(request.url);
@@ -11,17 +12,17 @@ const loader = async ({ request }: LoaderFunctionArgs) => {
   const clientId = searchParams.get("clientId");
 
   const res = await api.POST(
-    `${import.meta.env.VITE_SIGNAL_API}/cloud/register`,
+    `${SIGNAL_API}/cloud/register`,
     {
       token: tempToken,
-      cloudApi: import.meta.env.VITE_CLOUD_API,
+      cloudApi: CLOUD_API,
       oidcGoogle,
       clientId,
     },
   );
 
   if (!res.ok) throw new Error("Failed to register device");
-  return redirect(import.meta.env.VITE_CLOUD_APP + `/devices/${deviceId}/setup`);
+  return redirect(CLOUD_APP + `/devices/${deviceId}/setup`);
 };
 
 export default function AdoptRoute() {

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

@@ -14,6 +14,7 @@ import { User } from "@/hooks/stores";
 import { checkAuth } from "@/main";
 import Fieldset from "@components/Fieldset";
 import { ChevronLeftIcon } from "@heroicons/react/16/solid";
+import { CLOUD_API } from "@/ui.config";
 
 interface LoaderData {
   device: { id: string; name: string; user: { googleId: string } };
@@ -24,7 +25,7 @@ const action = async ({ request }: ActionFunctionArgs) => {
   const { deviceId } = Object.fromEntries(await request.formData());
 
   try {
-    const res = await fetch(`${import.meta.env.VITE_CLOUD_API}/devices/${deviceId}`, {
+    const res = await fetch(`${CLOUD_API}/devices/${deviceId}`, {
       method: "DELETE",
       credentials: "include",
       headers: { "Content-Type": "application/json" },
@@ -46,7 +47,7 @@ const loader = async ({ params }: LoaderFunctionArgs) => {
   const { id } = params;
 
   try {
-    const res = await fetch(`${import.meta.env.VITE_CLOUD_API}/devices/${id}`, {
+    const res = await fetch(`${CLOUD_API}/devices/${id}`, {
       method: "GET",
       credentials: "include",
       mode: "cors",

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

@@ -16,6 +16,7 @@ import { User } from "@/hooks/stores";
 import { checkAuth } from "@/main";
 import Fieldset from "@components/Fieldset";
 import api from "../api";
+import { CLOUD_API } from "@/ui.config";
 
 interface LoaderData {
   device: { id: string; name: string; user: { googleId: string } };
@@ -31,7 +32,7 @@ const action = async ({ params, request }: ActionFunctionArgs) => {
   }
 
   try {
-    const res = await api.PUT(`${import.meta.env.VITE_CLOUD_API}/devices/${id}`, {
+    const res = await api.PUT(`${CLOUD_API}/devices/${id}`, {
       name,
     });
     if (!res.ok) {
@@ -49,7 +50,7 @@ const loader = async ({ params }: LoaderFunctionArgs) => {
   const { id } = params;
 
   try {
-    const res = await fetch(`${import.meta.env.VITE_CLOUD_API}/devices/${id}`, {
+    const res = await fetch(`${CLOUD_API}/devices/${id}`, {
       method: "GET",
       credentials: "include",
       mode: "cors",

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

@@ -16,10 +16,11 @@ import { InputFieldWithLabel } from "@components/InputField";
 import { Button } from "@components/Button";
 import { checkAuth } from "@/main";
 import api from "../api";
+import { CLOUD_API } from "@/ui.config";
 
 const loader = async ({ params }: LoaderFunctionArgs) => {
   await checkAuth();
-  const res = await fetch(`${import.meta.env.VITE_CLOUD_API}/devices/${params.id}`, {
+  const res = await fetch(`${CLOUD_API}/devices/${params.id}`, {
     method: "GET",
     mode: "cors",
     credentials: "include",
@@ -35,7 +36,7 @@ const loader = async ({ params }: LoaderFunctionArgs) => {
 const action = async ({ request }: ActionFunctionArgs) => {
   // Handle form submission
   const { name, id, returnTo } = Object.fromEntries(await request.formData());
-  const res = await api.PUT(`${import.meta.env.VITE_CLOUD_API}/devices/${id}`, { name });
+  const res = await api.PUT(`${CLOUD_API}/devices/${id}`, { name });
 
   if (res.ok) {
     return redirect(returnTo?.toString() ?? `/devices/${id}`);

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

@@ -36,6 +36,7 @@ import { DeviceStatus } from "./welcome-local";
 import FocusTrap from "focus-trap-react";
 import OtherSessionConnectedModal from "@/components/OtherSessionConnectedModal";
 import TerminalWrapper from "../components/Terminal";
+import { CLOUD_API, SIGNAL_API } from "@/ui.config";
 
 interface LocalLoaderResp {
   authMode: "password" | "noPassword" | null;
@@ -56,12 +57,12 @@ export interface LocalDevice {
 
 const deviceLoader = async () => {
   const res = await api
-    .GET(`${import.meta.env.VITE_SIGNAL_API}/device/status`)
+    .GET(`${SIGNAL_API}/device/status`)
     .then(res => res.json() as Promise<DeviceStatus>);
 
   if (!res.isSetup) return redirect("/welcome");
 
-  const deviceRes = await api.GET(`${import.meta.env.VITE_SIGNAL_API}/device`);
+  const deviceRes = await api.GET(`${SIGNAL_API}/device`);
   if (deviceRes.status === 401) return redirect("/login-local");
   if (deviceRes.ok) {
     const device = (await deviceRes.json()) as LocalDevice;
@@ -74,11 +75,11 @@ const deviceLoader = async () => {
 const cloudLoader = async (params: Params<string>): Promise<CloudLoaderResp> => {
   const user = await checkAuth();
 
-  const iceResp = await api.POST(`${import.meta.env.VITE_CLOUD_API}/webrtc/ice_config`);
+  const iceResp = await api.POST(`${CLOUD_API}/webrtc/ice_config`);
   const iceConfig = await iceResp.json();
 
   const deviceResp = await api.GET(
-    `${import.meta.env.VITE_CLOUD_API}/devices/${params.id}`,
+    `${CLOUD_API}/devices/${params.id}`,
   );
 
   if (!deviceResp.ok) {
@@ -142,7 +143,7 @@ export default function KvmIdRoute() {
 
       try {
         const sd = btoa(JSON.stringify(pc.localDescription));
-        const res = await api.POST(`${import.meta.env.VITE_SIGNAL_API}/webrtc/session`, {
+        const res = await api.POST(`${SIGNAL_API}/webrtc/session`, {
           sd,
           // When on device, we don't need to specify the device id, as it's already known
           ...(isOnDevice ? {} : { id: params.id }),
@@ -317,7 +318,7 @@ export default function KvmIdRoute() {
     }
 
     // Fire and forget
-    api.POST(`${import.meta.env.VITE_CLOUD_API}/webrtc/turn_activity`, {
+    api.POST(`${CLOUD_API}/webrtc/turn_activity`, {
       bytesReceived: bytesReceivedDelta,
       bytesSent: bytesSentDelta,
     });

ui/src/routes/devices.tsx

@@ -9,6 +9,7 @@ import { User } from "@/hooks/stores";
 import EmptyCard from "@components/EmptyCard";
 import { LuMonitorSmartphone } from "react-icons/lu";
 import { ArrowRightIcon } from "@heroicons/react/16/solid";
+import { CLOUD_API } from "@/ui.config";
 
 interface LoaderData {
   devices: { id: string; name: string; online: boolean; lastSeen: string }[];
@@ -19,7 +20,7 @@ export const loader = async () => {
   const user = await checkAuth();
 
   try {
-    const res = await fetch(`${import.meta.env.VITE_CLOUD_API}/devices`, {
+    const res = await fetch(`${CLOUD_API}/devices`, {
       method: "GET",
       credentials: "include",
       mode: "cors",

ui/src/routes/login-local.tsx

@@ -12,15 +12,16 @@ import LogoWhiteIcon from "@/assets/logo-white.svg";
 import api from "../api";
 import { DeviceStatus } from "./welcome-local";
 import ExtLink from "../components/ExtLink";
+import { SIGNAL_API } from "@/ui.config";
 
 const loader = async () => {
   const res = await api
-    .GET(`${import.meta.env.VITE_SIGNAL_API}/device/status`)
+    .GET(`${SIGNAL_API}/device/status`)
     .then(res => res.json() as Promise<DeviceStatus>);
 
   if (!res.isSetup) return redirect("/welcome");
 
-  const deviceRes = await api.GET(`${import.meta.env.VITE_SIGNAL_API}/device`);
+  const deviceRes = await api.GET(`${SIGNAL_API}/device`);
   if (deviceRes.ok) return redirect("/");
   return null;
 };
@@ -31,7 +32,7 @@ const action = async ({ request }: ActionFunctionArgs) => {
 
   try {
     const response = await api.POST(
-      `${import.meta.env.VITE_SIGNAL_API}/auth/login-local`,
+      `${SIGNAL_API}/auth/login-local`,
       {
         password,
       },

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

@@ -9,10 +9,11 @@ import LogoWhiteIcon from "@/assets/logo-white.svg";
 import { cx } from "../cva.config";
 import api from "../api";
 import { DeviceStatus } from "./welcome-local";
+import { SIGNAL_API } from "@/ui.config";
 
 const loader = async () => {
   const res = await api
-    .GET(`${import.meta.env.VITE_SIGNAL_API}/device/status`)
+    .GET(`${SIGNAL_API}/device/status`)
     .then(res => res.json() as Promise<DeviceStatus>);
 
   if (res.isSetup) return redirect("/login-local");
@@ -30,7 +31,7 @@ const action = async ({ request }: ActionFunctionArgs) => {
 
   if (localAuthMode === "noPassword") {
     try {
-      await api.POST(`${import.meta.env.VITE_SIGNAL_API}/device/setup`, {
+      await api.POST(`${SIGNAL_API}/device/setup`, {
         localAuthMode,
       });
       return redirect("/");

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

@@ -10,10 +10,11 @@ import LogoBlueIcon from "@/assets/logo-blue.png";
 import LogoWhiteIcon from "@/assets/logo-white.svg";
 import api from "../api";
 import { DeviceStatus } from "./welcome-local";
+import { SIGNAL_API } from "@/ui.config";
 
 const loader = async () => {
   const res = await api
-    .GET(`${import.meta.env.VITE_SIGNAL_API}/device/status`)
+    .GET(`${SIGNAL_API}/device/status`)
     .then(res => res.json() as Promise<DeviceStatus>);
 
   if (res.isSetup) return redirect("/login-local");
@@ -30,7 +31,7 @@ const action = async ({ request }: ActionFunctionArgs) => {
   }
 
   try {
-    const response = await api.POST(`${import.meta.env.VITE_SIGNAL_API}/device/setup`, {
+    const response = await api.POST(`${SIGNAL_API}/device/setup`, {
       localAuthMode: "password",
       password,
     });

ui/src/routes/welcome-local.tsx

@@ -9,6 +9,7 @@ import LogoMark from "@/assets/logo-mark.png";
 import { cx } from "cva";
 import api from "../api";
 import { redirect } from "react-router-dom";
+import { SIGNAL_API } from "@/ui.config";
 
 export interface DeviceStatus {
   isSetup: boolean;
@@ -16,7 +17,7 @@ export interface DeviceStatus {
 
 const loader = async () => {
   const res = await api
-    .GET(`${import.meta.env.VITE_SIGNAL_API}/device/status`)
+    .GET(`${SIGNAL_API}/device/status`)
     .then(res => res.json() as Promise<DeviceStatus>);
 
   if (res.isSetup) return redirect("/login-local");

ui/src/ui.config.ts

@@ -0,0 +1,23 @@
+interface JetKVMConfig {
+  CLOUD_API?: string;
+  CLOUD_APP?: string;
+  DEVICE_VERSION?: string;
+}
+
+declare global {
+  interface Window { JETKVM_CONFIG?: JetKVMConfig; }
+}
+
+const getAppURL = (api_url?: string) => {
+  if (!api_url) {
+    return;
+  }
+  const url = new URL(api_url);
+  url.host = url.host.replace(/api\./, "app.");
+  // remove the ending slash
+  return url.toString().replace(/\/$/, "");
+}
+
+export const CLOUD_API = window.JETKVM_CONFIG?.CLOUD_API || import.meta.env.VITE_CLOUD_API;
+export const CLOUD_APP = window.JETKVM_CONFIG?.CLOUD_APP || getAppURL(CLOUD_API) || import.meta.env.VITE_CLOUD_APP;
+export const SIGNAL_API = import.meta.env.VITE_SIGNAL_API;

web.go

@@ -2,6 +2,8 @@ package kvm
 
 import (
 	"embed"
+	"encoding/json"
+	"fmt"
 	"io/fs"
 	"net/http"
 	"path/filepath"
@@ -77,6 +79,9 @@ func setupRouter() *gin.Engine {
 	// We use this to determine if the device is setup
 	r.GET("/device/status", handleDeviceStatus)
 
+	// We use this to provide the UI with the device configuration
+	r.GET("/device/ui-config.js", handleDeviceUIConfig)
+
 	// We use this to setup the device in the welcome page
 	r.POST("/device/setup", handleSetup)
 
@@ -361,6 +366,23 @@ func handleDeviceStatus(c *gin.Context) {
 	c.JSON(http.StatusOK, response)
 }
 
+func handleDeviceUIConfig(c *gin.Context) {
+	LoadConfig()
+
+	config, _ := json.Marshal(gin.H{
+		"CLOUD_API":      config.CloudURL,
+		"DEVICE_VERSION": builtAppVersion,
+	})
+	if config == nil {
+		c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to marshal config"})
+		return
+	}
+
+	response := fmt.Sprintf("window.JETKVM_CONFIG = %s;", config)
+
+	c.Data(http.StatusOK, "text/javascript; charset=utf-8", []byte(response))
+}
+
 func handleSetup(c *gin.Context) {
 	LoadConfig()