@hapico/cli 0.0.27 → 0.0.29

package/dist/tools/vibe/index.js

@@ -3,16 +3,48 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.vibe = void 0;
+exports.vibe = exports.applyPatch = void 0;
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const promises_1 = __importDefault(require("node:fs/promises"));
 const node_path_1 = __importDefault(require("node:path"));
-const node_child_process_1 = require("node:child_process");
-const node_util_1 = __importDefault(require("node:util"));
+const diff_match_patch_1 = require("diff-match-patch");
 const express_1 = __importDefault(require("express"));
 const open_1 = __importDefault(require("open"));
-const execAsync = node_util_1.default.promisify(node_child_process_1.exec);
 const node_net_1 = __importDefault(require("node:net"));
+const scanRecursively = async (dir, baseDir) => {
+    let results = [];
+    try {
+        const list = await promises_1.default.readdir(dir, { withFileTypes: true });
+        for (const entry of list) {
+            const fullPath = node_path_1.default.join(dir, entry.name);
+            const relativePath = node_path_1.default.relative(baseDir, fullPath);
+            if (shouldIgnorePath(relativePath))
+                continue;
+            if (entry.isDirectory()) {
+                const subResults = await scanRecursively(fullPath, baseDir);
+                results = results.concat(subResults);
+            }
+            else if (entry.isFile()) {
+                try {
+                    const content = await promises_1.default.readFile(fullPath, "utf-8");
+                    results.push({
+                        path: relativePath,
+                        fullPath: fullPath,
+                        content: content,
+                        extension: entry.name.split(".").pop() || "txt",
+                    });
+                }
+                catch (err) {
+                    // Bỏ qua file nhị phân hoặc không đọc được
+                }
+            }
+        }
+    }
+    catch (error) {
+        // Bỏ qua nếu lỗi permission hoặc path không tồn tại
+    }
+    return results;
+};
 // random port from 3000-3999
 // Check if port is available would be better in real-world usage
 const isPortInUse = (port) => {
@@ -81,98 +113,226 @@ const shouldIgnorePath = (filePath) => {
     }
     return false;
 };
