@stephenov/feedbackwidget 0.3.1 → 0.4.1

package/dist/auto.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 "use client";
 var __create = Object.create;

package/dist/auto.mjs

@@ -1,7 +1,8 @@
+'use client';
 "use client";
 import {
   FeedbackWidget
-} from "./chunk-QQLLK6MC.mjs";
+} from "./chunk-WCFS4MGE.mjs";
 
 // src/auto.tsx
 import { useEffect, useState } from "react";

package/dist/{chunk-QQLLK6MC.mjs → chunk-WCFS4MGE.mjs}

@@ -1,3 +1,5 @@
+'use client';
+
 // src/utils.ts
 function cn(...classes) {
   return classes.filter(Boolean).join(" ");

package/dist/cli.js

@@ -27,6 +27,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var import_http = __toESM(require("http"));
 var import_open = __toESM(require("open"));
 var import_crypto = require("crypto");
+var import_child_process = require("child_process");
 var import_fs = __toESM(require("fs"));
 var import_path = __toESM(require("path"));
 var API_BASE = "https://feedbackwidget-api.vercel.app";
@@ -44,13 +45,6 @@ async function main() {
 }
 async function initProject() {
   console.log("\n\u{1F3A4} feedbackwidget - Voice-first feedback for your app\n");
-  const existingKey = getStoredApiKey();
-  if (existingKey) {
-    console.log("\u2705 Already configured!");
-    console.log(`   API Key: ${existingKey.slice(0, 20)}...`);
-    console.log("\n   To reconfigure, delete .feedbackwidgetrc and run again.\n");
-    return;
-  }
   const state = (0, import_crypto.randomBytes)(16).toString("hex");
   const apiKey = await new Promise((resolve, reject) => {
     const server = import_http.default.createServer((req, res) => {
@@ -94,49 +88,44 @@ async function initProject() {
       reject(new Error("Authentication timed out"));
     }, 5 * 60 * 1e3);
   });
-  const saved = saveApiKeyToEnv(apiKey);
-  console.log("\u2705 Authenticated successfully!\n");
-  console.log(`   API Key: ${apiKey}
+  const snippet = `<FeedbackWidget apiKey="${apiKey}" />`;
+  let copied = false;
+  try {
+    await copyToClipboard(snippet);
+    copied = true;
+  } catch {
+  }
+  console.log("\u2705 Authenticated!\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("   Your API Key:\n");
+  console.log(`   ${apiKey}
 `);
-  if (saved) {
-    console.log(`   \u2713 Saved to ${saved}
+  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}
 `);
-    console.log("   Add ONE line to your app's root layout:\n");
-    console.log('   import "@stephenov/feedbackwidget/auto"\n');
-  } else {
-    console.log("   Add to your .env.local (or .env):\n");
-    console.log(`   NEXT_PUBLIC_FEEDBACKWIDGET_API_KEY=${apiKey}
+  if (framework.name) {
+    console.log(`   Detected: ${framework.name}
 `);
-    console.log("   Then add to your app's root layout:\n");
-    console.log('   import "@stephenov/feedbackwidget/auto"\n');
-  }
-  console.log("   Or use directly:\n");
-  console.log('   import { FeedbackWidget } from "@stephenov/feedbackwidget"');
-  console.log(`   <FeedbackWidget apiKey="${apiKey}" />
+    console.log(`   Add to: ${framework.file}
 `);
-}
-async function whoami() {
-  const apiKey = getStoredApiKey();
-  if (!apiKey) {
-    console.log("\nNot logged in. Run: npx @stephenov/feedbackwidget init\n");
-    return;
-  }
-  try {
-    const res = await fetch(`${API_BASE}/api/v1/validate`, {
-      headers: { Authorization: `Bearer ${apiKey}` }
-    });
-    const data = await res.json();
-    if (data.valid) {
-      console.log(`
-Logged in as: ${data.project?.name || "Unknown"}`);
-      console.log(`Plan: ${data.limits?.submissions || 100} submissions/month
+    if (framework.note) {
+      console.log(`   Note: ${framework.note}
 `);
-    } else {
-      console.log("\nInvalid API key. Run: npx @stephenov/feedbackwidget init\n");
     }
-  } catch {
-    console.log("\nCouldn't verify API key. Check your connection.\n");
+  } else {
+    console.log("   Add to your root component (renders on every page)\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");
+  console.log("Then check your dashboard at: https://feedbackwidget-api.vercel.app/dashboard\n");
 }
 function showHelp() {
   console.log(`
@@ -151,48 +140,6 @@ Usage:
   npx @stephenov/feedbackwidget whoami
 `);
 }
-function getStoredApiKey() {
-  const envPath = import_path.default.join(process.cwd(), ".env.local");
-  try {
-    const content = import_fs.default.readFileSync(envPath, "utf-8");
-    const match = content.match(/NEXT_PUBLIC_FEEDBACKWIDGET_API_KEY=(.+)/);
-    return match ? match[1].trim() : null;
-  } catch {
-    return null;
-  }
-}
-function saveApiKeyToEnv(apiKey) {
-  const envVar = `NEXT_PUBLIC_FEEDBACKWIDGET_API_KEY=${apiKey}`;
-  const envFiles = [".env.local", ".env"];
-  for (const envFile of envFiles) {
-    const envPath = import_path.default.join(process.cwd(), envFile);
-    try {
-      const content = import_fs.default.readFileSync(envPath, "utf-8");
-      if (content.includes("NEXT_PUBLIC_FEEDBACKWIDGET_API_KEY=")) {
-        const updated = content.replace(
-          /NEXT_PUBLIC_FEEDBACKWIDGET_API_KEY=.*/,
-          envVar
-        );
-        import_fs.default.writeFileSync(envPath, updated);
-      } else {
-        import_fs.default.appendFileSync(envPath, `
-${envVar}
-`);
-      }
-      return envFile;
-    } catch {
-      continue;
-    }
-  }
-  try {
-    const envPath = import_path.default.join(process.cwd(), ".env.local");
-    import_fs.default.writeFileSync(envPath, `${envVar}
-`);
-    return ".env.local";
-  } catch {
-    return null;
-  }
-}
 function successPage() {
   return `
 <!DOCTYPE html>
@@ -239,4 +186,86 @@ function errorPage(error) {
 </body>
 </html>`;
 }
+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 (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}" };
+      }
+      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}" };
+      }
+      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}" };
+      }
+    }
+    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} />" };
+      }
+      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} />" };
+      }
+    }
+    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" };
+      }
+      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" };
+      }
+    }
+    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" };
+      }
+      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>" };
+      }
+    }
+    if (deps.react) {
+      return { name: "React", file: "Your App component", note: "Where it renders on every page" };
+    }
+  } catch {
+  }
+  return { name: null, file: "Your root component" };
+}
+async function copyToClipboard(text) {
+  return new Promise((resolve, reject) => {
+    const platform = process.platform;
+    let cmd;
+    let args = [];
+    if (platform === "darwin") {
+      cmd = "pbcopy";
+    } else if (platform === "linux") {
+      cmd = "xclip";
+      args = ["-selection", "clipboard"];
+    } else if (platform === "win32") {
+      cmd = "clip";
+    } else {
+      reject(new Error("Unsupported platform"));
+      return;
+    }
+    const proc = (0, import_child_process.spawn)(cmd, args);
+    proc.stdin.write(text);
+    proc.stdin.end();
+    proc.on("close", (code) => {
+      if (code === 0) resolve();
+      else reject(new Error(`Clipboard failed with code ${code}`));
+    });
+    proc.on("error", reject);
+  });
+}
 main().catch(console.error);

