From 4478cdbcb3e54504ab2c79c5e9ee89d6d4cdc916 Mon Sep 17 00:00:00 2001
From: kenneth <kenneth@nym.sh>
Date: Wed, 29 Oct 2025 23:10:25 +0000
Subject: [PATCH] fix(dashboard): add more websocket related logs

---
 apps/dashboard/src/App.tsx    | 36 ++++++++++++++++++++++++++++++-----
 apps/dashboard/src/beszel.ts  |  8 +++++++-
 apps/dashboard/src/index.css  |  4 ++++
 apps/dashboard/src/tfl.ts     |  8 +++++++-
 apps/dashboard/src/weather.ts |  8 +++++++-
 5 files changed, 56 insertions(+), 8 deletions(-)

diff --git a/apps/dashboard/src/App.tsx b/apps/dashboard/src/App.tsx
index 10cb29d..75cda88 100644
--- a/apps/dashboard/src/App.tsx
+++ b/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) {
-				websocket.current.close()
+			if (ws.readyState === WebSocket.OPEN) {
+				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 (
diff --git a/apps/dashboard/src/beszel.ts b/apps/dashboard/src/beszel.ts
index 446439a..a3fdc41 100644
--- a/apps/dashboard/src/beszel.ts
+++ b/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 {
diff --git a/apps/dashboard/src/index.css b/apps/dashboard/src/index.css
index 20c0049..7a7c657 100644
--- a/apps/dashboard/src/index.css
+++ b/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;
+}
diff --git a/apps/dashboard/src/tfl.ts b/apps/dashboard/src/tfl.ts
index dc3a5eb..467cb13 100644
--- a/apps/dashboard/src/tfl.ts
+++ b/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 {
diff --git a/apps/dashboard/src/weather.ts b/apps/dashboard/src/weather.ts
index 1db4ca6..2f67ad2 100644
--- a/apps/dashboard/src/weather.ts
+++ b/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