-const scanRecursively = async (dir, baseDir) => {
-    let results = [];
-    try {
-        const list = await promises_1.default.readdir(dir, { withFileTypes: true });
-        for (const entry of list) {
-            const fullPath = node_path_1.default.join(dir, entry.name);
-            const relativePath = node_path_1.default.relative(baseDir, fullPath);
-            if (shouldIgnorePath(relativePath))
-                continue;
-            if (entry.isDirectory()) {
-                const subResults = await scanRecursively(fullPath, baseDir);
-                results = results.concat(subResults);
-            }
-            else if (entry.isFile()) {
-                try {
-                    const content = await promises_1.default.readFile(fullPath, "utf-8");
-                    results.push({
-                        path: relativePath,
-                        fullPath: fullPath,
-                        content: content,
-                        extension: entry.name.split(".").pop() || "txt",
-                    });
-                }
-                catch (err) {
-                    // Bỏ qua file nhị phân hoặc không đọc được
-                }
-            }
-        }
-    }
-    catch (error) {
-        // Bỏ qua nếu lỗi permission hoặc path không tồn tại
+/**
+ * ------------------------------------------------------------------
+ * HELPER: STRING SIMILARITY (Levenshtein based)
+ * Tính độ giống nhau giữa 2 chuỗi (0 -> 1)
+ * ------------------------------------------------------------------
+ */
+const calculateSimilarity = (s1, s2) => {
+    const longer = s1.length > s2.length ? s1 : s2;
+    const shorter = s1.length > s2.length ? s2 : s1;
+    const longerLength = longer.length;
+    if (longerLength === 0) {
+        return 1.0;
     }
-    return results;
-};
-const areLinesFuzzyEqual = (line1, line2) => {
-    return line1.trim() === line2.trim();
+    // Sử dụng dmp để tính Levenshtein distance cho chính xác và nhanh
+    const dmp = new diff_match_patch_1.diff_match_patch();
+    const diffs = dmp.diff_main(longer, shorter);
+    const levenshtein = dmp.diff_levenshtein(diffs);
+    return (longerLength - levenshtein) / longerLength;
 };
-const performFuzzyReplace = (originalContent, searchBlock, replaceBlock) => {
-    const originalLines = originalContent.split(/\r?\n/);
-    const searchLines = searchBlock.split(/\r?\n/);
-    while (searchLines.length > 0 && searchLines[0].trim() === "") {
+/**
+ * ------------------------------------------------------------------
+ * HELPER: FUZZY LINE MATCHING
+ * Tìm đoạn code khớp nhất trong file gốc dựa trên điểm số (Confidence)
+ * ------------------------------------------------------------------
+ */
+const applyFuzzyLineMatch = (original, search, replace, threshold = 0.85 // Ngưỡng chấp nhận (85% giống nhau)
+) => {
+    const originalLines = original.split(/\r?\n/);
+    const searchLines = search.split(/\r?\n/);
+    // Lọc bỏ dòng trống ở đầu/cuối search block để match chính xác hơn
+    while (searchLines.length > 0 && searchLines[0].trim() === "")
         searchLines.shift();
-    }
-    while (searchLines.length > 0 &&
-        searchLines[searchLines.length - 1].trim() === "") {
+    while (searchLines.length > 0 && searchLines[searchLines.length - 1].trim() === "")
         searchLines.pop();
-    }
     if (searchLines.length === 0)
-        return null;
+        return { result: null, confidence: 0 };
+    let bestMatchIndex = -1;
+    let bestMatchScore = 0;
+    // Duyệt qua file gốc (Sliding Window)
+    // Chỉ cần duyệt đến vị trí mà số dòng còn lại đủ để chứa searchLines
     for (let i = 0; i <= originalLines.length - searchLines.length; i++) {
-        let match = true;
+        let currentScoreTotal = 0;
+        let possible = true;
         for (let j = 0; j < searchLines.length; j++) {
-            if (!areLinesFuzzyEqual(originalLines[i + j], searchLines[j])) {
-                match = false;
+            const originalLine = originalLines[i + j].trim();
+            const searchLine = searchLines[j].trim();
+            // So sánh nhanh: Nếu giống hệt nhau
+            if (originalLine === searchLine) {
+                currentScoreTotal += 1;
+                continue;
+            }
+            // So sánh chậm: Tính độ tương đồng
+            const similarity = calculateSimilarity(originalLine, searchLine);
+            // Nếu một dòng quá khác biệt (< 60%), coi như block này không khớp
+            // (Giúp tối ưu hiệu năng, cắt nhánh sớm)
+            if (similarity < 0.6) {
+                possible = false;
                 break;
             }
+            currentScoreTotal += similarity;
         }
-        if (match) {
-            const before = originalLines.slice(0, i).join("\n");
-            const after = originalLines.slice(i + searchLines.length).join("\n");
-            return `${before}\n${replaceBlock}\n${after}`;
+        if (possible) {
+            const avgScore = currentScoreTotal / searchLines.length;
+            if (avgScore > bestMatchScore) {
+                bestMatchScore = avgScore;
+                bestMatchIndex = i;
+            }
         }
     }
-    return null;
+    // LOG CONFIDENCE ĐỂ DEBUG
+    if (bestMatchScore > 0) {
+        console.log(`[FuzzyMatch] Best match score: ${(bestMatchScore * 100).toFixed(2)}% at line ${bestMatchIndex + 1}`);
+    }
+    // Nếu tìm thấy vị trí có độ tin cậy cao hơn ngưỡng
+    if (bestMatchIndex !== -1 && bestMatchScore >= threshold) {
+        const before = originalLines.slice(0, bestMatchIndex);
+        // Lưu ý: Đoạn replace thay thế đúng số lượng dòng của searchLines
+        // (Giả định search và match trong original có cùng số dòng hiển thị)
+        const after = originalLines.slice(bestMatchIndex + searchLines.length);
+        return {
+            result: [...before, replace, ...after].join("\n"),
+            confidence: bestMatchScore
+        };
+    }
+    return { result: null, confidence: bestMatchScore };
 };
-const applyPatch = (originalContent, patchContent) => {
-    let result = originalContent;
-    const patchRegex = /<<<<<<< SEARCH\s*\n([\s\S]*?)\n?=======\s*\n([\s\S]*?)\n?>>>>>>> REPLACE/g;
-    const matches = [...patchContent.matchAll(patchRegex)];
-    if (matches.length === 0) {
-        return originalContent;
+/**
+ * ------------------------------------------------------------------
+ * 1. STATE MACHINE PARSER (FILE-AWARE)
+ * ------------------------------------------------------------------
+ */
+const parseLLMPatch = (patchContent) => {
+    const lines = patchContent.split(/\r?\n/);
+    const filePatches = {};
+    let currentFile = "unknown";
+    let inSearch = false;
+    let inReplace = false;
+    let searchLines = [];
+    let replaceLines = [];
+    const isFileMarker = (line) => {
+        const match = line.match(/^### File:\s*[`']?([^`'\s]+)[`']?/i);
+        return match ? match[1] : null;
+    };
+    const isSearchMarker = (line) => /^\s*<{7,}\s*SEARCH\s*$/.test(line);
+    const isDividerMarker = (line) => /^\s*={7,}\s*$/.test(line);
+    const isEndMarker = (line) => /^\s*>{7,}\s*REPLACE\s*$/.test(line);
+    for (const line of lines) {
+        const fileName = isFileMarker(line);
+        if (fileName) {
+            currentFile = fileName;
+            continue;
+        }
+        if (isSearchMarker(line)) {
+            inSearch = true;
+            inReplace = false;
+            searchLines = [];
+            replaceLines = [];
+            continue;
+        }
+        if (isDividerMarker(line)) {
+            if (inSearch) {
+                inSearch = false;
+                inReplace = true;
+            }
+            continue;
+        }
+        if (isEndMarker(line)) {
+            if (inReplace || inSearch) {
+                if (searchLines.length > 0 || replaceLines.length > 0) {
+                    if (!filePatches[currentFile])
+                        filePatches[currentFile] = [];
+                    filePatches[currentFile].push({
+                        search: searchLines.join("\n"),
+                        replace: replaceLines.join("\n")
+                    });
+                }
+            }
+            inSearch = false;
+            inReplace = false;
+            searchLines = [];
+            replaceLines = [];
+            continue;
+        }
+        if (inSearch)
+            searchLines.push(line);
+        else if (inReplace)
+            replaceLines.push(line);
     }
-    for (const match of matches) {
-        const [_, searchBlock, replaceBlock] = match;
-        if (result.includes(searchBlock)) {
-            result = result.replace(searchBlock, replaceBlock);
+    return filePatches;
+};
+/**
+ * ------------------------------------------------------------------
+ * 2. APPLY PATCH (UPDATED)
+ * ------------------------------------------------------------------
+ */
+const applyPatch = (originalContent, patches) => {
+    if (!patches || patches.length === 0)
+        return originalContent;
+    let result = originalContent;
+    for (const patch of patches) {
+        const { search, replace } = patch;
+        // NẾU SEARCH RỖNG (INSERT/APPEND)
+        if (search.trim() === "") {
+            console.log(`[ApplyPatch] Inserting/appending block.`);
+            result += `\n${replace}`;
             continue;
         }
-        const trimmedSearch = searchBlock.trim();
-        const trimmedReplace = replaceBlock.trim();
+        // --- STRATEGY 1: EXACT MATCH ---
+        if (result.includes(search)) {
+            console.log(`[ApplyPatch] Exact match found.`);
+            result = result.replace(search, replace);
+            continue;
+        }
+        // --- STRATEGY 2: NORMALIZED MATCH (Trim) ---
+        const trimmedSearch = search.trim();
         if (result.includes(trimmedSearch)) {
-            result = result.replace(trimmedSearch, trimmedReplace);
+            console.log(`[ApplyPatch] Trimmed match found.`);
+            result = result.replace(trimmedSearch, replace.trim());
             continue;
         }
-        const fuzzyResult = performFuzzyReplace(result, searchBlock, replaceBlock);
-        if (fuzzyResult) {
-            result = fuzzyResult;
+        // --- STRATEGY 3: FUZZY LINE MATCH (BEST FOR CODE) ---
+        // Tìm vị trí tốt nhất dựa trên similarity score của từng dòng
+        const fuzzyMatch = applyFuzzyLineMatch(result, search, replace, 0.80); // 80% confidence
+        if (fuzzyMatch.result !== null) {
+            console.log(`[ApplyPatch] Fuzzy line match applied (Confidence: ${(fuzzyMatch.confidence * 100).toFixed(0)}%)`);
+            result = fuzzyMatch.result;
             continue;
         }
+        else {
+            console.warn(`[ApplyPatch] Failed to match block. Max confidence was: ${(fuzzyMatch.confidence * 100).toFixed(0)}%`);
+        }
+        // --- STRATEGY 4: DMP FALLBACK (LAST RESORT) ---
+        // Nếu cả fuzzy line match cũng tạch (ví dụ do search block quá ngắn hoặc cấu trúc quá nát)
+        // thì mới dùng DMP patch_apply.
+        try {
+            const dmp = new diff_match_patch_1.diff_match_patch();
+            dmp.Match_Threshold = 0.5;
+            dmp.Match_Distance = 1000;
+            const dmpPatches = dmp.patch_make(search, replace);
+            const [newText, applyResults] = dmp.patch_apply(dmpPatches, result);
+            // Kiểm tra xem có apply được hết các hunk không
+            const successCount = applyResults.filter(Boolean).length;
+            const successRate = successCount / applyResults.length;
+            if (successRate === 1 && newText !== result) {
+                console.log(`[ApplyPatch] DMP Patch applied via fuzzy logic.`);
+                result = newText;
+            }
+            else {
+                console.error(`[ApplyPatch] All strategies failed for block starting with: ${search.substring(0, 30)}...`);
+                // Tuỳ chọn: Throw error để báo cho LLM biết là apply thất bại
+                // throw new Error("Could not apply patch block");
+            }
+        }
+        catch (e) {
+            console.error(`[ApplyPatch] DMP error:`, e);
+        }
     }
     return result;
 };
+exports.applyPatch = applyPatch;
 // ==========================================
 // 3. WEB UI SERVER (UPDATED UI)
 // ==========================================
@@ -199,15 +359,42 @@ const startServer = async (rootDir) => {
     });
     // API 3: Apply Patch
     app.post("/api/apply", async (req, res) => {
-        const { llmResponse, filePaths } = req.body;
+        var _a;
+        const { llmResponse, filePaths: selectedPaths } = req.body;
+        // 1. Parse all patches from LLM response
+        const filePatches = parseLLMPatch(llmResponse);
+        // 2. Scan project files
         const allFiles = await scanRecursively(rootDir, rootDir);
-        const selectedFiles = allFiles.filter((f) => filePaths.includes(f.path));
         const modifiedFiles = [];
-        for (const file of selectedFiles) {
-            const newContent = applyPatch(file.content, llmResponse);
-            if (newContent !== file.content) {
-                await promises_1.default.writeFile(file.fullPath, newContent, "utf-8");
-                modifiedFiles.push(file.path);
+        // 3. Match patches to files and apply
+        for (const file of allFiles) {
+            // Find patches meant for this specific file path
+            // Note: LLM might use different path separators, so we normalize
+            const normalizedPath = file.path.replace(/\\/g, '/');
+            const patchesForFile = (_a = Object.entries(filePatches).find(([path]) => {
+                const normalizedKey = path.replace(/\\/g, '/');
+                return normalizedKey === normalizedPath || normalizedPath.endsWith('/' + normalizedKey);
+            })) === null || _a === void 0 ? void 0 : _a[1];
+            // Only apply if the file was selected in UI AND has patches in the response
+            if (selectedPaths.includes(file.path) && patchesForFile) {
+                console.log(`[Apply] Processing ${patchesForFile.length} blocks for: ${file.path}`);
+                const newContent = (0, exports.applyPatch)(file.content, patchesForFile);
+                if (newContent !== file.content) {
+                    await promises_1.default.writeFile(file.fullPath, newContent, "utf-8");
+                    modifiedFiles.push(file.path);
+                }
+            }
+        }
+        // Fallback: If no matched files but only one file was selected, try applying "unknown" patches
+        if (modifiedFiles.length === 0 && selectedPaths.length === 1 && filePatches["unknown"]) {
+            const file = allFiles.find(f => f.path === selectedPaths[0]);
+            if (file) {
+                console.log(`[Apply] Fallback: Applying unknown blocks to single selected file: ${file.path}`);
+                const newContent = (0, exports.applyPatch)(file.content, filePatches["unknown"]);
+                if (newContent !== file.content) {
+                    await promises_1.default.writeFile(file.fullPath, newContent, "utf-8");
+                    modifiedFiles.push(file.path);
+                }
             }
         }
         res.json({ modified: modifiedFiles });
@@ -335,7 +522,8 @@ const startServer = async (rootDir) => {
 
           <div class="flex-1 flex flex-col bg-gray-850 min-w-0">
             
-            <div class="flex-shrink-0 p-6 border-b border-apple-border">
+            <!-- 1. Instruction (Takes more space and resizable) -->
+            <div class="flex-1 p-6 flex flex-col min-h-0 border-b border-apple-border">
               <div class="flex justify-between items-end mb-3">
                 <div>
                   <h2 class="text-sm font-semibold text-gray-200">1. Instruction</h2>
@@ -351,12 +539,12 @@ const startServer = async (rootDir) => {
                 </button>
               </div>
               <textarea x-model="instruction" 
-                        class="w-full bg-apple-panel border border-apple-border rounded p-3 text-sm text-gray-200 placeholder-gray-600 focus:outline-none focus:border-apple-blue/50 focus:ring-1 focus:ring-apple-blue/50 transition resize-none font-mono" 
-                        rows="3" 
+                        class="w-full flex-1 bg-apple-panel border border-apple-border rounded p-3 text-sm text-gray-200 placeholder-gray-600 focus:outline-none focus:border-apple-blue/50 focus:ring-1 focus:ring-apple-blue/50 transition resize-y font-mono min-h-[120px]" 
                         placeholder="e.g. Refactor the Button component to use TypeScript interfaces..."></textarea>
             </div>
 
-            <div class="flex-1 p-6 flex flex-col min-h-0">
+            <!-- 2. LLM Patch (Fixed smaller size) -->
+            <div class="h-64 p-6 flex flex-col flex-shrink-0">
               <div class="flex justify-between items-end mb-3">
                 <div>
                    <h2 class="text-sm font-semibold text-gray-200">2. LLM Patch</h2>
@@ -369,11 +557,9 @@ const startServer = async (rootDir) => {
                   <span x-show="applying">Applying...</span>
                 </button>
               </div>
-              <div class="flex-1 relative">
-                <textarea x-model="llmResponse" 
-                          class="absolute inset-0 w-full h-full bg-apple-panel border border-apple-border rounded p-3 text-sm text-gray-300 font-mono placeholder-gray-600 focus:outline-none focus:border-emerald-500/50 focus:ring-1 focus:ring-emerald-500/50 transition resize-none leading-relaxed" 
-                          placeholder="<<<<<<< SEARCH..."></textarea>
-              </div>
+              <textarea x-model="llmResponse" 
+                        class="w-full h-40 bg-apple-panel border border-apple-border rounded p-3 text-sm text-gray-300 font-mono placeholder-gray-600 focus:outline-none focus:border-emerald-500/50 focus:ring-1 focus:ring-emerald-500/50 transition resize-none leading-relaxed" 
+                        placeholder="<<<<<<< SEARCH..."></textarea>
             </div>
 
           </div>

package/index.ts

@@ -228,8 +228,18 @@ class FileManager {
   }
 
   private writeFile(file: FileContent): void {
+    if (!file.path || file.path.trim() === "") return;
     try {
       const fullPath = path.join(this.basePath, file.path);
+
+      if (fs.existsSync(fullPath)) {
+        try {
+          if (fs.statSync(fullPath).isDirectory()) return;
+        } catch (e) {
+          // ignore
+        }
+      }
+
       const dir = path.dirname(fullPath);
       fs.mkdirSync(dir, { recursive: true });
 
@@ -240,7 +250,8 @@ class FileManager {
             encoding: "utf8",
           });
           hasChanged = existingContent !== file.content;
-        } catch (readError) {
+        } catch (readError: any) {
+          if (readError.code === "EISDIR") return;
           console.warn(
             chalk.yellow(
               `Warning: Could not read existing file ${fullPath}, treating as changed:`
@@ -254,7 +265,8 @@ class FileManager {
       if (hasChanged) {
         fs.writeFileSync(fullPath, file.content, { encoding: "utf8" });
       }
-    } catch (error) {
+    } catch (error: any) {
+      if (error.code === "EISDIR") return;
       console.error(chalk.red(`Error processing file ${file.path}:`), error);
       throw error;
     }
@@ -471,7 +483,7 @@ class RoomState {
   }
 }
 
-program.version("0.0.27").description("Hapico CLI for project management");
+program.version("0.0.29").description("Hapico CLI for project management");
 
 program
   .command("clone <id>")
@@ -784,7 +796,7 @@ program
       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/abdb7abf-bcf7-4f39-a527-dc4d277b74c0`;
+        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(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hapico/cli",
-  "version": "0.0.27",
+  "version": "0.0.29",
   "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",
+    "diff-match-patch": "^1.0.5",
     "express": "^5.2.1",
     "inquirer": "^12.9.6",
     "lodash": "^4.17.21",
@@ -38,6 +39,7 @@
   "devDependencies": {
     "@types/babel__standalone": "^7.1.9",
     "@types/commander": "^2.12.5",
+    "@types/diff-match-patch": "^1.0.36",
     "@types/express": "^5.0.6",
     "@types/lodash": "^4.17.20",
     "@types/node": "^24.1.0",