From 941bbbc12aaf632fdddfe75cd4f583634f4487b7 Mon Sep 17 00:00:00 2001
From: Jaime Idolpx <jaime@idolpx.com>
Date: Tue, 9 Jun 2026 00:49:30 -0400
Subject: [PATCH] feat: integrate WebSocket functionality into DevicesPage,
 NetworkPage, StatusPage, and WiFiScanOverlay components

---
 src/app/components/DevicesPage.tsx     |  4 ++++
 src/app/components/NetworkPage.tsx     | 21 ++++++++++++++++++---
 src/app/components/StatusPage.tsx      |  3 ++-
 src/app/components/WiFiScanOverlay.tsx |  6 ++++++
 4 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/app/components/DevicesPage.tsx b/src/app/components/DevicesPage.tsx
index f578a3d..55c0e1f 100644
--- a/src/app/components/DevicesPage.tsx
+++ b/src/app/components/DevicesPage.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { Printer, HardDrive, Network, Box, ChevronRight, RefreshCw } from 'lucide-react';
 import DeviceDetailOverlay from './DeviceDetailOverlay';
 import { toast } from 'sonner';
+import { useWs } from '../ws';
 
 interface Device {
   id: string;
@@ -152,8 +153,11 @@ export default function DevicesPage({ config, setConfig, openDeviceId, onClearOp
     }
   };
 
+  const { send: wsSend } = useWs();
+
   const rescanBus = async () => {
     setIsScanning(true);
+    wsSend('iec scan');
     toast.loading('Scanning IEC bus...');
 
     // Simulate bus scan
diff --git a/src/app/components/NetworkPage.tsx b/src/app/components/NetworkPage.tsx
index 2ae20b5..3e98b61 100644
--- a/src/app/components/NetworkPage.tsx
+++ b/src/app/components/NetworkPage.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { Wifi, Trash2, Scan } from 'lucide-react';
 import WiFiScanOverlay from './WiFiScanOverlay';
 import { toast } from 'sonner';
+import { useWs } from '../ws';
 
 interface NetworkPageProps {
   config: any;
@@ -9,6 +10,7 @@ interface NetworkPageProps {
 }
 
 export default function NetworkPage({ config, setConfig }: NetworkPageProps) {
+  const { send: wsSend } = useWs();
   const [showWiFiScan, setShowWiFiScan] = useState(false);
 
   const updateSetting = (path: string[], value: any) => {
@@ -51,7 +53,7 @@ export default function NetworkPage({ config, setConfig }: NetworkPageProps) {
       <div className="flex items-center justify-between">
         <h2 className="text-sm text-neutral-500">Known WiFi Networks</h2>
         <button
-          onClick={() => setShowWiFiScan(true)}
+          onClick={() => { wsSend('scan'); setShowWiFiScan(true); }}
           className="flex items-center gap-1 px-3 py-1.5 bg-blue-600 text-white text-sm rounded-lg"
         >
           <Scan className="w-4 h-4" />
@@ -62,7 +64,20 @@ export default function NetworkPage({ config, setConfig }: NetworkPageProps) {
       <div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200">
         {wifi.map((network: any, index: number) => (
           <div key={index} className="p-4 flex items-center justify-between">
-            <div className="flex items-center gap-3 flex-1 min-w-0">
+            <button
+              className="flex items-center gap-3 flex-1 min-w-0 text-left hover:bg-neutral-50 -m-1 p-1 rounded"
+              onClick={() => {
+                const cmd = network.passphrase
+                  ? `connect ${network.ssid} ${network.passphrase}`
+                  : `connect ${network.ssid}`;
+                wsSend(cmd);
+                toast.info(`Connecting to ${network.ssid}…`);
+                const updated = wifi
+                  .map((n: any, i: number) => ({ ...n, enabled: i === index ? 1 : 0 }))
+                  .sort((a: any, b: any) => b.enabled - a.enabled);
+                updateSetting(['wifi'], updated);
+              }}
+            >
               <Wifi className={`w-5 h-5 flex-shrink-0 ${network.enabled ? 'text-blue-600' : 'text-neutral-400'}`} />
               <div className="flex-1 min-w-0">
                 <div className="font-medium truncate">{network.ssid}</div>
@@ -70,7 +85,7 @@ export default function NetworkPage({ config, setConfig }: NetworkPageProps) {
                   <div className="text-xs text-green-600">Connected</div>
                 )}
               </div>
-            </div>
+            </button>
             <button
               onClick={() => removeWifiNetwork(index)}
               className="p-2 text-red-600 hover:bg-red-50 rounded ml-2"
diff --git a/src/app/components/StatusPage.tsx b/src/app/components/StatusPage.tsx
index 38337eb..afcf331 100644
--- a/src/app/components/StatusPage.tsx
+++ b/src/app/components/StatusPage.tsx
@@ -14,7 +14,7 @@ interface StatusPageProps {
 }
 
 export default function StatusPage({ config, setConfig }: StatusPageProps) {
-  const { status: wsStatus } = useWs();
+  const { status: wsStatus, send: wsSend } = useWs();
 
     // Mock memory stats
     const memory = {
@@ -313,6 +313,7 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
                   <button
                     className="px-4 py-2 rounded bg-blue-600 text-white hover:bg-blue-700 transition"
                     onClick={() => {
+                      wsSend(showResetModal === 'meatloaf' ? 'reset' : 'reset hard');
                       setResetStatus('in-progress');
                       setTimeout(() => setResetStatus('done'), 2000);
                     }}
diff --git a/src/app/components/WiFiScanOverlay.tsx b/src/app/components/WiFiScanOverlay.tsx
index 555acf6..126c8b9 100644
--- a/src/app/components/WiFiScanOverlay.tsx
+++ b/src/app/components/WiFiScanOverlay.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { X, Wifi, Lock, Signal } from 'lucide-react';
 import { motion, AnimatePresence } from 'motion/react';
 import { toast } from 'sonner';
+import { useWs } from '../ws';
 
 interface WiFiNetwork {
   ssid: string;
@@ -16,6 +17,7 @@ interface WiFiScanOverlayProps {
 }
 
 export default function WiFiScanOverlay({ onClose, onNetworkAdded, existingNetworks }: WiFiScanOverlayProps) {
+  const { send: wsSend } = useWs();
   const [isScanning, setIsScanning] = useState(true);
   const [networks, setNetworks] = useState<WiFiNetwork[]>([]);
   const [selectedNetwork, setSelectedNetwork] = useState<WiFiNetwork | null>(null);
@@ -53,6 +55,10 @@ export default function WiFiScanOverlay({ onClose, onNetworkAdded, existingNetwo
     }
 
     setIsConnecting(true);
+    const cmd = selectedNetwork.secured
+      ? `connect ${selectedNetwork.ssid} ${password}`
+      : `connect ${selectedNetwork.ssid}`;
+    wsSend(cmd);
     toast.loading('Connecting to network...');
 
     // Simulate connection