npm - @stephenov/feedbackwidget - Versions diffs - 0.5.1 → 0.6.0 - Mend

@stephenov/feedbackwidget 0.5.1 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/cli.js CHANGED Viewed

@@ -88,50 +88,46 @@ async function initProject() {
       reject(new Error("Authentication timed out"));
     }, 5 * 60 * 1e3);
   });
+  const framework = detectFramework();
+  const snippet = `<FeedbackWidget apiKey="${apiKey}" />`;
+  let copied = false;
+  try {
+    await copyToClipboard(snippet);
+    copied = true;
+  } catch {
+  }
   console.log("\u2705 Authenticated!\n");
-  const injected = injectWidget(apiKey);
-  if (injected) {
-    console.log("\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\n");
-    console.log("   \u2705 Widget automatically added to your app!\n");
-    console.log(`   Modified: ${injected.file}
+  console.log("\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\n");
+  if (framework.name) {
+    console.log(`   Detected: ${framework.name}
 `);
-    console.log("\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\n");
-    console.log("   Just run your dev server and the widget will appear.\n");
+  }
+  console.log("   Step 1: Add the import to " + framework.file + "\n");
+  if (framework.name === "Astro") {
+    console.log("   ---");
+    console.log('   import { FeedbackWidget } from "@stephenov/feedbackwidget";');
+    console.log("   ---\n");
   } else {
-    const snippet = `<FeedbackWidget apiKey="${apiKey}" />`;
-    let copied = false;
-    try {
-      await copyToClipboard(snippet);
-      copied = true;
-    } catch {
-    }
-    console.log("\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\n");
-    console.log("   Your API Key:\n");
-    console.log(`   ${apiKey}
-`);
-    console.log("\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\n");
-    if (copied) {
-      console.log("   \u{1F4CB} Copied to clipboard!\n");
-    }
-    const framework = detectFramework();
-    console.log("   Add to your app:\n");
     console.log('   import { FeedbackWidget } from "@stephenov/feedbackwidget"\n');
-    console.log(`   ${snippet}
-`);
-    if (framework.name) {
-      console.log(`   Detected: ${framework.name}
+  }
+  console.log("   Step 2: Add the component " + (framework.note || "inside <body>") + "\n");
+  if (framework.name === "Astro") {
+    console.log(`   <FeedbackWidget client:load apiKey="${apiKey}" />
 `);
-      console.log(`   Add to: ${framework.file}
+  } else {
+    console.log(`   ${snippet}
 `);
-      if (framework.note) {
-        console.log(`   Note: ${framework.note}
+  }
+  console.log("   Step 3: Run your dev server\n");
+  console.log(`   ${framework.devCommand || "npm run dev"}
 `);
-      }
-    } else {
-      console.log("   Add to your root component (renders on every page)\n");
-    }
+  console.log("   Step 4: Refresh browser - widget appears in bottom-right\n");
+  console.log("\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\n");
+  console.log("   Once the widget appears, view feedback at:");
+  console.log("   https://feedbackwidget-api.vercel.app/dashboard\n");
+  if (copied) {
+    console.log("   \u{1F4CB} Snippet copied to clipboard!\n");
   }
