next-ai-editor 0.1.1 → 0.1.3

package/dist/{AIEditorProvider-Bs9zUVrL.cjs → AIEditorProvider-BGHm2xyU.cjs}

@@ -4,6 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const reactSyntaxHighlighter = require("react-syntax-highlighter");
 const prism = require("react-syntax-highlighter/dist/esm/styles/prism");
+const pathUtils = require("./path-utils-DYzEWUGy.cjs");
 const _AIEditorStorage = class _AIEditorStorage {
   // 5MB
   /**
@@ -223,120 +224,31 @@ _AIEditorStorage.STORAGE_PREFIX = "ai-editor:session:";
 _AIEditorStorage.VERSION = "1.0.0";
 _AIEditorStorage.MAX_STORAGE_SIZE = 5 * 1024 * 1024;
 let AIEditorStorage = _AIEditorStorage;
-const ENABLE_SESSION_PERSISTENCE = false;
-const sourceResolutionCache = /* @__PURE__ */ new Map();
-const inflightSourceResolutions = /* @__PURE__ */ new Map();
-function inferComponentNameFromPath(filePath) {
-  const fileName = filePath.split("/").pop() || "";
-  const nameWithoutExt = fileName.replace(/\.(tsx?|jsx?)$/, "");
-  return nameWithoutExt.charAt(0).toUpperCase() + nameWithoutExt.slice(1);
-}
-async function resolveSourceLocation(source) {
-  if (typeof window === "undefined" || process.env.NODE_ENV !== "development") {
-    return null;
-  }
-  if (!source.debugStack) {
-    console.warn("No debugStack available for resolution:", source);
-    return null;
-  }
-  const cacheKey = source.debugStack;
-  const cached = sourceResolutionCache.get(cacheKey);
-  if (cached) {
-    const resolved2 = { ...source, ...cached };
-    if (resolved2.componentName === "Unknown" && resolved2.filePath) {
-      resolved2.componentName = inferComponentNameFromPath(resolved2.filePath);
-    }
-    return resolved2;
-  }
-  let inflight = inflightSourceResolutions.get(cacheKey);
-  if (!inflight) {
-    inflight = fetch("/api/ai-editor/resolve", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ debugStack: cacheKey })
-    }).then(async (res) => {
-      if (!res.ok) {
-        const errorText = await res.text();
-        console.error(
-          `Resolve API error ${res.status}:`,
-          errorText,
-          "for stack:",
-          cacheKey.substring(0, 200)
-        );
-        return inferFilePathFromComponentName(source.componentName);
-      }
-      const data = await res.json();
-      if ((data == null ? void 0 : data.success) && data.filePath && data.lineNumber) {
-        const resolved2 = {
-          filePath: data.filePath,
-          lineNumber: data.lineNumber,
-          columnNumber: typeof data.columnNumber === "number" ? data.columnNumber : source.columnNumber
-        };
-        sourceResolutionCache.set(cacheKey, resolved2);
-        return resolved2;
-      }
-      console.warn("Resolve API returned unsuccessful response:", data);
-      return inferFilePathFromComponentName(source.componentName);
-    }).catch((err) => {
-      console.error("Error calling resolve API:", err);
-      return inferFilePathFromComponentName(source.componentName);
-    }).finally(() => {
-      inflightSourceResolutions.delete(cacheKey);
-    });
-    inflightSourceResolutions.set(cacheKey, inflight);
-  }
-  const resolvedInfo = await inflight;
-  if (!resolvedInfo) return null;
-  const resolved = {
-    ...source,
-    filePath: resolvedInfo.filePath,
-    lineNumber: resolvedInfo.lineNumber,
-    columnNumber: resolvedInfo.columnNumber
+function buildReadQueryParams(selectedSource, includeParent = true) {
+  var _a, _b, _c, _d;
+  const params = {
+    path: selectedSource.filePath,
+    line: String(selectedSource.lineNumber),
+    tagName: ((_a = selectedSource.elementContext) == null ? void 0 : _a.tagName) || "",
+    nthOfType: String(((_b = selectedSource.elementContext) == null ? void 0 : _b.nthOfType) || 0),
+    textContent: ((_c = selectedSource.elementContext) == null ? void 0 : _c.textContent) || "",
+    className: ((_d = selectedSource.elementContext) == null ? void 0 : _d.className) || ""
   };
-  if (resolved.componentName === "Unknown" && resolved.filePath) {
-    resolved.componentName = inferComponentNameFromPath(resolved.filePath);
+  if (selectedSource.debugStack) {
+    params.debugStack = selectedSource.debugStack;
   }
-  return resolved;
-}
-async function inferFilePathFromComponentName(componentName) {
-  if (!componentName || componentName === "Unknown") return null;
-  const possiblePaths = [
-    `components/${componentName}.tsx`,
-    `components/${componentName}.jsx`,
-    `app/${componentName}.tsx`,
-    `app/${componentName}.jsx`,
-    `src/components/${componentName}.tsx`,
-    `src/components/${componentName}.jsx`
-  ];
-  for (const tryPath of possiblePaths) {
-    try {
-      const response = await fetch(
-        `/api/ai-editor/absolute-path?path=${encodeURIComponent(tryPath)}`
-      );
-      if (response.ok) {
-        const data = await response.json();
-        if (data.success) {
-          console.log(
-            `Inferred file path for ${componentName}: ${tryPath}`
-          );
-          return {
-            filePath: tryPath,
-            lineNumber: 1,
-            columnNumber: 0
-          };
-        }
-      }
-    } catch (err) {
+  if (includeParent && selectedSource.parentComponent) {
+    params.parentFilePath = selectedSource.parentComponent.filePath;
+    params.parentLine = String(selectedSource.parentComponent.lineNumber);
+    params.parentComponentName = selectedSource.parentComponent.componentName;
+    if (selectedSource.parentComponent.debugStack) {
+      params.parentDebugStack = selectedSource.parentComponent.debugStack;
+    }
+    if (selectedSource.parentComponent.childKey) {
+      params.childKey = selectedSource.parentComponent.childKey;
     }
   }
-  console.warn(`Could not infer file path for component: ${componentName}`);
-  return null;
-}
-const EditorContext = react.createContext(null);
-function useAIEditor() {
-  const ctx = react.useContext(EditorContext);
-  if (!ctx) throw new Error("useAIEditor must be used within AIEditorProvider");
-  return ctx;
+  return params;
 }
 function getFiberFromElement(element) {
   const key = Object.keys(element).find(
@@ -345,14 +257,26 @@ function getFiberFromElement(element) {
   return key ? element[key] : null;
 }
 function getComponentName(fiber) {
-  var _a;
+  var _a, _b;
   if (!fiber) return "Unknown";
   const type = fiber.type;
+  if ((_a = fiber._debugSource) == null ? void 0 : _a.fileName) {
+    const fileName = fiber._debugSource.fileName;
+    const match = fileName.match(/\/([^/]+)\.(tsx?|jsx?)$/);
+    if (match) return match[1];
+  }
   if (typeof type === "string") return type;
   if (typeof type === "function")
     return type.displayName || type.name || "Anonymous";
   if (type == null ? void 0 : type.displayName) return type.displayName;
-  if ((_a = type == null ? void 0 : type.render) == null ? void 0 : _a.name) return type.render.name;
+  if ((_b = type == null ? void 0 : type.render) == null ? void 0 : _b.name) return type.render.name;
+  if (fiber._debugStack) {
+    const stack = String(fiber._debugStack.stack || fiber._debugStack);
+    const match = stack.match(/at\s+([A-Z][a-zA-Z0-9]*)\s*\(/);
+    if (match && match[1] !== "Object") {
+      return match[1];
+    }
+  }
   return "Unknown";
 }
 function isUserComponent(fiber) {
@@ -361,24 +285,6 @@ function isUserComponent(fiber) {
   if (!type || typeof type === "string") return false;
   return true;
 }
-function captureElementContext(element, fiber) {
-  const tagName = element.tagName.toLowerCase();
-  let textContent;
-  const directText = Array.from(element.childNodes).filter((n) => n.nodeType === Node.TEXT_NODE).map((n) => {
-    var _a;
-    return (_a = n.textContent) == null ? void 0 : _a.trim();
-  }).filter(Boolean).join(" ");
-  if (directText) {
-    textContent = directText.slice(0, 50);
-  } else if (element.textContent) {
-    textContent = element.textContent.trim().slice(0, 50);
-  }
-  const className = typeof element.className === "string" ? element.className.slice(0, 100) : void 0;
-  const nthOfType = countNthOfType(element, tagName);
-  const key = (fiber == null ? void 0 : fiber.key) ? String(fiber.key) : void 0;
-  const props = extractProps(fiber);
-  return { tagName, textContent, className, key, nthOfType, props };
-}
 function countNthOfType(element, tagName) {
   let boundary = element.parentElement;
   while (boundary) {
@@ -398,9 +304,6 @@ function countNthOfType(element, tagName) {
     if (el === element) break;
     count++;
   }
-  console.log(
-    `[countNthOfType] tagName=${tagName}, found ${sameTagElements.length} elements (including boundary), this is #${count}`
-  );
   return count;
 }
 function extractProps(fiber) {
@@ -429,51 +332,23 @@ function extractProps(fiber) {
   }
   return Object.keys(props).length > 0 ? props : void 0;
 }
-function findSourceFromFiber(fiber) {
-  if (!fiber) return null;
-  let current = fiber;
-  const visited = /* @__PURE__ */ new Set();
-  while (current && !visited.has(current)) {
-    visited.add(current);
-    const sourceData = current._debugSource || extractFromDebugStack(current) || extractFromDebugOwner(current);
-    if (sourceData == null ? void 0 : sourceData.fileName) {
-      const filePath = cleanPath(sourceData.fileName);
-      if (!shouldSkip(filePath)) {
-        let componentFiber = current;
-        while (componentFiber) {
-          if (isUserComponent(componentFiber)) {
-            const componentName = getComponentName(componentFiber);
-            const isNextJSInternal = [
-              "Segment",
-              "Boundary",
-              "Router",
-              "Handler",
-              "Context",
-              "Layout",
-              "Template",
-              "Scroll",
-              "Focus",
-              "Loading",
-              "Error"
-            ].some((pattern) => componentName.includes(pattern));
-            if (!isNextJSInternal) {
-              const rawDebugStack = current._debugStack ? String(current._debugStack.stack || current._debugStack) : void 0;
-              return {
-                filePath,
-                lineNumber: sourceData.lineNumber || 1,
-                columnNumber: sourceData.columnNumber || 0,
-                componentName,
-                debugStack: rawDebugStack
-              };
-            }
-          }
-          componentFiber = componentFiber.return || componentFiber._debugOwner || null;
-        }
-      }
-    }
-    current = current.return || current._debugOwner || null;
+function captureElementContext(element, fiber) {
+  const tagName = element.tagName.toLowerCase();
+  let textContent;
+  const directText = Array.from(element.childNodes).filter((n) => n.nodeType === Node.TEXT_NODE).map((n) => {
+    var _a;
+    return (_a = n.textContent) == null ? void 0 : _a.trim();
+  }).filter(Boolean).join(" ");
+  if (directText) {
+    textContent = directText.slice(0, 50);
+  } else if (element.textContent) {
+    textContent = element.textContent.trim().slice(0, 50);
   }
-  return null;
+  const className = typeof element.className === "string" ? element.className.slice(0, 100) : void 0;
+  const nthOfType = countNthOfType(element, tagName);
+  const key = (fiber == null ? void 0 : fiber.key) ? String(fiber.key) : void 0;
+  const props = extractProps(fiber);
+  return { tagName, textContent, className, key, nthOfType, props };
 }
 function extractFromDebugStack(fiber) {
   const stack = fiber._debugStack;
@@ -491,8 +366,8 @@ function extractFromDebugStack(fiber) {
     if (skipPatterns.some((p) => frame.includes(p))) continue;
     const match = frame.match(/at\s+(\w+)\s+\((.+?):(\d+):(\d+)\)?$/);
     if (match) {
-      const fileName = cleanPath(match[2].replace(/\?[^:]*$/, ""));
-      if (!shouldSkip(fileName)) {
+      const fileName = pathUtils.cleanPath(match[2].replace(/\?[^:]*$/, ""));
+      if (!pathUtils.shouldSkipPath(fileName, ["ai-editor-provider"])) {
         return {
           fileName,
           lineNumber: parseInt(match[3], 10),
@@ -516,43 +391,378 @@ function extractFromDebugOwner(fiber) {
   }
   return null;
 }
-function cleanPath(p) {
-  let cleaned = p;
-  if (cleaned.startsWith("file://")) {
-    cleaned = cleaned.replace(/^file:\/\//, "");
+function findSourceFromFiber(fiber) {
+  if (!fiber) return null;
+  let actualComponentName = null;
+  if (fiber._debugOwner && typeof fiber._debugOwner === "object") {
+    const debugOwner = fiber._debugOwner;
+    if (debugOwner.name && typeof debugOwner.name === "string") {
+      actualComponentName = debugOwner.name;
+    }
   }
-  try {
-    if (cleaned.includes("%")) {
-      cleaned = decodeURIComponent(cleaned);
+  let current = fiber;
+  const visited = /* @__PURE__ */ new Set();
+  let iterations = 0;
+  while (current && !visited.has(current) && iterations < 10) {
+    iterations++;
+    visited.add(current);
+    const sourceData = current._debugSource || extractFromDebugStack(current) || extractFromDebugOwner(current);
+    if (sourceData == null ? void 0 : sourceData.fileName) {
+      const filePath = pathUtils.cleanPath(sourceData.fileName);
+      if (!pathUtils.shouldSkipPath(filePath, ["ai-editor-provider"])) {
+        if (actualComponentName) {
+          const rawDebugStack = current._debugStack ? String(current._debugStack.stack || current._debugStack) : void 0;
+          return {
+            filePath,
+            lineNumber: sourceData.lineNumber || 1,
+            columnNumber: sourceData.columnNumber || 0,
+            componentName: actualComponentName,
+            debugStack: rawDebugStack
+          };
+        } else {
+          let componentFiber = current;
+          while (componentFiber) {
+            if (isUserComponent(componentFiber)) {
+              const componentName = getComponentName(componentFiber);
+              const isNextJSInternal = [
+                "Segment",
+                "Boundary",
+                "Router",
+                "Handler",
+                "Context",
+                "Layout",
+                "Template",
+                "Scroll",
+                "Focus",
+                "Loading",
+                "Error"
+              ].some((pattern) => componentName.includes(pattern));
+              if (!isNextJSInternal) {
+                const rawDebugStack = current._debugStack ? String(current._debugStack.stack || current._debugStack) : void 0;
+                return {
+                  filePath,
+                  lineNumber: sourceData.lineNumber || 1,
+                  columnNumber: sourceData.columnNumber || 0,
+                  componentName,
+                  debugStack: rawDebugStack
+                };
+              }
+            }
+            componentFiber = componentFiber.return || componentFiber._debugOwner || null;
+          }
+        }
+      }
     }
-  } catch (e) {
+    current = current.return || current._debugOwner || null;
   }
-  cleaned = cleaned.replace(/^webpack-internal:\/\/\/\([^)]+\)\/\.\//, "").replace(/^webpack-internal:\/\/\/\([^)]+\)\//, "").replace(/^webpack-internal:\/\//, "").replace(/^webpack:\/\/[^/]*\//, "").replace(/^about:\/\/React\/Server\//, "").replace(/^\([^)]+\)\//, "").replace(/^\.\//, "").replace(/\?.*$/, "");
-  return cleaned;
+  return null;
 }
-function shouldSkip(p) {
-  if (!p) return true;
-  return ["node_modules", "next/dist", "react-dom", "ai-editor-provider"].some(
-    (s) => p.includes(s)
-  );
+function findParentComponentFromFiber(childFiber, childComponentName) {
+  if (!childFiber) return null;
+  let childComponentFiber = null;
+  if (childFiber._debugOwner && typeof childFiber._debugOwner === "object") {
+    const debugOwner = childFiber._debugOwner;
+    if (debugOwner.type && typeof debugOwner.type === "function") {
+      const ownerComponentName = getComponentName(debugOwner);
+      if (ownerComponentName === childComponentName) {
+        childComponentFiber = debugOwner;
+      }
+    }
+  }
+  if (!childComponentFiber) {
+    let current2 = childFiber;
+    let iterations2 = 0;
+    while (current2 && iterations2 < 20) {
+      iterations2++;
+      const componentName = getComponentName(current2);
+      current2.index;
+      if (isUserComponent(current2)) {
+        if (componentName === childComponentName) {
+          childComponentFiber = current2;
+          break;
+        }
+      }
+      if (current2._debugOwner && typeof current2._debugOwner === "object") {
+        const debugOwner = current2._debugOwner;
+        if (debugOwner.name === childComponentName && !debugOwner.type) {
+          const parent = current2.return;
+          const parentDebugOwner = parent == null ? void 0 : parent._debugOwner;
+          const isRootElement = !parentDebugOwner || parentDebugOwner.name !== childComponentName;
+          if (isRootElement) {
+            childComponentFiber = current2;
+            break;
+          }
+        }
+      }
+      current2 = current2.return;
+    }
+  }
+  let childKey;
+  if (childComponentFiber == null ? void 0 : childComponentFiber.key) {
+    childKey = String(childComponentFiber.key);
+  } else if (childComponentFiber && typeof childComponentFiber.index === "number") {
+    childKey = String(childComponentFiber.index);
+  }
+  if (childFiber._debugOwner && typeof childFiber._debugOwner === "object") {
+    const debugOwner = childFiber._debugOwner;
+    if (debugOwner.owner && debugOwner.owner.name) {
+      const parentName = debugOwner.owner.name;
+      const parentDebugLocation = debugOwner.owner.debugLocation;
+      if (parentDebugLocation) {
+        const stack = String(parentDebugLocation.stack || parentDebugLocation);
+        return {
+          filePath: "",
+          // Will be resolved on server
+          lineNumber: 0,
+          columnNumber: 0,
+          componentName: parentName,
+          debugStack: stack,
+          childKey
+        };
+      }
+    }
+    if (debugOwner.type && typeof debugOwner.type === "function") {
+      const componentFiberOwner = debugOwner._debugOwner;
+      if (componentFiberOwner && typeof componentFiberOwner === "object") {
+        const parentName = componentFiberOwner.name;
+        const parentDebugLocation = componentFiberOwner.debugLocation;
+        if (parentName && typeof parentName === "string") {
+          if (parentDebugLocation) {
+            const stack = String(
+              parentDebugLocation.stack || parentDebugLocation
+            );
+            return {
+              filePath: "",
+              // Will be resolved on server
+              lineNumber: 0,
+              columnNumber: 0,
+              componentName: parentName,
+              debugStack: stack,
+              childKey
+            };
+          }
+        }
+      }
+    }
+  }
+  let current = childFiber.return;
+  const visited = /* @__PURE__ */ new Set();
+  let iterations = 0;
+  while (current && !visited.has(current) && iterations < 20) {
+    iterations++;
+    visited.add(current);
+    if (isUserComponent(current)) {
+      const componentName = getComponentName(current);
+      if (componentName === childComponentName) {
+        current = current._debugOwner || null;
+        continue;
+      }
+      const shouldSkipComponent = componentName.includes("AIEditorProvider") || // Skip the AI Editor wrapper itself
+      componentName.startsWith("__next") || // Skip all Next.js internal components like __next_root_layout_boundary__
+      componentName.startsWith("_") || // Skip internal components starting with underscore
+      [
+        "Segment",
+        "Boundary",
+        "Router",
+        "Handler",
+        "Context",
+        "Layout",
+        "Template",
+        "Scroll",
+        "Focus",
+        "Loading",
+        "Error",
+        "RootLayout",
+        // Skip root layout wrapper
+        "NotFound"
+      ].some((pattern) => componentName.includes(pattern));
+      if (shouldSkipComponent) {
+        current = current._debugOwner || null;
+        continue;
+      }
+      const sourceData = current._debugSource || extractFromDebugStack(current) || extractFromDebugOwner(current);
+      if (sourceData == null ? void 0 : sourceData.fileName) {
+        const filePath = pathUtils.cleanPath(sourceData.fileName);
+        if (!pathUtils.shouldSkipPath(filePath, ["ai-editor-provider"])) {
+          const rawDebugStack = current._debugStack ? String(current._debugStack.stack || current._debugStack) : void 0;
+          return {
+            filePath,
+            lineNumber: sourceData.lineNumber || 1,
+            columnNumber: sourceData.columnNumber || 0,
+            componentName,
+            debugStack: rawDebugStack,
+            childKey
+          };
+        }
+      }
+    }
+    const nextOwner = current._debugOwner;
+    current = nextOwner || null;
+  }
+  const childDebugStack = childFiber._debugStack ? String(childFiber._debugStack.stack || childFiber._debugStack) : null;
+  if (childDebugStack) {
+    return {
+      filePath: "",
+      // Will be resolved on server from debugStack
+      lineNumber: 0,
+      columnNumber: 0,
+      componentName: "",
+      // Will be determined on server
+      debugStack: childDebugStack,
+      // Use child's debugStack for server-side resolution
+      childKey
+    };
+  }
+  return null;
 }
 function getSourceFromElement(element) {
+  var _a;
   let current = element;
-  let fiber = null;
+  let elementWithSource = null;
+  let fiberWithSource = null;
   while (current && current !== document.body) {
-    fiber = getFiberFromElement(current);
-    if (fiber) break;
+    const fiber = getFiberFromElement(current);
+    if (fiber) {
+      const hasSourceInfo = ((_a = fiber._debugSource) == null ? void 0 : _a.fileName) || fiber._debugStack || fiber._debugOwner && typeof fiber._debugOwner === "object";
+      if (hasSourceInfo && !fiberWithSource) {
+        elementWithSource = current;
+        fiberWithSource = fiber;
+      }
+    }
     current = current.parentElement;
   }
-  if (!fiber) return null;
-  const source = findSourceFromFiber(fiber);
+  if (!fiberWithSource || !elementWithSource) return null;
+  const source = findSourceFromFiber(fiberWithSource);
   if (!source) return null;
-  const elementContext = captureElementContext(element, fiber);
-  return { ...source, elementContext };
+  const elementContext = captureElementContext(elementWithSource, fiberWithSource);
+  const parentComponent = findParentComponentFromFiber(
+    fiberWithSource,
+    source.componentName
+  );
+  return {
+    ...source,
+    elementContext,
+    parentComponent: parentComponent || void 0
+  };
 }
 if (typeof window !== "undefined") {
   window.__getSource = getSourceFromElement;
 }
+const ENABLE_SESSION_PERSISTENCE = false;
+const sourceResolutionCache = /* @__PURE__ */ new Map();
+const inflightSourceResolutions = /* @__PURE__ */ new Map();
+function inferComponentNameFromPath(filePath) {
+  const fileName = filePath.split("/").pop() || "";
+  const nameWithoutExt = fileName.replace(/\.(tsx?|jsx?)$/, "");
+  return nameWithoutExt.charAt(0).toUpperCase() + nameWithoutExt.slice(1);
+}
+async function resolveSourceLocation(source) {
+  if (typeof window === "undefined" || process.env.NODE_ENV !== "development") {
+    return null;
+  }
+  if (!source.debugStack) {
+    console.warn("No debugStack available for resolution:", source);
+    return null;
+  }
+  const cacheKey = source.debugStack;
+  const cached = sourceResolutionCache.get(cacheKey);
+  if (cached) {
+    const resolved2 = { ...source, ...cached };
+    if (resolved2.componentName === "Unknown" && resolved2.filePath) {
+      resolved2.componentName = inferComponentNameFromPath(resolved2.filePath);
+    }
+    return resolved2;
+  }
+  let inflight = inflightSourceResolutions.get(cacheKey);
+  if (!inflight) {
+    inflight = fetch("/api/ai-editor/resolve", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ debugStack: cacheKey })
+    }).then(async (res) => {
+      if (!res.ok) {
+        const errorText = await res.text();
+        console.error(
+          `Resolve API error ${res.status}:`,
+          errorText,
+          "for stack:",
+          cacheKey.substring(0, 200)
+        );
+        return inferFilePathFromComponentName(source.componentName);
+      }
+      const data = await res.json();
+      if ((data == null ? void 0 : data.success) && data.filePath && data.lineNumber) {
+        const resolved2 = {
+          filePath: data.filePath,
+          lineNumber: data.lineNumber,
+          columnNumber: typeof data.columnNumber === "number" ? data.columnNumber : source.columnNumber
+        };
+        sourceResolutionCache.set(cacheKey, resolved2);
+        return resolved2;
+      }
+      console.warn("Resolve API returned unsuccessful response:", data);
+      return inferFilePathFromComponentName(source.componentName);
+    }).catch((err) => {
+      console.error("Error calling resolve API:", err);
+      return inferFilePathFromComponentName(source.componentName);
+    }).finally(() => {
+      inflightSourceResolutions.delete(cacheKey);
+    });
+    inflightSourceResolutions.set(cacheKey, inflight);
+  }
+  const resolvedInfo = await inflight;
+  if (!resolvedInfo) return null;
+  const resolved = {
+    ...source,
+    filePath: resolvedInfo.filePath,
+    lineNumber: resolvedInfo.lineNumber,
+    columnNumber: resolvedInfo.columnNumber
+  };
+  if (resolved.componentName === "Unknown" && resolved.filePath) {
+    resolved.componentName = inferComponentNameFromPath(resolved.filePath);
+  }
+  return resolved;
+}
+async function inferFilePathFromComponentName(componentName) {
+  if (!componentName || componentName === "Unknown") return null;
+  const possiblePaths = [
+    `components/${componentName}.tsx`,
+    `components/${componentName}.jsx`,
+    `app/${componentName}.tsx`,
+    `app/${componentName}.jsx`,
+    `src/components/${componentName}.tsx`,
+    `src/components/${componentName}.jsx`
+  ];
+  for (const tryPath of possiblePaths) {
+    try {
+      const response = await fetch(
+        `/api/ai-editor/absolute-path?path=${encodeURIComponent(tryPath)}`
+      );
+      if (response.ok) {
+        const data = await response.json();
+        if (data.success) {
+          console.log(
+            `Inferred file path for ${componentName}: ${tryPath}`
+          );
+          return {
+            filePath: tryPath,
+            lineNumber: 1,
+            columnNumber: 0
+          };
+        }
+      }
+    } catch (err) {
+    }
+  }
+  console.warn(`Could not infer file path for component: ${componentName}`);
+  return null;
+}
+const EditorContext = react.createContext(null);
+function useAIEditor() {
+  const ctx = react.useContext(EditorContext);
+  if (!ctx) throw new Error("useAIEditor must be used within AIEditorProvider");
+  return ctx;
+}
 function AIEditorProvider({
   children,
   theme = "dark"
@@ -569,6 +779,11 @@ function AIEditorProvider({
   const [showStaleWarning, setShowStaleWarning] = react.useState(false);
   const [staleSession, setStaleSession] = react.useState(null);
   const [hasActiveSession, setHasActiveSession] = react.useState(false);
+  const [parentInstance, setParentInstance] = react.useState(null);
+  const [suggestions, setSuggestions] = react.useState([]);
+  const [suggestionsLoading, setSuggestionsLoading] = react.useState(false);
+  const [lastAppliedSuggestion, setLastAppliedSuggestion] = react.useState(void 0);
+  const [suggestionsCache, setSuggestionsCache] = react.useState(/* @__PURE__ */ new Map());
   react.useEffect(() => {
     const handleKey = (e) => {
       if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key.toLowerCase() === "e") {
@@ -608,6 +823,15 @@ function AIEditorProvider({
     async (suggestion) => {
       if (!selectedSource)
         return { success: false, error: "No element selected" };
+      const editId = Date.now().toString(36) + Math.random().toString(36).substring(2);
+      const pendingEdit = {
+        id: editId,
+        suggestion,
+        success: false,
+        pending: true,
+        timestamp: Date.now()
+      };
+      setEditHistory((prev) => [...prev, pendingEdit]);
       setIsLoading(true);
       try {
         const res = await fetch("/api/ai-editor/edit", {
@@ -626,56 +850,118 @@ function AIEditorProvider({
             editHistory: editHistory.map((item) => ({
               suggestion: item.suggestion,
               success: item.success
-            }))
+            })),
+            // Pass parent instance if available
+            parentInstance
           })
         });
         const result = await res.json();
-        const editId = Date.now().toString(36) + Math.random().toString(36).substring(2);
-        const newHistoryItem = {
+        const completedEdit = {
           id: editId,
           suggestion,
           success: result.success,
+          pending: false,
           error: result.error,
           timestamp: Date.now(),
           fileSnapshot: result.fileSnapshot,
+          editedFilePath: result.editedFile,
+          // Track which file was actually edited
           generatedCode: result.generatedCode,
           modifiedLines: result.modifiedLines
         };
-        setEditHistory((prev) => [...prev, newHistoryItem]);
+        setEditHistory(
+          (prev) => prev.map((item) => item.id === editId ? completedEdit : item)
+        );
         if (ENABLE_SESSION_PERSISTENCE && selectedSource && result.fileSnapshot) ;
         return result;
       } catch (err) {
         const error = String(err);
-        const editId = Date.now().toString(36) + Math.random().toString(36).substring(2);
-        setEditHistory((prev) => [
-          ...prev,
-          {
-            id: editId,
-            suggestion,
-            success: false,
-            error,
-            timestamp: Date.now()
-          }
-        ]);
+        setEditHistory(
+          (prev) => prev.map(
+            (item) => item.id === editId ? { ...item, success: false, pending: false, error } : item
+          )
+        );
         return { success: false, error };
       } finally {
         setIsLoading(false);
       }
     },
-    [selectedSource, editHistory]
+    [selectedSource, editHistory, parentInstance]
+  );
+  const fetchSuggestions = react.useCallback(
+    async (source, history, lastEdit, excludedSuggestions) => {
+      var _a, _b, _c, _d;
+      const CACHE_TTL = 3e4;
+      const cacheKey = `${source.componentName}:${((_a = source.elementContext) == null ? void 0 : _a.tagName) || "div"}:${lastEdit || "initial"}`;
+      const cached = !(excludedSuggestions == null ? void 0 : excludedSuggestions.length) ? suggestionsCache.get(cacheKey) : null;
+      if (cached && Date.now() - cached.timestamp < CACHE_TTL) {
+        setSuggestions(cached.suggestions);
+        return;
+      }
+      setSuggestionsLoading(true);
+      try {
+        const params = new URLSearchParams({
+          componentName: source.componentName
+        });
+        if ((_b = source.elementContext) == null ? void 0 : _b.tagName) {
+          params.append("elementTag", source.elementContext.tagName);
+        }
+        if ((_c = source.elementContext) == null ? void 0 : _c.className) {
+          params.append("className", source.elementContext.className);
+        }
+        if ((_d = source.elementContext) == null ? void 0 : _d.textContent) {
+          params.append("textContent", source.elementContext.textContent);
+        }
+        if (lastEdit) {
+          params.append("lastSuggestion", lastEdit);
+        }
+        if (history.length > 0) {
+          params.append(
+            "editHistory",
+            JSON.stringify(
+              history.slice(-3).map((h) => ({ suggestion: h.suggestion, success: h.success }))
+            )
+          );
+        }
+        if (excludedSuggestions && excludedSuggestions.length > 0) {
+          params.append("excludedSuggestions", JSON.stringify(excludedSuggestions));
+        }
+        const response = await fetch(`/api/ai-editor/suggestions?${params}`);
+        const data = await response.json();
+        if (data.success) {
+          setSuggestions(data.suggestions);
+          setSuggestionsCache((prev) => {
+            const newCache = new Map(prev);
+            newCache.set(cacheKey, {
+              suggestions: data.suggestions,
+              timestamp: Date.now()
+            });
+            return newCache;
+          });
+        } else {
+          setSuggestions([]);
+        }
+      } catch (error) {
+        setSuggestions([]);
+      } finally {
+        setSuggestionsLoading(false);
+      }
+    },
+    [suggestionsCache, setSuggestions, setSuggestionsLoading, setSuggestionsCache]
   );
   const handleSelect = react.useCallback(
     (element, source) => {
       setSelectedDOMElement(element);
       setSelectedSource(source);
       setEditHistory([]);
+      setParentInstance(null);
       resolveSourceLocation(source).then((resolved) => {
         if (resolved) {
           setSelectedSource((prev) => prev === source ? resolved : prev);
         }
       });
     },
-    [setSelectedDOMElement, setSelectedSource]
+    [setSelectedDOMElement, setSelectedSource, setParentInstance]
   );
   if (process.env.NODE_ENV !== "development") {
     return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
@@ -693,7 +979,12 @@ function AIEditorProvider({
         setIsLoading,
         editHistory,
         setEditHistory,
-        submitEdit
+        submitEdit,
+        suggestions,
+        suggestionsLoading,
+        lastAppliedSuggestion,
+        setLastAppliedSuggestion,
+        fetchSuggestions
       },
       children: [
         children,
@@ -709,7 +1000,9 @@ function AIEditorProvider({
             setStaleSession,
             setHasActiveSession,
             restoreSession,
-            handleClearSession
+            handleClearSession,
+            parentInstance,
+            setParentInstance
           }
         )
       ]
@@ -726,7 +1019,9 @@ function EditorOverlay({
   setStaleSession,
   setHasActiveSession,
   restoreSession,
-  handleClearSession
+  handleClearSession,
+  parentInstance,
+  setParentInstance
 }) {
   var _a;
   const {
@@ -738,7 +1033,12 @@ function EditorOverlay({
     setEnabled,
     selectedDOMElement,
     editHistory,
-    setEditHistory
+    setEditHistory,
+    suggestions,
+    suggestionsLoading,
+    lastAppliedSuggestion,
+    setLastAppliedSuggestion,
+    fetchSuggestions
   } = useAIEditor();
   const [hoveredSource, setHoveredSource] = react.useState(
     null
@@ -757,43 +1057,34 @@ function EditorOverlay({
   const [parsedComponentName, setParsedComponentName] = react.useState(
     null
   );
+  const [isSourcePreviewExpanded, setIsSourcePreviewExpanded] = react.useState(false);
+  const [isParentPreviewExpanded, setIsParentPreviewExpanded] = react.useState(false);
+  const [isEditHistoryExpanded, setIsEditHistoryExpanded] = react.useState(true);
   const isDark = theme === "dark";
+  const refreshCodePreview = react.useCallback(async (source, options = {}) => {
+    const params = buildReadQueryParams(source, options.includeParent ?? true);
+    try {
+      const url = `/api/ai-editor/read?` + new URLSearchParams(params);
+      const response = await fetch(url);
+      const data = await response.json();
+      if (data.success) {
+        setCode(data.content);
+        setCodeLineStart(data.lineStart || 1);
+        setTargetStartLine(data.targetStartLine || null);
+        setTargetEndLine(data.targetEndLine || null);
+        setParentInstance(data.parentInstance || null);
+        if (data.componentName) {
+          setParsedComponentName(data.componentName);
+        }
+      }
+    } catch (error) {
+      console.error("Error refreshing code preview:", error);
+    }
+  }, []);
   react.useEffect(() => {
-    var _a2, _b, _c, _d;
     if (selectedSource) {
-      const params = {
-        path: selectedSource.filePath,
-        line: String(selectedSource.lineNumber),
-        tagName: ((_a2 = selectedSource.elementContext) == null ? void 0 : _a2.tagName) || "",
-        nthOfType: String(((_b = selectedSource.elementContext) == null ? void 0 : _b.nthOfType) || 0),
-        textContent: ((_c = selectedSource.elementContext) == null ? void 0 : _c.textContent) || "",
-        className: ((_d = selectedSource.elementContext) == null ? void 0 : _d.className) || ""
-      };
-      if (selectedSource.debugStack) {
-        params.debugStack = selectedSource.debugStack;
-      }
-      fetch(`/api/ai-editor/read?` + new URLSearchParams(params)).then((r) => r.json()).then((d) => {
-        if (d.success) {
-          console.log("[AI Editor] Read response:", {
-            lineStart: d.lineStart,
-            targetStartLine: d.targetStartLine,
-            targetEndLine: d.targetEndLine,
-            componentName: d.componentName
-          });
-          setCode(d.content);
-          setCodeLineStart(d.lineStart || 1);
-          setTargetStartLine(d.targetStartLine || null);
-          setTargetEndLine(d.targetEndLine || null);
-          if (d.componentName) {
-            setParsedComponentName(d.componentName);
-          }
-        }
-      }).catch(() => {
-        setCode("// Could not load");
-        setCodeLineStart(1);
-        setTargetStartLine(null);
-        setTargetEndLine(null);
-      });
+      refreshCodePreview(selectedSource);
+      fetchSuggestions(selectedSource, []);
       fetch(
         `/api/ai-editor/absolute-path?` + new URLSearchParams({ path: selectedSource.filePath })
       ).then((r) => r.json()).then((d) => d.success && setAbsolutePath(d.absolutePath)).catch(() => setAbsolutePath(null));
@@ -801,7 +1092,7 @@ function EditorOverlay({
       setAbsolutePath(null);
       setParsedComponentName(null);
     }
-  }, [selectedSource]);
+  }, [selectedSource, refreshCodePreview]);
   react.useEffect(() => {
     let lastEl = null;
     let raf;
@@ -872,54 +1163,38 @@ function EditorOverlay({
     };
   }, [hoveredSource, hoveredElement, selectedSource, onSelect]);
   const handleSubmit = async () => {
-    var _a2, _b, _c, _d;
     if (!suggestion.trim()) return;
+    const appliedSuggestion = suggestion;
     const res = await submitEdit(suggestion);
     setResult(res);
     if (res.success) {
       setSuggestion("");
+      setLastAppliedSuggestion(appliedSuggestion);
       if (selectedSource) {
-        const params = {
-          path: selectedSource.filePath,
-          line: String(selectedSource.lineNumber),
-          tagName: ((_a2 = selectedSource.elementContext) == null ? void 0 : _a2.tagName) || "",
-          nthOfType: String(((_b = selectedSource.elementContext) == null ? void 0 : _b.nthOfType) || 0),
-          textContent: ((_c = selectedSource.elementContext) == null ? void 0 : _c.textContent) || "",
-          className: ((_d = selectedSource.elementContext) == null ? void 0 : _d.className) || ""
-        };
-        if (selectedSource.debugStack) {
-          params.debugStack = selectedSource.debugStack;
-        }
-        fetch(`/api/ai-editor/read?` + new URLSearchParams(params)).then((r) => r.json()).then((d) => {
-          if (d.success) {
-            setCode(d.content);
-            setCodeLineStart(d.lineStart || 1);
-            setTargetStartLine(d.targetStartLine || null);
-            setTargetEndLine(d.targetEndLine || null);
-            if (d.componentName) {
-              setParsedComponentName(d.componentName);
-            }
-          }
-        }).catch(console.error);
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        await refreshCodePreview(selectedSource);
+        console.log("[AI Editor] Fetching suggestions after edit:", appliedSuggestion);
+        fetchSuggestions(selectedSource, editHistory, appliedSuggestion);
       }
       setTimeout(() => setResult(null), 3e3);
     }
   };
   const handleUndo = async () => {
-    var _a2, _b, _c, _d;
     if (editHistory.length === 0 || !selectedSource) return;
     const lastSuccessfulEdit = [...editHistory].reverse().find((edit) => edit.success && edit.fileSnapshot);
     if (!lastSuccessfulEdit) {
       console.warn("No successful edit with snapshot found to undo");
       return;
     }
+    const fileToRestore = lastSuccessfulEdit.editedFilePath || selectedSource.filePath;
+    console.log(`[Undo] Restoring file: ${fileToRestore}`);
     setIsLoading(true);
     try {
       const response = await fetch("/api/ai-editor/undo", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
-          filePath: selectedSource.filePath,
+          filePath: fileToRestore,
           content: lastSuccessfulEdit.fileSnapshot
         })
       });
@@ -931,28 +1206,7 @@ function EditorOverlay({
         const lastIndex = prev.lastIndexOf(lastSuccessfulEdit);
         return prev.filter((_, idx) => idx !== lastIndex);
       });
-      const params = {
-        path: selectedSource.filePath,
-        line: String(selectedSource.lineNumber),
-        tagName: ((_a2 = selectedSource.elementContext) == null ? void 0 : _a2.tagName) || "",
-        nthOfType: String(((_b = selectedSource.elementContext) == null ? void 0 : _b.nthOfType) || 0),
-        textContent: ((_c = selectedSource.elementContext) == null ? void 0 : _c.textContent) || "",
-        className: ((_d = selectedSource.elementContext) == null ? void 0 : _d.className) || ""
-      };
-      if (selectedSource.debugStack) {
-        params.debugStack = selectedSource.debugStack;
-      }
-      fetch(`/api/ai-editor/read?` + new URLSearchParams(params)).then((r) => r.json()).then((d) => {
-        if (d.success) {
-          setCode(d.content);
-          setCodeLineStart(d.lineStart || 1);
-          setTargetStartLine(d.targetStartLine || null);
-          setTargetEndLine(d.targetEndLine || null);
-          if (d.componentName) {
-            setParsedComponentName(d.componentName);
-          }
-        }
-      }).catch(console.error);
+      await refreshCodePreview(selectedSource);
       setResult({ success: true, error: void 0 });
       setTimeout(() => setResult(null), 3e3);
     } catch (error) {
@@ -963,50 +1217,30 @@ function EditorOverlay({
     }
   };
   const handleRetry = async (editIndex) => {
-    var _a2, _b, _c, _d;
     const editToRetry = editHistory[editIndex];
     if (!editToRetry) return;
     const res = await submitEdit(editToRetry.suggestion);
     if (res.success && selectedSource) {
-      const params = {
-        path: selectedSource.filePath,
-        line: String(selectedSource.lineNumber),
-        tagName: ((_a2 = selectedSource.elementContext) == null ? void 0 : _a2.tagName) || "",
-        nthOfType: String(((_b = selectedSource.elementContext) == null ? void 0 : _b.nthOfType) || 0),
-        textContent: ((_c = selectedSource.elementContext) == null ? void 0 : _c.textContent) || "",
-        className: ((_d = selectedSource.elementContext) == null ? void 0 : _d.className) || ""
-      };
-      if (selectedSource.debugStack) {
-        params.debugStack = selectedSource.debugStack;
-      }
-      fetch(`/api/ai-editor/read?` + new URLSearchParams(params)).then((r) => r.json()).then((d) => {
-        if (d.success) {
-          setCode(d.content);
-          setCodeLineStart(d.lineStart || 1);
-          setTargetStartLine(d.targetStartLine || null);
-          setTargetEndLine(d.targetEndLine || null);
-          if (d.componentName) {
-            setParsedComponentName(d.componentName);
-          }
-        }
-      }).catch(console.error);
+      await new Promise((resolve) => setTimeout(resolve, 100));
+      await refreshCodePreview(selectedSource, { includeParent: false });
     }
   };
   const handleUndoAndRetry = async () => {
-    var _a2, _b, _c, _d;
     if (editHistory.length === 0 || !selectedSource) return;
     const lastSuccessfulEdit = [...editHistory].reverse().find((edit) => edit.success && edit.fileSnapshot);
     if (!lastSuccessfulEdit) {
       console.warn("No successful edit with snapshot found to undo and retry");
       return;
     }
+    const fileToRestore = lastSuccessfulEdit.editedFilePath || selectedSource.filePath;
+    console.log(`[Undo & Retry] Restoring file: ${fileToRestore}`);
     setIsLoading(true);
     try {
       const undoResponse = await fetch("/api/ai-editor/undo", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
-          filePath: selectedSource.filePath,
+          filePath: fileToRestore,
           content: lastSuccessfulEdit.fileSnapshot
         })
       });
@@ -1018,42 +1252,12 @@ function EditorOverlay({
         const lastIndex = prev.lastIndexOf(lastSuccessfulEdit);
         return prev.filter((_, idx) => idx !== lastIndex);
       });
-      const params = {
-        path: selectedSource.filePath,
-        line: String(selectedSource.lineNumber),
-        tagName: ((_a2 = selectedSource.elementContext) == null ? void 0 : _a2.tagName) || "",
-        nthOfType: String(((_b = selectedSource.elementContext) == null ? void 0 : _b.nthOfType) || 0),
-        textContent: ((_c = selectedSource.elementContext) == null ? void 0 : _c.textContent) || "",
-        className: ((_d = selectedSource.elementContext) == null ? void 0 : _d.className) || ""
-      };
-      if (selectedSource.debugStack) {
-        params.debugStack = selectedSource.debugStack;
-      }
-      await fetch(`/api/ai-editor/read?` + new URLSearchParams(params)).then((r) => r.json()).then((d) => {
-        if (d.success) {
-          setCode(d.content);
-          setCodeLineStart(d.lineStart || 1);
-          setTargetStartLine(d.targetStartLine || null);
-          setTargetEndLine(d.targetEndLine || null);
-          if (d.componentName) {
-            setParsedComponentName(d.componentName);
-          }
-        }
-      }).catch(console.error);
+      await refreshCodePreview(selectedSource);
       setIsLoading(true);
       const retryResult = await submitEdit(lastSuccessfulEdit.suggestion);
       if (retryResult.success && selectedSource) {
-        await fetch(`/api/ai-editor/read?` + new URLSearchParams(params)).then((r) => r.json()).then((d) => {
-          if (d.success) {
-            setCode(d.content);
-            setCodeLineStart(d.lineStart || 1);
-            setTargetStartLine(d.targetStartLine || null);
-            setTargetEndLine(d.targetEndLine || null);
-            if (d.componentName) {
-              setParsedComponentName(d.componentName);
-            }
-          }
-        }).catch(console.error);
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        await refreshCodePreview(selectedSource);
       }
       if (retryResult.success) {
         setResult({ success: true, error: void 0 });
@@ -1088,6 +1292,12 @@ function EditorOverlay({
       className: "ai-editor-ui",
       style: { fontFamily: "system-ui, sans-serif" },
       children: [
+        /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+          @keyframes ai-editor-spin {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+          }
+        ` }),
         hoveredRect && !selectedSource && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
@@ -1293,20 +1503,31 @@ function EditorOverlay({
                 }
               ),
               code && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: 20 }, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
                   {
+                    onClick: () => setIsSourcePreviewExpanded(!isSourcePreviewExpanded),
                     style: {
                       fontSize: 11,
                       fontWeight: 600,
                       marginBottom: 8,
                       color: c.muted,
-                      textTransform: "uppercase"
+                      textTransform: "uppercase",
+                      background: "transparent",
+                      border: "none",
+                      padding: 0,
+                      cursor: "pointer",
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 6
                     },
-                    children: "Source Preview"
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 10 }, children: isSourcePreviewExpanded ? "▼" : "▶" }),
+                      "Source Preview"
+                    ]
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx(
+                isSourcePreviewExpanded && /* @__PURE__ */ jsxRuntime.jsx(
                   reactSyntaxHighlighter.Prism,
                   {
                     language: "tsx",
@@ -1342,25 +1563,99 @@ function EditorOverlay({
                   }
                 )
               ] }),
+              parentInstance && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: 20 }, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    onClick: () => setIsParentPreviewExpanded(!isParentPreviewExpanded),
+                    style: {
+                      fontSize: 11,
+                      fontWeight: 600,
+                      marginBottom: 8,
+                      color: c.muted,
+                      textTransform: "uppercase",
+                      background: "transparent",
+                      border: "none",
+                      padding: 0,
+                      cursor: "pointer",
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 6
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 10 }, children: isParentPreviewExpanded ? "▼" : "▶" }),
+                      "Used In: ",
+                      parentInstance.componentName,
+                      " (",
+                      parentInstance.filePath,
+                      ")"
+                    ]
+                  }
+                ),
+                isParentPreviewExpanded && /* @__PURE__ */ jsxRuntime.jsx(
+                  reactSyntaxHighlighter.Prism,
+                  {
+                    language: "tsx",
+                    style: isDark ? prism.vscDarkPlus : prism.vs,
+                    showLineNumbers: true,
+                    startingLineNumber: parentInstance.lineStart,
+                    customStyle: {
+                      background: c.bgAlt,
+                      borderRadius: 10,
+                      fontSize: 14,
+                      margin: 0,
+                      maxHeight: 180,
+                      overflowX: "auto",
+                      border: `1px solid ${c.border}`
+                    },
+                    lineNumberStyle: {
+                      minWidth: "2.5em",
+                      paddingRight: "1em",
+                      color: c.muted,
+                      textAlign: "right",
+                      userSelect: "none"
+                    },
+                    wrapLines: true,
+                    lineProps: (lineNumber) => {
+                      const isUsageLine = lineNumber >= parentInstance.usageLineStart && lineNumber <= parentInstance.usageLineEnd;
+                      return {
+                        style: {
+                          backgroundColor: isUsageLine ? isDark ? "rgba(255, 165, 0, 0.15)" : "rgba(255, 165, 0, 0.2)" : "transparent"
+                        }
+                      };
+                    },
+                    children: parentInstance.content
+                  }
+                )
+              ] }),
               editHistory.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: 20 }, children: [
                 /* @__PURE__ */ jsxRuntime.jsxs(
-                  "div",
+                  "button",
                   {
+                    onClick: () => setIsEditHistoryExpanded(!isEditHistoryExpanded),
                     style: {
                       fontSize: 11,
                       fontWeight: 600,
                       marginBottom: 8,
                       color: c.muted,
-                      textTransform: "uppercase"
+                      textTransform: "uppercase",
+                      background: "transparent",
+                      border: "none",
+                      padding: 0,
+                      cursor: "pointer",
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 6
                     },
                     children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 10 }, children: isEditHistoryExpanded ? "▼" : "▶" }),
                       "Edit History (",
                       editHistory.length,
                       ")"
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx(
+                isEditHistoryExpanded && /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
                   {
                     style: {
@@ -1400,7 +1695,19 @@ function EditorOverlay({
                                         marginBottom: 4
                                       },
                                       children: [
-                                        /* @__PURE__ */ jsxRuntime.jsx(
+                                        item.pending ? /* @__PURE__ */ jsxRuntime.jsx(
+                                          "div",
+                                          {
+                                            style: {
+                                              width: 16,
+                                              height: 16,
+                                              border: "2px solid transparent",
+                                              borderTopColor: c.accent,
+                                              borderRadius: "50%",
+                                              animation: "ai-editor-spin 0.8s linear infinite"
+                                            }
+                                          }
+                                        ) : /* @__PURE__ */ jsxRuntime.jsx(
                                           "span",
                                           {
                                             style: {
@@ -1451,7 +1758,7 @@ function EditorOverlay({
                                   )
                                 ] }),
                                 /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: [
-                                  isLastEdit && hasSnapshot && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                                  isLastEdit && hasSnapshot && !item.pending && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                                     /* @__PURE__ */ jsxRuntime.jsx(
                                       "button",
                                       {
@@ -1513,25 +1820,25 @@ function EditorOverlay({
                                     "button",
                                     {
                                       onClick: () => handleRetry(idx),
-                                      disabled: isLoading,
+                                      disabled: isLoading || item.pending,
                                       style: {
                                         padding: "4px 10px",
                                         fontSize: 11,
                                         borderRadius: 6,
                                         border: "none",
-                                        background: isLoading ? c.muted : c.accent,
+                                        background: isLoading || item.pending ? c.muted : c.accent,
                                         color: "#fff",
                                         fontWeight: 600,
-                                        cursor: isLoading ? "wait" : "pointer",
+                                        cursor: isLoading || item.pending ? "wait" : "pointer",
                                         whiteSpace: "nowrap"
                                       },
                                       title: "Retry this edit",
                                       onMouseEnter: (e) => {
-                                        if (!isLoading)
+                                        if (!isLoading && !item.pending)
                                           e.currentTarget.style.background = "#6366f1";
                                       },
                                       onMouseLeave: (e) => {
-                                        if (!isLoading)
+                                        if (!isLoading && !item.pending)
                                           e.currentTarget.style.background = c.accent;
                                       },
                                       children: "↻ Retry"
@@ -1591,6 +1898,144 @@ function EditorOverlay({
                   }
                 )
               ] }),
+              (suggestions.length > 0 || suggestionsLoading) && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: 20 }, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    style: {
+                      fontSize: 11,
+                      fontWeight: 600,
+                      marginBottom: 8,
+                      color: c.muted,
+                      textTransform: "uppercase",
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 8
+                    },
+                    children: [
+                      "Quick Suggestions",
+                      suggestionsLoading ? /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          style: {
+                            width: 12,
+                            height: 12,
+                            border: "2px solid transparent",
+                            borderTopColor: c.accent,
+                            borderRadius: "50%",
+                            animation: "ai-editor-spin 0.8s linear infinite"
+                          }
+                        }
+                      ) : suggestions.length > 0 && selectedSource && /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          onClick: () => {
+                            console.log("[AI Editor] Refreshing suggestions, excluding:", suggestions);
+                            fetchSuggestions(selectedSource, editHistory, lastAppliedSuggestion, suggestions);
+                          },
+                          disabled: isLoading,
+                          style: {
+                            background: "transparent",
+                            border: "none",
+                            padding: 4,
+                            cursor: isLoading ? "wait" : "pointer",
+                            color: c.muted,
+                            fontSize: 14,
+                            display: "flex",
+                            alignItems: "center",
+                            transition: "all 0.15s ease"
+                          },
+                          onMouseEnter: (e) => {
+                            if (!isLoading) {
+                              e.currentTarget.style.color = c.accent;
+                              e.currentTarget.style.transform = "rotate(180deg)";
+                            }
+                          },
+                          onMouseLeave: (e) => {
+                            if (!isLoading) {
+                              e.currentTarget.style.color = c.muted;
+                              e.currentTarget.style.transform = "rotate(0deg)";
+                            }
+                          },
+                          title: "Get different suggestions",
+                          children: "↻"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      flexWrap: "wrap",
+                      gap: 8
+                    },
+                    children: suggestionsLoading ? (
+                      // Loading skeletons
+                      Array.from({ length: 6 }).map((_, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          style: {
+                            padding: "8px 14px",
+                            borderRadius: 8,
+                            background: c.bgAlt,
+                            border: `1px solid ${c.border}`,
+                            fontSize: 13,
+                            height: 34,
+                            width: Math.random() * 60 + 80,
+                            // Variable width
+                            opacity: 0.5
+                          }
+                        },
+                        idx
+                      ))
+                    ) : suggestions.map((suggestionText, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        onClick: (e) => {
+                          if (e.metaKey || e.ctrlKey) {
+                            setSuggestion(suggestionText);
+                            setTimeout(() => handleSubmit(), 50);
+                          } else {
+                            setSuggestion(suggestionText);
+                          }
+                        },
+                        disabled: isLoading,
+                        style: {
+                          padding: "8px 14px",
+                          borderRadius: 8,
+                          border: `1px solid ${c.border}`,
+                          background: c.bgAlt,
+                          color: c.text,
+                          fontSize: 13,
+                          cursor: isLoading ? "wait" : "pointer",
+                          transition: "all 0.15s ease",
+                          whiteSpace: "nowrap"
+                        },
+                        onMouseEnter: (e) => {
+                          if (!isLoading) {
+                            e.currentTarget.style.background = c.accent + "20";
+                            e.currentTarget.style.borderColor = c.accent;
+                            e.currentTarget.style.transform = "translateY(-1px)";
+                          }
+                        },
+                        onMouseLeave: (e) => {
+                          if (!isLoading) {
+                            e.currentTarget.style.background = c.bgAlt;
+                            e.currentTarget.style.borderColor = c.border;
+                            e.currentTarget.style.transform = "translateY(0)";
+                          }
+                        },
+                        title: "Click to use • Cmd+Click to apply immediately",
+                        children: suggestionText
+                      },
+                      idx
+                    ))
+                  }
+                )
+              ] }),
               result && /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
@@ -1719,4 +2164,4 @@ function EditorOverlay({
   );
 }
 exports.AIEditorProvider = AIEditorProvider;
-//# sourceMappingURL=AIEditorProvider-Bs9zUVrL.cjs.map
+//# sourceMappingURL=AIEditorProvider-BGHm2xyU.cjs.map