next-ai-editor 0.1.1 → 0.1.3

package/dist/{index-BFa7H-uO.js → index-DrmEf13c.js}

@@ -1,12 +1,13 @@
 import { NextResponse } from "next/server";
 import fs from "fs/promises";
-import * as parser from "@babel/parser";
 import { ChatAnthropic } from "@langchain/anthropic";
 import { SystemMessage, HumanMessage } from "@langchain/core/messages";
 import path from "path";
+import * as parser from "@babel/parser";
 import traverse from "@babel/traverse";
 import * as t from "@babel/types";
 import { SourceMapConsumer } from "@jridgewell/source-map";
+import { c as cleanPath, s as shouldSkipPath, n as normalizeSourcePath } from "./path-utils-Bai2xKx9.js";
 import crypto from "crypto";
 function validateDevMode() {
   if (process.env.NODE_ENV !== "development") {
@@ -65,9 +66,79 @@ function parseFile(content) {
     return null;
   }
 }
+function extractComponentName(ast) {
+  let componentName = null;
+  traverse(ast, {
+    ExportDefaultDeclaration(path2) {
+      var _a;
+      if (t.isFunctionDeclaration(path2.node.declaration)) {
+        componentName = ((_a = path2.node.declaration.id) == null ? void 0 : _a.name) || null;
+      } else if (t.isArrowFunctionExpression(path2.node.declaration)) {
+        componentName = "default";
+      } else if (t.isIdentifier(path2.node.declaration)) {
+        componentName = path2.node.declaration.name;
+      }
+    },
+    ExportNamedDeclaration(path2) {
+      var _a;
+      if (t.isFunctionDeclaration(path2.node.declaration)) {
+        componentName = ((_a = path2.node.declaration.id) == null ? void 0 : _a.name) || null;
+      } else if (t.isVariableDeclaration(path2.node.declaration)) {
+        const declarator = path2.node.declaration.declarations[0];
+        if (t.isIdentifier(declarator.id)) {
+          componentName = declarator.id.name;
+        }
+      } else if (path2.node.specifiers && path2.node.specifiers.length > 0) {
+        const specifier = path2.node.specifiers[0];
+        if (t.isExportSpecifier(specifier) && t.isIdentifier(specifier.exported)) {
+          componentName = specifier.exported.name;
+        }
+      }
+    }
+  });
+  return componentName;
+}
+function validateGeneratedCode(newCode, originalCode, fileContent) {
+  try {
+    const isFullComponent = /^(export\s+)?(default\s+)?function\s+\w+/.test(newCode.trim()) || /^(export\s+)?(default\s+)?const\s+\w+\s*=/.test(newCode.trim());
+    if (isFullComponent) {
+      let codeToValidate = newCode;
+      if (fileContent) {
+        const interfaceMatches = fileContent.match(
+          /^(interface|type)\s+\w+[^}]*\}/gm
+        );
+        if (interfaceMatches) {
+          codeToValidate = interfaceMatches.join("\n\n") + "\n\n" + newCode;
+        }
+      }
+      parser.parse(codeToValidate, {
+        sourceType: "module",
+        plugins: ["jsx", "typescript"]
+      });
+    } else {
+      const wrapped = `function _() { return (${newCode}); }`;
+      parser.parse(wrapped, {
+        sourceType: "module",
+        plugins: ["jsx", "typescript"]
+      });
+    }
+  } catch (e) {
+    console.error("Generated code parse error:", e);
+    return false;
+  }
+  const origBraces = (originalCode.match(/[{}]/g) || []).length;
+  const newBraces = (newCode.match(/[{}]/g) || []).length;
+  const origTags = (originalCode.match(/[<>]/g) || []).length;
+  const newTags = (newCode.match(/[<>]/g) || []).length;
+  if (Math.abs(origBraces - newBraces) > 4 || Math.abs(origTags - newTags) > 4) {
+    console.warn(
+      `Structure changed significantly: braces ${origBraces}->${newBraces}, tags ${origTags}->${newTags}`
+    );
+  }
+  return true;
+}
 function findTargetElement(ast, fileContent, options) {
   const { componentName, lineNumber, elementContext } = options;
-  const matches = [];
   let componentNode = null;
   let componentStart = 0;
   let componentEnd = Infinity;
@@ -118,6 +189,7 @@ function findTargetElement(ast, fileContent, options) {
     componentEnd = fallback.end;
   }
   const allElementsByTag = /* @__PURE__ */ new Map();
+  const elementsAtLine = [];
   traverse(ast, {
     JSXElement(path2) {
       const loc = path2.node.loc;
@@ -133,59 +205,107 @@ function findTargetElement(ast, fileContent, options) {
         }
         allElementsByTag.get(tagName).push({ node: path2.node, startLine, endLine, score: 0 });
       }
-      if (elementContext) {
-        const score = scoreElementMatch(path2.node, elementContext, fileContent);
-        if (score > 0) {
-          matches.push({ node: path2.node, startLine, endLine, score });
-        }
-      } else if (Math.abs(startLine - lineNumber) <= 5) {
-        matches.push({
-          node: path2.node,
-          startLine,
-          endLine,
-          score: 100 - Math.abs(startLine - lineNumber)
-        });
+      if (startLine === lineNumber) {
+        elementsAtLine.push({ node: path2.node, startLine, endLine, score: 0 });
       }
     }
   });
-  if (matches.length === 0) {
-    if (componentNode && componentStart > 0) {
+  if (elementsAtLine.length > 0) {
+    if (elementsAtLine.length === 1) {
+      const target = elementsAtLine[0];
       return {
-        startLine: componentStart,
-        endLine: componentEnd,
+        startLine: target.startLine,
+        endLine: target.endLine,
         componentStart,
         componentEnd
       };
     }
-    return null;
+    if (elementContext) {
+      for (const elem of elementsAtLine) {
+        if (t.isJSXElement(elem.node)) {
+          const score = scoreElementMatch(elem.node, elementContext, fileContent);
+          elem.score = score;
+        }
+      }
+      elementsAtLine.sort((a, b) => b.score - a.score);
+      if (elementsAtLine[0].score > 0) {
+        return {
+          startLine: elementsAtLine[0].startLine,
+          endLine: elementsAtLine[0].endLine,
+          componentStart,
+          componentEnd
+        };
+      }
+    }
+    return {
+      startLine: elementsAtLine[0].startLine,
+      endLine: elementsAtLine[0].endLine,
+      componentStart,
+      componentEnd
+    };
   }
-  if ((elementContext == null ? void 0 : elementContext.nthOfType) && elementContext.tagName) {
+  if (elementContext == null ? void 0 : elementContext.tagName) {
     const allOfTag = allElementsByTag.get(elementContext.tagName);
-    if (allOfTag && allOfTag.length >= elementContext.nthOfType) {
-      const target = allOfTag[elementContext.nthOfType - 1];
-      console.log(
-        `   Using nthOfType=${elementContext.nthOfType}: found ${allOfTag.length} <${elementContext.tagName}> elements`
-      );
-      return {
-        startLine: target.startLine,
-        endLine: target.endLine,
-        componentStart,
-        componentEnd
-      };
-    } else {
-      console.log(
-        `   nthOfType=${elementContext.nthOfType} but only found ${(allOfTag == null ? void 0 : allOfTag.length) || 0} <${elementContext.tagName}> elements`
-      );
+    if (allOfTag && allOfTag.length > 0) {
+      if (elementContext.textContent || elementContext.className) {
+        for (const elem of allOfTag) {
+          if (t.isJSXElement(elem.node)) {
+            elem.score = scoreElementMatch(elem.node, elementContext, fileContent);
+          }
+        }
+        allOfTag.sort((a, b) => b.score - a.score);
+        if (allOfTag[0].score > 50) {
+          return {
+            startLine: allOfTag[0].startLine,
+            endLine: allOfTag[0].endLine,
+            componentStart,
+            componentEnd
+          };
+        }
+      }
+      if (elementContext.nthOfType && allOfTag.length >= elementContext.nthOfType) {
+        const target = allOfTag[elementContext.nthOfType - 1];
+        return {
+          startLine: target.startLine,
+          endLine: target.endLine,
+          componentStart,
+          componentEnd
+        };
+      }
+    }
+  }
+  const nearbyElements = [];
+  traverse(ast, {
+    JSXElement(path2) {
+      const loc = path2.node.loc;
+      if (!loc) return;
+      const startLine = loc.start.line;
+      const endLine = loc.end.line;
+      if (startLine < componentStart || endLine > componentEnd) return;
+      if (Math.abs(startLine - lineNumber) <= 5) {
+        const score = elementContext ? scoreElementMatch(path2.node, elementContext, fileContent) : 100 - Math.abs(startLine - lineNumber);
+        nearbyElements.push({ node: path2.node, startLine, endLine, score });
+      }
     }
+  });
+  if (nearbyElements.length > 0) {
+    nearbyElements.sort((a, b) => b.score - a.score);
+    return {
+      startLine: nearbyElements[0].startLine,
+      endLine: nearbyElements[0].endLine,
+      componentStart,
+      componentEnd
+    };
+  }
+  if (componentNode && componentStart > 0) {
+    return {
+      startLine: componentStart,
+      endLine: componentEnd,
+      componentStart,
+      componentEnd
+    };
   }
-  matches.sort((a, b) => b.score - a.score);
-  const best = matches[0];
-  return {
-    startLine: best.startLine,
-    endLine: best.endLine,
-    componentStart,
-    componentEnd
-  };
+  return null;
 }
 function scoreElementMatch(node, context, fileContent) {
   let score = 0;
@@ -269,7 +389,8 @@ async function handleEdit(req) {
       componentName,
       suggestion,
       elementContext,
-      editHistory
+      editHistory,
+      parentInstance
     } = body;
     const projectRoot = process.cwd();
     const normalizedPath = normalizePath(filePath);
@@ -281,7 +402,6 @@ async function handleEdit(req) {
       );
     }
     const fileContent = await fs.readFile(absolutePath, "utf-8");
-    console.log(`[/edit] componentName="${componentName}", filePath="${filePath}"`);
     const ast = parseFile(fileContent);
     if (!ast) {
       return NextResponse.json(
@@ -300,20 +420,10 @@ async function handleEdit(req) {
         { status: 400 }
       );
     }
-    console.log(
-      `📍 Found element <${(elementContext == null ? void 0 : elementContext.tagName) || "component"}> at lines ${target.startLine}-${target.endLine} (component: ${target.componentStart}-${target.componentEnd})`
-    );
-    console.log(
-      `   Element context: tagName=${elementContext == null ? void 0 : elementContext.tagName}, nthOfType=${elementContext == null ? void 0 : elementContext.nthOfType}, textContent="${elementContext == null ? void 0 : elementContext.textContent}"`
-    );
     const lines = fileContent.split("\n");
-    const foundElementCode = lines.slice(target.startLine - 1, Math.min(target.startLine + 2, target.endLine)).join("\n");
-    console.log(`   Found element preview:
-${foundElementCode}`);
     const targetCode = lines.slice(target.startLine - 1, target.endLine).join("\n");
     const baseIndentation = ((_a = lines[target.startLine - 1].match(/^(\s*)/)) == null ? void 0 : _a[1]) || "";
     if (target.componentStart <= 0 || target.componentEnd === Infinity) {
-      console.error("❌ Invalid component bounds detected");
       return NextResponse.json({
         success: false,
         error: `Could not determine component bounds. Component: ${target.componentStart}-${target.componentEnd}`
@@ -351,7 +461,8 @@ ${foundElementCode}`);
       targetEndLine: target.endLine,
       componentStart: target.componentStart,
       componentEnd: target.componentEnd,
-      editHistory: editHistory || []
+      editHistory: editHistory || [],
+      parentInstance
     });
     if (!newCode) {
       return NextResponse.json({
@@ -359,38 +470,56 @@ ${foundElementCode}`);
         error: "AI failed to generate valid edit"
       });
     }
-    console.log("Raw AI response length:", newCode.length);
-    console.log("Looking for // FULL_COMPONENT marker...");
+    const parentInstanceMatch = newCode.match(/\/\/ EDIT_PARENT_INSTANCE\s*\n([\s\S]+)/);
+    if (parentInstanceMatch && parentInstance) {
+      const parentCode = parentInstanceMatch[1].trim();
+      const parentNormalizedPath = normalizePath(parentInstance.filePath);
+      const parentAbsolutePath = await resolveFilePath(projectRoot, parentNormalizedPath);
+      if (!parentAbsolutePath) {
+        return NextResponse.json({
+          success: false,
+          error: `Parent file not found: ${parentNormalizedPath}`
+        });
+      }
+      const parentFileContent = await fs.readFile(parentAbsolutePath, "utf-8");
+      const parentLines = parentFileContent.split("\n");
+      const newParentLines = [...parentLines];
+      newParentLines.splice(
+        parentInstance.lineStart - 1,
+        parentInstance.lineEnd - parentInstance.lineStart + 1,
+        ...parentCode.split("\n")
+      );
+      await fs.writeFile(parentAbsolutePath, newParentLines.join("\n"), "utf-8");
+      return NextResponse.json({
+        success: true,
+        fileSnapshot: parentFileContent,
+        generatedCode: parentCode,
+        modifiedLines: {
+          start: parentInstance.lineStart,
+          end: parentInstance.lineEnd
+        },
+        editedFile: parentInstance.filePath
+        // Indicate which file was edited
+      });
+    }
     const fullComponentMatch = newCode.match(/\/\/ FULL_COMPONENT\s*\n([\s\S]+)/);
     let codeToApply = newCode;
     let startLineToReplace = target.startLine;
     let endLineToReplace = target.endLine;
+    const isFullComponentDeclaration = /^(export\s+)?(default\s+)?function\s+\w+/.test(newCode.trim()) || /^(export\s+)?const\s+\w+\s*=/.test(newCode.trim());
     if (fullComponentMatch) {
-      console.log("Found // FULL_COMPONENT marker, extracting full component code");
       codeToApply = fullComponentMatch[1].trim();
       startLineToReplace = target.componentStart;
       endLineToReplace = target.componentEnd;
-      console.log(
-        `🔄 AI returned full component modification (lines ${startLineToReplace}-${endLineToReplace})`
-      );
-      console.log("Extracted component code length:", codeToApply.length);
-      console.log("Extracted component code (first 300 chars):", codeToApply.substring(0, 300));
-    } else {
-      console.log("No // FULL_COMPONENT marker found, treating as target element modification");
-      console.log(
-        `🔄 AI returned target element modification (lines ${startLineToReplace}-${endLineToReplace})`
-      );
+    } else if (isFullComponentDeclaration && target.startLine !== target.componentStart) {
+      codeToApply = newCode;
+      startLineToReplace = target.componentStart;
+      endLineToReplace = target.componentEnd;
     }
-    console.log("Code to apply (first 200 chars):", codeToApply.substring(0, 200));
     if (!validateGeneratedCode(codeToApply, targetCode, fileContent)) {
-      console.error("❌ Generated code failed validation");
-      console.error("=== Generated code START ===");
-      console.error(codeToApply);
-      console.error("=== Generated code END ===");
-      console.error(`Length: ${codeToApply.length} chars, ${codeToApply.split("\n").length} lines`);
       return NextResponse.json({
         success: false,
-        error: "Generated code is invalid - check server logs for details"
+        error: "Generated code is invalid"
       });
     }
     const newLines = [...lines];
@@ -400,7 +529,6 @@ ${foundElementCode}`);
       ...codeToApply.split("\n")
     );
     await fs.writeFile(absolutePath, newLines.join("\n"), "utf-8");
-    console.log(`✅ Updated ${normalizedPath}`);
     return NextResponse.json({
       success: true,
       fileSnapshot: fileContent,
@@ -410,10 +538,11 @@ ${foundElementCode}`);
       modifiedLines: {
         start: startLineToReplace,
         end: endLineToReplace
-      }
+      },
+      editedFile: filePath
+      // Indicate which file was edited
     });
   } catch (error) {
-    console.error("AI Editor error:", error);
     return NextResponse.json(
       { success: false, error: String(error) },
       { status: 500 }
@@ -425,7 +554,8 @@ async function generateEdit(options) {
     fullComponentCode,
     suggestion,
     baseIndentation,
-    editHistory
+    editHistory,
+    parentInstance
   } = options;
   const apiKey = process.env.ANTHROPIC_API_KEY;
   if (!apiKey) throw new Error("ANTHROPIC_API_KEY not set");
@@ -438,25 +568,29 @@ async function generateEdit(options) {
   const systemPrompt = `You are a precise code editor for React/JSX components.
 
 WHAT YOU'LL SEE:
-- Full component code with line annotations
-- The clicked element is marked with "// ← CLICKED ELEMENT STARTS" and "// ← CLICKED ELEMENT ENDS"
-- Lines within the element have "// ← (clicked element)"
-- These are just annotations to help you - they are NOT part of the actual code
+- Component Definition: Full code of the clicked component with line annotations
+  * The clicked element is marked with "// ← CLICKED ELEMENT STARTS" and "// ← CLICKED ELEMENT ENDS"
+  * These are just annotations - NOT part of the actual code
+${parentInstance ? `- Parent Instance: Where this component is used, with "// ← COMPONENT USAGE" marking the usage line` : ""}
+
+YOUR DECISION - Choose ONE approach based on the user's request:
 
-YOUR TASK:
-Modify ONLY the marked element (unless the request requires changing its parent/wrapper).
+1. EDIT COMPONENT DEFINITION (most common):
+   - Modify styling, layout, or behavior that should apply to ALL instances
+   - Example requests: "make the button blue", "add padding", "change font size"
+   - Output: Just the modified element OR "// FULL_COMPONENT\\n" + complete modified component
 
-OUTPUT:
-- Just the modified element code (WITHOUT the annotation comments)
-- OR if broader changes needed: "// FULL_COMPONENT\\n" + complete modified component (WITHOUT annotation comments)
+${parentInstance ? `2. EDIT PARENT INSTANCE (when user wants to modify THIS specific usage):
+   - Change props, text, or configuration for THIS specific instance only
+   - Example requests: "change this title to...", "remove this card", "add another button here"
+   - Output: "// EDIT_PARENT_INSTANCE\\n" + complete modified parent component` : ""}
 
 RULES:
 - Output ONLY code, no explanations
 - No markdown fences
-- Do NOT include the "// ← CLICKED ELEMENT" annotation comments in your output
+- Do NOT include annotation comments in your output
 - Preserve indentation
-- Make minimal changes
-- Do NOT modify unrelated elements`;
+- Make minimal changes`;
   let userPrompt = "";
   if (editHistory.length > 0) {
     userPrompt += "Previous edits made to this element:\n";
@@ -466,16 +600,36 @@ RULES:
     });
     userPrompt += "\n";
   }
-  userPrompt += `Component (clicked element is annotated with "// ← CLICKED ELEMENT" comments):
+  userPrompt += `COMPONENT DEFINITION (clicked element is annotated):
 
 \`\`\`jsx
 ${fullComponentCode}
 \`\`\`
+`;
+  if (parentInstance) {
+    const parentLines = parentInstance.content.split("\n");
+    const annotatedParentLines = parentLines.map((line, idx) => {
+      const lineNum = parentInstance.lineStart + idx;
+      const isUsageLine = lineNum >= parentInstance.usageLineStart && lineNum <= parentInstance.usageLineEnd;
+      return line + (isUsageLine ? " // ← COMPONENT USAGE" : "");
+    });
+    userPrompt += `
+PARENT INSTANCE (where component is used - in ${parentInstance.filePath}):
 
+\`\`\`jsx
+${annotatedParentLines.join("\n")}
+\`\`\`
+`;
+  }
+  userPrompt += `
 User request: "${suggestion}"
-${editHistory.length > 0 ? "\n(Build upon previous changes)" : ""}
+${editHistory.length > 0 ? "(Build upon previous changes)" : ""}
+
+${parentInstance ? `Decide whether to:
+1. Edit the component definition (for changes that affect ALL instances)
+2. Edit the parent instance (for changes specific to THIS usage)
 
-Modify the annotated element to fulfill this request. Remember: do NOT include the annotation comments in your output.`;
+Then output the appropriate code with the correct marker.` : `Modify the annotated element to fulfill this request. Remember: do NOT include the annotation comments in your output.`}`;
   try {
     const response = await model.invoke([
       new SystemMessage(systemPrompt),
@@ -485,12 +639,18 @@ Modify the annotated element to fulfill this request. Remember: do NOT include t
     code = cleanGeneratedCode(code, baseIndentation);
     return code || null;
   } catch (e) {
-    console.error("AI generation error:", e);
     return null;
   }
 }
 function cleanGeneratedCode(code, baseIndentation) {
   var _a, _b, _c;
+  const isParentEdit = code.trim().startsWith("// EDIT_PARENT_INSTANCE");
+  if (isParentEdit) {
+    const marker2 = "// EDIT_PARENT_INSTANCE\n";
+    code = code.replace(/^\/\/ EDIT_PARENT_INSTANCE\n?/, "");
+    code = code.replace(/^```[\w]*\n?/gm, "").replace(/\n?```$/gm, "").replace(/\s*\/\/ ← COMPONENT USAGE/g, "").trim();
+    return marker2 + code;
+  }
   const isFullComponent = code.trim().startsWith("// FULL_COMPONENT");
   let marker = "";
   if (isFullComponent) {
@@ -521,43 +681,6 @@ function cleanGeneratedCode(code, baseIndentation) {
   }
   return marker + code;
 }
-function validateGeneratedCode(newCode, originalCode, fileContent) {
-  try {
-    const isFullComponent = /^(export\s+)?(default\s+)?function\s+\w+/.test(newCode.trim()) || /^(export\s+)?(default\s+)?const\s+\w+\s*=/.test(newCode.trim());
-    if (isFullComponent) {
-      let codeToValidate = newCode;
-      if (fileContent) {
-        const interfaceMatches = fileContent.match(/^(interface|type)\s+\w+[^}]*\}/gm);
-        if (interfaceMatches) {
-          codeToValidate = interfaceMatches.join("\n\n") + "\n\n" + newCode;
-        }
-      }
-      parser.parse(codeToValidate, {
-        sourceType: "module",
-        plugins: ["jsx", "typescript"]
-      });
-    } else {
-      const wrapped = `function _() { return (${newCode}); }`;
-      parser.parse(wrapped, {
-        sourceType: "module",
-        plugins: ["jsx", "typescript"]
-      });
-    }
-  } catch (e) {
-    console.error("Generated code parse error:", e);
-    return false;
-  }
-  const origBraces = (originalCode.match(/[{}]/g) || []).length;
-  const newBraces = (newCode.match(/[{}]/g) || []).length;
-  const origTags = (originalCode.match(/[<>]/g) || []).length;
-  const newTags = (newCode.match(/[<>]/g) || []).length;
-  if (Math.abs(origBraces - newBraces) > 4 || Math.abs(origTags - newTags) > 4) {
-    console.warn(
-      `Structure changed significantly: braces ${origBraces}->${newBraces}, tags ${origTags}->${newTags}`
-    );
-  }
-  return true;
-}
 function parseDebugStack(stack) {
   if (!stack) return null;
   const stackStr = typeof stack === "string" ? stack : stack.stack || String(stack);
@@ -582,8 +705,8 @@ function parseDebugStack(stack) {
         chunkId = chunkMatch[1];
         filePath = filePath.replace(/\?[^:]*$/, "");
       }
-      filePath = cleanPathTurbopack(filePath);
-      if (!shouldSkip(filePath)) {
+      filePath = cleanPath(filePath);
+      if (!shouldSkipPath(filePath)) {
         console.log("parseDebugStack extracted:", { filePath, line, column });
         return { filePath, line, column, chunkId };
       }
@@ -595,46 +718,73 @@ function parseDebugStack(stack) {
   );
   return null;
 }
-function cleanPathTurbopack(p) {
-  let cleaned = p;
-  cleaned = cleaned.replace(/^about:\/\/React\/Server\//, "");
-  if (cleaned.startsWith("file://")) {
-    cleaned = cleaned.replace(/^file:\/\//, "");
-  }
-  try {
-    if (cleaned.includes("%")) {
-      cleaned = decodeURIComponent(cleaned);
+function extractComponentNameFromStack(stack) {
+  if (!stack) return null;
+  const stackStr = typeof stack === "string" ? stack : stack.stack || String(stack);
+  const frames = stackStr.split("\n");
+  const skipPatterns = [
+    "node_modules",
+    "SegmentViewNode",
+    "LayoutRouter",
+    "ErrorBoundary",
+    "fakeJSXCallSite",
+    "react_stack_bottom_frame"
+  ];
+  for (const frame of frames) {
+    if (skipPatterns.some((p) => frame.includes(p))) continue;
+    const match = frame.match(/at\s+(\w+)\s+\(/);
+    if (match && match[1]) {
+      const componentName = match[1];
+      if (componentName !== "Object" && componentName !== "anonymous") {
+        return componentName;
+      }
     }
-  } catch (e) {
-    console.warn("Failed to decode URL-encoded path:", cleaned, e);
   }
-  cleaned = cleaned.replace(/^webpack-internal:\/\/\/\([^)]+\)\/\.\//, "").replace(/^webpack-internal:\/\/\/\([^)]+\)\//, "").replace(/^webpack-internal:\/\//, "").replace(/^webpack:\/\/[^/]*\//, "").replace(/^\([^)]+\)\//, "").replace(/\?.*$/, "");
-  if (cleaned.startsWith(".next/") || path.isAbsolute(cleaned)) {
-    return cleaned;
-  }
-  return cleaned;
-}
-function cleanPath(p) {
-  return cleanPathTurbopack(p);
+  return null;
 }
-function normalizeSourcePath(source, projectRoot) {
-  let cleaned = cleanPath(source);
-  cleaned = cleaned.replace(/\\/g, "/");
-  if (cleaned.startsWith(projectRoot)) {
-    cleaned = cleaned.substring(projectRoot.length + 1);
+function parseDebugStackFrames(stack) {
+  if (!stack) return [];
+  const stackStr = typeof stack === "string" ? stack : stack.stack || String(stack);
+  const frames = stackStr.split("\n");
+  const skipPatterns = [
+    "node_modules",
+    "SegmentViewNode",
+    "LayoutRouter",
+    "ErrorBoundary",
+    "fakeJSXCallSite",
+    "react_stack_bottom_frame"
+  ];
+  const positions = [];
+  for (const frame of frames) {
+    if (skipPatterns.some((p) => frame.includes(p))) continue;
+    const match = frame.match(/at\s+(\w+)\s+\((.+?):(\d+):(\d+)\)?$/);
+    if (match) {
+      match[1];
+      let filePath = match[2];
+      const line = parseInt(match[3], 10);
+      const column = parseInt(match[4], 10);
+      let chunkId;
+      const chunkMatch = filePath.match(/\?([^:]+)$/);
+      if (chunkMatch) {
+        chunkId = chunkMatch[1];
+        filePath = filePath.replace(/\?[^:]*$/, "");
+      }
+      filePath = cleanPath(filePath);
+      if (!shouldSkipPath(filePath)) {
+        positions.push({ filePath, line, column, chunkId });
+        if (positions.length >= 2) break;
+      }
+    }
   }
-  return cleaned.replace(/^\/+/, "");
-}
-function shouldSkip(p) {
-  if (!p) return true;
-  return ["node_modules", "next/dist", "react-dom"].some((s) => p.includes(s));
+  console.log(`parseDebugStackFrames extracted ${positions.length} frames:`, positions);
+  return positions;
 }
 async function resolveOriginalPosition(compiledPos, projectRoot) {
   try {
     console.log("resolveOriginalPosition called with:", compiledPos);
     let compiledFilePath = compiledPos.filePath;
-    compiledFilePath = cleanPathTurbopack(compiledFilePath);
-    console.log("After cleanPathTurbopack:", compiledFilePath);
+    compiledFilePath = cleanPath(compiledFilePath);
+    console.log("After cleanPath:", compiledFilePath);
     if (compiledFilePath.startsWith("http://") || compiledFilePath.startsWith("https://")) {
       const url = new URL(compiledFilePath);
       const pathname = url.pathname;
@@ -807,7 +957,6 @@ async function getOriginalPositionFromDebugStack(debugStack, projectRoot) {
   return await resolveOriginalPosition(compiledPos, projectRoot);
 }
 async function handleRead(req) {
-  var _a;
   const devModeError = validateDevMode();
   if (devModeError) return devModeError;
   const { searchParams } = new URL(req.url);
@@ -824,6 +973,11 @@ async function handleRead(req) {
     textContent: textContent || void 0,
     className: className || void 0
   } : void 0;
+  const parentFilePath = searchParams.get("parentFilePath") || "";
+  const parentLine = parseInt(searchParams.get("parentLine") || "0");
+  const parentComponentName = searchParams.get("parentComponentName") || "";
+  const parentDebugStack = searchParams.get("parentDebugStack") || "";
+  const childKey = searchParams.get("childKey") || "";
   const projectRoot = process.cwd();
   if (debugStack) {
     const compiledPos = parseDebugStack(debugStack);
@@ -854,21 +1008,7 @@ async function handleRead(req) {
       { status: 400 }
     );
   }
-  let componentName = "";
-  traverse(ast, {
-    ExportDefaultDeclaration(path2) {
-      var _a2;
-      if (t.isFunctionDeclaration(path2.node.declaration)) {
-        componentName = ((_a2 = path2.node.declaration.id) == null ? void 0 : _a2.name) || "";
-      }
-    },
-    ExportNamedDeclaration(path2) {
-      var _a2;
-      if (t.isFunctionDeclaration(path2.node.declaration)) {
-        componentName = ((_a2 = path2.node.declaration.id) == null ? void 0 : _a2.name) || "";
-      }
-    }
-  });
+  const componentName = extractComponentName(ast);
   if (!componentName) {
     return NextResponse.json({
       success: true,
@@ -890,28 +1030,85 @@ async function handleRead(req) {
       lineEnd: content.split("\n").length
     });
   }
-  console.log(`[/read] Found element:`);
-  console.log(
-    `  Component: ${componentName} (lines ${target.componentStart}-${target.componentEnd})`
-  );
-  console.log(`  Target element: lines ${target.startLine}-${target.endLine}`);
-  console.log(
-    `  Element context: tagName=${elementContext == null ? void 0 : elementContext.tagName}, nthOfType=${elementContext == null ? void 0 : elementContext.nthOfType}`
-  );
-  const foundLines = content.split("\n").slice(
-    target.startLine - 1,
-    Math.min(target.startLine + 2, target.endLine)
-  );
-  console.log(`  Preview: ${(_a = foundLines[0]) == null ? void 0 : _a.trim()}`);
-  console.log(
-    `  textContent="${elementContext == null ? void 0 : elementContext.textContent}", className="${elementContext == null ? void 0 : elementContext.className}"`
-  );
   const lines = content.split("\n");
   const componentLines = lines.slice(
     target.componentStart - 1,
     target.componentEnd
   );
   const preview = componentLines.join("\n");
+  let parentInstance = null;
+  if (parentDebugStack) {
+    try {
+      let resolvedParentPath = parentFilePath;
+      let resolvedParentLine = parentLine;
+      let resolvedParentComponentName = parentComponentName;
+      if (!resolvedParentComponentName && parentDebugStack) {
+        resolvedParentComponentName = extractComponentNameFromStack(parentDebugStack) || "";
+      }
+      if (parentDebugStack) {
+        const compiledPos = parseDebugStack(parentDebugStack);
+        if (compiledPos) {
+          const originalPos = await resolveOriginalPosition(
+            compiledPos,
+            projectRoot
+          );
+          if (originalPos) {
+            resolvedParentPath = originalPos.source;
+            resolvedParentLine = originalPos.line;
+          }
+        }
+      }
+      const normalizedParentPath = normalizePath(resolvedParentPath);
+      const absoluteParentPath = await resolveFilePath(
+        projectRoot,
+        normalizedParentPath
+      );
+      if (absoluteParentPath && resolvedParentComponentName) {
+        const parentContent = await fs.readFile(absoluteParentPath, "utf-8");
+        const parentAst = parseFile(parentContent);
+        if (parentAst) {
+          let nthOfType2 = void 0;
+          if (childKey) {
+            const keyAsNumber = parseInt(childKey, 10);
+            if (!isNaN(keyAsNumber)) {
+              nthOfType2 = keyAsNumber + 1;
+            }
+          }
+          const parentTarget = findTargetElement(parentAst, parentContent, {
+            componentName: resolvedParentComponentName,
+            lineNumber: 0,
+            // Don't use line number - rely on element context to find correct instance
+            elementContext: {
+              tagName: componentName,
+              // Search for child component usage
+              nthOfType: nthOfType2,
+              // Find specific instance if key is numeric
+              textContent: textContent || void 0
+              // Use text content to match the specific instance
+            }
+          });
+          if (parentTarget) {
+            const parentLines = parentContent.split("\n");
+            const parentComponentLines = parentLines.slice(
+              parentTarget.componentStart - 1,
+              parentTarget.componentEnd
+            );
+            parentInstance = {
+              filePath: resolvedParentPath,
+              content: parentComponentLines.join("\n"),
+              lineStart: parentTarget.componentStart,
+              lineEnd: parentTarget.componentEnd,
+              usageLineStart: parentTarget.startLine,
+              usageLineEnd: parentTarget.endLine,
+              componentName: resolvedParentComponentName
+            };
+          }
+        }
+      }
+    } catch (error) {
+      console.error("Error resolving parent instance:", error);
+    }
+  }
   return NextResponse.json({
     success: true,
     content: preview,
@@ -919,8 +1116,10 @@ async function handleRead(req) {
     lineEnd: target.componentEnd,
     targetStartLine: target.startLine,
     targetEndLine: target.endLine,
-    componentName
+    componentName,
     // Return the actual component name parsed from code
+    parentInstance
+    // Optional: where this component is used
   });
 }
 async function handleUndo(req) {
@@ -976,37 +1175,58 @@ async function handleResolve(req) {
         { status: 400 }
       );
     }
-    const compiledPos = parseDebugStack(debugStack);
-    if (!compiledPos) {
-      console.error("Could not parse debug stack:", debugStack);
-      return NextResponse.json(
-        { success: false, error: "Could not parse stack" },
-        { status: 422 }
+    const compiledFrames = parseDebugStackFrames(debugStack);
+    if (compiledFrames.length === 0) {
+      const compiledPos = parseDebugStack(debugStack);
+      if (!compiledPos) {
+        console.error("Could not parse debug stack:", debugStack);
+        return NextResponse.json(
+          { success: false, error: "Could not parse stack" },
+          { status: 422 }
+        );
+      }
+      const originalPos = await resolveOriginalPosition(
+        compiledPos,
+        process.cwd()
       );
+      if (!originalPos) {
+        return NextResponse.json(
+          { success: false, error: "Source map lookup failed" },
+          { status: 404 }
+        );
+      }
+      return NextResponse.json({
+        success: true,
+        filePath: originalPos.source,
+        lineNumber: originalPos.line,
+        columnNumber: originalPos.column ?? 0
+      });
     }
-    console.log("Parsed compiled position:", compiledPos);
-    const originalPos = await resolveOriginalPosition(
-      compiledPos,
-      process.cwd()
-    );
-    if (!originalPos) {
-      console.error(
-        "Source map lookup failed for:",
-        compiledPos.filePath,
-        "at line",
-        compiledPos.line
-      );
+    const resolvedFrames = [];
+    for (const frame of compiledFrames) {
+      const originalPos = await resolveOriginalPosition(frame, process.cwd());
+      if (originalPos) {
+        resolvedFrames.push({
+          filePath: originalPos.source,
+          lineNumber: originalPos.line,
+          columnNumber: originalPos.column ?? 0
+        });
+      }
+    }
+    if (resolvedFrames.length === 0) {
       return NextResponse.json(
-        { success: false, error: "Source map lookup failed" },
+        { success: false, error: "Source map lookup failed for all frames" },
         { status: 404 }
       );
     }
-    console.log("Resolved original position:", originalPos);
+    console.log("Resolved frames:", resolvedFrames);
     return NextResponse.json({
       success: true,
-      filePath: originalPos.source,
-      lineNumber: originalPos.line,
-      columnNumber: originalPos.column ?? 0
+      filePath: resolvedFrames[0].filePath,
+      lineNumber: resolvedFrames[0].lineNumber,
+      columnNumber: resolvedFrames[0].columnNumber,
+      frames: resolvedFrames
+      // [componentDefinition, parentInstance]
     });
   } catch (error) {
     console.error("Source resolve error:", error);
@@ -1091,6 +1311,209 @@ async function handleValidateSession(req) {
     );
   }
 }
+const suggestionCache = /* @__PURE__ */ new Map();
+const CACHE_TTL = 3e4;
+function getCacheKey(params) {
+  return `${params.componentName}:${params.elementTag || "div"}:${params.lastSuggestion || ""}`;
+}
+function getCachedSuggestions(key) {
+  const cached = suggestionCache.get(key);
+  if (cached && Date.now() - cached.timestamp < CACHE_TTL) {
+    return cached.suggestions;
+  }
+  suggestionCache.delete(key);
+  return null;
+}
+function cacheSuggestions(key, suggestions) {
+  suggestionCache.set(key, { suggestions, timestamp: Date.now() });
+  if (suggestionCache.size > 100) {
+    const oldestKeys = Array.from(suggestionCache.entries()).sort((a, b) => a[1].timestamp - b[1].timestamp).slice(0, 20).map(([key2]) => key2);
+    oldestKeys.forEach((key2) => suggestionCache.delete(key2));
+  }
+}
+const DEFAULT_SUGGESTIONS = [
+  "Add padding",
+  "Change color",
+  "Make larger",
+  "Add shadow",
+  "Round corners",
+  "Center content",
+  "Add hover effect",
+  "Adjust spacing"
+];
+async function handleSuggestions(req) {
+  const devModeError = validateDevMode();
+  if (devModeError) return devModeError;
+  try {
+    const { searchParams } = new URL(req.url);
+    const componentName = searchParams.get("componentName") || "Component";
+    const elementTag = searchParams.get("elementTag") || void 0;
+    const className = searchParams.get("className") || void 0;
+    const textContent = searchParams.get("textContent") || void 0;
+    const lastSuggestion = searchParams.get("lastSuggestion") || void 0;
+    const editHistoryStr = searchParams.get("editHistory") || void 0;
+    const excludedSuggestionsStr = searchParams.get("excludedSuggestions") || void 0;
+    let editHistory = [];
+    if (editHistoryStr) {
+      try {
+        editHistory = JSON.parse(editHistoryStr);
+      } catch (e) {
+      }
+    }
+    let excludedSuggestions = [];
+    if (excludedSuggestionsStr) {
+      try {
+        excludedSuggestions = JSON.parse(excludedSuggestionsStr);
+      } catch (e) {
+      }
+    }
+    const cacheKey = getCacheKey({ componentName, elementTag, lastSuggestion });
+    const cached = excludedSuggestions.length === 0 ? getCachedSuggestions(cacheKey) : null;
+    if (cached) {
+      return NextResponse.json({
+        success: true,
+        suggestions: cached
+      });
+    }
+    const suggestions = await generateSuggestions({
+      componentName,
+      elementTag,
+      className,
+      textContent,
+      editHistory,
+      lastSuggestion,
+      excludedSuggestions
+    });
+    if (suggestions && suggestions.length > 0) {
+      cacheSuggestions(cacheKey, suggestions);
+      return NextResponse.json({
+        success: true,
+        suggestions
+      });
+    }
+    return NextResponse.json({
+      success: true,
+      suggestions: DEFAULT_SUGGESTIONS
+    });
+  } catch (error) {
+    return NextResponse.json(
+      {
+        success: false,
+        error: String(error),
+        suggestions: DEFAULT_SUGGESTIONS
+        // Fallback
+      },
+      { status: 500 }
+    );
+  }
+}
+async function generateSuggestions(options) {
+  const {
+    componentName,
+    elementTag,
+    className,
+    textContent,
+    editHistory,
+    lastSuggestion,
+    excludedSuggestions = []
+  } = options;
+  const apiKey = process.env.ANTHROPIC_API_KEY;
+  if (!apiKey) {
+    return null;
+  }
+  const model = new ChatAnthropic({
+    apiKey,
+    modelName: "claude-haiku-4-5-20251001",
+    maxTokens: 1024,
+    temperature: 0.3
+    // Slightly creative for variety
+  });
+  const systemPrompt = `You are a UI/UX expert suggesting quick edits for React components.
+
+Generate 6-8 concise, actionable suggestions that a developer might want to make next.
+
+RULES:
+- Each suggestion must be 2-6 words (e.g., "Add padding", "Make text larger")
+- Focus on common UI improvements: spacing, colors, sizing, layout, shadows, borders, typography
+- Consider the element type (${elementTag || "element"})
+- Output ONLY a JSON array of strings, no explanations, no markdown fences
+${excludedSuggestions.length > 0 ? `- DO NOT suggest any of these (user wants different options): ${excludedSuggestions.join(
+    ", "
+  )}` : ""}
+
+${lastSuggestion ? `IMPORTANT - LAST EDIT CONTEXT:
+The user just applied: "${lastSuggestion}"
+Your suggestions MUST be direct follow-ups/refinements of this last change:
+- If it was "Add padding" → suggest "More padding", "Less padding", "Add vertical padding only"
+- If it was "Make it blue" → suggest "Darker blue", "Lighter blue", "Change to navy blue"
+- If it was "Increase font size" → suggest "Decrease font size", "Make even larger", "Adjust line height"
+- 4-6 suggestions should be variations/refinements of the last edit
+- 2-4 suggestions can be other related improvements
+
+Generate follow-up suggestions that let the user iteratively refine what they just did.` : `Generate varied initial suggestions covering different aspects: layout, colors, spacing, shadows, typography, etc.`}
+
+Example output format:
+["Add hover effect", "Increase padding", "Make corners rounder", "Change to flex row", "Add drop shadow", "Adjust font size"]`;
+  let userPrompt = `Element: <${elementTag || "div"}>`;
+  if (className) {
+    userPrompt += `
+Classes: ${className}`;
+  }
+  if (textContent) {
+    userPrompt += `
+Text: "${textContent.slice(0, 50)}"`;
+  }
+  userPrompt += `
+Component: ${componentName}`;
+  if (editHistory && editHistory.length > 0) {
+    userPrompt += `
+
+Recent edits:
+`;
+    editHistory.slice(-3).forEach((item, idx) => {
+      userPrompt += `${idx + 1}. ${item.suggestion} ${item.success ? "✓" : "✗"}
+`;
+    });
+  } else {
+    userPrompt += `
+
+No previous edits.`;
+  }
+  if (lastSuggestion) {
+    userPrompt += `
+
+**LAST EDIT APPLIED:** "${lastSuggestion}"`;
+    userPrompt += `
+
+Generate 6-8 follow-up suggestions (mostly variations of the last edit):`;
+  } else {
+    userPrompt += `
+
+Generate 6-8 initial suggestions:`;
+  }
+  try {
+    const response = await model.invoke([
+      new SystemMessage(systemPrompt),
+      new HumanMessage(userPrompt)
+    ]);
+    let content = typeof response.content === "string" ? response.content : String(response.content);
+    content = content.trim();
+    content = content.replace(/^```json?\s*/gm, "").replace(/\s*```$/gm, "");
+    const suggestions = JSON.parse(content);
+    if (Array.isArray(suggestions)) {
+      const validSuggestions = suggestions.filter((s) => typeof s === "string").map((s) => s.trim()).filter((s) => {
+        const words = s.split(/\s+/).length;
+        return words >= 1 && words <= 15;
+      }).slice(0, 8);
+      if (validSuggestions.length >= 4) {
+        return validSuggestions;
+      }
+    }
+    return null;
+  } catch (e) {
+    return null;
+  }
+}
 async function handleAIEditorRequest(req, context) {
   const { path: path2 } = await context.params;
   const endpoint = path2[0];
@@ -1114,6 +1537,9 @@ async function handleAIEditorRequest(req, context) {
     case "validate-session":
       if (method === "POST") return handleValidateSession(req);
       break;
+    case "suggestions":
+      if (method === "GET") return handleSuggestions(req);
+      break;
   }
   return NextResponse.json(
     { error: `Unknown endpoint: ${endpoint}` },
@@ -1127,19 +1553,24 @@ export {
   handleResolve as d,
   handleAbsolutePath as e,
   handleValidateSession as f,
-  fileExists$1 as g,
+  handleSuggestions as g,
   handleAIEditorRequest as h,
   isPathSecure as i,
-  findTargetElement as j,
-  getJSXMemberName as k,
-  getAttributeValue as l,
-  parseDebugStack as m,
+  fileExists$1 as j,
+  extractComponentName as k,
+  validateGeneratedCode as l,
+  findTargetElement as m,
   normalizePath as n,
-  resolveOriginalPosition as o,
+  getJSXMemberName as o,
   parseFile as p,
-  getOriginalPositionFromDebugStack as q,
+  getAttributeValue as q,
   resolveFilePath as r,
   scoreElementMatch as s,
-  validateDevMode as v
+  parseDebugStack as t,
+  extractComponentNameFromStack as u,
+  validateDevMode as v,
+  parseDebugStackFrames as w,
+  resolveOriginalPosition as x,
+  getOriginalPositionFromDebugStack as y
 };
-//# sourceMappingURL=index-BFa7H-uO.js.map
+//# sourceMappingURL=index-DrmEf13c.js.map