@hapico/cli 0.0.28 → 0.0.30

package/tools/vibe/index.ts

@@ -1,18 +1,48 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import fs from "node:fs/promises";
 import path from "node:path";
-import { checkbox, input, editor, confirm } from "@inquirer/prompts";
-import { exec } from "node:child_process";
-import util from "node:util";
+import { diff_match_patch } from "diff-match-patch";
 import express from "express";
 import open from "open";
-// import net
-import os from "os";
-
-const execAsync = util.promisify(exec);
 import net from "node:net";
 
+const scanRecursively = async (
+  dir: string,
+  baseDir: string
+): Promise<FileNode[]> => {
+  let results: FileNode[] = [];
+  try {
+    const list = await fs.readdir(dir, { withFileTypes: true });
+
+    for (const entry of list) {
+      const fullPath = path.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 = path.relative(baseDir, fullPath).split(path.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 fs.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
@@ -94,118 +124,261 @@ const shouldIgnorePath = (filePath: string): boolean => {
   return false;
 };
 
-const scanRecursively = async (
-  dir: string,
-  baseDir: string
-): Promise<FileNode[]> => {
-  let results: FileNode[] = [];
-  try {
-    const list = await fs.readdir(dir, { withFileTypes: true });
+/**
+ * ------------------------------------------------------------------
+ * TYPES
+ * ------------------------------------------------------------------
+ */
+interface PatchBlock {
+  search: string;
+  replace: string;
+}
 
-    for (const entry of list) {
-      const fullPath = path.join(dir, entry.name);
-      const relativePath = path.relative(baseDir, fullPath);
+/**
+ * ------------------------------------------------------------------
+ * 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;
+};
 
-      if (shouldIgnorePath(relativePath)) continue;
+/**
+ * ------------------------------------------------------------------
+ * 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;
 
-      if (entry.isDirectory()) {
-        const subResults = await scanRecursively(fullPath, baseDir);
-        results = results.concat(subResults);
-      } else if (entry.isFile()) {
-        try {
-          const content = await fs.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
-        }
+    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;
     }
-  } catch (error) {
-    // Bỏ qua nếu lỗi permission hoặc path không tồn tại
-  }
-  return results;
-};
 
-const areLinesFuzzyEqual = (line1: string, line2: string): boolean => {
-  return line1.trim() === line2.trim();
-};
+    if (possible) {
+      const avgScore = currentScoreTotal / searchLines.length;
+      if (avgScore > bestMatchScore) {
+        bestMatchScore = avgScore;
+        bestMatchIndex = i;
+      }
+    }
+  }
 
-const performFuzzyReplace = (
-  originalContent: string,
-  searchBlock: string,
-  replaceBlock: string
-): string | null => {
-  const originalLines = originalContent.split(/\r?\n/);
-  const searchLines = searchBlock.split(/\r?\n/);
-
-  while (searchLines.length > 0 && searchLines[0].trim() === "") {
-    searchLines.shift();
+  // LOG CONFIDENCE ĐỂ DEBUG
+  if (bestMatchScore > 0) {
+    console.log(`[FuzzyMatch] Best match score: ${(bestMatchScore * 100).toFixed(2)}% at line ${bestMatchIndex + 1}`);
   }
-  while (
-    searchLines.length > 0 &&
-    searchLines[searchLines.length - 1].trim() === ""
-  ) {
-    searchLines.pop();
+
+  // 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
+    };
   }
 
-  if (searchLines.length === 0) return null;
+  return { result: null, confidence: bestMatchScore };
+};
+
+/**
+ * ------------------------------------------------------------------
+ * 1. STATE MACHINE PARSER (FILE-AWARE)
+ * ------------------------------------------------------------------
+ */
+const parseLLMPatch = (patchContent: string): Record<string, PatchBlock[]> => {
+  const lines = patchContent.split(/\r?\n/);
+  const filePatches: Record<string, PatchBlock[]> = {};
+  
+  let currentFile = "unknown";
+  let inSearch = false;
+  let inReplace = false;
+  let searchLines: string[] = [];
+  let replaceLines: string[] = [];
+
+  const isFileMarker = (line: string) => {
+    const match = line.match(/^### File:\s*[`']?([^`'\s]+)[`']?/i);
+    return match ? match[1] : null;
+  };
+  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) {
+    const fileName = isFileMarker(line);
+    if (fileName) {
+      currentFile = fileName;
+      continue;
+    }
 
-  for (let i = 0; i <= originalLines.length - searchLines.length; i++) {
-    let match = true;
-    for (let j = 0; j < searchLines.length; j++) {
-      if (!areLinesFuzzyEqual(originalLines[i + j], searchLines[j])) {
-        match = false;
-        break;
-      }
+    if (isSearchMarker(line)) {
+      inSearch = true;
+      inReplace = false;
+      searchLines = [];
+      replaceLines = [];
+      continue;
     }
-    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 (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);
   }
-  return null;
+  return filePatches;
 };
 
-const applyPatch = (originalContent: string, patchContent: string): string => {
+/**
+ * ------------------------------------------------------------------
+ * 2. APPLY PATCH (UPDATED)
+ * ------------------------------------------------------------------
+ */
+export const applyPatch = (
+  originalContent: string,
+  patches: PatchBlock[]
+): string => {
+  if (!patches || patches.length === 0) return originalContent;
+
   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;
-  }
+  for (const patch of patches) {
+    const { search, replace } = patch;
 
-  for (const match of matches) {
-    const [_, searchBlock, replaceBlock] = match;
+    // NẾU SEARCH RỖNG (INSERT/APPEND)
+    if (search.trim() === "") {
+      console.log(`[ApplyPatch] Inserting/appending block.`);
+      result += `\n${replace}`;
+      continue;
+    }
 
-    if (result.includes(searchBlock)) {
-      result = result.replace(searchBlock, replaceBlock);
+    // --- 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;
     }
+    
+    // --- 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)}%`);
+    }
 
-    const fuzzyResult = performFuzzyReplace(result, searchBlock, replaceBlock);
-    if (fuzzyResult) {
-      result = fuzzyResult;
-      continue;
+    // --- 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)}...`);
+         // 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;
 };
 
+
 // ==========================================
 // 3. WEB UI SERVER (UPDATED UI)
 // ==========================================
@@ -238,18 +411,50 @@ const startServer = async (rootDir: string) => {
 
   // API 3: Apply Patch
   app.post("/api/apply", async (req, res) => {
-    const { llmResponse, filePaths } = req.body;
+    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: string[] = [];
-    for (const file of selectedFiles) {
-      const newContent = applyPatch(file.content, llmResponse);
-      if (newContent !== file.content) {
-        await fs.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 = 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);
+        }
       }
     }
+    
+    // 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 = applyPatch(file.content, filePatches["unknown"]);
+            if (newContent !== file.content) {
+                await fs.writeFile(file.fullPath, newContent, "utf-8");
+                modifiedFiles.push(file.path);
+            }
+        }
+    }
+
     res.json({ modified: modifiedFiles });
   });
 
@@ -376,7 +581,8 @@ const startServer = async (rootDir: string) => {
 
           <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>
@@ -392,12 +598,12 @@ const startServer = async (rootDir: string) => {
                 </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>
@@ -410,11 +616,9 @@ const startServer = async (rootDir: string) => {
                   <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>
@@ -459,7 +663,8 @@ const startServer = async (rootDir: string) => {
 
               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();
@@ -469,98 +674,10 @@ const startServer = async (rootDir: string) => {
                   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.
@@ -588,7 +705,8 @@ const startServer = async (rootDir: string) => {
                  
                  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]) {
@@ -689,9 +807,8 @@ const startServer = async (rootDir: string) => {
               },
               
               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);
               },
 
@@ -724,7 +841,7 @@ const startServer = async (rootDir: string) => {
                 }
                 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 })
@@ -751,7 +868,7 @@ const startServer = async (rootDir: string) => {
               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 })