@hapico/cli 0.0.13 → 0.0.15

package/bin/index.js

@@ -38,6 +38,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.compileES5 = void 0;
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const lodash_1 = require("lodash");
 const commander_1 = require("commander");
 const axios_1 = __importDefault(require("axios"));
 const fs = __importStar(require("fs"));
@@ -226,7 +228,7 @@ class FileManager {
     }
 }
 class RoomState {
-    constructor(roomId) {
+    constructor(roomId, onChangeListeners) {
         this.files = [];
         this.roomId = roomId;
         this.state = {};
@@ -234,6 +236,7 @@ class RoomState {
         this.ws = null;
         this.reconnectTimeout = null;
         this.reconnectAttempts = 0;
+        this.onChangeListeners = onChangeListeners;
     }
     connect(onConnected) {
         if (this.ws && this.ws.readyState === ws_1.WebSocket.OPEN)
@@ -242,25 +245,50 @@ class RoomState {
             clearTimeout(this.reconnectTimeout);
         }
         this.ws = new ws_1.WebSocket(`https://base.myworkbeast.com/ws?room=${this.roomId}`);
-        this.ws.on("open", () => {
+        this.ws.onopen = () => {
+            console.log(`Connected to room: ${this.roomId}`);
             this.isConnected = true;
             this.reconnectAttempts = 0;
-            onConnected === null || onConnected === void 0 ? void 0 : onConnected();
-            connected.succeed(`Connected to WebSocket server`);
-        });
-        this.ws.on("close", () => {
+            onConnected === null || onConnected === void 0 ? void 0 : onConnected(); // Call the onConnected callback if provided
+        };
+        this.ws.onclose = () => {
+            console.log(`Disconnected from room: ${this.roomId}`);
             this.isConnected = false;
             this.reconnectAttempts++;
-            connected.start(`Retry connection...`);
-            this.connect();
-        });
+            const delay = Math.min(1000 * Math.pow(2, this.reconnectAttempts), 30000);
+            console.log(`Attempting to reconnect in ${delay / 1000}s...`);
+            this.reconnectTimeout = setTimeout(() => this.connect(onConnected), delay);
+        };
         this.ws.on("message", (data) => {
             try {
-                const message = JSON.parse(data.toString());
-                if (message.type === "state" && message.state) {
-                    this.state = message.state;
-                    const view = this.state.view;
-                    this.files = view;
+                const jsonStr = typeof data === "string" ? data : data.toString();
+                const parsedData = JSON.parse(jsonStr);
+                const includes = ["view", "coding", "refresh_key", "useActiveIdFocus", "activeId", "active_file", "figma"];
+                let newState;
+                let changedKeys;
+                if (parsedData.type === "state") {
+                    // Full state (e.g., on initial connect)
+                    newState = parsedData.state;
+                    changedKeys = Object.keys(newState).filter((key) => !(0, lodash_1.isEqual)(newState[key], this.state[key]));
+                }
+                else if (parsedData.type === "update") {
+                    // Delta update
+                    const delta = parsedData.state;
+                    newState = { ...this.state, ...delta };
+                    changedKeys = Object.keys(delta).filter((key) => !(0, lodash_1.isEqual)(delta[key], this.state[key]));
+                }
+                else {
+                    return;
+                }
+                const filteredChangedKeys = changedKeys.filter((key) => includes.includes(key));
+                if (filteredChangedKeys.length > 0) {
+                    filteredChangedKeys.forEach((key) => {
+                        const listener = (0, lodash_1.find)(this.onChangeListeners, (l) => l.key === key);
+                        if (listener) {
+                            listener.callback(newState[key]);
+                        }
+                    });
+                    this.state = newState;
                 }
             }
             catch (e) {
@@ -280,16 +308,13 @@ class RoomState {
                 state: { [key]: value },
             }));
         }
-        else {
-            console.log("Cannot update state: Not connected");
-        }
     }
     disconnect() {
         if (this.reconnectTimeout) {
             clearTimeout(this.reconnectTimeout);
         }
         if (this.ws) {
-            this.ws.removeAllListeners("close");
+            this.ws.onclose = null; // Prevent reconnect on intentional close
             this.ws.close();
         }
     }
@@ -300,7 +325,7 @@ class RoomState {
         return this.isConnected;
     }
 }
-commander_1.program.version("0.0.13").description("Hapico CLI for project management");
+commander_1.program.version("0.0.15").description("Hapico CLI for project management");
 commander_1.program
     .command("clone <id>")
     .description("Clone a project by ID")
@@ -373,19 +398,45 @@ commander_1.program
         devSpinner.fail("Source directory 'src' does not exist. Please clone a project first.");
         return;
     }
+    // Directory to store session config
+    const tmpDir = path.join(pwd, ".tmp");
+    const sessionConfigFile = path.join(tmpDir, "config.json");
+    // Ensure .tmp directory exists
+    if (!fs.existsSync(tmpDir)) {
+        fs.mkdirSync(tmpDir, { recursive: true });
+    }
+    // Function to get stored session ID
+    const getStoredSessionId = () => {
+        if (fs.existsSync(sessionConfigFile)) {
+            const data = fs.readFileSync(sessionConfigFile, { encoding: "utf8" });
+            const json = JSON.parse(data);
+            return json.sessionId || null;
+        }
+        return null;
+    };
+    // Function to save session ID
+    const saveSessionId = (sessionId) => {
+        fs.writeFileSync(sessionConfigFile, JSON.stringify({ sessionId }, null, 2), { encoding: "utf8" });
+    };
+    // Get or generate session ID
+    let sessionId = getStoredSessionId();
+    if (!sessionId) {
+        sessionId = (0, crypto_1.randomUUID)();
+        saveSessionId(sessionId);
+    }
     const info = JSON.stringify({
-        id: (0, crypto_1.randomUUID)(),
+        id: sessionId,
         createdAt: new Date().toISOString(),
         viewId: getStoredProjectId(pwd),
     });
-    // convert info info to base64
+    // Convert info to base64
     const projectId = Buffer.from(info).toString("base64");
     if (!projectId) {
         devSpinner.fail("Project ID not found. Please ensure hapico.config.json exists in the project directory.");
         return;
     }
     console.log(`Connecting to WebSocket server`);
-    const room = new RoomState(`view_${projectId}`);
+    const room = new RoomState(`view_${projectId}`, []);
     room.connect(async () => {
         devSpinner.succeed("Project started in development mode!");
         const fileManager = new FileManager(srcDir);
@@ -394,7 +445,7 @@ commander_1.program
         fileManager.setOnFileChange((filePath, content) => {
             const es5 = (0, exports.compileES5)(content, filePath);
             console.log(`File changed: ${filePath === null || filePath === void 0 ? void 0 : filePath.replace(srcDir, ".")}`);
-            const updatedView = room.files.map((file) => {
+            const updatedView = initialFiles.map((file) => {
                 if (path.join(srcDir, file.path) === filePath) {
                     return { ...file, content, es5 };
                 }
@@ -402,7 +453,7 @@ commander_1.program
             });
             room.updateState("view", updatedView);
         });
-        // LẤy thông tin về project
+        // Fetch project info
         const projectInfo = getStoredProjectId(pwd);
         if (!projectInfo) {
             console.error("Project ID not found. Please ensure hapico.config.json exists in the project directory.");
@@ -419,7 +470,6 @@ commander_1.program
             return;
         }
         const projectType = project.data.type || "view";
-        console.log("Project type:", projectType);
         if (projectType === "zalominiapp") {
             qrcode_terminal_1.default.generate(`https://zalo.me/s/3218692650896662017/player/${projectId}`, { small: true }, (qrcode) => {
                 console.log("Scan this QR code to connect to the project:");
@@ -428,7 +478,6 @@ commander_1.program
             return;
         }
         else {
-            // show link https://com.ai.vn/dev_preview/{projectId}
             const previewUrl = `https://com.ai.vn/dev_preview/${projectId}`;
             console.log(`Open this URL in your browser to preview the project: \n${previewUrl}`);
             await (0, open_1.default)(previewUrl);

package/bun.lock

@@ -7,6 +7,7 @@
         "@babel/standalone": "^7.28.2",
         "axios": "^1.11.0",
         "commander": "^14.0.0",
+        "lodash": "^4.17.21",
         "open": "^10.2.0",
         "ora": "^8.2.0",
         "qrcode-terminal": "^0.12.0",
@@ -16,6 +17,7 @@
       "devDependencies": {
         "@types/babel__standalone": "^7.1.9",
         "@types/commander": "^2.12.5",
+        "@types/lodash": "^4.17.20",
         "@types/node": "^24.1.0",
         "@types/qrcode-terminal": "^0.12.2",
         "@types/unzipper": "^0.10.11",
@@ -47,6 +49,8 @@
 
     "@types/commander": ["@types/commander@2.12.5", "", { "dependencies": { "commander": "*" } }, "sha512-YXGZ/rz+s57VbzcvEV9fUoXeJlBt5HaKu5iUheiIWNsJs23bz6AnRuRiZBRVBLYyPnixNvVnuzM5pSaxr8Yp/g=="],
 
+    "@types/lodash": ["@types/lodash@4.17.20", "", {}, "sha512-H3MHACvFUEiujabxhaI/ImO6gUrd8oOurg7LQtS7mbwIXA/cUqWrvBsaeJ23aZEPk1TAYkurjfMbSELfoCXlGA=="],
+
     "@types/node": ["@types/node@24.1.0", "", { "dependencies": { "undici-types": "~7.8.0" } }, "sha512-ut5FthK5moxFKH2T1CUOC6ctR67rQRvvHdFLCD2Ql6KXmMuCrjsSsRI9UsLCm9M18BMwClv4pn327UvB7eeO1w=="],
 
     "@types/qrcode-terminal": ["@types/qrcode-terminal@0.12.2", "", {}, "sha512-v+RcIEJ+Uhd6ygSQ0u5YYY7ZM+la7GgPbs0V/7l/kFs2uO4S8BcIUEMoP7za4DNIqNnUD5npf0A/7kBhrCKG5Q=="],
@@ -141,6 +145,8 @@
 
     "jsonfile": ["jsonfile@6.1.0", "", { "dependencies": { "universalify": "^2.0.0" }, "optionalDependencies": { "graceful-fs": "^4.1.6" } }, "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ=="],
 
+    "lodash": ["lodash@4.17.21", "", {}, "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="],
+
     "log-symbols": ["log-symbols@6.0.0", "", { "dependencies": { "chalk": "^5.3.0", "is-unicode-supported": "^1.3.0" } }, "sha512-i24m8rpwhmPIS4zscNzK6MSEhk0DUWa/8iYQWxhffV8jkI4Phvs3F+quL5xvS0gdQR0FyTCMMH33Y78dDTzzIw=="],
 
     "math-intrinsics": ["math-intrinsics@1.1.0", "", {}, "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g=="],

package/dist/index.js

@@ -38,6 +38,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.compileES5 = void 0;
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const lodash_1 = require("lodash");
 const commander_1 = require("commander");
 const axios_1 = __importDefault(require("axios"));
 const fs = __importStar(require("fs"));
@@ -226,7 +228,7 @@ class FileManager {
     }
 }
 class RoomState {
-    constructor(roomId) {
+    constructor(roomId, onChangeListeners) {
         this.files = [];
         this.roomId = roomId;
         this.state = {};
@@ -234,6 +236,7 @@ class RoomState {
         this.ws = null;
         this.reconnectTimeout = null;
         this.reconnectAttempts = 0;
+        this.onChangeListeners = onChangeListeners;
     }
     connect(onConnected) {
         if (this.ws && this.ws.readyState === ws_1.WebSocket.OPEN)
@@ -242,25 +245,50 @@ class RoomState {
             clearTimeout(this.reconnectTimeout);
         }
         this.ws = new ws_1.WebSocket(`https://base.myworkbeast.com/ws?room=${this.roomId}`);
-        this.ws.on("open", () => {
+        this.ws.onopen = () => {
+            console.log(`Connected to room: ${this.roomId}`);
             this.isConnected = true;
             this.reconnectAttempts = 0;
-            onConnected === null || onConnected === void 0 ? void 0 : onConnected();
-            connected.succeed(`Connected to WebSocket server`);
-        });
-        this.ws.on("close", () => {
+            onConnected === null || onConnected === void 0 ? void 0 : onConnected(); // Call the onConnected callback if provided
+        };
+        this.ws.onclose = () => {
+            console.log(`Disconnected from room: ${this.roomId}`);
             this.isConnected = false;
             this.reconnectAttempts++;
-            connected.start(`Retry connection...`);
-            this.connect();
-        });
+            const delay = Math.min(1000 * Math.pow(2, this.reconnectAttempts), 30000);
+            console.log(`Attempting to reconnect in ${delay / 1000}s...`);
+            this.reconnectTimeout = setTimeout(() => this.connect(onConnected), delay);
+        };
         this.ws.on("message", (data) => {
             try {
-                const message = JSON.parse(data.toString());
-                if (message.type === "state" && message.state) {
-                    this.state = message.state;
-                    const view = this.state.view;
-                    this.files = view;
+                const jsonStr = typeof data === "string" ? data : data.toString();
+                const parsedData = JSON.parse(jsonStr);
+                const includes = ["view", "coding", "refresh_key", "useActiveIdFocus", "activeId", "active_file", "figma"];
+                let newState;
+                let changedKeys;
+                if (parsedData.type === "state") {
+                    // Full state (e.g., on initial connect)
+                    newState = parsedData.state;
+                    changedKeys = Object.keys(newState).filter((key) => !(0, lodash_1.isEqual)(newState[key], this.state[key]));
+                }
+                else if (parsedData.type === "update") {
+                    // Delta update
+                    const delta = parsedData.state;
+                    newState = { ...this.state, ...delta };
+                    changedKeys = Object.keys(delta).filter((key) => !(0, lodash_1.isEqual)(delta[key], this.state[key]));
+                }
+                else {
+                    return;
+                }
+                const filteredChangedKeys = changedKeys.filter((key) => includes.includes(key));
+                if (filteredChangedKeys.length > 0) {
+                    filteredChangedKeys.forEach((key) => {
+                        const listener = (0, lodash_1.find)(this.onChangeListeners, (l) => l.key === key);
+                        if (listener) {
+                            listener.callback(newState[key]);
+                        }
+                    });
+                    this.state = newState;
                 }
             }
             catch (e) {
@@ -280,16 +308,13 @@ class RoomState {
                 state: { [key]: value },
             }));
         }
-        else {
-            console.log("Cannot update state: Not connected");
-        }
     }
     disconnect() {
         if (this.reconnectTimeout) {
             clearTimeout(this.reconnectTimeout);
         }
         if (this.ws) {
-            this.ws.removeAllListeners("close");
+            this.ws.onclose = null; // Prevent reconnect on intentional close
             this.ws.close();
         }
     }
@@ -300,7 +325,7 @@ class RoomState {
         return this.isConnected;
     }
 }
-commander_1.program.version("0.0.13").description("Hapico CLI for project management");
+commander_1.program.version("0.0.15").description("Hapico CLI for project management");
 commander_1.program
     .command("clone <id>")
     .description("Clone a project by ID")
@@ -373,19 +398,45 @@ commander_1.program
         devSpinner.fail("Source directory 'src' does not exist. Please clone a project first.");
         return;
     }
+    // Directory to store session config
+    const tmpDir = path.join(pwd, ".tmp");
+    const sessionConfigFile = path.join(tmpDir, "config.json");
+    // Ensure .tmp directory exists
+    if (!fs.existsSync(tmpDir)) {
+        fs.mkdirSync(tmpDir, { recursive: true });
+    }
+    // Function to get stored session ID
+    const getStoredSessionId = () => {
+        if (fs.existsSync(sessionConfigFile)) {
+            const data = fs.readFileSync(sessionConfigFile, { encoding: "utf8" });
+            const json = JSON.parse(data);
+            return json.sessionId || null;
+        }
+        return null;
+    };
+    // Function to save session ID
+    const saveSessionId = (sessionId) => {
+        fs.writeFileSync(sessionConfigFile, JSON.stringify({ sessionId }, null, 2), { encoding: "utf8" });
+    };
+    // Get or generate session ID
+    let sessionId = getStoredSessionId();
+    if (!sessionId) {
+        sessionId = (0, crypto_1.randomUUID)();
+        saveSessionId(sessionId);
+    }
     const info = JSON.stringify({
-        id: (0, crypto_1.randomUUID)(),
+        id: sessionId,
         createdAt: new Date().toISOString(),
         viewId: getStoredProjectId(pwd),
     });
-    // convert info info to base64
+    // Convert info to base64
     const projectId = Buffer.from(info).toString("base64");
     if (!projectId) {
         devSpinner.fail("Project ID not found. Please ensure hapico.config.json exists in the project directory.");
         return;
     }
     console.log(`Connecting to WebSocket server`);
-    const room = new RoomState(`view_${projectId}`);
+    const room = new RoomState(`view_${projectId}`, []);
     room.connect(async () => {
         devSpinner.succeed("Project started in development mode!");
         const fileManager = new FileManager(srcDir);
@@ -394,7 +445,7 @@ commander_1.program
         fileManager.setOnFileChange((filePath, content) => {
             const es5 = (0, exports.compileES5)(content, filePath);
             console.log(`File changed: ${filePath === null || filePath === void 0 ? void 0 : filePath.replace(srcDir, ".")}`);
-            const updatedView = room.files.map((file) => {
+            const updatedView = initialFiles.map((file) => {
                 if (path.join(srcDir, file.path) === filePath) {
                     return { ...file, content, es5 };
                 }
@@ -402,7 +453,7 @@ commander_1.program
             });
             room.updateState("view", updatedView);
         });
-        // LẤy thông tin về project
+        // Fetch project info
         const projectInfo = getStoredProjectId(pwd);
         if (!projectInfo) {
             console.error("Project ID not found. Please ensure hapico.config.json exists in the project directory.");
@@ -419,7 +470,6 @@ commander_1.program
             return;
         }
         const projectType = project.data.type || "view";
-        console.log("Project type:", projectType);
         if (projectType === "zalominiapp") {
             qrcode_terminal_1.default.generate(`https://zalo.me/s/3218692650896662017/player/${projectId}`, { small: true }, (qrcode) => {
                 console.log("Scan this QR code to connect to the project:");
@@ -428,7 +478,6 @@ commander_1.program
             return;
         }
         else {
-            // show link https://com.ai.vn/dev_preview/{projectId}
             const previewUrl = `https://com.ai.vn/dev_preview/${projectId}`;
             console.log(`Open this URL in your browser to preview the project: \n${previewUrl}`);
             await (0, open_1.default)(previewUrl);

package/index.ts

@@ -1,5 +1,6 @@
 #!/usr/bin/env node
-
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { isEqual, find } from "lodash";
 import { program } from "commander";
 import axios from "axios";
 import * as fs from "fs";
@@ -249,6 +250,10 @@ class FileManager {
   }
 }
 
+interface FileContent {
+  // Define the structure of FileContent if needed
+}
+
 class RoomState {
   private roomId: string;
   private state: RoomStateData;
@@ -256,16 +261,21 @@ class RoomState {
   private ws: WebSocket | null;
   private reconnectTimeout: NodeJS.Timeout | null;
   private reconnectAttempts: number;
+  private onChangeListeners: Array<{ key: string; callback: (value: any) => void }>;
 
   public files: FileContent[] = [];
 
-  constructor(roomId: string) {
+  constructor(
+    roomId: string,
+    onChangeListeners: Array<{ key: string; callback: (value: any) => void }>
+  ) {
     this.roomId = roomId;
     this.state = {};
     this.isConnected = false;
     this.ws = null;
     this.reconnectTimeout = null;
     this.reconnectAttempts = 0;
+    this.onChangeListeners = onChangeListeners;
   }
 
   connect(onConnected?: () => void): void {
@@ -279,36 +289,69 @@ class RoomState {
       `https://base.myworkbeast.com/ws?room=${this.roomId}`
     );
 
-    this.ws.on("open", () => {
+    this.ws.onopen = () => {
+      console.log(`Connected to room: ${this.roomId}`);
       this.isConnected = true;
       this.reconnectAttempts = 0;
-      onConnected?.();
-      connected.succeed(`Connected to WebSocket server`);
-    });
+      onConnected?.(); // Call the onConnected callback if provided
+    };
 
-    this.ws.on("close", () => {
+    this.ws.onclose = () => {
+      console.log(`Disconnected from room: ${this.roomId}`);
       this.isConnected = false;
 
       this.reconnectAttempts++;
-      connected.start(`Retry connection...`);
+      const delay = Math.min(
+        1000 * Math.pow(2, this.reconnectAttempts),
+        30000
+      );
+      console.log(`Attempting to reconnect in ${delay / 1000}s...`);
 
-      this.connect();
-    });
+      this.reconnectTimeout = setTimeout(() => this.connect(onConnected), delay);
+    };
 
-    this.ws.on("message", (data: Buffer) => {
+    this.ws.on("message", (data: Buffer | string) => {
       try {
-        const message: WebSocketMessage = JSON.parse(data.toString());
-        if (message.type === "state" && message.state) {
-          this.state = message.state;
-          const view = this.state.view as Array<FileContent>;
-          this.files = view;
+        const jsonStr = typeof data === "string" ? data : data.toString();
+        const parsedData = JSON.parse(jsonStr);
+        const includes = ["view", "coding", "refresh_key", "useActiveIdFocus", "activeId", "active_file", "figma"];
+
+        let newState: RoomStateData;
+        let changedKeys;
+
+        if (parsedData.type === "state") {
+          // Full state (e.g., on initial connect)
+          newState = parsedData.state;
+          changedKeys = Object.keys(newState).filter(
+            (key) => !isEqual(newState[key], this.state[key])
+          );
+        } else if (parsedData.type === "update") {
+          // Delta update
+          const delta = parsedData.state;
+          newState = { ...this.state, ...delta };
+          changedKeys = Object.keys(delta).filter(
+            (key) => !isEqual(delta[key], this.state[key])
+          );
+        } else {
+          return;
+        }
+
+        const filteredChangedKeys = changedKeys.filter((key) => includes.includes(key));
+        if (filteredChangedKeys.length > 0) {
+          filteredChangedKeys.forEach((key) => {
+            const listener = find(this.onChangeListeners, (l) => l.key === key);
+            if (listener) {
+              listener.callback(newState[key]);
+            }
+          });
+          this.state = newState;
         }
       } catch (e) {
         console.error("Error processing message:", e);
       }
     });
 
-    this.ws.on("error", (err: Error) => {
+    this.ws.on("error", (err) => {
       console.error("WebSocket error:", err);
       this.ws?.close();
     });
@@ -322,8 +365,6 @@ class RoomState {
           state: { [key]: value },
         })
       );
-    } else {
-      console.log("Cannot update state: Not connected");
     }
   }
 
@@ -332,7 +373,7 @@ class RoomState {
       clearTimeout(this.reconnectTimeout);
     }
     if (this.ws) {
-      this.ws.removeAllListeners("close");
+      this.ws.onclose = null; // Prevent reconnect on intentional close
       this.ws.close();
     }
   }
@@ -346,7 +387,7 @@ class RoomState {
   }
 }
 
-program.version("0.0.13").description("Hapico CLI for project management");
+program.version("0.0.15").description("Hapico CLI for project management");
 
 program
   .command("clone <id>")
@@ -431,23 +472,60 @@ program
       console.error("You need to login first. Use 'hapico login' command.");
       return;
     }
-    const devSpinner: Ora = ora(
+    const devSpinner = ora(
       "Starting the project in development mode..."
     ).start();
-    const pwd: string = process.cwd();
-    const srcDir: string = path.join(pwd, "src");
+    const pwd = process.cwd();
+    const srcDir = path.join(pwd, "src");
     if (!fs.existsSync(srcDir)) {
       devSpinner.fail(
         "Source directory 'src' does not exist. Please clone a project first."
       );
       return;
     }
+
+    // Directory to store session config
+    const tmpDir = path.join(pwd, ".tmp");
+    const sessionConfigFile = path.join(tmpDir, "config.json");
+
+    // Ensure .tmp directory exists
+    if (!fs.existsSync(tmpDir)) {
+      fs.mkdirSync(tmpDir, { recursive: true });
+    }
+
+    // Function to get stored session ID
+    const getStoredSessionId = () => {
+      if (fs.existsSync(sessionConfigFile)) {
+        const data = fs.readFileSync(sessionConfigFile, { encoding: "utf8" });
+        const json = JSON.parse(data);
+        return json.sessionId || null;
+      }
+      return null;
+    };
+
+    // Function to save session ID
+    const saveSessionId = (sessionId: string) => {
+      fs.writeFileSync(
+        sessionConfigFile,
+        JSON.stringify({ sessionId }, null, 2),
+        { encoding: "utf8" }
+      );
+    };
+
+    // Get or generate session ID
+    let sessionId = getStoredSessionId();
+    if (!sessionId) {
+      sessionId = randomUUID();
+      saveSessionId(sessionId);
+    }
+
     const info = JSON.stringify({
-      id: randomUUID(),
+      id: sessionId,
       createdAt: new Date().toISOString(),
       viewId: getStoredProjectId(pwd),
     });
-    // convert info info to base64
+
+    // Convert info to base64
     const projectId = Buffer.from(info).toString("base64");
     if (!projectId) {
       devSpinner.fail(
@@ -455,8 +533,9 @@ program
       );
       return;
     }
+
     console.log(`Connecting to WebSocket server`);
-    const room = new RoomState(`view_${projectId}`);
+    const room = new RoomState(`view_${projectId}`, []);
 
     room.connect(async () => {
       devSpinner.succeed("Project started in development mode!");
@@ -466,10 +545,10 @@ program
       const initialFiles = fileManager.listFiles();
       room.updateState("view", initialFiles);
 
-      fileManager.setOnFileChange((filePath: string, content: string) => {
+      fileManager.setOnFileChange((filePath, content) => {
         const es5 = compileES5(content, filePath);
         console.log(`File changed: ${filePath?.replace(srcDir, ".")}`);
-        const updatedView = room.files.map((file) => {
+        const updatedView = initialFiles.map((file) => {
           if (path.join(srcDir, file.path) === filePath) {
             return { ...file, content, es5 };
           }
@@ -478,7 +557,7 @@ program
         room.updateState("view", updatedView);
       });
 
-      // LẤy thông tin về project
+      // Fetch project info
       const projectInfo = getStoredProjectId(pwd);
       if (!projectInfo) {
         console.error(
@@ -503,20 +582,17 @@ program
 
       const projectType = project.data.type || "view";
 
-      console.log("Project type:", projectType);
-
       if (projectType === "zalominiapp") {
         QRCode.generate(
           `https://zalo.me/s/3218692650896662017/player/${projectId}`,
           { small: true },
-          (qrcode: string) => {
+          (qrcode) => {
             console.log("Scan this QR code to connect to the project:");
             console.log(qrcode);
           }
         );
         return;
       } else {
-        // show link https://com.ai.vn/dev_preview/{projectId}
         const previewUrl = `https://com.ai.vn/dev_preview/${projectId}`;
         console.log(
           `Open this URL in your browser to preview the project: \n${previewUrl}`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hapico/cli",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "description": "A simple CLI tool for project management",
   "main": "index.js",
   "bin": {
@@ -23,6 +23,7 @@
     "@babel/standalone": "^7.28.2",
     "axios": "^1.11.0",
     "commander": "^14.0.0",
+    "lodash": "^4.17.21",
     "open": "^10.2.0",
     "ora": "^8.2.0",
     "qrcode-terminal": "^0.12.0",
@@ -32,6 +33,7 @@
   "devDependencies": {
     "@types/babel__standalone": "^7.1.9",
     "@types/commander": "^2.12.5",
+    "@types/lodash": "^4.17.20",
     "@types/node": "^24.1.0",
     "@types/qrcode-terminal": "^0.12.2",
     "@types/unzipper": "^0.10.11",