Enhance Vite configuration with custom input for rollup, update ConnectScreen to validate IP input before connection, and modify DeviceContext to support dynamic IP handling in LuxsinAPI. Adjust VUPage to use BASE_URL for image previews.

client/src/contexts/DeviceContext.tsx

@@ -20,7 +20,7 @@ interface DeviceContextType {
   peqState: PeqState | null;
   lastUpdated: Date | null;
   error: string | null;
-  connect: (forceDemo?: boolean) => Promise<void>;
+  connect: (forceDemo?: boolean, connectIp?: string) => Promise<void>;
   disconnect: () => void;
   refresh: () => Promise<void>;
   api: LuxsinAPI | null;
@@ -62,8 +62,9 @@ export function DeviceProvider({ children }: { children: React.ReactNode }) {
     lastMsgCountRef.current = state.msgCount;
   }, []);
 
-  const connect = useCallback(async (forceDemo?: boolean) => {
+  const connect = useCallback(async (forceDemo?: boolean, connectIp?: string) => {
     const useDemo = forceDemo !== undefined ? forceDemo : isDemoMode;
+    const targetIp = (connectIp ?? ip).trim();
     // Demo mode — use mock data immediately, no network call
     if (useDemo) {
       setIsConnecting(true);
@@ -80,7 +81,7 @@ export function DeviceProvider({ children }: { children: React.ReactNode }) {
     setIsConnecting(true);
     setError(null);
     try {
-      const newApi = new LuxsinAPI(ip);
+      const newApi = new LuxsinAPI(targetIp);
       // Fetch device info from http://{ip}/dev/info.cgi?action=syncData
       // The response is encoded with custom base64, needs decoding
       const state = await newApi.getDeviceState();