@hapico/cli 0.0.30 → 0.0.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hapico/cli",
-  "version": "0.0.30",
+  "version": "0.0.32",
   "description": "A simple CLI tool for project management",
   "main": "index.js",
   "bin": {
@@ -27,11 +27,15 @@
     "express": "^5.2.1",
     "inquirer": "^12.9.6",
     "lodash": "^4.17.21",
+    "nativewind": "^4.2.2",
     "open": "^10.2.0",
     "ora": "^8.2.0",
     "pako": "^2.1.0",
+    "postcss": "^8.5.8",
     "prettier": "^3.6.2",
     "qrcode-terminal": "^0.12.0",
+    "react-native-css-interop": "^0.2.2",
+    "tailwindcss": "3.4.17",
     "unzipper": "^0.12.3",
     "uuid": "^13.0.0",
     "ws": "^8.18.3"

package/tools/nativewind/index.ts

@@ -0,0 +1,87 @@
+import postcss from "postcss";
+import tailwindcss, { type Config } from "tailwindcss";
+import fs from "fs";
+import path from "path";
+// @ts-ignore
+import nativewindPreset from "nativewind/preset";
+
+// ==========================================
+// FIX LỖI IMPORT REACT-NATIVE-CSS-INTEROP
+// ==========================================
+let compileToNative: (css: string, options?: any) => any;
+try {
+  const compiler = require("react-native-css-interop/dist/compiler");
+  compileToNative = compiler.compile || compiler.default;
+} catch (e) {
+  try {
+    const cssToRn = require("react-native-css-interop/dist/css-to-rn");
+    compileToNative = cssToRn.cssToReactNativeRuntime || cssToRn.default;
+  } catch (err) {
+    throw new Error("Không thể tìm thấy hàm compile. Kiểm tra lại node_modules.");
+  }
+}
+
+/**
+ * Hàm biên dịch Tailwind Class sang Compiled Object
+ */
+export async function generateNativeWindStyleMap(
+  contentPaths: string[],
+  rawCss: string = "@tailwind base;\n@tailwind components;\n@tailwind utilities;"
+) {
+  try {
+    const tailwindConfig: Config = {
+      content: contentPaths,
+      presets: [nativewindPreset],
+      theme: { extend: {} },
+    };
+
+    const processor = postcss([tailwindcss(tailwindConfig)]);
+    const result = await processor.process(rawCss, {
+      from: "tailwind.css",
+      to: "output.css",
+    });
+
+    return compileToNative(result.css, { native: true });
+  } catch (error) {
+    console.error("❌ Compile Style Map Error:", error);
+    throw error;
+  }
+}
+
+/**
+ * Hàm hỗ trợ: Quét 1 thư mục và Lưu kết quả vào 1 thư mục khác
+ */
+export async function compileAndSaveToFolder(
+  folderToScan: string,   // Thư mục chứa code cần quét (VD: "./src/components")
+  outputFilePath: string  // Nơi lưu kết quả (VD: "./dist/styles.json")
+) {
+  try {
+    // 1. Tạo đường dẫn quét toàn bộ file js, jsx, ts, tsx trong thư mục
+    // path.resolve(process.cwd(), ...) giúp lấy đúng đường dẫn gốc của project
+    const scanPattern = path.resolve(process.cwd(), folderToScan, "**/*.{js,jsx,ts,tsx}");
+    
+    // console.log(`🔍 Scanning files in ${scanPattern}`);
+
+    // 2. Chạy hàm biên dịch
+    const compiledObject = await generateNativeWindStyleMap([scanPattern]);
+
+    // 3. Xử lý thư mục lưu file
+    const absoluteOutputPath = path.resolve(process.cwd(), outputFilePath);
+    const outputDir = path.dirname(absoluteOutputPath); // Lấy tên thư mục chứa file đầu ra
+
+    // Nếu thư mục đầu ra chưa tồn tại, Node.js sẽ tự động tạo thư mục đó (recursive: true)
+    if (!fs.existsSync(outputDir)) {
+      fs.mkdirSync(outputDir, { recursive: true });
+    }
+
+    // 4. Ghi Object ra file JSON
+    fs.writeFileSync(absoluteOutputPath, JSON.stringify(compiledObject, null, 2), "utf-8");
+    
+    // console.log(`✅ Sync CSS ${absoluteOutputPath}`);
+    
+  } catch (error) {
+    console.error("❌ Lỗi khi xuất file:", error);
+  }
+}
+
+

package/tools/vibe/index.ts

@@ -253,6 +253,11 @@ const parseLLMPatch = (patchContent: string): Record<string, PatchBlock[]> => {
   let searchLines: string[] = [];
   let replaceLines: string[] = [];
 
+  // State for full file replacement detection
+  let inCodeBlock = false;
+  let codeBlockLines: string[] = [];
+  let hasSeenMarkersInBlock = false;
+
   const isFileMarker = (line: string) => {
     const match = line.match(/^### File:\s*[`']?([^`'\s]+)[`']?/i);
     return match ? match[1] : null;
@@ -265,21 +270,28 @@ const parseLLMPatch = (patchContent: string): Record<string, PatchBlock[]> => {
     const fileName = isFileMarker(line);
     if (fileName) {
       currentFile = fileName;
+      // Reset tracking when switching files
+      inCodeBlock = false;
+      codeBlockLines = [];
+      hasSeenMarkersInBlock = false;
       continue;
     }
 
     if (isSearchMarker(line)) {
       inSearch = true;
       inReplace = false;
+      hasSeenMarkersInBlock = true;
       searchLines = [];
       replaceLines = [];
       continue;
     }
     if (isDividerMarker(line)) {
       if (inSearch) { inSearch = false; inReplace = true; }
+      hasSeenMarkersInBlock = true;
       continue;
     }
     if (isEndMarker(line)) {
+      hasSeenMarkersInBlock = true;
       if (inReplace || inSearch) {
         if (searchLines.length > 0 || replaceLines.length > 0) {
           if (!filePatches[currentFile]) filePatches[currentFile] = [];
@@ -292,8 +304,30 @@ const parseLLMPatch = (patchContent: string): Record<string, PatchBlock[]> => {
       inSearch = false; inReplace = false; searchLines = []; replaceLines = [];
       continue;
     }
+
+    // Detect triple backticks to identify potential full-file replacements
+    if (line.trim().startsWith("```")) {
+      if (!inCodeBlock) {
+        inCodeBlock = true;
+        codeBlockLines = [];
+        hasSeenMarkersInBlock = false;
+      } else {
+        inCodeBlock = false;
+        // If the code block ended without any SEARCH/REPLACE markers, treat it as full-file code
+        if (!hasSeenMarkersInBlock && codeBlockLines.length > 0 && currentFile !== "unknown") {
+          if (!filePatches[currentFile]) filePatches[currentFile] = [];
+          filePatches[currentFile].push({ 
+            search: "__FULL_FILE_REPLACEMENT__", 
+            replace: codeBlockLines.join("\n") 
+          });
+        }
+      }
+      continue;
+    }
+
     if (inSearch) searchLines.push(line);
     else if (inReplace) replaceLines.push(line);
+    else if (inCodeBlock) codeBlockLines.push(line);
   }
   return filePatches;
 };
@@ -314,6 +348,13 @@ export const applyPatch = (
   for (const patch of patches) {
     const { search, replace } = patch;
 
+    // Strategy 0: Full File Replacement (Overwrite)
+    if (search === "__FULL_FILE_REPLACEMENT__") {
+      console.log(`[ApplyPatch] Overwriting file with full content.`);
+      result = replace;
+      continue;
+    }
+
     // NẾU SEARCH RỖNG (INSERT/APPEND)
     if (search.trim() === "") {
       console.log(`[ApplyPatch] Inserting/appending block.`);
@@ -419,26 +460,54 @@ const startServer = async (rootDir: string) => {
     // 2. Scan project files
     const allFiles = await scanRecursively(rootDir, rootDir);
     const modifiedFiles: string[] = [];
+    const appliedNormalizedPaths = new Set<string>();
 
-    // 3. Match patches to files and apply
+    // 3. Match patches to existing 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 = Object.entries(filePatches).find(([path]) => {
+      const patchesEntry = Object.entries(filePatches).find(([path]) => {
           const normalizedKey = path.replace(/\\/g, '/');
           return normalizedKey === normalizedPath || normalizedPath.endsWith('/' + normalizedKey);
-      })?.[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 = applyPatch(file.content, patchesForFile);
-        
-        if (newContent !== file.content) {
-          await fs.writeFile(file.fullPath, newContent, "utf-8");
-          modifiedFiles.push(file.path);
+      if (patchesEntry) {
+        const [rawKey, patchesForFile] = patchesEntry;
+        // Only apply if the file was selected in UI
+        if (selectedPaths.includes(file.path)) {
+          console.log(`[Apply] Processing ${patchesForFile.length} blocks for: ${file.path}`);
+          const newContent = applyPatch(file.content, patchesForFile);
+          
+          if (newContent !== file.content) {
+            await fs.writeFile(file.fullPath, newContent, "utf-8");
+            modifiedFiles.push(file.path);
+          }
         }
+        appliedNormalizedPaths.add(rawKey.replace(/\\/g, '/'));
+      }
+    }
+
+    // 4. Handle New Files (patches for paths that don't exist yet)
+    for (const [rawPath, patches] of Object.entries(filePatches)) {
+      const normalizedKey = rawPath.replace(/\\/g, '/');
+      if (normalizedKey === "unknown" || appliedNormalizedPaths.has(normalizedKey)) continue;
+
+      // Double check it doesn't exist (safety)
+      const alreadyExists = allFiles.some(f => {
+        const np = f.path.replace(/\\/g, '/');
+        return np === normalizedKey || np.endsWith('/' + normalizedKey);
+      });
+      if (alreadyExists) continue;
+
+      console.log(`[Apply] Creating new file: ${rawPath}`);
+      const newContent = applyPatch("", patches);
+      const fullPath = path.resolve(rootDir, rawPath);
+      
+      try {
+        await fs.mkdir(path.dirname(fullPath), { recursive: true });
+        await fs.writeFile(fullPath, newContent, "utf-8");
+        modifiedFiles.push(rawPath);
+      } catch (err) {
+        console.error(`[Apply] Failed to create file ${rawPath}:`, err);
       }
     }
     

package/tools/vibe/patch.utils.ts

@@ -0,0 +1,273 @@
+import { diff_match_patch } from "diff-match-patch";
+
+/**
+ * ------------------------------------------------------------------
+ * TYPES
+ * ------------------------------------------------------------------
+ */
+export interface PatchBlock {
+  search: string;
+  replace: string;
+}
+
+/**
+ * ------------------------------------------------------------------
+ * HELPER: STRING SIMILARITY (Levenshtein based)
+ * Tính độ giống nhau giữa 2 chuỗi (0 -> 1)
+ * ------------------------------------------------------------------
+ */
+const calculateSimilarity = (s1: string, s2: string): number => {
+  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;
+  }
+  
+  // Sử dụng dmp để tính Levenshtein distance cho chính xác và nhanh
+  const dmp = new diff_match_patch();
+  const diffs = dmp.diff_main(longer, shorter);
+  const levenshtein = dmp.diff_levenshtein(diffs);
+  
+  return (longerLength - levenshtein) / longerLength;
+};
+
+/**
+ * ------------------------------------------------------------------
+ * 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: string,
+  search: string,
+  replace: string,
+  threshold: number = 0.85 // Ngưỡng chấp nhận (85% giống nhau)
+): { result: string | null; confidence: number } => {
+  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() === "") searchLines.pop();
+
+  if (searchLines.length === 0) 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 currentScoreTotal = 0;
+    let possible = true;
+
+    for (let j = 0; j < searchLines.length; j++) {
+      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 (possible) {
+      const avgScore = currentScoreTotal / searchLines.length;
+      if (avgScore > bestMatchScore) {
+        bestMatchScore = avgScore;
+        bestMatchIndex = i;
+      }
+    }
+  }
+
+  // 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 };
+};
+
+/**
+ * ------------------------------------------------------------------
+ * 1. STATE MACHINE PARSER (GIỮ NGUYÊN)
+ * ------------------------------------------------------------------
+ */
+export const parseLLMPatch = (patchContent: string): PatchBlock[] => {
+  // ... (Code parse giữ nguyên như cũ của bạn)
+  const lines = patchContent.split(/\r?\n/);
+  const patches: PatchBlock[] = [];
+  let inSearch = false;
+  let inReplace = false;
+  let searchLines: string[] = [];
+  let replaceLines: string[] = [];
+  const isSearchMarker = (line: string) => /^\s*<{7,}\s*SEARCH\s*$/.test(line);
+  const isDividerMarker = (line: string) => /^\s*={7,}\s*$/.test(line);
+  const isEndMarker = (line: string) => /^\s*>{7,}\s*REPLACE\s*$/.test(line);
+
+  for (const line of lines) {
+    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) {
+        // CẬP NHẬT: Cho phép lưu patch nếu có search HOẶC có replace
+        // (Trường hợp Search rỗng nhưng Replace có nội dung = Insert/Append)
+        if (searchLines.length > 0 || replaceLines.length > 0) {
+          patches.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);
+  }
+  return patches;
+};
+
+/**
+ * ------------------------------------------------------------------
+ * 2. APPLY PATCH (UPDATED)
+ * ------------------------------------------------------------------
+ */
+export const applyPatch = (
+  originalContent: string,
+  patchContent: string | PatchBlock[]
+): string => {
+  
+  let patches: PatchBlock[];
+  if (typeof patchContent === 'string') {
+    if (!patchContent || !patchContent.includes("<<<<<<< SEARCH")) {
+      return patchContent || originalContent;
+    }
+    patches = parseLLMPatch(patchContent);
+  } else {
+    patches = patchContent;
+  }
+
+  if (!patches || patches.length === 0) return originalContent;
+
+  let result = originalContent;
+
+  for (const patch of patches) {
+    const { search, replace } = patch;
+
+    // Strategy 0: Full File Replacement (Overwrite)
+    if (search === "__FULL_FILE_REPLACEMENT__") {
+      console.log(`[ApplyPatch] Overwriting file with full content.`);
+      result = replace;
+      continue;
+    }
+
+    // Nếu search và replace giống hệt nhau, bỏ qua
+    if (search === replace) {
+      console.log(`[ApplyPatch] Search and replace are identical. Skipping.`);
+      continue;
+    }
+
+    // NẾU SEARCH RỖNG (INSERT/APPEND hoặc TẠO FILE MỚI)
+    if (search.trim() === "") {
+      console.log(`[ApplyPatch] Inserting/appending block.`);
+      if (result.trim() === "") {
+        // Nếu file hiện tại rỗng hoặc chỉ có khoảng trắng, gán luôn bằng nội dung replace (Hỗ trợ tạo file mới)
+        result = replace;
+      } else {
+        // Nếu file đã có nội dung, append vào cuối. Đảm bảo có ít nhất một dấu xuống dòng phân tách.
+        const separator = result.endsWith("\n") ? "" : "\n";
+        result += separator + replace;
+      }
+      continue;
+    }
+
+    // --- 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)) {
+      console.log(`[ApplyPatch] Trimmed match found.`);
+      result = result.replace(trimmedSearch, replace.trim());
+      continue;
+    }
+    
+    // --- 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();
+      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)}...`);
+         console.log(`[ApplyPatch DATA]`, { search, replace, result });
+         // 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;
+};