package/dist/cli.mjs

@@ -4,6 +4,7 @@
 import http from "http";
 import open from "open";
 import { randomBytes } from "crypto";
+import { spawn } from "child_process";
 import fs from "fs";
 import path from "path";
 var API_BASE = "https://feedbackwidget-api.vercel.app";
@@ -21,13 +22,6 @@ async function main() {
 }
 async function initProject() {
   console.log("\n\u{1F3A4} feedbackwidget - Voice-first feedback for your app\n");
-  const existingKey = getStoredApiKey();
-  if (existingKey) {
-    console.log("\u2705 Already configured!");
-    console.log(`   API Key: ${existingKey.slice(0, 20)}...`);
-    console.log("\n   To reconfigure, delete .feedbackwidgetrc and run again.\n");
-    return;
-  }
   const state = randomBytes(16).toString("hex");
   const apiKey = await new Promise((resolve, reject) => {
     const server = http.createServer((req, res) => {
@@ -71,49 +65,44 @@ async function initProject() {
       reject(new Error("Authentication timed out"));
     }, 5 * 60 * 1e3);
   });
-  const saved = saveApiKeyToEnv(apiKey);
-  console.log("\u2705 Authenticated successfully!\n");
-  console.log(`   API Key: ${apiKey}
+  const snippet = `<FeedbackWidget apiKey="${apiKey}" />`;
+  let copied = false;
+  try {
+    await copyToClipboard(snippet);
+    copied = true;
+  } catch {
+  }
+  console.log("\u2705 Authenticated!\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("   Your API Key:\n");
+  console.log(`   ${apiKey}
 `);
-  if (saved) {
-    console.log(`   \u2713 Saved to ${saved}
+  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}
 `);
-    console.log("   Add ONE line to your app's root layout:\n");
-    console.log('   import "@stephenov/feedbackwidget/auto"\n');
-  } else {
-    console.log("   Add to your .env.local (or .env):\n");
-    console.log(`   NEXT_PUBLIC_FEEDBACKWIDGET_API_KEY=${apiKey}
+  if (framework.name) {
+    console.log(`   Detected: ${framework.name}
 `);
-    console.log("   Then add to your app's root layout:\n");
-    console.log('   import "@stephenov/feedbackwidget/auto"\n');
-  }
-  console.log("   Or use directly:\n");
-  console.log('   import { FeedbackWidget } from "@stephenov/feedbackwidget"');
-  console.log(`   <FeedbackWidget apiKey="${apiKey}" />
+    console.log(`   Add to: ${framework.file}
 `);
-}
-async function whoami() {
-  const apiKey = getStoredApiKey();
-  if (!apiKey) {
-    console.log("\nNot logged in. Run: npx @stephenov/feedbackwidget init\n");
-    return;
-  }
-  try {
-    const res = await fetch(`${API_BASE}/api/v1/validate`, {
-      headers: { Authorization: `Bearer ${apiKey}` }
-    });
-    const data = await res.json();
-    if (data.valid) {
-      console.log(`
-Logged in as: ${data.project?.name || "Unknown"}`);
-      console.log(`Plan: ${data.limits?.submissions || 100} submissions/month
+    if (framework.note) {
+      console.log(`   Note: ${framework.note}
 `);
-    } else {
-      console.log("\nInvalid API key. Run: npx @stephenov/feedbackwidget init\n");
     }
-  } catch {
-    console.log("\nCouldn't verify API key. Check your connection.\n");
+  } else {
+    console.log("   Add to your root component (renders on every page)\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");
+  console.log("Then check your dashboard at: https://feedbackwidget-api.vercel.app/dashboard\n");
 }
 function showHelp() {
   console.log(`
@@ -128,48 +117,6 @@ Usage:
   npx @stephenov/feedbackwidget whoami
 `);
 }
-function getStoredApiKey() {
-  const envPath = path.join(process.cwd(), ".env.local");
-  try {
-    const content = fs.readFileSync(envPath, "utf-8");
-    const match = content.match(/NEXT_PUBLIC_FEEDBACKWIDGET_API_KEY=(.+)/);
-    return match ? match[1].trim() : null;
-  } catch {
-    return null;
-  }
-}
-function saveApiKeyToEnv(apiKey) {
-  const envVar = `NEXT_PUBLIC_FEEDBACKWIDGET_API_KEY=${apiKey}`;
-  const envFiles = [".env.local", ".env"];
-  for (const envFile of envFiles) {
-    const envPath = path.join(process.cwd(), envFile);
-    try {
-      const content = fs.readFileSync(envPath, "utf-8");
-      if (content.includes("NEXT_PUBLIC_FEEDBACKWIDGET_API_KEY=")) {
-        const updated = content.replace(
-          /NEXT_PUBLIC_FEEDBACKWIDGET_API_KEY=.*/,
-          envVar
-        );
-        fs.writeFileSync(envPath, updated);
-      } else {
-        fs.appendFileSync(envPath, `
-${envVar}
-`);
-      }
-      return envFile;
-    } catch {
-      continue;
-    }
-  }
-  try {
-    const envPath = path.join(process.cwd(), ".env.local");
-    fs.writeFileSync(envPath, `${envVar}
-`);
-    return ".env.local";
-  } catch {
-    return null;
-  }
-}
 function successPage() {
   return `
 <!DOCTYPE html>
@@ -216,4 +163,86 @@ function errorPage(error) {
 </body>
 </html>`;
 }
+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 (fs.existsSync(path.join(cwd, "app", "layout.tsx"))) {
+        return { name: "Next.js (App Router)", file: "app/layout.tsx", note: "Inside <body>, before {children}" };
+      }
+      if (fs.existsSync(path.join(cwd, "app", "layout.js"))) {
+        return { name: "Next.js (App Router)", file: "app/layout.js", note: "Inside <body>, before {children}" };
+      }
+      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}" };
+      }
+    }
+    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} />" };
+      }
+      if (fs.existsSync(path.join(cwd, "pages", "_app.js"))) {
+        return { name: "Next.js (Pages Router)", file: "pages/_app.js", note: "After <Component {...pageProps} />" };
+      }
+    }
+    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" };
+      }
+      if (fs.existsSync(path.join(cwd, "src", "App.jsx"))) {
+        return { name: "Vite + React", file: "src/App.jsx", note: "At end of App component" };
+      }
+    }
+    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" };
+      }
+      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>" };
+      }
+    }
+    if (deps.react) {
+      return { name: "React", file: "Your App component", note: "Where it renders on every page" };
+    }
+  } catch {
+  }
+  return { name: null, file: "Your root component" };
+}
+async function copyToClipboard(text) {
+  return new Promise((resolve, reject) => {
+    const platform = process.platform;
+    let cmd;
+    let args = [];
+    if (platform === "darwin") {
+      cmd = "pbcopy";
+    } else if (platform === "linux") {
+      cmd = "xclip";
+      args = ["-selection", "clipboard"];
+    } else if (platform === "win32") {
+      cmd = "clip";
+    } else {
+      reject(new Error("Unsupported platform"));
+      return;
+    }
+    const proc = spawn(cmd, args);
+    proc.stdin.write(text);
+    proc.stdin.end();
+    proc.on("close", (code) => {
+      if (code === 0) resolve();
+      else reject(new Error(`Clipboard failed with code ${code}`));
+    });
+    proc.on("error", reject);
+  });
+}
 main().catch(console.error);

package/dist/index.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;

package/dist/index.mjs

@@ -1,3 +1,4 @@
+'use client';
 import {
   FeedbackApiClient,
   FeedbackPanel,
@@ -8,7 +9,7 @@ import {
   createApiClient,
   formatDuration,
   isVoiceSupported
-} from "./chunk-QQLLK6MC.mjs";
+} from "./chunk-WCFS4MGE.mjs";
 
 // src/hooks/useFeedback.ts
 import { useState, useCallback, useMemo } from "react";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stephenov/feedbackwidget",
-  "version": "0.3.1",
+  "version": "0.4.1",
   "description": "Voice-first feedback widget with AI analysis, GitHub, and Slack integration",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -25,8 +25,8 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsup src/index.ts src/auto.tsx src/cli.ts --format cjs,esm --dts --clean",
-    "dev": "tsup src/index.ts src/auto.tsx src/cli.ts --format cjs,esm --dts --watch",
+    "build": "tsup",
+    "dev": "tsup --watch",
     "lint": "eslint src/",
     "clean": "rm -rf dist"
   },