openmagic 0.36.4 → 0.38.0

package/dist/cli.js

@@ -4,9 +4,10 @@
 import { Command } from "commander";
 import chalk from "chalk";
 import open from "open";
-import { resolve as resolve3, join as join5 } from "path";
-import { existsSync as existsSync5, readFileSync as readFileSync5 } from "fs";
-import { spawn as spawn4 } from "child_process";
+import { resolve as resolve3, join as join6 } from "path";
+import { existsSync as existsSync6, readFileSync as readFileSync6 } from "fs";
+import { spawn as spawn5, execSync as execSync2 } from "child_process";
+import http2 from "http";
 import { createInterface } from "readline";
 
 // src/proxy.ts
@@ -31,8 +32,8 @@ function validateToken(token) {
 }
 
 // src/server.ts
-import { readFileSync as readFileSync3, existsSync as existsSync3 } from "fs";
-import { join as join3, dirname as dirname2 } from "path";
+import { readFileSync as readFileSync4, existsSync as existsSync4 } from "fs";
+import { join as join4, dirname as dirname2 } from "path";
 import { fileURLToPath } from "url";
 import { WebSocketServer, WebSocket } from "ws";
 
@@ -73,19 +74,145 @@ function saveConfig(updates) {
   }
 }
 
+// src/llm/cli-detect.ts
+import { spawn } from "child_process";
+import { existsSync as existsSync2, readFileSync as readFileSync2 } from "fs";
+import { join as join2 } from "path";
+import { homedir as homedir2 } from "os";
+var CLI_AGENTS = [
+  { id: "claude-code", name: "Claude Code", command: "claude" },
+  { id: "codex-cli", name: "Codex CLI", command: "codex" },
+  { id: "gemini-cli", name: "Gemini CLI", command: "gemini" }
+];
+var cachedResults = null;
+var cacheTimestamp = 0;
+var CACHE_TTL = 6e4;
+function invalidateCliCache() {
+  cachedResults = null;
+  cacheTimestamp = 0;
+}
+async function detectAvailableClis() {
+  if (cachedResults && Date.now() - cacheTimestamp < CACHE_TTL) {
+    return cachedResults;
+  }
+  const results = await Promise.all(
+    CLI_AGENTS.map(async (agent) => {
+      const { installed, version } = await checkInstalled(agent.command);
+      const authenticated = installed ? checkAuthenticated(agent.id) : false;
+      return {
+        id: agent.id,
+        name: agent.name,
+        command: agent.command,
+        installed,
+        authenticated,
+        version
+      };
+    })
+  );
+  cachedResults = results;
+  cacheTimestamp = Date.now();
+  return results;
+}
+function checkInstalled(command) {
+  return new Promise((resolve4) => {
+    try {
+      const proc = spawn(command, ["--version"], {
+        stdio: ["ignore", "pipe", "pipe"],
+        timeout: 5e3
+      });
+      let stdout = "";
+      proc.stdout?.on("data", (d) => {
+        stdout += d.toString();
+      });
+      proc.on("error", () => resolve4({ installed: false }));
+      proc.on("close", (code) => {
+        if (code === 0) {
+          const match = stdout.match(/(\d+\.\d+\.\d+)/);
+          resolve4({ installed: true, version: match?.[1] });
+        } else {
+          resolve4({ installed: false });
+        }
+      });
+    } catch {
+      resolve4({ installed: false });
+    }
+  });
+}
+function checkAuthenticated(cliId) {
+  switch (cliId) {
+    case "claude-code":
+      return isClaudeAuthenticated();
+    case "codex-cli":
+      return isCodexAuthenticated();
+    case "gemini-cli":
+      return isGeminiAuthenticated();
+    default:
+      return false;
+  }
+}
+function isClaudeAuthenticated() {
+  if (process.env.ANTHROPIC_API_KEY) return true;
+  if (process.env.CLAUDE_CODE_OAUTH_TOKEN) return true;
+  try {
+    const configPath = join2(
+      process.env.CLAUDE_CONFIG_DIR || join2(homedir2(), ".claude"),
+      ".claude.json"
+    );
+    if (existsSync2(configPath)) {
+      const config = JSON.parse(readFileSync2(configPath, "utf-8"));
+      if (config.oauthAccount) return true;
+    }
+  } catch {
+  }
+  return false;
+}
+function isCodexAuthenticated() {
+  if (process.env.OPENAI_API_KEY) return true;
+  try {
+    const authPath = join2(
+      process.env.CODEX_HOME || join2(homedir2(), ".codex"),
+      "auth.json"
+    );
+    if (existsSync2(authPath)) {
+      const auth = JSON.parse(readFileSync2(authPath, "utf-8"));
+      if (auth.auth_mode && (auth.OPENAI_API_KEY || auth.tokens)) return true;
+    }
+  } catch {
+  }
+  return false;
+}
+function isGeminiAuthenticated() {
+  if (process.env.GEMINI_API_KEY) return true;
+  if (process.env.GOOGLE_API_KEY) return true;
+  try {
+    const credsPath = join2(homedir2(), ".gemini", "oauth_creds.json");
+    if (existsSync2(credsPath)) {
+      const creds = JSON.parse(readFileSync2(credsPath, "utf-8"));
+      if (creds.refresh_token) return true;
+    }
+  } catch {
+  }
+  return false;
+}
+
 // src/filesystem.ts
 import {
-  readFileSync as readFileSync2,
+  readFileSync as readFileSync3,
   writeFileSync as writeFileSync2,
-  existsSync as existsSync2,
+  existsSync as existsSync3,
   lstatSync,
   readdirSync,
   copyFileSync,
   mkdirSync as mkdirSync2,
   realpathSync,
-  rmSync
+  unlinkSync,
+  rmSync,
+  openSync,
+  fsyncSync,
+  closeSync,
+  renameSync as renameSync2
 } from "fs";