-  console.log("   Dashboard: https://feedbackwidget-api.vercel.app/dashboard\n");
 }
 async function whoami() {
   console.log("\nRun 'npx feedbackwidget init' to get your API key.\n");
@@ -196,170 +192,65 @@ function errorPage(error) {
 </body>
 </html>`;
 }
-function injectWidget(apiKey) {
+function detectFramework() {
   const cwd = process.cwd();
-  const importLine = 'import { FeedbackWidget } from "@stephenov/feedbackwidget";';
-  const component = `<FeedbackWidget apiKey="${apiKey}" />`;
   try {
     const pkgPath = import_path.default.join(cwd, "package.json");
     const pkg = JSON.parse(import_fs.default.readFileSync(pkgPath, "utf-8"));
     const deps = { ...pkg.dependencies, ...pkg.devDependencies };
-    if (deps.next) {
-      const layoutPaths = [
-        import_path.default.join(cwd, "app", "layout.tsx"),
-        import_path.default.join(cwd, "app", "layout.js"),
-        import_path.default.join(cwd, "src", "app", "layout.tsx"),
-        import_path.default.join(cwd, "src", "app", "layout.js")
-      ];
-      for (const layoutPath of layoutPaths) {
-        if (import_fs.default.existsSync(layoutPath)) {
-          let content = import_fs.default.readFileSync(layoutPath, "utf-8");
-          if (content.includes("FeedbackWidget")) {
-            return null;
-          }
-          const lines = content.split("\n");
-          let lastImportIndex = -1;
-          for (let i = 0; i < lines.length; i++) {
-            if (lines[i].startsWith("import ")) {
-              lastImportIndex = i;
-            }
-          }
-          if (lastImportIndex >= 0) {
-            lines.splice(lastImportIndex + 1, 0, importLine);
-          } else {
-            lines.unshift(importLine);
-          }
-          content = lines.join("\n");
-          const bodyRegex = /(<body[^>]*>)/;
-          const bodyMatch = content.match(bodyRegex);
-          if (bodyMatch && bodyMatch.index !== void 0) {
-            const insertPos = bodyMatch.index + bodyMatch[0].length;
-            content = content.slice(0, insertPos) + "\n        " + component + content.slice(insertPos);
-          }
-          import_fs.default.writeFileSync(layoutPath, content, { encoding: "utf-8", flag: "w" });
-          const verify = import_fs.default.readFileSync(layoutPath, "utf-8");
-          if (!verify.includes("FeedbackWidget")) {
-            console.error("   Warning: File write may not have persisted. Check " + layoutPath);
-            return null;
-          }
-          return { file: layoutPath.replace(cwd + "/", "") };
-        }
+    if (deps.astro) {
+      if (import_fs.default.existsSync(import_path.default.join(cwd, "src", "layouts", "Layout.astro"))) {
+        return { name: "Astro", file: "src/layouts/Layout.astro", note: "inside <body>", devCommand: "npm run dev" };
       }
-      const appPaths = [
-        import_path.default.join(cwd, "pages", "_app.tsx"),
-        import_path.default.join(cwd, "pages", "_app.js"),
-        import_path.default.join(cwd, "src", "pages", "_app.tsx"),
-        import_path.default.join(cwd, "src", "pages", "_app.js")
-      ];
-      for (const appPath of appPaths) {
-        if (import_fs.default.existsSync(appPath)) {
-          let content = import_fs.default.readFileSync(appPath, "utf-8");
-          if (content.includes("FeedbackWidget")) {
-            return null;
-          }
-          const importMatch = content.match(/^(import .+\n)+/m);
-          if (importMatch) {
-            const lastImportEnd = importMatch.index + importMatch[0].length;
-            content = content.slice(0, lastImportEnd) + importLine + "\n" + content.slice(lastImportEnd);
-          }
-          const componentMatch = content.match(/<Component\s+\{\.\.\.pageProps\}\s*\/>/);
-          if (componentMatch) {
-            const insertPos = componentMatch.index + componentMatch[0].length;
-            content = content.slice(0, insertPos) + "\n        " + component + content.slice(insertPos);
-          }
-          import_fs.default.writeFileSync(appPath, content);
-          return { file: appPath.replace(cwd + "/", "") };
-        }
+      if (import_fs.default.existsSync(import_path.default.join(cwd, "src", "layouts", "BaseLayout.astro"))) {
+        return { name: "Astro", file: "src/layouts/BaseLayout.astro", note: "inside <body>", devCommand: "npm run dev" };
       }
+      return { name: "Astro", file: "your main layout .astro file", note: "inside <body>", devCommand: "npm run dev" };
     }
-    if (deps.vite || deps["react-scripts"] || deps.react) {
-      const appPaths = [
-        import_path.default.join(cwd, "src", "App.tsx"),
-        import_path.default.join(cwd, "src", "App.jsx")
-      ];
-      for (const appPath of appPaths) {
-        if (import_fs.default.existsSync(appPath)) {
-          let content = import_fs.default.readFileSync(appPath, "utf-8");
-          if (content.includes("FeedbackWidget")) {
-            return null;
-          }
-          const importMatch = content.match(/^(import .+\n)+/m);
-          if (importMatch) {
-            const lastImportEnd = importMatch.index + importMatch[0].length;
-            content = content.slice(0, lastImportEnd) + importLine + "\n" + content.slice(lastImportEnd);
-          }
-          const returnMatch = content.match(/return\s*\(\s*\n?\s*(<[A-Za-z>])/);
-          if (returnMatch) {
-            const match = content.match(/return\s*\(\s*\n?\s*<[A-Za-z]+[^>]*>/);
-            if (match) {
-              const insertPos = match.index + match[0].length;
-              content = content.slice(0, insertPos) + "\n      " + component + content.slice(insertPos);
-            }
-          }
-          import_fs.default.writeFileSync(appPath, content);
-          return { file: appPath.replace(cwd + "/", "") };
-        }
-      }
-    }
-  } catch {
-  }
-  return null;
-}
-function detectFramework() {
-  const cwd = process.cwd();
-  try {
-    const pkgPath = import_path.default.join(cwd, "package.json");
-    const pkg = JSON.parse(import_fs.default.readFileSync(pkgPath, "utf-8"));
-    const deps = { ...pkg.dependencies, ...pkg.devDependencies };
-    if (deps.next && import_fs.default.existsSync(import_path.default.join(cwd, "app"))) {
+    if (deps.next) {
       if (import_fs.default.existsSync(import_path.default.join(cwd, "app", "layout.tsx"))) {
-        return { name: "Next.js (App Router)", file: "app/layout.tsx", note: "Inside <body>, before {children}" };
+        return { name: "Next.js (App Router)", file: "app/layout.tsx", note: "inside <body>, before {children}", devCommand: "npm run dev" };
       }
       if (import_fs.default.existsSync(import_path.default.join(cwd, "app", "layout.js"))) {
-        return { name: "Next.js (App Router)", file: "app/layout.js", note: "Inside <body>, before {children}" };
+        return { name: "Next.js (App Router)", file: "app/layout.js", note: "inside <body>, before {children}", devCommand: "npm run dev" };
       }
       if (import_fs.default.existsSync(import_path.default.join(cwd, "src", "app", "layout.tsx"))) {
-        return { name: "Next.js (App Router)", file: "src/app/layout.tsx", note: "Inside <body>, before {children}" };
+        return { name: "Next.js (App Router)", file: "src/app/layout.tsx", note: "inside <body>, before {children}", devCommand: "npm run dev" };
       }
-    }
-    if (deps.next && import_fs.default.existsSync(import_path.default.join(cwd, "pages"))) {
       if (import_fs.default.existsSync(import_path.default.join(cwd, "pages", "_app.tsx"))) {
-        return { name: "Next.js (Pages Router)", file: "pages/_app.tsx", note: "After <Component {...pageProps} />" };
+        return { name: "Next.js (Pages Router)", file: "pages/_app.tsx", note: "after <Component {...pageProps} />", devCommand: "npm run dev" };
       }
       if (import_fs.default.existsSync(import_path.default.join(cwd, "pages", "_app.js"))) {
-        return { name: "Next.js (Pages Router)", file: "pages/_app.js", note: "After <Component {...pageProps} />" };
+        return { name: "Next.js (Pages Router)", file: "pages/_app.js", note: "after <Component {...pageProps} />", devCommand: "npm run dev" };
+      }
+    }
+    if (deps["@remix-run/react"]) {
+      if (import_fs.default.existsSync(import_path.default.join(cwd, "app", "root.tsx"))) {
+        return { name: "Remix", file: "app/root.tsx", note: "inside <body>", devCommand: "npm run dev" };
       }
     }
     if (deps.vite && (deps.react || deps["@vitejs/plugin-react"])) {
       if (import_fs.default.existsSync(import_path.default.join(cwd, "src", "App.tsx"))) {
-        return { name: "Vite + React", file: "src/App.tsx", note: "At end of App component" };
+        return { name: "Vite + React", file: "src/App.tsx", note: "at the end of your App component", devCommand: "npm run dev" };
       }
       if (import_fs.default.existsSync(import_path.default.join(cwd, "src", "App.jsx"))) {
-        return { name: "Vite + React", file: "src/App.jsx", note: "At end of App component" };
+        return { name: "Vite + React", file: "src/App.jsx", note: "at the end of your App component", devCommand: "npm run dev" };
       }
     }
     if (deps["react-scripts"]) {
       if (import_fs.default.existsSync(import_path.default.join(cwd, "src", "App.tsx"))) {
-        return { name: "Create React App", file: "src/App.tsx", note: "At end of App component" };
+        return { name: "Create React App", file: "src/App.tsx", note: "at the end of your App component", devCommand: "npm start" };
       }
       if (import_fs.default.existsSync(import_path.default.join(cwd, "src", "App.js"))) {
-        return { name: "Create React App", file: "src/App.js", note: "At end of App component" };
-      }
-    }
-    if (deps.astro) {
-      return { name: "Astro", file: "A React component", note: "Use client:load directive" };
-    }
-    if (deps["@remix-run/react"]) {
-      if (import_fs.default.existsSync(import_path.default.join(cwd, "app", "root.tsx"))) {
-        return { name: "Remix", file: "app/root.tsx", note: "Inside <body>" };
+        return { name: "Create React App", file: "src/App.js", note: "at the end of your App component", devCommand: "npm start" };
       }
     }
     if (deps.react) {
-      return { name: "React", file: "Your App component", note: "Where it renders on every page" };
+      return { name: "React", file: "your main App component", note: "where it renders on every page", devCommand: "npm run dev" };
     }
   } catch {
   }
-  return { name: null, file: "Your root component" };
+  return { name: null, file: "your root component", note: "inside the main layout", devCommand: "npm run dev" };
 }
 async function copyToClipboard(text) {
   return new Promise((resolve, reject) => {

package/dist/cli.mjs CHANGED Viewed

@@ -65,50 +65,46 @@ async function initProject() {
       reject(new Error("Authentication timed out"));
     }, 5 * 60 * 1e3);
   });
+  const framework = detectFramework();
+  const snippet = `<FeedbackWidget apiKey="${apiKey}" />`;
+  let copied = false;
+  try {
+    await copyToClipboard(snippet);
+    copied = true;
+  } catch {
+  }
   console.log("\u2705 Authenticated!\n");
-  const injected = injectWidget(apiKey);
-  if (injected) {
-    console.log("\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\n");
-    console.log("   \u2705 Widget automatically added to your app!\n");
-    console.log(`   Modified: ${injected.file}
+  console.log("\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\n");
+  if (framework.name) {
+    console.log(`   Detected: ${framework.name}
 `);
-    console.log("\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\n");
-    console.log("   Just run your dev server and the widget will appear.\n");
+  }
+  console.log("   Step 1: Add the import to " + framework.file + "\n");
+  if (framework.name === "Astro") {
+    console.log("   ---");
+    console.log('   import { FeedbackWidget } from "@stephenov/feedbackwidget";');
+    console.log("   ---\n");
   } else {
-    const snippet = `<FeedbackWidget apiKey="${apiKey}" />`;
-    let copied = false;
-    try {
-      await copyToClipboard(snippet);
-      copied = true;
-    } catch {
-    }
-    console.log("\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\n");
-    console.log("   Your API Key:\n");
-    console.log(`   ${apiKey}
-`);
-    console.log("\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\n");
-    if (copied) {
-      console.log("   \u{1F4CB} Copied to clipboard!\n");
-    }
-    const framework = detectFramework();
-    console.log("   Add to your app:\n");
     console.log('   import { FeedbackWidget } from "@stephenov/feedbackwidget"\n');
-    console.log(`   ${snippet}
-`);
-    if (framework.name) {
-      console.log(`   Detected: ${framework.name}
+  }
+  console.log("   Step 2: Add the component " + (framework.note || "inside <body>") + "\n");
+  if (framework.name === "Astro") {
+    console.log(`   <FeedbackWidget client:load apiKey="${apiKey}" />
 `);
-      console.log(`   Add to: ${framework.file}
+  } else {
+    console.log(`   ${snippet}
 `);
-      if (framework.note) {
-        console.log(`   Note: ${framework.note}
+  }
+  console.log("   Step 3: Run your dev server\n");
+  console.log(`   ${framework.devCommand || "npm run dev"}
 `);
-      }
-    } else {
-      console.log("   Add to your root component (renders on every page)\n");
-    }
+  console.log("   Step 4: Refresh browser - widget appears in bottom-right\n");
+  console.log("\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\n");
+  console.log("   Once the widget appears, view feedback at:");
+  console.log("   https://feedbackwidget-api.vercel.app/dashboard\n");
+  if (copied) {
+    console.log("   \u{1F4CB} Snippet copied to clipboard!\n");
   }
-  console.log("   Dashboard: https://feedbackwidget-api.vercel.app/dashboard\n");
 }
 async function whoami() {
   console.log("\nRun 'npx feedbackwidget init' to get your API key.\n");
@@ -173,170 +169,65 @@ function errorPage(error) {
 </body>
 </html>`;
 }
-function injectWidget(apiKey) {
+function detectFramework() {
   const cwd = process.cwd();
-  const importLine = 'import { FeedbackWidget } from "@stephenov/feedbackwidget";';
-  const component = `<FeedbackWidget apiKey="${apiKey}" />`;
   try {
     const pkgPath = path.join(cwd, "package.json");
     const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
     const deps = { ...pkg.dependencies, ...pkg.devDependencies };
-    if (deps.next) {
-      const layoutPaths = [
-        path.join(cwd, "app", "layout.tsx"),
-        path.join(cwd, "app", "layout.js"),
-        path.join(cwd, "src", "app", "layout.tsx"),
-        path.join(cwd, "src", "app", "layout.js")
-      ];
-      for (const layoutPath of layoutPaths) {
-        if (fs.existsSync(layoutPath)) {
-          let content = fs.readFileSync(layoutPath, "utf-8");
-          if (content.includes("FeedbackWidget")) {
-            return null;
-          }
-          const lines = content.split("\n");
-          let lastImportIndex = -1;
-          for (let i = 0; i < lines.length; i++) {
-            if (lines[i].startsWith("import ")) {
-              lastImportIndex = i;
-            }
-          }
-          if (lastImportIndex >= 0) {
-            lines.splice(lastImportIndex + 1, 0, importLine);
-          } else {
-            lines.unshift(importLine);
-          }
-          content = lines.join("\n");
-          const bodyRegex = /(<body[^>]*>)/;
-          const bodyMatch = content.match(bodyRegex);
-          if (bodyMatch && bodyMatch.index !== void 0) {
-            const insertPos = bodyMatch.index + bodyMatch[0].length;
-            content = content.slice(0, insertPos) + "\n        " + component + content.slice(insertPos);
-          }
-          fs.writeFileSync(layoutPath, content, { encoding: "utf-8", flag: "w" });
-          const verify = fs.readFileSync(layoutPath, "utf-8");
-          if (!verify.includes("FeedbackWidget")) {
-            console.error("   Warning: File write may not have persisted. Check " + layoutPath);
-            return null;
-          }
-          return { file: layoutPath.replace(cwd + "/", "") };
-        }
+    if (deps.astro) {
+      if (fs.existsSync(path.join(cwd, "src", "layouts", "Layout.astro"))) {
+        return { name: "Astro", file: "src/layouts/Layout.astro", note: "inside <body>", devCommand: "npm run dev" };
       }
-      const appPaths = [
-        path.join(cwd, "pages", "_app.tsx"),
-        path.join(cwd, "pages", "_app.js"),
-        path.join(cwd, "src", "pages", "_app.tsx"),
-        path.join(cwd, "src", "pages", "_app.js")
-      ];
-      for (const appPath of appPaths) {
-        if (fs.existsSync(appPath)) {
-          let content = fs.readFileSync(appPath, "utf-8");
-          if (content.includes("FeedbackWidget")) {
-            return null;
-          }
-          const importMatch = content.match(/^(import .+\n)+/m);
-          if (importMatch) {
-            const lastImportEnd = importMatch.index + importMatch[0].length;
-            content = content.slice(0, lastImportEnd) + importLine + "\n" + content.slice(lastImportEnd);
-          }
-          const componentMatch = content.match(/<Component\s+\{\.\.\.pageProps\}\s*\/>/);
-          if (componentMatch) {
-            const insertPos = componentMatch.index + componentMatch[0].length;
-            content = content.slice(0, insertPos) + "\n        " + component + content.slice(insertPos);
-          }
-          fs.writeFileSync(appPath, content);
-          return { file: appPath.replace(cwd + "/", "") };
-        }
+      if (fs.existsSync(path.join(cwd, "src", "layouts", "BaseLayout.astro"))) {
+        return { name: "Astro", file: "src/layouts/BaseLayout.astro", note: "inside <body>", devCommand: "npm run dev" };
       }
+      return { name: "Astro", file: "your main layout .astro file", note: "inside <body>", devCommand: "npm run dev" };
     }
-    if (deps.vite || deps["react-scripts"] || deps.react) {
-      const appPaths = [
-        path.join(cwd, "src", "App.tsx"),
-        path.join(cwd, "src", "App.jsx")
-      ];
-      for (const appPath of appPaths) {
-        if (fs.existsSync(appPath)) {
-          let content = fs.readFileSync(appPath, "utf-8");
-          if (content.includes("FeedbackWidget")) {
-            return null;
-          }
-          const importMatch = content.match(/^(import .+\n)+/m);
-          if (importMatch) {
-            const lastImportEnd = importMatch.index + importMatch[0].length;
-            content = content.slice(0, lastImportEnd) + importLine + "\n" + content.slice(lastImportEnd);
-          }
-          const returnMatch = content.match(/return\s*\(\s*\n?\s*(<[A-Za-z>])/);
-          if (returnMatch) {
-            const match = content.match(/return\s*\(\s*\n?\s*<[A-Za-z]+[^>]*>/);
-            if (match) {
-              const insertPos = match.index + match[0].length;
-              content = content.slice(0, insertPos) + "\n      " + component + content.slice(insertPos);
-            }
-          }
-          fs.writeFileSync(appPath, content);
-          return { file: appPath.replace(cwd + "/", "") };
-        }
-      }
-    }
-  } catch {
-  }
-  return null;
-}
-function detectFramework() {
-  const cwd = process.cwd();
-  try {
-    const pkgPath = path.join(cwd, "package.json");
-    const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
-    const deps = { ...pkg.dependencies, ...pkg.devDependencies };
-    if (deps.next && fs.existsSync(path.join(cwd, "app"))) {
+    if (deps.next) {
       if (fs.existsSync(path.join(cwd, "app", "layout.tsx"))) {
-        return { name: "Next.js (App Router)", file: "app/layout.tsx", note: "Inside <body>, before {children}" };
+        return { name: "Next.js (App Router)", file: "app/layout.tsx", note: "inside <body>, before {children}", devCommand: "npm run dev" };
       }
       if (fs.existsSync(path.join(cwd, "app", "layout.js"))) {
-        return { name: "Next.js (App Router)", file: "app/layout.js", note: "Inside <body>, before {children}" };
+        return { name: "Next.js (App Router)", file: "app/layout.js", note: "inside <body>, before {children}", devCommand: "npm run dev" };
       }
       if (fs.existsSync(path.join(cwd, "src", "app", "layout.tsx"))) {
-        return { name: "Next.js (App Router)", file: "src/app/layout.tsx", note: "Inside <body>, before {children}" };
+        return { name: "Next.js (App Router)", file: "src/app/layout.tsx", note: "inside <body>, before {children}", devCommand: "npm run dev" };
       }
-    }
-    if (deps.next && fs.existsSync(path.join(cwd, "pages"))) {
       if (fs.existsSync(path.join(cwd, "pages", "_app.tsx"))) {
-        return { name: "Next.js (Pages Router)", file: "pages/_app.tsx", note: "After <Component {...pageProps} />" };
+        return { name: "Next.js (Pages Router)", file: "pages/_app.tsx", note: "after <Component {...pageProps} />", devCommand: "npm run dev" };
       }
       if (fs.existsSync(path.join(cwd, "pages", "_app.js"))) {
-        return { name: "Next.js (Pages Router)", file: "pages/_app.js", note: "After <Component {...pageProps} />" };
+        return { name: "Next.js (Pages Router)", file: "pages/_app.js", note: "after <Component {...pageProps} />", devCommand: "npm run dev" };
+      }
+    }
+    if (deps["@remix-run/react"]) {
+      if (fs.existsSync(path.join(cwd, "app", "root.tsx"))) {
+        return { name: "Remix", file: "app/root.tsx", note: "inside <body>", devCommand: "npm run dev" };
       }
     }
     if (deps.vite && (deps.react || deps["@vitejs/plugin-react"])) {
       if (fs.existsSync(path.join(cwd, "src", "App.tsx"))) {
-        return { name: "Vite + React", file: "src/App.tsx", note: "At end of App component" };
+        return { name: "Vite + React", file: "src/App.tsx", note: "at the end of your App component", devCommand: "npm run dev" };
       }
       if (fs.existsSync(path.join(cwd, "src", "App.jsx"))) {
-        return { name: "Vite + React", file: "src/App.jsx", note: "At end of App component" };
+        return { name: "Vite + React", file: "src/App.jsx", note: "at the end of your App component", devCommand: "npm run dev" };
       }
     }
     if (deps["react-scripts"]) {
       if (fs.existsSync(path.join(cwd, "src", "App.tsx"))) {
-        return { name: "Create React App", file: "src/App.tsx", note: "At end of App component" };
+        return { name: "Create React App", file: "src/App.tsx", note: "at the end of your App component", devCommand: "npm start" };
       }
       if (fs.existsSync(path.join(cwd, "src", "App.js"))) {
-        return { name: "Create React App", file: "src/App.js", note: "At end of App component" };
-      }
-    }
-    if (deps.astro) {
-      return { name: "Astro", file: "A React component", note: "Use client:load directive" };
-    }
-    if (deps["@remix-run/react"]) {
-      if (fs.existsSync(path.join(cwd, "app", "root.tsx"))) {
-        return { name: "Remix", file: "app/root.tsx", note: "Inside <body>" };
+        return { name: "Create React App", file: "src/App.js", note: "at the end of your App component", devCommand: "npm start" };
       }
     }
     if (deps.react) {
-      return { name: "React", file: "Your App component", note: "Where it renders on every page" };
+      return { name: "React", file: "your main App component", note: "where it renders on every page", devCommand: "npm run dev" };
     }
   } catch {
   }
-  return { name: null, file: "Your root component" };
+  return { name: null, file: "your root component", note: "inside the main layout", devCommand: "npm run dev" };
 }
 async function copyToClipboard(text) {
   return new Promise((resolve, reject) => {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@stephenov/feedbackwidget",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "Voice-first feedback widget with AI analysis, GitHub, and Slack integration",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/dist/cli.d.mts DELETED Viewed

	@@ -1 +0,0 @@
1	- #!/usr/bin/env node

package/dist/cli.d.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- #!/usr/bin/env node