@hapico/cli 0.0.28 → 0.0.30

package/dist/tools/vibe/index.js

@@ -3,16 +3,49 @@ 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);
+            // Chuẩn hóa đường dẫn về forward slash để nhất quán giữa các hệ điều hành
+            const relativePath = node_path_1.default.relative(baseDir, fullPath).split(node_path_1.default.sep).join('/');
+            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 +114,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;
+        }
+        // --- STRATEGY 1: EXACT MATCH ---
+        if (result.includes(search)) {
+            console.log(`[ApplyPatch] Exact match found.`);
+            result = result.replace(search, replace);
             continue;
         }
-        const trimmedSearch = searchBlock.trim();
-        const trimmedReplace = replaceBlock.trim();
+        // --- 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 +360,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 +523,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 +540,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 +558,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>
@@ -418,7 +605,8 @@ const startServer = async (rootDir) => {
 
               async init() {
                 try {
-                  const res = await fetch('http://localhost:${PORT}/api/files');
+                  // Sử dụng relative URL để tránh lỗi phân giải localhost/127.0.0.1 trên Windows
+                  const res = await fetch('/api/files');
                   const data = await res.json();
                   this.rawFiles = data;
                   this.buildTree();
@@ -428,98 +616,10 @@ const startServer = async (rootDir) => {
                   this.loading = false;
                 }
 
-                // Search watcher
                 this.$watch('search', () => this.buildTree());
-                
-                // Auto-generate prompt
                 this.$watch('instruction', () => this.debouncedFetchPrompt());
                 this.$watch('selectedFiles', () => this.debouncedFetchPrompt());
               },
-
-              // ===========================
-              // Tree Logic
-              // ===========================
-              
-              buildTree() {
-                // 1. Convert paths to object structure
-                const root = {};
-                const searchLower = this.search.toLowerCase();
-                
-                this.rawFiles.forEach(file => {
-                  if (this.search && !file.path.toLowerCase().includes(searchLower)) return;
-                  
-                  const parts = file.path.split(/[\\\\/]/);
-                  let current = root;
-                  
-                  parts.forEach((part, index) => {
-                    if (!current[part]) {
-                      current[part] = {
-                        name: part,
-                        path: parts.slice(0, index + 1).join('/'),
-                        children: {},
-                        type: index === parts.length - 1 ? 'file' : 'folder',
-                        fullPath: file.path // Only meaningful for file
-                      };
-                    }
-                    current = current[part].children;
-                  });
-                });
-
-                // 2. Flatten object structure into renderable list with depth
-                this.treeNodes = [];
-                const traverse = (nodeMap, depth) => {
-                  // Sort: Folders first, then Files. Alphabetical.
-                  const keys = Object.keys(nodeMap).sort((a, b) => {
-                    const nodeA = nodeMap[a];
-                    const nodeB = nodeMap[b];
-                    if (nodeA.type !== nodeB.type) return nodeA.type === 'folder' ? -1 : 1;
-                    return a.localeCompare(b);
-                  });
-
-                  keys.forEach(key => {
-                    const node = nodeMap[key];
-                    const flatNode = {
-                      id: node.path,
-                      name: node.name,
-                      path: node.path, // Relative path for selection
-                      type: node.type,
-                      depth: depth,
-                      children: Object.keys(node.children).length > 0, // boolean for UI
-                      expanded: this.search.length > 0 || depth < 1, // Auto expand on search or root
-                      rawChildren: node.children // Keep ref for recursion
-                    };
-                    
-                    this.treeNodes.push(flatNode);
-                    if (flatNode.children && flatNode.expanded) {
-                      traverse(node.children, depth + 1);
-                    }
-                  });
-                };
-                
-                traverse(root, 0);
-              },
-
-              // Re-calculate visible nodes (folding logic) without rebuilding everything
-              // But for simplicity in this SFC, we just rebuild the list when expanded changes.
-              toggleExpand(node) {
-                if (node.type !== 'folder') return;
-                
-                // Find node in treeNodes and toggle
-                // Since treeNodes is flat and generated, we need to persist state or smarter logic.
-                // Simpler: Just modify the expanded state in the current flat list is tricky because children are dynamic.
-                // Better approach for this lightweight UI:
-                // We actually need a persistent "expanded" Set to survive re-renders if we want to be fancy.
-                // For now, let's just cheat: Update the boolean in the flat list works for collapsing, 
-                // but expanding requires knowing the children.
-                
-                // Let's reload the tree logic but using a \`expandedPaths\` set.
-                if (this.expandedPaths.has(node.path)) {
-                   this.expandedPaths.delete(node.path);
-                } else {
-                   this.expandedPaths.add(node.path);
-                }
-                this.refreshTreeVisibility();
-              },
               
               // Alternative: Just use a computed property for \`visibleNodes\`.
               // Since Alpine isn't React, we do this manually.
@@ -547,7 +647,8 @@ const startServer = async (rootDir) => {
                  
                  this.rawFiles.forEach(file => {
                     if (this.search && !file.path.toLowerCase().includes(searchLower)) return;
-                    const parts = file.path.split(/[\\\\/]/);
+                    // File path đã được chuẩn hóa '/' từ backend
+                    const parts = file.path.split('/');
                     let current = this.rootObject;
                     parts.forEach((part, index) => {
                       if (!current[part]) {
@@ -648,9 +749,8 @@ const startServer = async (rootDir) => {
               },
               
               getAllDescendants(folderPath) {
-                 // Simple filter from rawFiles
                  return this.rawFiles
-                    .filter(f => f.path.startsWith(folderPath + '/') || f.path.startsWith(folderPath + '\\\\'))
+                    .filter(f => f.path === folderPath || f.path.startsWith(folderPath + '/'))
                     .map(f => f.path);
               },
 
@@ -683,7 +783,7 @@ const startServer = async (rootDir) => {
                 }
                 this.generating = true;
                 try {
-                  const res = await fetch('http://localhost:${PORT}/api/prompt', {
+                  const res = await fetch('/api/prompt', {
                     method: 'POST',
                     headers: {'Content-Type': 'application/json'},
                     body: JSON.stringify({ filePaths: Array.from(this.selectedFiles), instruction: this.instruction })
@@ -710,7 +810,7 @@ const startServer = async (rootDir) => {
               async applyPatch() {
                 this.applying = true;
                 try {
-                   const res = await fetch('http://localhost:${PORT}/api/apply', {
+                   const res = await fetch('/api/apply', {
                     method: 'POST',
                     headers: {'Content-Type': 'application/json'},
                     body: JSON.stringify({ filePaths: Array.from(this.selectedFiles), llmResponse: this.llmResponse })

package/index.ts

@@ -483,7 +483,7 @@ class RoomState {
   }
 }
 
-program.version("0.0.28").description("Hapico CLI for project management");
+program.version("0.0.30").description("Hapico CLI for project management");
 
 program
   .command("clone <id>")

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hapico/cli",
-  "version": "0.0.28",
+  "version": "0.0.30",
   "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",