fix(dashboard): add more websocket related logs

apps/dashboard/src/App.tsx

@@ -28,12 +28,28 @@ const intermediateBrightnessAtoms = atom({
 })
 
 function App() {
-	const websocket = useRef(new WebSocket(`ws://${import.meta.env.VITE_API_HOST}/api/zigbee`))
+	const wsProtocol = window.location.protocol === "https:" ? "wss:" : "ws:"
+	const wsHost = import.meta.env.VITE_API_HOST || window.location.host
+	const websocket = useRef(new WebSocket(`${wsProtocol}//${wsHost}/api/zigbee`))
 
 	const store = useStore()
 
 	useEffect(() => {
-		websocket.current.onmessage = (event) => {
+		const ws = websocket.current
+
+		ws.onopen = () => {
+			console.log("WebSocket connected")
+		}
+
+		ws.onerror = (error) => {
+			console.error("WebSocket error:", error)
+		}
+
+		ws.onclose = () => {
+			console.log("WebSocket disconnected")
+		}
+
+		ws.onmessage = (event) => {
 			const data = JSON.parse(event.data) as JrpcRequest | JrpcResponse
 			if ("method" in data) {
 				switch (data.method) {
@@ -45,14 +61,22 @@ function App() {
 				}
 			}
 		}
+
 		return () => {
-			if (websocket.current.readyState === WebSocket.OPEN) {
+			if (ws.readyState === WebSocket.OPEN) {
-				websocket.current.close()
+				ws.close()
 			}
 		}
 	}, [store])
 
 	function setBrightness(deviceName: ZigbeeDeviceName, brightness: number) {
+		const ws = websocket.current
+
+		if (ws.readyState !== WebSocket.OPEN) {
+			console.warn("WebSocket is not open. Current state:", ws.readyState)
+			return
+		}
+
 		const request: JrpcRequest<"setDeviceState"> = {
 			id: crypto.randomUUID(),
 			jsonrpc: "2.0",
@@ -65,7 +89,9 @@ function App() {
 						: { state: "ON", brightness: Math.round((brightness / 100) * 254) },
 			},
 		}
-		websocket.current.send(JSON.stringify(request))
+
+		ws.send(JSON.stringify(request))
+		console.log("Sent brightness change:", { deviceName, brightness })
 	}
 
 	return (

apps/dashboard/src/beszel.ts

@@ -5,7 +5,13 @@
 
 import { queryOptions } from "@tanstack/react-query"
 
-const API_BASE_URL = `http://${import.meta.env.VITE_API_HOST || "localhost:8000"}`
+const getApiBaseUrl = () => {
+	const protocol = window.location.protocol
+	const host = import.meta.env.VITE_API_HOST || window.location.host
+	return `${protocol}//${host}`
+}
+
+const API_BASE_URL = getApiBaseUrl()
 
 // System Info
 export interface BeszelSystemInfo {

apps/dashboard/src/index.css

@@ -10,3 +10,7 @@ body {
 	-moz-osx-font-smoothing: grayscale;
 	overscroll-behavior: none;
 }
+
+input[type="range"].brightness-slider {
+	@apply appearance-none w-full bg-transparent;
+}

apps/dashboard/src/tfl.ts

@@ -5,7 +5,13 @@
 
 import { queryOptions } from "@tanstack/react-query"
 
-const API_BASE_URL = `http://${import.meta.env.VITE_API_HOST || "localhost:8000"}`
+const getApiBaseUrl = () => {
+	const protocol = window.location.protocol
+	const host = import.meta.env.VITE_API_HOST || window.location.host
+	return `${protocol}//${host}`
+}
+
+const API_BASE_URL = getApiBaseUrl()
 
 // Disruption Summary
 export interface DisruptionSummary {

apps/dashboard/src/weather.ts

@@ -26,7 +26,13 @@ import {
 	Wind,
 } from "lucide-react"
 
-const API_BASE_URL = `http://${import.meta.env.VITE_API_HOST || "localhost:3000"}`
+const getApiBaseUrl = () => {
+	const protocol = window.location.protocol
+	const host = import.meta.env.VITE_API_HOST || window.location.host
+	return `${protocol}//${host}`
+}
+
+const API_BASE_URL = getApiBaseUrl()
 
 export const DEFAULT_LATITUDE = Number(import.meta.env.VITE_DEFAULT_LATITUDE) || 37.7749
 export const DEFAULT_LONGITUDE = Number(import.meta.env.VITE_DEFAULT_LONGITUDE) || -122.4194