@hapico/cli 0.0.29 → 0.0.31

package/index.ts

@@ -17,6 +17,7 @@ import { promisify } from "util";
 import chalk from "chalk";
 import pako from "pako";
 import { vibe } from "./tools/vibe";
+import { compileAndSaveToFolder } from "./tools/nativewind";
 
 // Promisify exec for async usage
 const execPromise = promisify(exec);
@@ -96,7 +97,7 @@ const getStoredProjectId = (
   };
 };
 
-// Khởi tạo cache bằng Map để lưu trữ kết quả compile
+// Initialize cache using Map to store compilation results
 const compileCache = new Map<string, string>();
 
 interface FileContent {
@@ -187,7 +188,7 @@ class FileManager {
   }
 
   private replaceSplashWithSeparator(filePath: string): string {
-    // Thay thế dấu "\" với dấu "/" trong đường dẫn file
+    // Replace "\" with "/" in the file path
     return filePath.replace(/\\/g, "/");
   }
 
@@ -199,12 +200,12 @@ class FileManager {
         if (entry.isDirectory()) {
           traverseDirectory(fullPath);
         } else if (entry.isFile()) {
-          // skip các file trong thư mục bị ignore
+          // skip files in ignored folders
           if (ignoreFolders.some((folder) => fullPath.includes(folder))) {
             return;
           }
 
-          // chỉ hổ trợ các files nằm trong ./src
+          // only support files located in ./src
           if (!fullPath.includes("/src/") && !fullPath.includes("\\src\\")) {
             return;
           }
@@ -321,10 +322,6 @@ class FileManager {
   }
 }
 
-interface FileContent {
-  // Define the structure of FileContent if needed
-}
-
 class RoomState {
   private roomId: string;
   private state: RoomStateData;
@@ -365,7 +362,9 @@ class RoomState {
     this.ws.binaryType = "arraybuffer";
 
     this.ws.on("open", () => {
-      console.log(chalk.green(`Connected to room: ${this.roomId}`));
+      if (this.reconnectAttempts > 0) {
+        console.log(chalk.greenBright(`\n✨ Sync connection restored for session: ${this.roomId}`));
+      }
       this.isConnected = true;
       this.reconnectAttempts = 0;
       onConnected?.(); // Call the onConnected callback if provided
@@ -397,7 +396,7 @@ class RoomState {
         } else if (Buffer.isBuffer(data)) {
           jsonStr = pako.inflate(data, { to: "string" });
         } else {
-          jsonStr = data.toString(); // Fallback nếu không nén
+          jsonStr = data.toString(); // Fallback if not compressed
         }
         const parsedData = JSON.parse(jsonStr);
         const includes = [
@@ -459,8 +458,8 @@ class RoomState {
         type: "update",
         state: { [key]: value },
       });
-      const compressed = pako.deflate(message); // Nén dữ liệu
-      this.ws.send(compressed); // Gửi binary
+      const compressed = pako.deflate(message); // Compress state data
+      this.ws.send(compressed); // Send binary payload
     }
   }
 
@@ -483,142 +482,103 @@ class RoomState {
   }
 }
 
-program.version("0.0.29").description("Hapico CLI for project management");
+program.version("0.0.31").description("Hapico CLI for project management");
 
 program
   .command("clone <id>")
   .description("Clone a project by ID")
   .action(async (id: string) => {
+    console.clear();
+    console.log(chalk.bold.blue("\n📦 HAPICO CLONE PIPELINE"));
+    console.log(chalk.gray("──────────────────────────────────────────────────────────────────"));
+
     const { accessToken } = getStoredToken();
     if (!accessToken) {
-      console.error(
-        chalk.red("✗ You need to login first. Use 'hapico login' command.")
-      );
+      console.log(chalk.red("✗ Authentication required. Please run 'hapico login' first."));
       return;
     }
-    const projectDir: string = path.resolve(process.cwd(), id);
-    if (fs.existsSync(projectDir)) {
-      console.error(chalk.red(`✗ Project directory "${id}" already exists.`));
+
+    const outputDir = path.resolve(process.cwd(), id);
+    if (fs.existsSync(outputDir)) {
+      console.log(chalk.red(`✗ Destination directory "${id}" already exists.`));
       return;
     }
 
-    let files: FileContent[] = [];
-    const apiSpinner: Ora = ora(chalk.blue("Fetching project data...")).start();
+    const statusSpinner = ora(chalk.blue("Fetching project metadata...")).start();
 
     try {
-      // ===== 1. Lấy version public/published (giữ nguyên như cũ) =====
-      const response: ApiResponse = await axios.get(
-        `https://base.myworkbeast.com/api/views/${id}`
-      );
+      // 1. Fetch metadata and initial files
+      const response: ApiResponse = await axios.get(`https://base.myworkbeast.com/api/views/${id}`);
+      const projectType = response.data.type || "view";
+      
       const code = response?.data?.code;
       const decompressedCode = pako.inflate(
         Uint8Array.from(atob(code), (c) => c.charCodeAt(0)),
         { to: "string" }
       );
-      files = tryJSONParse(decompressedCode)?.files || [];
-      apiSpinner.succeed(chalk.green("Project data fetched successfully!"));
-
-      // ===== 2. Download + extract template =====
-      const templateSpinner: Ora = ora(
-        chalk.blue("Downloading template...")
-      ).start();
-      const TEMPLATE_URL: string =
-        "https://files.hcm04.vstorage.vngcloud.vn/assets/template_zalominiapp_devmode.zip";
-      const templateResponse = await axios.get(TEMPLATE_URL, {
-        responseType: "arraybuffer",
-      });
-      templateSpinner.succeed(chalk.green("Template downloaded successfully!"));
-
-      const outputDir: string = path.resolve(process.cwd(), id);
-      if (!fs.existsSync(outputDir)) {
-        fs.mkdirSync(outputDir);
-      }
-
-      const unzipSpinner: Ora = ora(
-        chalk.blue("Extracting template...")
-      ).start();
+      const publicFiles = tryJSONParse(decompressedCode)?.files || [];
+      
+      statusSpinner.succeed(chalk.green("Project metadata retrieved."));
+      console.log(chalk.bold.white("Project Details:"));
+      console.log(`${chalk.gray("├─")} ${chalk.bold("ID     :")} ${chalk.cyan(id)}`);
+      console.log(`${chalk.gray("└─")} ${chalk.bold("Type   :")} ${chalk.magenta(projectType.toUpperCase())}\n`);
+
+      // 2. Setup Template
+      statusSpinner.start(chalk.blue("Initializing project template..."));
+      const TEMPLATE_URL = "https://files.hcm04.vstorage.vngcloud.vn/assets/template_zalominiapp_devmode.zip";
+      const templateResponse = await axios.get(TEMPLATE_URL, { responseType: "arraybuffer" });
+      
+      if (!fs.existsSync(outputDir)) fs.mkdirSync(outputDir, { recursive: true });
+      
       await unzipper.Open.buffer(templateResponse.data).then((directory) =>
         directory.extract({ path: outputDir })
       );
-      unzipSpinner.succeed(chalk.green("Template extracted successfully!"));
-
-      const macosxDir: string = path.join(process.cwd(), id, "__MACOSX");
-      if (fs.existsSync(macosxDir)) {
-        fs.rmSync(macosxDir, { recursive: true, force: true });
-      }
 
-      // Save project ID
+      const macosxDir = path.join(outputDir, "__MACOSX");
+      if (fs.existsSync(macosxDir)) fs.rmSync(macosxDir, { recursive: true, force: true });
+      
       saveProjectId(outputDir, id);
-      console.log(chalk.green("Project cloned successfully!"));
-
-      // ===== 3. Save file từ version public =====
-      const saveSpinner: Ora = ora(
-        chalk.blue("Saving project files...")
-      ).start();
-      files.forEach((file: FileContent) => {
-        const filePath: string = path.join(process.cwd(), id, "src", file.path);
-        const dir: string = path.dirname(filePath);
+      statusSpinner.succeed(chalk.green("Base template initialized."));
 
-        if (!fs.existsSync(dir)) {
-          fs.mkdirSync(dir, { recursive: true });
-        }
-
-        fs.writeFileSync(filePath, file.content);
-      });
-      saveSpinner.succeed(chalk.green("Project files saved successfully!"));
-
-      // ===== 4. TỰ ĐỘNG PULL PHIÊN BẢN MỚI NHẤT (draft) – ĐÂY LÀ PHẦN MỚI =====
-      const pullSpinner: Ora = ora(
-        chalk.blue("Pulling latest changes from server...")
-      ).start();
+      // 3. Sync Source Files
+      statusSpinner.start(chalk.blue("Syncing source files..."));
+      const srcPath = path.join(outputDir, "src");
+      const fileManager = new FileManager(srcPath);
+      fileManager.syncFiles(publicFiles);
+      statusSpinner.succeed(chalk.green(`${publicFiles.length} files synchronized from production.`));
 
+      // 4. Pull Latest Draft (v3)
+      statusSpinner.start(chalk.blue("Checking for latest development changes..."));
       try {
-        const pullResponse = await axios.get(
-          `https://base.myworkbeast.com/api/views/v3/${id}`,
-          {
-            headers: {
-              Authorization: `Bearer ${accessToken}`,
-              "Content-Type": "application/json",
-            },
-          }
-        );
+        const pullResponse = await axios.get(`https://base.myworkbeast.com/api/views/v3/${id}`, {
+          headers: { Authorization: `Bearer ${accessToken}` },
+        });
 
         const pullCode = pullResponse?.data?.code;
-        if (!pullCode) {
-          pullSpinner.info(
-            chalk.cyan("No draft version found – using published version.")
-          );
-        } else {
+        if (pullCode) {
           const pullDecompressed = pako.inflate(
             Uint8Array.from(atob(pullCode), (c) => c.charCodeAt(0)),
             { to: "string" }
           );
-          const latestFiles: FileContent[] =
-            tryJSONParse(pullDecompressed)?.files || [];
-
-          const fileManager = new FileManager(path.join(outputDir, "src"));
+          const latestFiles = tryJSONParse(pullDecompressed)?.files || [];
           fileManager.syncFiles(latestFiles);
-
-          pullSpinner.succeed(
-            chalk.green("✓ Latest changes pulled successfully!")
-          );
+          statusSpinner.succeed(chalk.green("Latest development changes integrated."));
+        } else {
+          statusSpinner.info(chalk.gray("No draft version found, using published code."));
         }
-      } catch (pullErr: any) {
-        pullSpinner.warn(
-          chalk.yellow(
-            `⚠ Could not pull latest changes: ${pullErr.message}\n   Run "hapico pull" manually later.`
-          )
-        );
+      } catch (e) {
+        statusSpinner.warn(chalk.yellow("Draft sync skipped (using production code)."));
       }
 
-      // ===== 5. Hướng dẫn chạy dev =====
-      console.log(
-        chalk.cyan(
-          `💡 Run ${chalk.bold("cd ${id} && npm install && hapico dev")} to start the project.`
-        )
-      );
+      console.log(chalk.gray("──────────────────────────────────────────────────────────────────"));
+      console.log(`\n${chalk.bold.white.bgGreen(" SUCCESS ")} ${chalk.green("Project cloned successfully!\n")}`);
+      console.log(chalk.bold.white("Next steps:"));
+      console.log(`${chalk.gray("1.")} ${chalk.cyan(`cd ${id}`)}`);
+      console.log(`${chalk.gray("2.")} ${chalk.cyan("npm install")}`);
+      console.log(`${chalk.gray("3.")} ${chalk.cyan("hapico dev")}\n`);
+
     } catch (error: any) {
-      apiSpinner.fail(chalk.red(`Error cloning project: ${error.message}`));
+      statusSpinner.fail(chalk.red(`Clone failed: ${error.message}`));
     }
   });
 
@@ -634,7 +594,7 @@ program
   .command("dev")
   .description("Start the project in development mode")
   .option("--zversion <version>", "Zalo version for QR code")
-  .action((options) => {
+  .action(async (options) => {
     const { accessToken } = getStoredToken();
     if (!accessToken) {
       console.error(
@@ -642,86 +602,78 @@ program
       );
       return;
     }
-    const devSpinner = ora(
-      chalk.blue("Starting the project in development mode...")
-    ).start();
+
+    console.clear();
+    console.log(chalk.bold.cyan("\n🚀 HAPICO DEVELOPMENT SERVER"));
+    console.log(chalk.gray("─────────────────────────────────────────"));
+
+    const devSpinner = ora(chalk.blue("Initializing environment...")).start();
     const pwd = process.cwd();
     const srcDir = path.join(pwd, "src");
+
     if (!fs.existsSync(srcDir)) {
       devSpinner.fail(
-        chalk.red(
-          "✗ Source directory 'src' does not exist. Please clone a project first."
-        )
+        chalk.red("Source directory 'src' not found. Ensure you are in a valid project folder.")
       );
       return;
     }
 
-    // Directory to store session config
     const tmpDir = path.join(pwd, ".tmp");
     const sessionConfigFile = path.join(tmpDir, "config.json");
+    if (!fs.existsSync(tmpDir)) fs.mkdirSync(tmpDir, { recursive: true });
 
-    // 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;
+        try {
+          return JSON.parse(fs.readFileSync(sessionConfigFile, "utf8")).sessionId;
+        } catch { return 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);
-    }
+    let sessionId = getStoredSessionId() || randomUUID();
+    fs.writeFileSync(sessionConfigFile, JSON.stringify({ sessionId }, null, 2));
 
+    const projectConfig = getStoredProjectId(pwd);
     const info = JSON.stringify({
       id: sessionId,
       createdAt: new Date().toISOString(),
-      viewId: getStoredProjectId(pwd)?.projectId,
+      viewId: projectConfig?.projectId,
     });
 
-    // Convert info to base64
     const projectId = Buffer.from(info).toString("base64");
-    if (!projectId) {
-      devSpinner.fail(
-        chalk.red(
-          "✗ Project ID not found. Please ensure hapico.config.json exists in the project directory."
-        )
-      );
+    if (!projectConfig?.projectId) {
+      devSpinner.fail(chalk.red("Project ID missing in hapico.config.json"));
       return;
     }
 
-    console.log(chalk.cyan("🔗 Connecting to WebSocket server"));
-    const room = new RoomState(`view_${projectId}`, []);
+    devSpinner.text = chalk.blue("Scanning project directory...");
     const fileManager = new FileManager(srcDir);
     const initialFiles = fileManager.listFiles();
-    // get tsconfig.json
-    const tsconfigPath = path.join(srcDir, "..", "tsconfig.json");
-    if (fs.existsSync(tsconfigPath)) {
-      const content = fs.readFileSync(tsconfigPath, { encoding: "utf8" });
-      initialFiles.push({
-        path: "./tsconfig.json",
-        content,
-      });
-    }
-    // Remove All binary files
+
+    // Supported files outside src
+    const SUPPORT_FILES = [
+      "./.env",
+      "./.env.local",
+      "./.env.development",
+      "./.env.production",
+      "./package.json",
+      "./tsconfig.json",
+      "./nativewind.json"
+    ];
+
+    SUPPORT_FILES.forEach((relativePath) => {
+      const fullPath = path.join(pwd, relativePath);
+      if (fs.existsSync(fullPath)) {
+        const content = fs.readFileSync(fullPath, { encoding: "utf8" });
+        initialFiles.push({
+          path: relativePath,
+          content,
+          es5: compileES5(content, fullPath) ?? "",
+        });
+      }
+    });
+
     const supportExtensions = [
       ".ts",
       ".tsx",
@@ -734,144 +686,137 @@ program
       ".env.development",
       ".env.production",
     ];
-    const filteredFiles = initialFiles.filter((file) => {
-      return supportExtensions.some((ext) => file.path.endsWith(ext));
-    });
+    const filteredFiles = initialFiles.filter((file) =>
+      supportExtensions.some((ext) => file.path.endsWith(ext))
+    );
 
+    devSpinner.text = chalk.blue("Establishing WebSocket connection...");
+    const room = new RoomState(`view_${projectId}`, []);
     room.files = filteredFiles;
 
     room.connect(async () => {
-      devSpinner.succeed(chalk.green("Project started in development mode!"));
+      devSpinner.succeed(chalk.greenBright("Sync Engine Ready"));
+      
+      console.log(`\n${chalk.bold.white.bgGreen(" SUCCESS ")} ${chalk.green("Connection established with workspace.\n")}`);
+      
+      console.log(chalk.bold.white("Workspace Configuration:"));
+      console.log(`${chalk.gray("├─")} ${chalk.bold("Project ID :")} ${chalk.cyan(projectConfig.projectId)}`);
+      console.log(`${chalk.gray("├─")} ${chalk.bold("Session    :")} ${chalk.gray(sessionId)}`);
+      console.log(`${chalk.gray("└─")} ${chalk.bold("Local Path :")} ${chalk.gray(pwd)}`);
+      console.log("");
 
       room.updateState("view", filteredFiles);
 
-      // Debounce the state update to avoid overwhelming the server while typing/saving
-      const debouncedUpdate = debounce((updatedFiles: FileContent[]) => {
-        room.updateState("view", updatedFiles);
-      }, 200);
-
-      fileManager.setOnFileChange((filePath, content) => {
-        const es5 = compileES5(content, filePath) ?? "";
-        console.log(
-          chalk.yellow(`📝 File changed: ${filePath?.replace(srcDir, ".")}`)
-        );
-        const updatedFiles = room.files.map((file) => {
-          if (path.join(srcDir, file.path) === filePath) {
-            return { ...file, content, es5 };
-          }
-          return file;
+      try {
+        const project = await axios.get(`https://base.myworkbeast.com/api/views/${projectConfig.projectId}`, {
+          headers: { Authorization: `Bearer ${accessToken}` }
         });
-        room.files = updatedFiles;
-        debouncedUpdate(updatedFiles);
-      });
 
-      // Fetch project info
-      const store = getStoredProjectId(pwd);
-      if (!store.projectId) {
-        console.error(
-          chalk.red(
-            "✗ Project ID not found. Please ensure hapico.config.json exists in the project directory."
-          )
-        );
-        return;
-      }
-      const project = await axios.get(
-        `https://base.myworkbeast.com/api/views/${store.projectId}`,
-        {
-          headers: {
-            Authorization: `Bearer ${accessToken}`,
-            "Content-Type": "application/json",
-          },
-        }
-      );
+        const projectType = project.data.type || "view";
+        const isExpo = projectType === "expo_app" || projectType === "emg_edu_lesson";
 
-      if (project.status !== 200) {
-        console.error(
-          chalk.red(`✗ Error fetching project info: ${project.statusText}`)
-        );
-        return;
-      }
+        console.log(chalk.bold.white("Environment Status:"));
+        console.log(`${chalk.gray("├─")} ${chalk.bold("Type       :")} ${chalk.magenta(projectType.toUpperCase())}`);
+        console.log(`${chalk.gray("└─")} ${chalk.bold("Watcher    :")} ${chalk.greenBright("Active & Synchronizing")}`);
+        console.log(chalk.gray("──────────────────────────────────────────────────────────────────\n"));
 
-      const projectType = project.data.type || "view";
-      const zversion = options.zversion;
-
-      if (projectType === "expo_app" || projectType === "emg_edu_lesson") {
-        const BASE_EXPO_LINK = `exp://u.expo.dev/e362c6df-abe8-4503-8723-1362f015d167/group/e5d6b96e-3c78-485a-a170-1d8aa8b2c47e`;
-        const link = `${BASE_EXPO_LINK}?sessionKey=${projectId}&mode=development`;
-        QRCode.generate(link, { small: true }, (qrcode) => {
-          console.log(
-            chalk.cyan(
-              "📱 Scan this QR code with Expo Go to connect to the project:"
-            )
-          );
-          console.log(qrcode);
+        if (isExpo) {
+          try { await compileAndSaveToFolder("src", "nativewind.json"); } catch (e) {}
+        }
+
+        const debouncedNativeWind = debounce(async () => {
+          if (isExpo) {
+            process.stdout.write(chalk.gray("  [System] Style assets synchronized successfully.\r"));
+            try { await compileAndSaveToFolder("src", "nativewind.json"); } catch (e) {}
+          }
+        }, 500);
+
+        const debouncedUpdate = debounce((updatedFiles: FileContent[]) => {
+          room.updateState("view", updatedFiles);
+        }, 200);
+
+        fileManager.setOnFileChange((filePath, content) => {
+          const timestamp = new Date().toLocaleTimeString([], { hour12: false });
+          const relativePath = filePath.replace(srcDir, ".");
+          console.log(`${chalk.gray(`[${timestamp}]`)} ${chalk.yellow.bold("CHANGE")} ${chalk.white(relativePath)}`);
+          
+          const es5 = compileES5(content, filePath) ?? "";
+          const updatedFiles = room.files.map((file) => {
+            if (path.join(srcDir, file.path) === filePath) return { ...file, content, es5 };
+            return file;
+          });
+          room.files = updatedFiles;
+          debouncedUpdate(updatedFiles);
+          if (isExpo) debouncedNativeWind();
         });
-        return;
-      } else if (projectType === "zalominiapp") {
-        console.log("zversion", zversion);
-        if (!zversion) {
-          QRCode.generate(
-            `https://zalo.me/s/3218692650896662017/player/${projectId}`,
-            { small: true },
-            (qrcode) => {
-              console.log(
-                chalk.cyan("📱 Scan this QR code to connect to the project:")
-              );
-              console.log(qrcode);
-            }
-          );
+
+        // UI Access Section
+        if (isExpo) {
+          const EXPO_GROUP_ID = "6f033d8b-7ed5-48dc-ab6f-f8348cf6993b";
+          const link = `exp://u.expo.dev/e362c6df-abe8-4503-8723-1362f015d167/group/${EXPO_GROUP_ID}?sessionKey=${projectId}&mode=development`;
+          console.log(chalk.bold.black.bgCyan(" 📱 EXPO GO ACCESS "));
+          QRCode.generate(link, { small: true }, (code) => {
+            console.log(chalk.white(code));
+          });
+          console.log(chalk.cyan(`   Link: ${chalk.underline(link)}\n`));
+        } else if (projectType === "zalominiapp" || projectType === "zalominiapp2") {
+          const zversion = options.zversion;
+          const zaloUrl = zversion 
+            ? `https://zalo.me/s/3218692650896662017/player/${projectId}?env=TESTING&version=${zversion}`
+            : `https://zalo.me/s/3218692650896662017/player/${projectId}`;
+          
+          const label = projectType === "zalominiapp2" ? " 🧩 ZALO MINI APP 2.0 " : " 🧩 ZALO MINI APP ";
+          console.log(chalk.bold.black.bgBlue(label));
+          QRCode.generate(zaloUrl, { small: true }, (code) => {
+            console.log(chalk.white(code));
+          });
+          console.log(chalk.blue(`   Link: ${chalk.underline(zaloUrl)}\n`));
         } else {
-          QRCode.generate(
-            `https://zalo.me/s/3218692650896662017/player/${projectId}?env=TESTING&version=${zversion}`,
-            { small: true },
-            (qrcode) => {
-              console.log(
-                chalk.cyan("📱 Scan this QR code to connect to the project:")
-              );
-              console.log(qrcode);
-            }
-          );
+          const previewUrl = `https://com.ai.vn/dev_preview/${projectId}`;
+          const label = projectType === "web2" ? " 🌐 WEB 2.0 PREVIEW " : " 🌐 BROWSER PREVIEW ";
+          console.log(chalk.bold.black.bgGreen(label));
+          console.log(chalk.green(`   URL: ${chalk.underline(previewUrl)}\n`));
+          await open(previewUrl);
         }
-        return;
-      } else {
-        const previewUrl = `https://com.ai.vn/dev_preview/${projectId}`;
-        console.log(
-          chalk.cyan(
-            `🌐 Open this URL in your browser to preview the project:\n${previewUrl}`
-          )
-        );
-        await open(previewUrl);
+
+        console.log(chalk.gray("👀 Monitoring file changes... (Press Ctrl+C to exit)"));
+
+      } catch (err: any) {
+        console.log(chalk.yellow(`\n⚠️  Environment metadata could not be fetched: ${err.message}`));
+        console.log(chalk.gray("──────────────────────────────────────────────────────────────────\n"));
       }
     });
   });
 
-// Hàm tái sử dụng để push mã nguồn lên server
-async function pushProject(spinner: Ora, projectId: string): Promise<boolean> {
+interface PushResult {
+  success: boolean;
+  projectId: string;
+  totalSize: number;
+  fileCount: number;
+  error?: string;
+}
+
+// Chuyên nghiệp hóa việc push source code lên server
+async function pushProject(projectId: string): Promise<PushResult> {
   const data = getStoredToken();
   const { accessToken } = data || {};
   if (!accessToken) {
-    spinner.fail(
-      chalk.red("✗ You need to login first. Use 'hapico login' command.")
-    );
-    return false;
+    return { success: false, projectId, totalSize: 0, fileCount: 0, error: "Authentication required. Please run 'hapico login'." };
   }
+  
   const pwd = process.cwd();
   const srcDir: string = path.join(pwd, "src");
   if (!fs.existsSync(srcDir)) {
-    spinner.fail(
-      chalk.red(
-        "✗ Source directory 'src' does not exist. Please clone a project first."
-      )
-    );
-    return false;
+    return { success: false, projectId, totalSize: 0, fileCount: 0, error: "Source directory 'src' not found. Ensure you are in a valid project folder." };
   }
+
   const fileManager = new FileManager(srcDir);
   const files = fileManager.listFiles().filter((file) => {
     const extname = path.extname(file.path);
     return supportedExtensions.includes(extname);
   });
 
-  // Supported files
+  // Supported extra files at root
   const SUPPORT_FILES = [
     "./.env",
     "./.env.local",
@@ -879,17 +824,12 @@ async function pushProject(spinner: Ora, projectId: string): Promise<boolean> {
     "./.env.production",
     "./package.json",
     "./tsconfig.json",
+    "./nativewind.json"
   ];
 
-  // Include supported files
   SUPPORT_FILES.forEach((relativePath) => {
     const fullPath = path.join(pwd, relativePath);
     if (fs.existsSync(fullPath)) {
-      console.log(
-        chalk.green(
-          `Including ${relativePath} in push for project ${projectId}.`
-        )
-      );
       const content = fs.readFileSync(fullPath, { encoding: "utf8" });
       files.push({
         path: relativePath,
@@ -898,24 +838,14 @@ async function pushProject(spinner: Ora, projectId: string): Promise<boolean> {
       });
     }
   });
-  // Show ra thông tin dung lượng mã nguồn
-  const totalSize = files.reduce((acc, file) => acc + file.content.length, 0);
-  console.log(
-    chalk.cyan(
-      `Total source code size for project ${projectId}: ${(totalSize / 1024).toFixed(2)} KB`
-    )
-  );
-  spinner.text = `Pushing project source code to server for project ${projectId}...`;
 
+  const totalSize = files.reduce((acc, file) => acc + file.content.length, 0);
   const apiUrl = `https://base.myworkbeast.com/api/views/${projectId}`;
+  
   try {
     await axios.put(
       apiUrl,
-      {
-        code: JSON.stringify({
-          files,
-        }),
-      },
+      { code: JSON.stringify({ files }) },
       {
         headers: {
           Authorization: `Bearer ${accessToken}`,
@@ -923,14 +853,29 @@ async function pushProject(spinner: Ora, projectId: string): Promise<boolean> {
         },
       }
     );
-    return true;
-  } catch (error) {
-    spinner.fail(
-      chalk.red(
-        `✗ Error saving project ${projectId}: ${(error as Error).message}`
-      )
+    return { success: true, projectId, totalSize, fileCount: files.length };
+  } catch (error: any) {
+    return { success: false, projectId, totalSize, fileCount: files.length, error: error.message };
+  }
+}
+
+async function publishProjectApi(projectId: string): Promise<{ success: boolean; error?: string }> {
+  const { accessToken } = getStoredToken();
+  const apiUrl = "https://base.myworkbeast.com/api/views/publish/v2";
+  try {
+    await axios.post(
+      apiUrl,
+      { view_id: parseInt(projectId, 10) },
+      {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+          "Content-Type": "application/json",
+        },
+      }
     );
-    return false;
+    return { success: true };
+  } catch (error: any) {
+    return { success: false, error: error.message };
   }
 }
 
@@ -938,116 +883,112 @@ program
   .command("push")
   .description("Push the project source code to the server")
   .action(async () => {
-    const saveSpinner: Ora = ora(
-      chalk.blue("Saving project source code...")
-    ).start();
+    console.clear();
+    console.log(chalk.bold.cyan("\n🚀 HAPICO PUSH PIPELINE"));
+    console.log(chalk.gray("──────────────────────────────────────────────────────────────────"));
+    
     const pwd = process.cwd();
     const { projectId, replicate } = getStoredProjectId(pwd);
 
     if (!projectId) {
-      saveSpinner.fail(
-        chalk.red(
-          "✗ Project ID not found. Please ensure hapico.config.json exists in the project directory."
-        )
-      );
+      console.log(chalk.red("✗ Project ID not found. Ensure hapico.config.json exists."));
       return;
     }
 
-    // Push to the main project
-    const mainSuccess = await pushProject(saveSpinner, projectId);
-    let allSuccess = mainSuccess;
+    console.log(chalk.bold.white("Target Environments:"));
+    console.log(`${chalk.gray("├─")} ${chalk.bold("Main Project :")} ${chalk.cyan(projectId)}`);
+    if (replicate && replicate.length > 0) {
+      console.log(`${chalk.gray("└─")} ${chalk.bold("Replicas     :")} ${chalk.cyan(replicate.join(", "))}`);
+    } else {
+      console.log(`${chalk.gray("└─")} ${chalk.bold("Replicas     :")} ${chalk.gray("None")}`);
+    }
+    console.log("");
+
+    const pushSpinner = ora(chalk.blue("Syncing source code with main project...")).start();
+    
+    const mainResult = await pushProject(projectId);
+    if (mainResult.success) {
+      pushSpinner.succeed(chalk.green(`Main Project [${projectId}] code synced successfully.`));
+      console.log(`${chalk.gray("   ├─")} ${chalk.bold("Files :")} ${chalk.white(mainResult.fileCount)}`);
+      console.log(`${chalk.gray("   └─")} ${chalk.bold("Size  :")} ${chalk.white((mainResult.totalSize / 1024).toFixed(2) + " KB")}\n`);
+    } else {
+      pushSpinner.fail(chalk.red(`Main Project [${projectId}] sync failed: ${mainResult.error}`));
+      return;
+    }
 
-    // Push to replicated projects if replicate array exists
-    if (replicate && Array.isArray(replicate) && replicate.length > 0) {
-      saveSpinner.text = chalk.blue("Pushing to replicated projects...");
+    let allSuccess = true;
+    if (replicate && replicate.length > 0) {
       for (const repId of replicate) {
-        const success = await pushProject(saveSpinner, repId);
-        if (!success) {
-          allSuccess = false;
-          console.warn(
-            chalk.yellow(
-              `⚠ Failed to push to replicated project ${repId}. Continuing...`
-            )
-          );
+        const repSpinner = ora(chalk.blue(`Syncing replica [${repId}]...`)).start();
+        const repResult = await pushProject(repId);
+        if (repResult.success) {
+          repSpinner.succeed(chalk.green(`Replica [${repId}] code synced successfully.`));
+          console.log(`${chalk.gray("   ├─")} ${chalk.bold("Files :")} ${chalk.white(repResult.fileCount)}`);
+          console.log(`${chalk.gray("   └─")} ${chalk.bold("Size  :")} ${chalk.white((repResult.totalSize / 1024).toFixed(2) + " KB")}\n`);
         } else {
-          console.log(
-            chalk.green(`✓ Successfully pushed to replicated project ${repId}.`)
-          );
+          repSpinner.fail(chalk.red(`Replica [${repId}] sync failed: ${repResult.error}`));
+          allSuccess = false;
         }
       }
     }
 
+    console.log(chalk.gray("──────────────────────────────────────────────────────────────────"));
     if (allSuccess) {
-      saveSpinner.succeed(
-        chalk.green("Project source code saved successfully to all projects!")
-      );
+      console.log(`\n${chalk.bold.white.bgGreen(" SUCCESS ")} ${chalk.green("All source codes pushed successfully!\n")}`);
     } else {
-      saveSpinner.warn(
-        chalk.yellow("Project source code saved with some errors.")
-      );
+      console.log(`\n${chalk.bold.white.bgYellow(" WARNING ")} ${chalk.yellow("Push completed with some replica errors.\n")}`);
     }
   });
 
 program
   .command("login")
-  .description("Login to the system")
+  .description("Authenticate Hapico CLI with your account")
   .action(async () => {
-    console.log(chalk.cyan("🔐 Logging in to the system..."));
-    const loginSpinner: Ora = ora(chalk.blue("Initiating login...")).start();
+    console.clear();
+    console.log(chalk.bold.yellow("\n🔐 HAPICO SECURE LOGIN"));
+    console.log(chalk.gray("──────────────────────────────────────────────────────────────────"));
+    
+    const loginSpinner = ora(chalk.blue("Requesting device authorization...")).start();
 
     try {
-      const response = await axios.post(
-        "https://auth.myworkbeast.com/auth/device"
-      );
-      const { device_code, user_code, verification_url, expires_in, interval } =
-        response.data;
+      const response = await axios.post("https://auth.myworkbeast.com/auth/device");
+      const { device_code, user_code, verification_url, expires_in, interval } = response.data;
 
-      loginSpinner.succeed(chalk.green("Login initiated!"));
-      console.log(
-        chalk.cyan(
-          `🌐 Please open this URL in your browser: ${verification_url}`
-        )
-      );
-      console.log(chalk.yellow(`🔑 And enter this code: ${user_code}`));
-      console.log(chalk.blue("⏳ Waiting for authentication..."));
+      loginSpinner.succeed(chalk.green("Authorization request created."));
+      
+      console.log(`\n${chalk.bold.white("ACTION REQUIRED")}`);
+      console.log(`${chalk.gray("1.")} Open URL : ${chalk.underline.cyan(verification_url)}`);
+      console.log(`${chalk.gray("2.")} Enter Code: ${chalk.bold.bgWhite.black(` ${user_code} `)}`);
+      console.log(chalk.gray(`\n(Code expires in ${Math.floor(expires_in / 60)} minutes)`));
 
       await open(verification_url);
 
-      const pollSpinner: Ora = ora(
-        chalk.blue("Waiting for authentication...")
-      ).start();
+      const pollSpinner = ora(chalk.blue("Waiting for browser confirmation...")).start();
       let tokens = null;
       const startTime = Date.now();
+
       while (Date.now() - startTime < expires_in * 1000) {
         try {
-          const pollResponse = await axios.post(
-            "https://auth.myworkbeast.com/auth/device/poll",
-            { device_code }
-          );
+          const pollResponse = await axios.post("https://auth.myworkbeast.com/auth/device/poll", { device_code });
           if (pollResponse.data.accessToken) {
             tokens = pollResponse.data;
             break;
           }
-        } catch (error) {
-          // Ignore temporary errors and continue polling
-        }
+        } catch (e) { /* Poll interval logic */ }
         await new Promise((resolve) => setTimeout(resolve, interval * 1000));
       }
 
       if (tokens) {
-        pollSpinner.succeed(chalk.green("Login successful!"));
         saveToken(tokens);
+        pollSpinner.succeed(chalk.green("Authentication successful."));
+        console.log(chalk.gray("──────────────────────────────────────────────────────────────────"));
+        console.log(`\n${chalk.bold.white.bgGreen(" SUCCESS ")} ${chalk.green("You are now logged in.")}`);
+        console.log(`${chalk.gray("Token stored at:")} ${chalk.gray(TOKEN_FILE)}\n`);
       } else {
-        pollSpinner.fail(
-          chalk.red(
-            "✗ Login failed: Timeout or user did not complete authentication."
-          )
-        );
+        pollSpinner.fail(chalk.red("Login timed out or was cancelled."));
       }
-    } catch (error) {
-      loginSpinner.fail(
-        chalk.red(`✗ Login error: ${(error as Error).message}`)
-      );
+    } catch (error: any) {
+      loginSpinner.fail(chalk.red(`Login failed: ${error.message}`));
     }
   });
 
@@ -1116,472 +1057,219 @@ program
     }
   });
 
-// be {{id}} --be --port {{port}}
 program
   .command("fetch <id>")
-  .option("--port <port>", "Port to run the backend", "3000")
-  .option("--serve", "Flag to indicate serving the backend")
-  .option(
-    "--libs <libs>",
-    "Additional libraries to install (comma-separated)",
-    ""
-  )
-  .option("--be", "Flag to indicate backend")
-  .description("Open backend for the project")
-  .action(
-    async (
-      id: string,
-      options: { port: string; serve?: boolean; libs?: string; be?: boolean }
-    ) => {
-      const { accessToken } = getStoredToken();
-      if (!accessToken) {
-        console.error(
-          chalk.red("✗ You need to login first. Use 'hapico login' command.")
-        );
-        return;
-      }
-
-      console.log(chalk.cyan(`🌐 PORT = ${options.port}`));
+  .description("Fetch Zalo Mini App template for the project")
+  .action(async (id: string) => {
+    const { accessToken } = getStoredToken();
+    if (!accessToken) {
+      console.error(
+        chalk.red("✗ You need to login first. Use 'hapico login' command.")
+      );
+      return;
+    }
 
-      // Chọn hỏi user port để vận hành
-      let port = 3000;
+    const apiSpinner = ora(chalk.blue("Fetching project data...")).start();
+    try {
       const response: ApiResponse = await axios.get(
         `https://base.myworkbeast.com/api/views/${id}`
       );
-      const portInput = options.port;
-      if (portInput) {
-        const parsedPort = parseInt(portInput, 10);
-        if (!isNaN(parsedPort)) {
-          port = parsedPort;
-        }
-      }
 
-      const projectDir: string = path.resolve(process.cwd(), id);
-      if (!fs.existsSync(projectDir)) {
-        // create folder
-        fs.mkdirSync(projectDir);
-      }
-
-      // download template https://main.hcm04.vstorage.vngcloud.vn/templates/hapico/hapico-basic.zip
-      const TEMPLATE_URL: string = `https://main.hcm04.vstorage.vngcloud.vn/templates/hapico/be.zip?t=${Date.now()}`;
-      let templateResponse = undefined;
-      try {
-        templateResponse = await axios.get(TEMPLATE_URL, {
-          responseType: "arraybuffer",
-        });
-      } catch (error) {
-        console.error(
-          chalk.red("✗ Error downloading template:"),
-          (error as Error).message
+      const projectType = response.data.type;
+      if (projectType !== "zalominiapp" && projectType !== "zalominiapp2") {
+        apiSpinner.fail(
+          chalk.red(
+            `✗ Error: Project type is "${projectType}". Only "zalominiapp" and "zalominiapp2" are supported for fetch command.`
+          )
         );
         return;
       }
+      apiSpinner.succeed(chalk.green("Project data fetched successfully!"));
 
-      const outputDir: string = path.resolve(process.cwd(), id);
-      if (!fs.existsSync(outputDir)) {
-        fs.mkdirSync(outputDir);
-      }
+      const outputDir = path.resolve(process.cwd(), id);
+      const zaloDir = path.join(outputDir, "zalo");
+      const backendDir = path.join(outputDir, "backend");
 
-      await unzipper.Open.buffer(templateResponse.data).then((directory) =>
-        directory.extract({ path: outputDir })
+      const templateSpinner = ora(
+        chalk.blue("Downloading Zalo template...")
+      ).start();
+      const TEMPLATE_URL =
+        "https://hapico.hcm04.vstorage.vngcloud.vn/templates/zalominiapp_v0.zip";
+      const templateResponse = await axios.get(TEMPLATE_URL, {
+        responseType: "arraybuffer",
+      });
+      templateSpinner.succeed(
+        chalk.green("Zalo template downloaded successfully!")
       );
 
-      const macosxDir: string = path.join(process.cwd(), id, "__MACOSX");
-      if (fs.existsSync(macosxDir)) {
-        fs.rmSync(macosxDir, { recursive: true, force: true });
-      }
-
-      // outputPath/src/server.ts có dòng (3006) thay thành port
-      const serverFile = path.join(process.cwd(), id, "src", "index.ts");
-      if (fs.existsSync(serverFile)) {
-        let serverContent = fs.readFileSync(serverFile, { encoding: "utf8" });
-        serverContent = serverContent.split("(3006)").join(`(${port})`);
-        fs.writeFileSync(serverFile, serverContent, { encoding: "utf8" });
-      }
-
-      // lấy danh sách migrations
-      const MIGRATIONS_URL = `https://base.myworkbeast.com/api/client/query?dbCode=${
-        response.data.dbCode || response.data.db_code
-      }&table=migration_logs&operation=select&columns=%5B%22*%22%5D`;
-
-      // Lấy danh sách các migration đã chạy
-      let migrations: Array<{
-        id: number;
-        created_at: string;
-        sql_statement: string;
-      }> = [];
-      const migrationsResponse = await axios.get(MIGRATIONS_URL, {
-        headers: {
-          Authorization: `Bearer ${accessToken}`,
-          "Content-Type": "application/json",
-          "x-db-code": response.data.dbCode || response.data.db_code,
-        },
+      const backendSpinner = ora(
+        chalk.blue("Downloading backend template...")
+      ).start();
+      const BACKEND_URL =
+        "https://hapico.hcm04.vstorage.vngcloud.vn/templates/backend_v0.zip";
+      const backendResponse = await axios.get(BACKEND_URL, {
+        responseType: "arraybuffer",
       });
-      if (migrationsResponse.status === 200) {
-        migrations = (migrationsResponse.data.data?.rows || []).map(
-          (item: any) => ({
-            created_at: item.created_at,
-            sql: item.sql_statement,
-          })
-        );
-      }
-
-      console.log(chalk.cyan(`🔍 Found ${migrations.length} migrations.`));
+      backendSpinner.succeed(
+        chalk.green("Backend template downloaded successfully!")
+      );
 
-      // Tạo thư mục migrations nếu chưa tồn tại
-      const migrationsDir = path.join(process.cwd(), id, "migrations");
-      if (!fs.existsSync(migrationsDir)) {
-        fs.mkdirSync(migrationsDir);
+      if (!fs.existsSync(outputDir)) {
+        fs.mkdirSync(outputDir, { recursive: true });
       }
+      if (!fs.existsSync(zaloDir)) fs.mkdirSync(zaloDir, { recursive: true });
+      if (!fs.existsSync(backendDir))
+        fs.mkdirSync(backendDir, { recursive: true });
 
-      // Lưu từng migration vào file
-      migrations.forEach((migration, index) => {
-        const timestamp = new Date(migration.created_at)
-          .toISOString()
-          .replace(/[-:]/g, "")
-          .replace(/\..+/, "");
-        const filename = path.join(
-          migrationsDir,
-          `${index + 1}_migration_${timestamp}.sql`
-        );
-        fs.writeFileSync(filename, (migration as any).sql, {
-          encoding: "utf8",
-        });
-      });
-
-      console.log(chalk.green("✓ Migrations saved successfully!"));
-
-      // Download project files and save to project
-      let files: FileContent[] = [];
-      const apiSpinner: Ora = ora(
-        chalk.blue("Fetching project data...")
+      const unzipZaloSpinner = ora(
+        chalk.blue("Extracting Zalo template...")
       ).start();
+      await unzipper.Open.buffer(templateResponse.data).then((directory) =>
+        directory.extract({ path: zaloDir })
+      );
+      unzipZaloSpinner.succeed(
+        chalk.green("Zalo template extracted successfully!")
+      );
 
-      try {
-        apiSpinner.succeed(chalk.green("Project data fetched successfully!"));
-
-        const saveSpinner: Ora = ora(
-          chalk.blue("Saving project files...")
-        ).start();
-        files.forEach((file: FileContent) => {
-          // skip ./app, ./components
-          if (
-            file.path.startsWith("./app") ||
-            file.path.startsWith("./components")
-          ) {
-            return;
-          }
-          // hoặc các file có đuôi là .tsx
-          if (file.path.endsWith(".tsx")) {
-            return;
-          }
-          try {
-            if (file.content.trim().length == 0) return;
-            const filePath: string = path.join(
-              process.cwd(),
-              id,
-              "src",
-              file.path
-            );
-            const dir: string = path.dirname(filePath);
-
-            if (!fs.existsSync(dir)) {
-              fs.mkdirSync(dir, { recursive: true });
-            }
-
-            fs.writeFileSync(filePath, file.content);
-          } catch (error) {
-            console.log(chalk.red("✗ Error writing file"), file.path, error);
-          }
-        });
-        saveSpinner.succeed(chalk.green("Project files saved successfully!"));
-      } catch (error: any) {
-        apiSpinner.fail(chalk.red(`✗ Error cloning project: ${error.message}`));
-      }
-
-      // Download project files and save to project
-      console.log(chalk.green("✓ Project cloned successfully!"));
-
-      // Save project ID to hapico.config.json
-      saveProjectId(outputDir, id);
-
-      console.log(chalk.green("✓ Project setup successfully!"));
-
-      let serveProcess: any = null;
+      const unzipBackendSpinner = ora(
+        chalk.blue("Extracting backend template...")
+      ).start();
+      await unzipper.Open.buffer(backendResponse.data).then((directory) =>
+        directory.extract({ path: backendDir })
+      );
+      unzipBackendSpinner.succeed(
+        chalk.green("Backend template extracted successfully!")
+      );
 
-      if (options.serve) {
-        // Run bun install
-        const { exec } = require("child_process");
-        const installSpinner: Ora = ora(
-          chalk.blue("Installing dependencies...")
-        ).start();
+      [zaloDir, backendDir].forEach((dir) => {
+        const macosxDir = path.join(dir, "__MACOSX");
+        if (fs.existsSync(macosxDir)) {
+          fs.rmSync(macosxDir, { recursive: true, force: true });
+        }
 
-        // create a loop to check if there is new version of project
-        // https://main.hcm04.vstorage.vngcloud.vn/statics/{{id}}/version.json
-        let currentVersionStr = fs.existsSync(
-          path.join(outputDir, "version.json")
-        )
-          ? JSON.parse(
-              fs.readFileSync(path.join(outputDir, "version.json"), {
-                encoding: "utf8",
-              })
-            ).version
-          : "0.0.1";
-
-        const checkVersion = async () => {
-          try {
-            // check if file version.json exists
-            const flyCheck = await axios.head(
-              `https://statics.hcm04.vstorage.vngcloud.vn/${id}/version.json`
-            );
-            if (flyCheck.status !== 200) {
-              return;
-            }
-            // get file version.json
-            const versionResponse = await axios.get(
-              `https://statics.hcm04.vstorage.vngcloud.vn/${id}/version.json`
-            );
-            const latestVersionData = versionResponse.data;
-            const latestVersion = latestVersionData.version;
-            if (latestVersion !== currentVersionStr) {
-              console.log(
-                chalk.yellow(`📦 New version available: ${latestVersion}`)
-              );
-              // Save new version.json
-              fs.writeFileSync(
-                path.join(outputDir, "version.json"),
-                JSON.stringify(latestVersionData, null, 2),
-                { encoding: "utf8" }
-              );
-              // Install external libraries if any
-              if (
-                latestVersionData.external_libraries &&
-                latestVersionData.external_libraries.length > 0
-              ) {
-                console.log(chalk.blue("Installing new external libraries..."));
-                for (const lib of latestVersionData.external_libraries) {
-                  try {
-                    await execPromise(`bun add ${lib}`, { cwd: outputDir });
-                    console.log(chalk.green(`Added ${lib}`));
-                  } catch (addError) {
-                    console.error(
-                      chalk.red(`✗ Error adding ${lib}:`),
-                      (addError as Error).message
-                    );
-                  }
+        // Replace {{APP_ID}} in .ts and .tsx files
+        const traverseAndReplace = (currentDir: string) => {
+          fs.readdirSync(currentDir, { withFileTypes: true }).forEach((entry) => {
+            const fullPath = path.join(currentDir, entry.name);
+            if (entry.isDirectory()) {
+              traverseAndReplace(fullPath);
+            } else if (entry.isFile()) {
+              const ext = path.extname(fullPath);
+              if (ext === ".ts" || ext === ".tsx") {
+                const content = fs.readFileSync(fullPath, { encoding: "utf8" });
+                if (content.includes("{{APP_ID}}")) {
+                  const updatedContent = content.replace(/{{APP_ID}}/g, id);
+                  fs.writeFileSync(fullPath, updatedContent, {
+                    encoding: "utf8",
+                  });
                 }
               }
-              // Rerun bun install
-              try {
-                await execPromise("bun install", { cwd: outputDir });
-                console.log(
-                  chalk.green("Dependencies reinstalled successfully!")
-                );
-              } catch (installError) {
-                console.error(
-                  chalk.red("✗ Error reinstalling dependencies:"),
-                  (installError as Error).message
-                );
-              }
-              // Restart the process
-              if (serveProcess && !serveProcess.killed) {
-                console.log(chalk.blue("Restarting backend..."));
-                serveProcess.kill("SIGTERM");
-              }
-              // Start new process
-              const newServeProcess = exec("bun run start", { cwd: outputDir });
-              newServeProcess.stdout?.on("data", (data: any) => {
-                process.stdout.write(data);
-              });
-              newServeProcess.stderr?.on("data", (data: any) => {
-                process.stderr.write(data);
-              });
-              newServeProcess.on("close", (code: any) => {
-                console.log(
-                  chalk.yellow(`⚠ backend exited with code ${code}`)
-                );
-              });
-              serveProcess = newServeProcess;
-              currentVersionStr = latestVersion;
             }
-          } catch (error) {
-            // If the remote version.json does not exist, do not update
-            console.error(
-              chalk.yellow("⚠ Error checking for updates (skipping update):"),
-              (error as Error).message
-            );
-          }
+          });
         };
+        traverseAndReplace(dir);
+      });
 
-        // check every 3 seconds
-        setInterval(async () => await checkVersion(), 10 * 1000);
-
-        exec(
-          "bun install",
-          { cwd: outputDir },
-          async (error: any, stdout: any, stderr: any) => {
-            if (error) {
-              installSpinner.fail(
-                chalk.red(`✗ Error installing dependencies: ${error.message}`)
-              );
-              return;
-            }
-            if (stderr) {
-              console.error(chalk.red(`stderr: ${stderr}`));
-            }
-            installSpinner.succeed(
-              chalk.green("Dependencies installed successfully!")
-            );
-
-            // Install additional libraries if --libs is provided
-            if (options.libs && options.libs.trim()) {
-              const libsSpinner: Ora = ora(
-                chalk.blue("Installing additional libraries...")
-              ).start();
-              const additionalLibs = options.libs
-                .split(",")
-                .map((lib) => lib.trim())
-                .filter((lib) => lib);
-              for (const lib of additionalLibs) {
-                try {
-                  await execPromise(`bun add ${lib}`, { cwd: outputDir });
-                  console.log(chalk.green(`Added ${lib}`));
-                } catch (addError) {
-                  console.error(
-                    chalk.red(`✗ Error adding ${lib}:`),
-                    (addError as Error).message
-                  );
-                }
-              }
-              libsSpinner.succeed(
-                chalk.green("Additional libraries installed successfully!")
-              );
-            }
+      // Save project ID
+      saveProjectId(outputDir, id);
 
-            // Run cd ${id} && bun run serve-be
-            console.log(chalk.blue("🚀 Starting backend"));
-            serveProcess = exec("bun run start", { cwd: outputDir });
-            serveProcess.stdout.on("data", (data: any) => {
-              process.stdout.write(data);
-            });
-            serveProcess.stderr.on("data", (data: any) => {
-              process.stderr.write(data);
-            });
-            serveProcess.on("close", (code: any) => {
-              console.log(chalk.yellow(`⚠ backend exited with code ${code}`));
-            });
-          }
-        );
-      }
+      console.log(
+        chalk.green(`✓ Project "${id}" fetched and setup successfully!`)
+      );
+    } catch (error: any) {
+      apiSpinner.fail(chalk.red(`✗ Error: ${error.message}`));
     }
-  );
+  });
 
 // hapico publish
-program.command("publish").action(async () => {
-  const publishSpinner: Ora = ora(
-    chalk.blue("Publishing to Hapico...")
-  ).start();
-  const pwd = process.cwd();
-  const { projectId, replicate } = getStoredProjectId(pwd);
+program
+  .command("publish")
+  .description("Publish the project to production environment")
+  .action(async () => {
+    console.clear();
+    console.log(chalk.bold.magenta("\n🚀 HAPICO PUBLISH PIPELINE"));
+    console.log(chalk.gray("──────────────────────────────────────────────────────────────────"));
+    
+    const pwd = process.cwd();
+    const { projectId, replicate } = getStoredProjectId(pwd);
 
-  if (!projectId) {
-    publishSpinner.fail(
-      chalk.red(
-        "✗ Project ID not found. Please ensure hapico.config.json exists in the project directory."
-      )
-    );
-    return;
-  }
+    if (!projectId) {
+      console.log(chalk.red("✗ Project ID not found. Ensure hapico.config.json exists."));
+      return;
+    }
 
-  // Step 1: Push source code to main project and replicas
-  const pushSuccess = await pushProject(publishSpinner, projectId);
-  if (!pushSuccess) {
-    return; // Stop if push to main project fails
-  }
+    console.log(chalk.bold.white("Target Environments:"));
+    console.log(`${chalk.gray("├─")} ${chalk.bold("Main Project :")} ${chalk.magenta(projectId)}`);
+    if (replicate && replicate.length > 0) {
+      console.log(`${chalk.gray("└─")} ${chalk.bold("Replicas     :")} ${chalk.magenta(replicate.join(", "))}`);
+    } else {
+      console.log(`${chalk.gray("└─")} ${chalk.bold("Replicas     :")} ${chalk.gray("None")}`);
+    }
+    console.log("");
+
+    const pushSpinner = ora(chalk.blue("Phase 1/2: Syncing source code with main project...")).start();
+    
+    // Step 1: Push Main
+    const mainResult = await pushProject(projectId);
+    if (mainResult.success) {
+      pushSpinner.succeed(chalk.green(`Main Project [${projectId}] code synced successfully.`));
+      console.log(`${chalk.gray("   ├─")} ${chalk.bold("Files :")} ${chalk.white(mainResult.fileCount)}`);
+      console.log(`${chalk.gray("   └─")} ${chalk.bold("Size  :")} ${chalk.white((mainResult.totalSize / 1024).toFixed(2) + " KB")}\n`);
+    } else {
+      pushSpinner.fail(chalk.red(`Main Project [${projectId}] sync failed: ${mainResult.error}`));
+      return; // Stop if push to main fails
+    }
 
-  // Push to replicated projects
-  let allPushSuccess = true;
-  if (replicate && Array.isArray(replicate) && replicate.length > 0) {
-    publishSpinner.text = chalk.blue("Pushing to replicated projects...");
-    for (const repId of replicate) {
-      const success = await pushProject(publishSpinner, repId);
-      if (!success) {
-        allPushSuccess = false;
-        console.warn(
-          chalk.yellow(
-            `⚠ Failed to push to replicated project ${repId}. Continuing...`
-          )
-        );
-      } else {
-        console.log(
-          chalk.green(`✓ Successfully pushed to replicated project ${repId}.`)
-        );
+    // Push Replicas
+    let allPushSuccess = true;
+    if (replicate && replicate.length > 0) {
+      for (const repId of replicate) {
+        const repSpinner = ora(chalk.blue(`Phase 1/2: Syncing replica code [${repId}]...`)).start();
+        const repResult = await pushProject(repId);
+        if (repResult.success) {
+          repSpinner.succeed(chalk.green(`Replica [${repId}] code synced successfully.`));
+          console.log(`${chalk.gray("   ├─")} ${chalk.bold("Files :")} ${chalk.white(repResult.fileCount)}`);
+          console.log(`${chalk.gray("   └─")} ${chalk.bold("Size  :")} ${chalk.white((repResult.totalSize / 1024).toFixed(2) + " KB")}\n`);
+        } else {
+          repSpinner.fail(chalk.red(`Replica [${repId}] sync failed: ${repResult.error}`));
+          allPushSuccess = false;
+        }
       }
     }
-  }
 
-  // Step 2: Publish main project
-  const { accessToken } = getStoredToken();
-  const apiUrl = "https://base.myworkbeast.com/api/views/publish/v2";
-  let allPublishSuccess = true;
-  try {
-    await axios.post(
-      apiUrl,
-      { view_id: parseInt(projectId, 10) },
-      {
-        headers: {
-          Authorization: `Bearer ${accessToken}`,
-          "Content-Type": "application/json",
-        },
-      }
-    );
-    publishSpinner.succeed(
-      chalk.green(`Project ${projectId} published successfully!`)
-    );
-  } catch (error) {
-    allPublishSuccess = false;
-    publishSpinner.fail(
-      chalk.red(
-        `✗ Error publishing project ${projectId}: ${(error as Error).message}`
-      )
-    );
-  }
+    // Step 2: Publish Main
+    const publishSpinner = ora(chalk.blue(`Phase 2/2: Publishing main project [${projectId}]...`)).start();
+    const pubMainResult = await publishProjectApi(projectId);
+    let allPublishSuccess = true;
+    
+    if (pubMainResult.success) {
+      publishSpinner.succeed(chalk.green(`Main Project [${projectId}] published successfully.`));
+    } else {
+      publishSpinner.fail(chalk.red(`Main Project [${projectId}] publish failed: ${pubMainResult.error}`));
+      allPublishSuccess = false;
+    }
 
-  // Step 3: Publish replicated projects
-  if (replicate && Array.isArray(replicate) && replicate.length > 0) {
-    publishSpinner.text = chalk.blue("Publishing replicated projects...");
-    for (const repId of replicate) {
-      try {
-        await axios.post(
-          apiUrl,
-          { view_id: parseInt(repId, 10) },
-          {
-            headers: {
-              Authorization: `Bearer ${accessToken}`,
-              "Content-Type": "application/json",
-            },
-          }
-        );
-        console.log(
-          chalk.green(`✓ Successfully published replicated project ${repId}.`)
-        );
-      } catch (error) {
-        allPublishSuccess = false;
-        console.warn(
-          chalk.yellow(
-            `⚠ Error publishing replicated project ${repId}: ${(error as Error).message}`
-          )
-        );
+    // Publish Replicas
+    if (replicate && replicate.length > 0) {
+      for (const repId of replicate) {
+        const repPubSpinner = ora(chalk.blue(`Phase 2/2: Publishing replica [${repId}]...`)).start();
+        const pubRepResult = await publishProjectApi(repId);
+        if (pubRepResult.success) {
+          repPubSpinner.succeed(chalk.green(`Replica [${repId}] published successfully.`));
+        } else {
+          repPubSpinner.fail(chalk.red(`Replica [${repId}] publish failed: ${pubRepResult.error}`));
+          allPublishSuccess = false;
+        }
       }
     }
-  }
 
-  if (allPushSuccess && allPublishSuccess) {
-    publishSpinner.succeed(chalk.green("All projects published successfully!"));
-  } else {
-    publishSpinner.warn(chalk.yellow("Publishing completed with some errors."));
-  }
-});
+    console.log(chalk.gray("──────────────────────────────────────────────────────────────────"));
+    if (allPushSuccess && allPublishSuccess) {
+      console.log(`\n${chalk.bold.white.bgGreen(" SUCCESS ")} ${chalk.green("Deployment pipeline completed successfully!\n")}`);
+    } else {
+      console.log(`\n${chalk.bold.white.bgYellow(" WARNING ")} ${chalk.yellow("Deployment pipeline completed with some errors.\n")}`);
+    }
+  });
 
 program.command("mirror").action(() => {
   console.log(chalk.cyan("🌐 Starting mirror mode..."));
@@ -1599,7 +1287,7 @@ program.command("mirror").action(() => {
   const fileManager = new FileManager(srcDir);
   const initialFiles = fileManager.listFiles();
 
-  // Lấy danh sách file và viết ra 1 file .txt
+  // Collect project files and generate a single summary document
   let content = ``;
   map(initialFiles, (file) => {
     content += `\`\`\`typescript