refactor: fix incorrect logic introduced in previous commits and improve error handling

internal/idlewatcher/html/loading.js

@@ -4,6 +4,11 @@ window.onload = async function () {
   const consoleEl = document.getElementById("console");
   const loadingDotsEl = document.getElementById("loading-dots");
 
+  if (!consoleEl || !loadingDotsEl) {
+    console.error("Required DOM elements not found");
+    return;
+  }
+
   function formatTimestamp(timestamp) {
     const date = new Date(timestamp);
     return date.toLocaleTimeString("en-US", {
@@ -34,11 +39,40 @@ window.onload = async function () {
     consoleEl.scrollTop = consoleEl.scrollHeight;
   }
 
+  if (typeof wakeEventsPath === "undefined" || !wakeEventsPath) {
+    addConsoleLine(
+      "error",
+      "Configuration error: wakeEventsPath not defined",
+      new Date().toISOString()
+    );
+    loadingDotsEl.style.display = "none";
+    return;
+  }
+
+  if (typeof EventSource === "undefined") {
+    addConsoleLine(
+      "error",
+      "Browser does not support Server-Sent Events",
+      new Date().toISOString()
+    );
+    loadingDotsEl.style.display = "none";
+    return;
+  }
+
   // Connect to SSE endpoint
   const eventSource = new EventSource(wakeEventsPath);
 
   eventSource.onmessage = function (event) {
-    const data = JSON.parse(event.data);
+    try {
+      const data = JSON.parse(event.data);
+    } catch (error) {
+      addConsoleLine(
+        "error",
+        "Invalid event data: " + event.data,
+        new Date().toISOString()
+      );
+      return;
+    }
 
     if (data.type === "ready") {
       ready = true;

internal/idlewatcher/html/loading_page.html

@@ -26,7 +26,7 @@
         <div class="dot"></div>
         <div class="dot"></div>
       </div>
-      <div id="console" class="console" />
+      <div id="console" class="console"></div>
     </div>
   </body>
 </html>

internal/idlewatcher/html/style.css

@@ -42,6 +42,13 @@ body {
   min-height: 400px;
 }
 
+@media (max-width: 768px) {
+  .container {
+    min-width: auto;
+    max-width: 90%;
+  }
+}
+
 /* Spinner Styles */
 .loading-dots {
   display: flex;
@@ -81,7 +88,6 @@ body {
   color: #f8f9fa;
   max-width: 100%;
   letter-spacing: 0.3px;
-  white-space: nowrap;
 }
 
 /* Console Styles */