KDS/HUD: Add online/offline connection detection

- Listen to browser online/offline events
- Check navigator.onLine before API calls
- Update status indicator immediately when connection changes
- Auto-refresh when coming back online

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

hud/hud.js

@@ -49,6 +49,23 @@ const HUD = {
       }
     });
 
+    // Monitor online/offline status
+    window.addEventListener('online', () => {
+      console.log('[HUD] Back online');
+      this.setConnected(true);
+      this.fetchTasks();
+    });
+
+    window.addEventListener('offline', () => {
+      console.log('[HUD] Went offline');
+      this.setConnected(false);
+    });
+
+    // Initial connection check
+    if (!navigator.onLine) {
+      this.setConnected(false);
+    }
+
     console.log('[HUD] Initialized');
   },
 
@@ -63,6 +80,12 @@ const HUD = {
 
   // Fetch tasks from API
   async fetchTasks() {
+    // Check if online before attempting fetch
+    if (!navigator.onLine) {
+      this.setConnected(false);
+      return;
+    }
+
     try {
       const response = await fetch(`${this.config.apiBaseUrl}/listPending.cfm`, {
         method: 'POST',

kds/kds.js

@@ -23,6 +23,23 @@ document.addEventListener('DOMContentLoaded', () => {
   checkStationSelection();
   updateClock();
   setInterval(updateClock, 1000);
+
+  // Monitor online/offline status
+  window.addEventListener('online', () => {
+    console.log('[KDS] Back online');
+    updateStatus(true);
+    loadOrders(); // Refresh immediately when back online
+  });
+
+  window.addEventListener('offline', () => {
+    console.log('[KDS] Went offline');
+    updateStatus(false);
+  });
+
+  // Initial connection check
+  if (!navigator.onLine) {
+    updateStatus(false);
+  }
 });
 
 // Update clock display
@@ -197,6 +214,12 @@ function startAutoRefresh() {
 async function loadOrders() {
   if (!config.businessId) return;
 
+  // Check if online before attempting fetch
+  if (!navigator.onLine) {
+    updateStatus(false);
+    return;
+  }
+
   try {
     const url = `${config.apiBaseUrl}/orders/listForKDS.cfm`;
     const response = await fetch(url, {