-import { join as join2, resolve, relative, dirname, extname } from "path";
+import { join as join3, resolve, relative, dirname, extname } from "path";
 import { tmpdir } from "os";
 import { createHash } from "crypto";
 var IGNORED_DIRS = /* @__PURE__ */ new Set([
@@ -134,33 +261,39 @@ function isPathSafe(filePath, roots) {
     return !rel.startsWith("..") && !rel.startsWith("/") && !rel.startsWith("\\") && (!realRel.startsWith("..") && !realRel.startsWith("/") && !realRel.startsWith("\\"));
   });
 }
+var fileMetadata = /* @__PURE__ */ new Map();
 function readFileSafe(filePath, roots) {
   if (!isPathSafe(filePath, roots)) {
     return { error: "Path is outside allowed roots" };
   }
-  if (!existsSync2(filePath)) {
+  if (!existsSync3(filePath)) {
     return { error: "File not found" };
   }
   try {
-    const content = readFileSync2(filePath, "utf-8");
+    const raw = readFileSync3(filePath);
+    const hasBOM = raw[0] === 239 && raw[1] === 187 && raw[2] === 191;
+    let content = hasBOM ? raw.subarray(3).toString("utf-8") : raw.toString("utf-8");
+    const lineEnding = content.includes("\r\n") ? "\r\n" : "\n";
+    if (lineEnding === "\r\n") content = content.replace(/\r\n/g, "\n");
+    fileMetadata.set(resolve(filePath), { hasBOM, lineEnding });
     return { content };
   } catch (e) {
     return { error: `Failed to read file: ${e.message}` };
   }
 }
-var BACKUP_DIR = join2(tmpdir(), "openmagic-backups");
+var BACKUP_DIR = join3(tmpdir(), "openmagic-backups");
 var backupMap = /* @__PURE__ */ new Map();
 function getBackupPath(filePath) {
   const hash = createHash("md5").update(resolve(filePath)).digest("hex").slice(0, 12);
   const name = filePath.split(/[/\\]/).pop() || "file";
-  return join2(BACKUP_DIR, `${hash}_${name}`);
+  return join3(BACKUP_DIR, `${hash}_${name}`);
 }
 function getBackupForFile(filePath) {
   return backupMap.get(resolve(filePath));
 }
 function cleanupBackups() {
   try {
-    if (existsSync2(BACKUP_DIR)) {
+    if (existsSync3(BACKUP_DIR)) {
       rmSync(BACKUP_DIR, { recursive: true, force: true });
     }
   } catch {
@@ -173,17 +306,39 @@ function writeFileSafe(filePath, content, roots) {
   }
   try {
     let backupPath;
-    if (existsSync2(filePath)) {
-      if (!existsSync2(BACKUP_DIR)) mkdirSync2(BACKUP_DIR, { recursive: true });
+    if (existsSync3(filePath)) {
+      if (!existsSync3(BACKUP_DIR)) mkdirSync2(BACKUP_DIR, { recursive: true });
       backupPath = getBackupPath(filePath);
       copyFileSync(filePath, backupPath);
       backupMap.set(resolve(filePath), backupPath);
     }
     const dir = dirname(filePath);
-    if (!existsSync2(dir)) {
+    if (!existsSync3(dir)) {
       mkdirSync2(dir, { recursive: true });
     }
-    writeFileSync2(filePath, content, "utf-8");
+    let output = content;
+    const meta = fileMetadata.get(resolve(filePath));
+    if (meta) {
+      if (meta.lineEnding === "\r\n") output = output.replace(/\n/g, "\r\n");
+      if (meta.hasBOM) output = "\uFEFF" + output;
+    }
+    const tmpPath = filePath + ".openmagic-tmp-" + Date.now();
+    writeFileSync2(tmpPath, output, "utf-8");
+    try {
+      const fd = openSync(tmpPath, "r");
+      fsyncSync(fd);
+      closeSync(fd);
+    } catch {
+    }
+    try {
+      renameSync2(tmpPath, filePath);
+    } catch {
+      writeFileSync2(filePath, output, "utf-8");
+      try {
+        unlinkSync(tmpPath);
+      } catch {
+      }
+    }
     return { ok: true, backupPath };
   } catch (e) {
     return { ok: false, error: `Failed to write file: ${e.message}` };
@@ -207,7 +362,7 @@ function listFiles(rootPath, roots, maxDepth = 4) {
       if (entries.length >= MAX_LIST_ENTRIES) return;
       if (IGNORED_DIRS.has(item)) continue;
       if (item.startsWith(".") && item !== ".env.example") continue;
-      const fullPath = join2(dir, item);
+      const fullPath = join3(dir, item);
       let stat;
       try {
         stat = lstatSync(fullPath);
@@ -271,7 +426,7 @@ function grepFiles(pattern, searchRoot, roots, maxResults = 30) {
     for (const item of items) {
       if (results.length >= maxResults || filesScanned >= MAX_GREP_FILES_SCANNED) return;
       if (IGNORED_DIRS.has(item) || item.startsWith(".") && item !== ".env.example") continue;
-      const fullPath = join2(dir, item);
+      const fullPath = join3(dir, item);
       let stat;
       try {
         stat = lstatSync(fullPath);
@@ -287,7 +442,7 @@ function grepFiles(pattern, searchRoot, roots, maxResults = 30) {
         if (stat.size > MAX_GREP_FILE_SIZE) continue;
         filesScanned++;
         try {
-          const content = readFileSync2(fullPath, "utf-8");
+          const content = readFileSync3(fullPath, "utf-8");
           const lines = content.split("\n");
           let fileMatches = 0;
           for (let i = 0; i < lines.length && fileMatches < 5; i++) {
@@ -1065,11 +1220,17 @@ You MUST respond with valid JSON in this exact format:
 5. Keep modifications minimal \u2014 change only what's needed. Do NOT rewrite entire files.
 6. If the grounded files don't contain the code you need to modify, return: {"modifications":[],"explanation":"NEED_FILE: exact/relative/path/to/file.ext"}
 7. To search for a pattern across the codebase, return: {"modifications":[],"explanation":"SEARCH_FILES: \\"pattern\\" in optional/path/"}
-7. For style changes: check the dependencies (package.json) to know if the project uses Tailwind, MUI, etc. Use the project's styling approach, not raw CSS
-8. Use the selected element's cssSelector, className, parentContainerStyles, and siblings to understand the full layout context
-9. Use the page URL route and componentHint to identify the correct source file to modify
-10. Always preserve existing code style, conventions, and indentation
-11. ALWAYS respond with valid JSON only \u2014 no text before or after the JSON object`;
+8. For style changes: check the dependencies (package.json) to know if the project uses Tailwind, MUI, etc. Use the project's styling approach, not raw CSS
+9. Use the selected element's cssSelector, className, parentContainerStyles, and siblings to understand the full layout context
+10. Use the page URL route and componentHint to identify the correct source file to modify
+11. Use childrenLayout pixel measurements for spacing. gapToNext.vertical=0 means elements are touching.
+12. Use resolvedClasses to see actual CSS values behind utility classes (space-y-6 = margin-top: 1.5rem).
+13. Check themeState.darkMode \u2014 if true, use dark-mode-aware colors and respect the project's dark mode classes.
+14. Use cssVariables to leverage existing design tokens (var(--color-primary)) instead of hardcoding hex values.
+15. Check activeBreakpoints to know which responsive breakpoint is active. Suggest responsive-aware changes.
+16. Check visibilityState \u2014 the element may be scrolled out of view, hidden, or inside a scrollable container.
+17. Always preserve existing code style, conventions, and indentation
+18. ALWAYS respond with valid JSON only \u2014 no text before or after the JSON object`;
 function buildContextParts(context) {
   const parts = {};
   if (context.selectedElement) {
@@ -1111,6 +1272,15 @@ function buildContextParts(context) {
     if (el.resolvedClasses?.length) {
       elementData.resolvedClasses = el.resolvedClasses;
     }
+    if (el.themeState) elementData.themeState = el.themeState;
+    if (el.cssVariables && Object.keys(el.cssVariables).length) elementData.cssVariables = el.cssVariables;
+    if (el.stackingContext) elementData.stackingContext = el.stackingContext;
+    if (el.visibilityState) elementData.visibilityState = el.visibilityState;
+    if (el.activeBreakpoints?.length) elementData.activeBreakpoints = el.activeBreakpoints;
+    if (el.pseudoElements && (el.pseudoElements.before !== "none" || el.pseudoElements.after !== "none")) {
+      elementData.pseudoElements = el.pseudoElements;
+    }
+    if (el.formState) elementData.formState = el.formState;
     parts.selectedElement = JSON.stringify(elementData, null, 2);
   }
   if (context.files?.length) {
@@ -1519,13 +1689,13 @@ async function chatGoogle(model, apiKey, messages, context, onChunk, onDone, onE
 }
 
 // src/llm/claude-code.ts
-import { spawn } from "child_process";
+import { spawn as spawn2 } from "child_process";
 async function chatClaudeCode(messages, context, onChunk, onDone, onError) {
   const lastUserMsg = [...messages].reverse().find((m) => m.role === "user");
   const userPrompt = typeof lastUserMsg?.content === "string" ? lastUserMsg.content : "Help me with this element.";
   const contextParts = buildContextParts(context);
   const fullPrompt = buildUserMessage(userPrompt, contextParts);
-  const proc = spawn(
+  const proc = spawn2(
     "claude",
     [
       "-p",
@@ -1639,7 +1809,7 @@ function extractText(event) {
 }
 
 // src/llm/codex-cli.ts
-import { spawn as spawn2 } from "child_process";
+import { spawn as spawn3 } from "child_process";
 async function chatCodexCli(messages, context, onChunk, onDone, onError) {
   const lastUserMsg = [...messages].reverse().find((m) => m.role === "user");
   const userPrompt = typeof lastUserMsg?.content === "string" ? lastUserMsg.content : "Help me with this element.";
@@ -1647,7 +1817,7 @@ async function chatCodexCli(messages, context, onChunk, onDone, onError) {
   const fullPrompt = `${SYSTEM_PROMPT}
 
 ${buildUserMessage(userPrompt, contextParts)}`;
-  const proc = spawn2(
+  const proc = spawn3(
     "codex",
     ["exec", "--full-auto", "--json", "--skip-git-repo-check", "-"],
     {
@@ -1709,20 +1879,17 @@ ${buildUserMessage(userPrompt, contextParts)}`;
   });
 }
 function extractCodexText(event) {
-  if (event.type === "item.completed" || event.type === "item.updated" || event.type === "item.started") {
+  if (event.type === "item.completed") {
     const item = event.item;
     if (item?.type === "agent_message" && typeof item.text === "string") {
       return item.text;
     }
   }
-  if (event.type === "error" && typeof event.message === "string") {
-    return void 0;
-  }
   return void 0;
 }
 
 // src/llm/gemini-cli.ts
-import { spawn as spawn3 } from "child_process";
+import { spawn as spawn4 } from "child_process";
 async function chatGeminiCli(messages, context, onChunk, onDone, onError) {
   const lastUserMsg = [...messages].reverse().find((m) => m.role === "user");
   const userPrompt = typeof lastUserMsg?.content === "string" ? lastUserMsg.content : "Help me with this element.";
@@ -1730,13 +1897,9 @@ async function chatGeminiCli(messages, context, onChunk, onDone, onError) {
   const fullPrompt = `${SYSTEM_PROMPT}
 
 ${buildUserMessage(userPrompt, contextParts)}`;
-  const proc = spawn3(
+  const proc = spawn4(
     "gemini",
     [
-      "-p",
-      userPrompt,
-      "--output-format",
-      "stream-json",
       "--yolo"
     ],
     {
@@ -1744,41 +1907,14 @@ ${buildUserMessage(userPrompt, contextParts)}`;
       cwd: process.cwd()
     }
   );
-  proc.stdin.write(`${SYSTEM_PROMPT}
-
-${buildUserMessage("", contextParts)}`);
+  proc.stdin.write(fullPrompt);
   proc.stdin.end();
   let fullContent = "";
-  let resultContent = "";
-  let buffer = "";
   let errOutput = "";
   proc.stdout.on("data", (data) => {
-    buffer += data.toString();
-    const lines = buffer.split("\n");
-    buffer = lines.pop() || "";
-    for (const line of lines) {
-      if (!line.trim()) continue;
-      try {
-        const event = JSON.parse(line);
-        if (event.type === "result") {
-          if (typeof event.result === "string") {
-            resultContent = event.result;
-          }
-          continue;
-        }
-        const text = extractGeminiText(event);
-        if (text) {
-          fullContent += text;
-          onChunk(text);
-        }
-      } catch {
-        const trimmed = line.trim();
-        if (trimmed) {
-          fullContent += trimmed + "\n";
-          onChunk(trimmed + "\n");
-        }
-      }
-    }
+    const text = data.toString();
+    fullContent += text;
+    onChunk(text);
   });
   proc.stderr.on("data", (data) => {
     errOutput += data.toString();
@@ -1791,23 +1927,8 @@ ${buildUserMessage("", contextParts)}`);
     }
   });
   proc.on("close", (code) => {
-    if (buffer.trim()) {
-      try {
-        const event = JSON.parse(buffer);
-        if (event.type === "result" && typeof event.result === "string") {
-          resultContent = event.result;
-        } else {
-          const text = extractGeminiText(event);
-          if (text) fullContent += text;
-        }
-      } catch {
-        const trimmed = buffer.trim();
-        if (trimmed) fullContent += trimmed;
-      }
-    }
-    const finalContent = resultContent || fullContent;
-    if (code === 0 || finalContent.trim()) {
-      onDone({ content: finalContent });
+    if (code === 0 || fullContent.trim()) {
+      onDone({ content: fullContent });
     } else {
       const err = errOutput.trim();
       if (err.includes("auth") || err.includes("GEMINI_API_KEY") || err.includes("credentials") || err.includes("login")) {
@@ -1818,21 +1939,6 @@ ${buildUserMessage("", contextParts)}`);
     }
   });
 }
-function extractGeminiText(event) {
-  if (event.type === "assistant" || event.type === "message") {
-    const content = event.content ?? event.message?.content;
-    if (Array.isArray(content)) {
-      return content.filter((b) => b.type === "text" && b.text).map((b) => b.text).join("");
-    }
-    if (typeof content === "string") return content;
-    if (typeof event.text === "string") return event.text;
-  }
-  if (event.type === "content_block_delta") {
-    const delta = event.delta;
-    if (typeof delta?.text === "string") return delta.text;
-  }
-  return void 0;
-}
 
 // src/llm/proxy.ts
 var OPENAI_COMPATIBLE_PROVIDERS = /* @__PURE__ */ new Set([
@@ -1850,6 +1956,11 @@ var OPENAI_COMPATIBLE_PROVIDERS = /* @__PURE__ */ new Set([
   "doubao"
 ]);
 function extractJsonFromResponse(content) {
+  try {
+    JSON.parse(content);
+    return content;
+  } catch {
+  }
   const mdMatch = content.match(/```(?:json)?\s*([\s\S]*?)```/);
   if (mdMatch?.[1]) {
     const candidate = mdMatch[1].trim();
@@ -1888,11 +1999,28 @@ function extractJsonFromResponse(content) {
           JSON.parse(candidate);
           return candidate;
         } catch {
-          return null;
+          break;
         }
       }
     }
   }
+  if (depth > 0) {
+    let repaired = content.substring(start);
+    if (inString) repaired += '"';
+    while (depth > 0) {
+      repaired += "}";
+      depth--;
+    }
+    try {
+      JSON.parse(repaired);
+      return repaired;
+    } catch {
+    }
+  }
+  const explMatch = content.match(/"explanation"\s*:\s*"((?:[^"\\]|\\.)*)"/);
+  if (explMatch) {
+    return JSON.stringify({ modifications: [], explanation: JSON.parse('"' + explMatch[1] + '"') });
+  }
   return null;
 }
 async function handleLlmChat(params, onChunk, onDone, onError) {
@@ -1909,13 +2037,19 @@ async function handleLlmChat(params, onChunk, onDone, onError) {
     }
     onDone({ content: result.content, modifications });
   };
+  const cliOnError = (error) => {
+    if (error.includes("not found") || error.includes("ENOENT") || error.includes("not authenticated") || error.includes("not logged in")) {
+      invalidateCliCache();
+    }
+    onError(error);
+  };
   try {
     if (provider === "claude-code") {
-      await chatClaudeCode(messages, context, onChunk, wrappedOnDone, onError);
+      await chatClaudeCode(messages, context, onChunk, wrappedOnDone, cliOnError);
     } else if (provider === "codex-cli") {
-      await chatCodexCli(messages, context, onChunk, wrappedOnDone, onError);
+      await chatCodexCli(messages, context, onChunk, wrappedOnDone, cliOnError);
     } else if (provider === "gemini-cli") {
-      await chatGeminiCli(messages, context, onChunk, wrappedOnDone, onError);
+      await chatGeminiCli(messages, context, onChunk, wrappedOnDone, cliOnError);
     } else if (provider === "anthropic") {
       await chatAnthropic(model, apiKey, messages, context, onChunk, wrappedOnDone, onError);
     } else if (provider === "google") {
@@ -2124,7 +2258,7 @@ async function handleMessage(ws, msg, state, roots) {
         break;
       }
       try {
-        const backupContent = readFileSync3(backupPath, "utf-8");
+        const backupContent = readFileSync4(backupPath, "utf-8");
         const writeResult = writeFileSafe(payload.path, backupContent, roots);
         if (!writeResult.ok) {
           sendError(ws, "fs_error", writeResult.error || "Undo failed", msg.id);
@@ -2179,17 +2313,35 @@ async function handleMessage(ws, msg, state, roots) {
     }
     case "config.get": {
       const config = loadConfig();
+      const detectedClis = await detectAvailableClis();
+      const cliStatuses = detectedClis.map((c) => ({
+        id: c.id,
+        name: c.name,
+        installed: c.installed,
+        authenticated: c.authenticated,
+        version: c.version
+      }));
+      let provider = config.provider || "";
+      let model = config.model || "";
+      if (!provider) {
+        const bestCli = detectedClis.find((c) => c.installed && c.authenticated);
+        if (bestCli) {
+          provider = bestCli.id;
+          model = bestCli.id;
+        }
+      }
       send(ws, {
         id: msg.id,
         type: "config.value",
         payload: {
-          provider: config.provider,
-          model: config.model,
-          hasApiKey: !!(config.apiKeys?.[config.provider || ""] || config.apiKey),
+          provider,
+          model,
+          hasApiKey: !!(config.apiKeys?.[provider] || config.apiKey),
           roots: config.roots || roots,
           apiKeys: Object.fromEntries(
             Object.entries(config.apiKeys || {}).map(([k]) => [k, true])
-          )
+          ),
+          detectedClis: cliStatuses
         }
       });
       break;
@@ -2222,7 +2374,7 @@ async function handleMessage(ws, msg, state, roots) {
         sendError(ws, "invalid_payload", "Missing pattern", msg.id);
         break;
       }
-      const searchRoot = payload.path ? join3(roots[0] || process.cwd(), payload.path) : roots[0] || process.cwd();
+      const searchRoot = payload.path ? join4(roots[0] || process.cwd(), payload.path) : roots[0] || process.cwd();
       const results = grepFiles(payload.pattern, searchRoot, roots);
       send(ws, { id: msg.id, type: "fs.grep.result", payload: { results } });
       break;
@@ -2258,13 +2410,13 @@ function sendError(ws, code, message, id) {
 }
 function serveToolbarBundle(res) {
   const bundlePaths = [
-    join3(__dirname, "toolbar", "index.global.js"),
-    join3(__dirname, "..", "dist", "toolbar", "index.global.js")
+    join4(__dirname, "toolbar", "index.global.js"),
+    join4(__dirname, "..", "dist", "toolbar", "index.global.js")
   ];
   for (const bundlePath of bundlePaths) {
     try {
-      if (existsSync3(bundlePath)) {
-        const content = readFileSync3(bundlePath, "utf-8");
+      if (existsSync4(bundlePath)) {
+        const content = readFileSync4(bundlePath, "utf-8");
         res.writeHead(200, {
           "Content-Type": "application/javascript",
           "Access-Control-Allow-Origin": "*",
@@ -2407,8 +2559,8 @@ function buildInjectionScript(token) {
 
 // src/detect.ts
 import { createConnection } from "net";
-import { readFileSync as readFileSync4, existsSync as existsSync4 } from "fs";
-import { join as join4, resolve as resolve2 } from "path";
+import { readFileSync as readFileSync5, existsSync as existsSync5 } from "fs";
+import { join as join5, resolve as resolve2 } from "path";
 import { execSync } from "child_process";
 var COMMON_DEV_PORTS = [
   3e3,
@@ -2565,11 +2717,11 @@ var FRAMEWORK_PATTERNS = [
 ];
 var DEV_SCRIPT_NAMES = ["dev", "start", "serve", "develop", "dev:start", "start:dev", "server", "dev:server", "web", "frontend"];
 function detectDevScripts(cwd = process.cwd()) {
-  const pkgPath = join4(cwd, "package.json");
-  if (!existsSync4(pkgPath)) return [];
+  const pkgPath = join5(cwd, "package.json");
+  if (!existsSync5(pkgPath)) return [];
   let pkg;
   try {
-    pkg = JSON.parse(readFileSync4(pkgPath, "utf-8"));
+    pkg = JSON.parse(readFileSync5(pkgPath, "utf-8"));
   } catch {
     return [];
   }
@@ -2633,10 +2785,10 @@ function checkNodeCompatibility(framework) {
 function checkEnvPort(cwd = process.cwd()) {
   const envFiles = [".env.local", ".env.development.local", ".env.development", ".env"];
   for (const envFile of envFiles) {
-    const envPath = join4(cwd, envFile);
-    if (!existsSync4(envPath)) continue;
+    const envPath = join5(cwd, envFile);
+    if (!existsSync5(envPath)) continue;
     try {
-      const content = readFileSync4(envPath, "utf-8");
+      const content = readFileSync5(envPath, "utf-8");
       const match = content.match(/^PORT\s*=\s*(\d+)/m);
       if (match) return parseInt(match[1], 10);
     } catch {
@@ -2653,8 +2805,8 @@ function scanParentLockfiles(projectDir) {
   let dir = resolve2(project, "..");
   while (dir.length > 1 && dir.length >= home.length) {
     for (const lockfile of LOCKFILE_NAMES) {
-      const p = join4(dir, lockfile);
-      if (existsSync4(p)) found.push(p);
+      const p = join5(dir, lockfile);
+      if (existsSync5(p)) found.push(p);
     }
     const parent = resolve2(dir, "..");
     if (parent === dir) break;
@@ -2663,10 +2815,10 @@ function scanParentLockfiles(projectDir) {
   return found;
 }
 function getProjectName(cwd = process.cwd()) {
-  const pkgPath = join4(cwd, "package.json");
-  if (!existsSync4(pkgPath)) return "this project";
+  const pkgPath = join5(cwd, "package.json");
+  if (!existsSync5(pkgPath)) return "this project";
   try {
-    const pkg = JSON.parse(readFileSync4(pkgPath, "utf-8"));
+    const pkg = JSON.parse(readFileSync5(pkgPath, "utf-8"));
     return pkg.name || "this project";
   } catch {
     return "this project";
@@ -2686,10 +2838,10 @@ var INSTALL_COMMANDS = {
   bun: "bun install"
 };
 function checkDependenciesInstalled(cwd = process.cwd()) {
-  const hasNodeModules = existsSync4(join4(cwd, "node_modules"));
+  const hasNodeModules = existsSync5(join5(cwd, "node_modules"));
   let pm = "npm";
   for (const { file, pm: detectedPm } of LOCK_FILES) {
-    if (existsSync4(join4(cwd, file))) {
+    if (existsSync5(join5(cwd, file))) {
       pm = detectedPm;
       break;
     }
@@ -2730,6 +2882,59 @@ function ask(question) {
     });
   });
 }
+function waitForPortClose(port, timeoutMs = 1e4) {
+  const start = Date.now();
+  return new Promise((resolve4) => {
+    const check = async () => {
+      if (!await isPortOpen(port)) {
+        resolve4(true);
+        return;
+      }
+      if (Date.now() - start > timeoutMs) {
+        resolve4(false);
+        return;
+      }
+      setTimeout(check, 300);
+    };
+    check();
+  });
+}
+function killPortProcess(port) {
+  try {
+    const pidOutput = execSync2(`lsof -i :${port} -sTCP:LISTEN -t 2>/dev/null`, {
+      encoding: "utf-8",
+      timeout: 3e3
+    }).trim();
+    if (!pidOutput) return false;
+    const pids = pidOutput.split("\n").map((p) => p.trim()).filter(Boolean);
+    for (const pid of pids) {
+      try {
+        process.kill(parseInt(pid, 10), "SIGTERM");
+      } catch {
+      }
+    }
+    return pids.length > 0;
+  } catch {
+    return false;
+  }
+}
+function isPortHealthy(host, port) {
+  return new Promise((resolve4) => {
+    const req = http2.get(
+      `http://${host}:${port}/`,
+      { timeout: 3e3 },
+      (res) => {
+        resolve4(res.statusCode !== void 0 && res.statusCode < 400);
+        res.resume();
+      }
+    );
+    req.on("error", () => resolve4(false));
+    req.on("timeout", () => {
+      req.destroy();
+      resolve4(false);
+    });
+  });
+}
 function waitForPort(port, timeoutMs = 6e4, shouldAbort) {
   const start = Date.now();
   return new Promise((resolve4) => {
@@ -2756,7 +2961,7 @@ function waitForPort(port, timeoutMs = 6e4, shouldAbort) {
 function runCommand(cmd, args, cwd = process.cwd()) {
   return new Promise((resolve4) => {
     try {
-      const child = spawn4(cmd, args, {
+      const child = spawn5(cmd, args, {
         cwd,
         stdio: ["ignore", "pipe", "pipe"],
         shell: true
@@ -2894,8 +3099,49 @@ program.name("openmagic").description("AI-powered coding toolbar for any web app
     console.log(chalk.dim("  Scanning for dev server..."));
     const detected = await detectDevServer();
     if (detected && detected.fromScripts) {
-      targetPort = detected.port;
-      targetHost = detected.host;
+      const healthy = await isPortHealthy(detected.host, detected.port);
+      if (healthy) {
+        targetPort = detected.port;
+        targetHost = detected.host;
+      } else {
+        console.log(chalk.yellow(`  \u26A0  Dev server on port ${detected.port} is not responding properly.`));
+        console.log(chalk.dim("     Cleaning up orphaned process..."));
+        killPortProcess(detected.port);
+        const freed = await waitForPortClose(detected.port, 5e3);
+        if (!freed) {
+          try {
+            const pidOutput = execSync2(`lsof -i :${detected.port} -sTCP:LISTEN -t 2>/dev/null`, {
+              encoding: "utf-8",
+              timeout: 3e3
+            }).trim();
+            for (const pid of pidOutput.split("\n").filter(Boolean)) {
+              try {
+                process.kill(parseInt(pid, 10), "SIGKILL");
+              } catch {
+              }
+            }
+            await waitForPortClose(detected.port, 3e3);
+          } catch {
+          }
+        }
+        const started = await offerToStartDevServer();
+        if (!started) {
+          process.exit(1);
+        }
+        if (lastDetectedPort) {
+          targetPort = lastDetectedPort;
+        } else {
+          const redetected = await detectDevServer();
+          if (redetected) {
+            targetPort = redetected.port;
+            targetHost = redetected.host;
+          } else {
+            console.log(chalk.red("  \u2717  Could not detect the dev server after starting."));
+            console.log(chalk.dim("     Try specifying the port: npx openmagic --port 3000"));
+            process.exit(1);
+          }
+        }
+      }
     } else if (detected && !detected.fromScripts) {
       const answer = await ask(
         chalk.yellow(`  Found a server on port ${detected.port}. Is this your project's dev server? `) + chalk.dim("(y/n) ")
@@ -2987,58 +3233,89 @@ program.name("openmagic").description("AI-powered coding toolbar for any web app
     }
   });
   let shuttingDown = false;
-  const shutdown = () => {
+  const shutdown = async () => {
     if (shuttingDown) return;
     shuttingDown = true;
     console.log("");
     console.log(chalk.dim("  Shutting down OpenMagic..."));
     cleanupBackups();
     proxyServer.close();
-    for (const cp of childProcesses) {
+    const alive = childProcesses.filter((cp) => cp.exitCode === null);
+    for (const cp of alive) {
       try {
         cp.kill("SIGTERM");
       } catch {
       }
     }
-    const forceExit = setTimeout(() => {
-      for (const cp of childProcesses) {
-        try {
-          cp.kill("SIGKILL");
-        } catch {
+    if (targetPort) {
+      killPortProcess(targetPort);
+    }
+    if (targetPort && await isPortOpen(targetPort)) {
+      const freed = await waitForPortClose(targetPort, 4e3);
+      if (!freed) {
+        console.log(chalk.dim("  Force-killing remaining processes..."));
+        if (targetPort) {
+          try {
+            const pids = execSync2(`lsof -i :${targetPort} -sTCP:LISTEN -t 2>/dev/null`, {
+              encoding: "utf-8",
+              timeout: 2e3
+            }).trim().split("\n").filter(Boolean);
+            for (const pid of pids) {
+              try {
+                process.kill(parseInt(pid, 10), "SIGKILL");
+              } catch {
+              }
+            }
+          } catch {
+          }
         }
-      }
-      process.exit(0);
-    }, 2e3);
-    forceExit.unref();
-    const allDead = childProcesses.every((cp) => cp.killed || cp.exitCode !== null);
-    if (allDead) {
-      clearTimeout(forceExit);
-      process.exit(0);
-    }
-    let remaining = childProcesses.filter((cp) => !cp.killed && cp.exitCode === null).length;
-    if (remaining === 0) {
-      clearTimeout(forceExit);
-      process.exit(0);
-    }
-    for (const cp of childProcesses) {
-      cp.once("exit", () => {
-        remaining--;
-        if (remaining <= 0) {
-          clearTimeout(forceExit);
-          process.exit(0);
+        for (const cp of childProcesses) {
+          if (cp.exitCode === null) {
+            try {
+              cp.kill("SIGKILL");
+            } catch {
+            }
+          }
         }
-      });
+        await new Promise((r) => setTimeout(r, 300));
+      }
+    } else {
+      if (alive.length > 0) {
+        await Promise.race([
+          Promise.all(alive.map((cp) => new Promise((r) => {
+            if (cp.exitCode !== null) {
+              r();
+              return;
+            }
+            cp.once("exit", () => r());
+          }))),
+          new Promise((r) => setTimeout(() => {
+            for (const cp of childProcesses) {
+              if (cp.exitCode === null) try {
+                cp.kill("SIGKILL");
+              } catch {
+              }
+            }
+            setTimeout(r, 200);
+          }, 3e3))
+        ]);
+      }
     }
+    process.exit(0);
   };
-  process.on("SIGINT", shutdown);
-  process.on("SIGTERM", shutdown);
+  process.on("SIGINT", () => {
+    shutdown();
+  });
+  process.on("SIGTERM", () => {
+    shutdown();
+  });
 });
 async function offerToStartDevServer(expectedPort) {
   const projectName = getProjectName();
   const scripts = detectDevScripts();
   if (scripts.length === 0) {
-    const htmlPath = join5(process.cwd(), "index.html");
-    if (existsSync5(htmlPath)) {
+    const htmlPath = join6(process.cwd(), "index.html");
+    if (existsSync6(htmlPath)) {
       console.log(
         chalk.dim("  No dev scripts found, but index.html detected.")
       );
@@ -3051,7 +3328,7 @@ async function offerToStartDevServer(expectedPort) {
       }
       const staticPort = expectedPort || 8080;
       console.log(chalk.dim(`  Starting static server on port ${staticPort}...`));
-      const staticChild = spawn4("node", ["-e", `
+      const staticChild = spawn5("node", ["-e", `
         const http = require("http");
         const fs = require("fs");
         const path = require("path");
@@ -3225,7 +3502,7 @@ async function offerToStartDevServer(expectedPort) {
   }
   let child;
   try {
-    child = spawn4(runCmd, runArgs, {
+    child = spawn5(runCmd, runArgs, {
       cwd: process.cwd(),
       stdio: "inherit",
       env: {
@@ -3253,25 +3530,16 @@ async function offerToStartDevServer(expectedPort) {
   \u2717  Dev server exited with code ${code}`));
     }
   });
-  const cleanup = () => {
+  process.once("exit", () => {
     for (const cp of childProcesses) {
-      try {
-        cp.kill("SIGTERM");
-      } catch {
-      }
-    }
-    setTimeout(() => {
-      for (const cp of childProcesses) {
+      if (cp.exitCode === null) {
         try {
           cp.kill("SIGKILL");
         } catch {
         }
       }
-    }, 3e3);
-  };
-  process.once("exit", cleanup);
-  process.once("SIGINT", cleanup);
-  process.once("SIGTERM", cleanup);
+    }
+  });
   console.log(
     chalk.dim(`  Waiting for dev server on port ${port}...`)
   );
@@ -3302,9 +3570,9 @@ async function offerToStartDevServer(expectedPort) {
     );
     console.log("");
     try {
-      const pkgPath = join5(process.cwd(), "package.json");
-      if (existsSync5(pkgPath)) {
-        const pkg = JSON.parse(readFileSync5(pkgPath, "utf-8"));
+      const pkgPath = join6(process.cwd(), "package.json");
+      if (existsSync6(pkgPath)) {
+        const pkg = JSON.parse(readFileSync6(pkgPath, "utf-8"));
         if (pkg.engines?.node) {
           console.log(chalk.yellow(`  This project requires Node.js ${pkg.engines.node}`));
           console.log(chalk.dim(`  You are running Node.js ${process.version}`));