Live View Done

package-lock.json

@@ -15,6 +15,7 @@
         "chalk": "^5.6.2",
         "electron-store": "^11.0.2",
         "get-windows": "^9.2.3",
+        "https": "^1.0.0",
         "lucide-react": "^0.552.0",
         "luxon": "^3.7.2",
         "os-utils": "^0.0.14",
@@ -7040,6 +7041,12 @@
         "node": ">=10.19.0"
       }
     },
+    "node_modules/https": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/https/-/https-1.0.0.tgz",
+      "integrity": "sha512-4EC57ddXrkaF0x83Oj8sM6SLQHAWXw90Skqu2M4AEWENZ3F02dFJE/GARA8igO79tcgYqGrD7ae4f5L3um2lgg==",
+      "license": "ISC"
+    },
     "node_modules/https-proxy-agent": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",

package.json

@@ -7,7 +7,7 @@
   "scripts": {
     "dev": "npm-run-all --parallel dev:react dev:electron",
     "dev:react": "vite",
-    "dev:electron": "npm run build && cross-env NODE_ENV=development electron .",
+    "dev:electron": "npm run build && cross-env NODE_ENV=development electron --inspect=5858 .",
     "prod:electron": "npm run build && cross-env NODE_ENV=production electron .",
     "build": "tsc && vite build",
     "preview": "vite preview",
@@ -26,6 +26,7 @@
     "chalk": "^5.6.2",
     "electron-store": "^11.0.2",
     "get-windows": "^9.2.3",
+    "https": "^1.0.0",
     "lucide-react": "^0.552.0",
     "luxon": "^3.7.2",
     "os-utils": "^0.0.14",

src/electron/api/axiosClient.ts

@@ -3,11 +3,17 @@ import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
 import { getToken } from '../utils/tokenHelper.js';
 import chalk from "chalk";
 import { sendTokenExpired } from '../ipc/ipcHandler.js';
+import https from 'https';
 
 const TOKEN_KEY = 'ACCESS_TOKEN';
 
+const httpsAgent = new https.Agent({
+    rejectUnauthorized: false
+});
+
 const api: AxiosInstance = axios.create({
-    baseURL: 'https://dreadingly-unfighting-pandora.ngrok-free.dev/api/v1/va', // 🔁 your backend
+    baseURL: 'https://quality-friendly-goldfish.ngrok-free.app/api/v1/va', // 🔁 your backend
+    httpsAgent
     // timeout: 10000,
 });
 

src/electron/main.ts

@@ -53,7 +53,7 @@ app.on("ready", async () => {
     show: true,
     skipTaskbar: true,
     webPreferences: {
-      devTools: false,
+      devTools: true,
     }
   });
 
@@ -77,7 +77,7 @@ app.on("ready", async () => {
     frame: process.platform === "darwin" ? false : true,
     show: false, // speed improvement
     webPreferences: {
-      devTools: false,
+      devTools: true,
       preload: getPreloadPath(),
       contextIsolation: true,
       nodeIntegration: false,
@@ -101,7 +101,7 @@ app.on("ready", async () => {
   // ------------------------------------
   if (isDev()) {
     win.loadURL("http://localhost:5123");
-    // win.webContents.openDevTools(); // Optional (slows startup)
+    win.webContents.openDevTools(); // Optional (slows startup)
   } else {
     win.loadFile(getUIPath());
   }
@@ -128,21 +128,21 @@ app.on("ready", async () => {
 });
 
 
-app.on('browser-window-focus', () => {
+// app.on('browser-window-focus', () => {
-  globalShortcut.register('CommandOrControl+R', () => {
+//   globalShortcut.register('CommandOrControl+R', () => {
-    // Do nothing; disables reload
+//     // Do nothing; disables reload
-  });
+//   });
-  globalShortcut.register('F5', () => {
+//   globalShortcut.register('F5', () => {
-    // Do nothing; disables reload
+//     // Do nothing; disables reload
-  });
+//   });
-  globalShortcut.register('CommandOrControl+Shift+I', () => {
+//   globalShortcut.register('CommandOrControl+Shift+I', () => {
-    // Do nothing; disables DevTools
+//     // Do nothing; disables DevTools
-  });
+//   });
-});
+// });
 
-app.on('browser-window-blur', () => {
+// app.on('browser-window-blur', () => {
-  globalShortcut.unregisterAll();
+//   globalShortcut.unregisterAll();
-});
+// });
 
 
 // ---------------------------

src/electron/utils/utilityFunctions.ts

@@ -2,12 +2,18 @@ import { app, BrowserWindow, desktopCapturer } from "electron";
 import * as fs from "fs";
 import path from "path";
 import axios from 'axios';
+import https from 'https';
 import sharp from 'sharp';
 import { saveToken } from "./tokenHelper.js";
 import { activeWindow } from "get-windows";
 import { exec } from "child_process";
 import { getUIPath } from "../pathResolver.js";
 
+const httpsAgent = new https.Agent({
+    rejectUnauthorized: false
+});
+
+
 // Blur using an offscreen canvas
 async function blurAndCompressBase64Image(base64: string): Promise<Buffer> {
     const buffer = Buffer.from(base64.replace(/^data:image\/\w+;base64,/, ''), 'base64');
@@ -64,9 +70,9 @@ export const handleLogin = async (credentials: { email: string, password: string
         try {
             console.log("➡️ Calling API...");
             const response = await axios.post(
-                'https://dreadingly-unfighting-pandora.ngrok-free.dev/api/v1/va/login',
+                'https://quality-friendly-goldfish.ngrok-free.app/api/v1/va/login',
                 { userDetails: { ...credentials } },
-                { headers: { "ngrok-skip-browser-warning": 69420 } }
+                { headers: { "ngrok-skip-browser-warning": 69420 }, httpsAgent }
             );
 
             console.log("API CAlled", response)

src/ui/layout/DashboardLayout.tsx

@@ -371,6 +371,9 @@ const DashboardLayout = () => {
       const res = await window.electron.startProjectTracking(payload);
       console.log(" Synced start tracking:", res);
       setActiveProjectLogId(res?.logId)
+
+      handleConnect();
+
     } catch (error) {
       console.error(" Failed to sync project start:", error);
     }
@@ -445,6 +448,7 @@ const DashboardLayout = () => {
       console.log("📡 Sending stop tracking payload:", payload);
       const res = await window.electron.stopProjectTracking(payload);
       console.log(" Synced stop tracking:", res);
+      handleDisconnect();
     } catch (error) {
       console.error("❌ Failed to sync project stop:", error);
     }
@@ -536,6 +540,92 @@ const DashboardLayout = () => {
   };
 
 
+
+
+  const handleConnect = async () => {
+
+    const token = await window.electron.getToken("ACCESS_TOKEN");
+
+    if (socketRef.current) {
+      console.warn("Already connected");
+      return;
+    }
+    if (!selectedProject?.projectId) return
+
+    console.log(selectedProject?.projectId, "SelectedProject ID")
+    socketRef.current = io("https://quality-friendly-goldfish.ngrok-free.app", {
+      transports: ["websocket"],
+      secure: true,
+      rejectUnauthorized: false,
+      reconnection: true,
+      withCredentials: true,
+      forceNew: true,
+      extraHeaders: {
+        "Access-Control-Allow-Origin": "*"
+      },
+      auth: {
+        token: token,
+        projectId: selectedProject?.projectId,
+        userType: "va"
+      },
+    });
+
+    socketRef.current.on("connect", () => {
+      console.log("🟢 Connected:", socketRef.current?.id);
+      setIsConnected(true);
+
+      // Start sending every 5 seconds
+      intervalRef.current = setInterval(async () => {
+        const apps = await window.electron.getRunningApps()
+        socketRef.current?.emit("getVisibleApps", { token: await token, apps });
+
+        // const base64String = await window.electron.captureAppScreenShot("Screen 1");
+        // if (base64String) {
+        //   socketRef.current?.emit("sendImage", {token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjY5MGIzMjhkMDkxMDFmNzRjZjUyNGMwNyIsImVtYWlsIjoiYmhhZ3dhbi5yQGhpY2dsb2JhbHNvbHV0aW9ucy5jb20iLCJuYW1lIjoiUm9oaXQiLCJpYXQiOjE3NjI4NTgxOTMsImV4cCI6MTc2Mjk0NDU5M30.UlHy3RU9W5LOid7smG7WzyNT7dnqhQT4qqzRrN1axmU", image: base64String, title: "Screen 1"});
+        // }
+      }, 5000);
+    });
+
+    socketRef.current.on("appToCapture", async ({ appTitle }) => {
+      console.log("📸 Capture requested for:", appTitle);
+
+      const base64String = await window.electron.captureAppScreenShot(appTitle);
+      if (base64String && socketRef.current) {
+        socketRef.current.emit("sendImage", {
+          token: token,
+          image: base64String,
+          title: appTitle
+        });
+      }
+    });
+
+    socketRef.current.on("disconnect", () => {
+      console.log("🔴 Disconnected");
+      setIsConnected(false);
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    });
+  };
+
+  const handleDisconnect = () => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+
+    if (socketRef.current) {
+      socketRef.current.disconnect();
+      socketRef.current = null;
+      setIsConnected(false);
+      console.log("🔌 Disconnected manually");
+    }
+  };
+
+
+
+
   const trackingState: TrackingState = {
     selectedProject,
     projectTrackingMap,
@@ -567,21 +657,21 @@ const DashboardLayout = () => {
         <header className="w-full  flex justify-between items-center h-12 px-6 bg-base-100 border-b border-base-300 sticky top-0 z-30">
           {/* Left Section */}
           {/* {!isConnected ? (
-          <button
+            <button
-            onClick={handleConnect}
+              onClick={handleConnect}
-            className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded"
+              className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded"
-          >
+            >
-            Connect
+              Connect
-          </button>
+            </button>
-        ) : (
+          ) : (
-          <button
+            <button
-            onClick={handleDisconnect}
+              onClick={handleDisconnect}
-            className="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded"
+              className="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded"
-          >
+            >
-            Disconnect
+              Disconnect
-          </button>
+            </button>
-        )} */}
+          )} */}
-        <div className="flex items-center space-x-3">
+          <div className="flex items-center space-x-3">
             {selectedProject ? (
               isTracking ? (
                 <button
@@ -656,7 +746,7 @@ const DashboardLayout = () => {
       <div className={`flex ${!isTracking ? "max-h-screen min-h-screen" : " h-[calc(100vh-3rem)]"} bg-base-200 overflow-hidden`}>
         {/* Sidebar */}
         <aside className="w-20 bg-base-100 border-r border-base-300 flex flex-col items-center py-4 space-y-4">
-          {menuItems.map((item , index) => (
+          {menuItems.map((item, index) => (
             <div className="tooltip z-100 tooltip-right" key={item.label} data-tip={item.label}>
               <NavLink
                 key={item.label}