@rahul_ur/devlink 1.0.9 → 1.0.11

package/README.md

@@ -1,3 +1,7 @@
+<p align="center">
+  <img src="https://raw.githubusercontent.com/rahul_ur/devlink/main/logo.png" alt="devlink logo" width="120" />
+</p>
+
 # devlink
 
 Click any element in your browser → jump to its source code → edit it → UI updates live.

package/bin/cli.mjs

@@ -2,10 +2,12 @@
 import fs from 'node:fs';
 import path from 'node:path';
 import { execSync } from 'node:child_process';
+import { createInterface } from 'node:readline/promises';
 
 const projectRoot = process.cwd();
 const args = process.argv.slice(2);
 const command = args[0] || 'setup';
+const skipKeys = args.includes('--skip-keys');
 
 const log  = (msg) => console.log(`\x1b[36m[devlink]\x1b[0m ${msg}`);
 const ok   = (msg) => console.log(`\x1b[32m[devlink] ✓\x1b[0m ${msg}`);
@@ -16,6 +18,173 @@ function exists(p) { return fs.existsSync(p); }
 function readJson(p) { return JSON.parse(fs.readFileSync(p, 'utf8')); }
 function writeJson(p, v) { fs.writeFileSync(p, `${JSON.stringify(v, null, 2)}\n`); }
 
+// Package name -> human-readable framework name, used to give an accurate
+// "devlink doesn't support this yet" message instead of the generic
+// "couldn't find @vitejs/plugin-react import" warning, which wrongly
+// implies there's a manual fix available (there isn't — devlink's inspector
+// hooks in via a Babel plugin specifically on @vitejs/plugin-react).
+const NON_REACT_VITE_PLUGINS = [
+  ['@vitejs/plugin-vue', 'Vue'],
+  ['@vitejs/plugin-vue2', 'Vue 2'],
+  ['@sveltejs/vite-plugin-svelte', 'Svelte'],
+  ['vite-plugin-solid', 'Solid'],
+  ['@preact/preset-vite', 'Preact'],
+  ['vite-plugin-vue2', 'Vue 2'],
+  ['@builder.io/qwik', 'Qwik'],
+];
+
+// Is TypeScript in play for this project? Used to decide the extension for
+// any file we generate from scratch (vite.config.*, devlink.config.*) so we
+// don't hand a plain-JS project a .ts file (which breaks its build unless a
+// TS toolchain is already configured) or vice versa.
+function projectUsesTypeScript() {
+  if (exists(path.join(projectRoot, 'tsconfig.json'))) return true;
+  const pkgPath = path.join(projectRoot, 'package.json');
+  if (!exists(pkgPath)) return false;
+  const pkg = readJson(pkgPath);
+  const all = { ...pkg.dependencies, ...pkg.devDependencies };
+  return Boolean(all['typescript']);
+}
+
+// ─── Bracket matching ───────────────────────────────────────────────────────
+// Small helper for safely editing arbitrary existing config files. Plain
+// string.replace()/regex on a whole file is fragile the moment the thing
+// being matched (e.g. a `react()` call) has its own nested braces — this
+// walks the source char-by-char (skipping over strings/template
+// literals/comments so brackets inside them don't throw off the count) and
+// returns the index of the matching closing bracket for an opening one.
+function findMatchingBracket(src, openIndex, openChar, closeChar) {
+  let depth = 0;
+  let i = openIndex;
+  while (i < src.length) {
+    const c = src[i];
+    if (c === '"' || c === "'" || c === '`') {
+      const quote = c;
+      i++;
+      while (i < src.length && src[i] !== quote) {
+        if (src[i] === '\\') i++;
+        i++;
+      }
+    } else if (c === '/' && src[i + 1] === '/') {
+      while (i < src.length && src[i] !== '\n') i++;
+    } else if (c === '/' && src[i + 1] === '*') {
+      i += 2;
+      while (i < src.length && !(src[i] === '*' && src[i + 1] === '/')) i++;
+      i++;
+    } else {
+      if (c === openChar) depth++;
+      else if (c === closeChar) {
+        depth--;
+        if (depth === 0) return i;
+      }
+    }
+    i++;
+  }
+  return -1;
+}
+
+// ─── .env merging ───────────────────────────────────────────────────────────
+// Sets one or more keys in .env at the project root without touching any
+// other lines already in there (e.g. keys someone set by hand, or ones
+// added by a previous run of this command). Parses just enough to find and
+// replace an existing KEY=... line, or append a new one.
+function setEnvVars(envPath, vars) {
+  let lines = exists(envPath) ? fs.readFileSync(envPath, 'utf8').split('\n') : [];
+  // Trim trailing blanks up front — otherwise a file that already ends in
+  // a newline leaves an empty '' element that a newly-appended key then
+  // lands after, producing a stray blank line in the middle of the file.
+  while (lines.length && lines[lines.length - 1].trim() === '') lines.pop();
+  for (const [key, value] of Object.entries(vars)) {
+    if (!value) continue;
+    const lineIndex = lines.findIndex(l => l.trim().startsWith(`${key}=`));
+    const newLine = `${key}=${value}`;
+    if (lineIndex !== -1) lines[lineIndex] = newLine;
+    else lines.push(newLine);
+  }
+  fs.writeFileSync(envPath, lines.join('\n') + '\n');
+}
+
+// Makes sure .env (and variants) are excluded from git in *this* project
+// specifically — never assume a .gitignore fix applied somewhere else
+// (e.g. in devlink's own monorepo) carried over to whatever project
+// `devlink setup` is being run in.
+function ensureEnvGitignored() {
+  const gitignorePath = path.join(projectRoot, '.gitignore');
+  const entry = '.env';
+  if (!exists(gitignorePath)) {
+    fs.writeFileSync(gitignorePath, `${entry}\n.env.*\n!.env.example\n`);
+    ok('created .gitignore with .env excluded');
+    return;
+  }
+  const content = fs.readFileSync(gitignorePath, 'utf8');
+  const alreadyCovered = content.split('\n').some(l => {
+    const t = l.trim();
+    return t === '.env' || t === '.env*' || t === '**/.env' || t === '*.env';
+  });
+  if (alreadyCovered) {
+    ok('.env already excluded in .gitignore');
+    return;
+  }
+  fs.writeFileSync(gitignorePath, content.replace(/\n?$/, '\n') + '\n# API keys — added by devlink setup\n.env\n.env.*\n!.env.example\n');
+  ok('added .env to .gitignore');
+}
+
+// ─── API key setup ──────────────────────────────────────────────────────────
+async function promptForApiKeys() {
+  if (skipKeys) {
+    log('skipping API key setup (--skip-keys)');
+    return;
+  }
+  // Non-interactive environments (CI, piped input, etc.) have no TTY to
+  // prompt against — skip rather than hang waiting for input that will
+  // never come.
+  if (!process.stdin.isTTY) {
+    log('no interactive terminal detected — skipping API key setup (run with a TTY, or set ANTHROPIC_API_KEY / OPENAI_API_KEY yourself in .env)');
+    return;
+  }
+
+  console.log('\n\x1b[36m─────────────────────────────────────────────────\x1b[0m');
+  console.log('\x1b[36m Optional: cloud model API keys\x1b[0m');
+  console.log('\x1b[36m─────────────────────────────────────────────────\x1b[0m');
+  console.log('The AI companion works fully offline with Ollama. Add these only');
+  console.log('if you also want them available in the model picker.');
+  console.log('Leave any blank and press Enter to skip it.\n');
+
+  const rl = createInterface({ input: process.stdin, output: process.stdout });
+  let anthropicKey, openaiKey, geminiKey, zenmuxKey;
+  try {
+    anthropicKey = (await rl.question('  Anthropic API key (Claude) — from https://console.anthropic.com/settings/keys: ')).trim();
+    openaiKey = (await rl.question('  OpenAI API key (GPT/Codex) — from https://platform.openai.com/api-keys: ')).trim();
+    geminiKey = (await rl.question('  Google API key (Gemini) — from https://aistudio.google.com/app/apikey: ')).trim();
+    zenmuxKey = (await rl.question('  ZenMux API key (GLM 5.2 + others) — from https://zenmux.ai/settings/keys: ')).trim();
+  } finally {
+    rl.close();
+  }
+
+  if (!anthropicKey && !openaiKey && !geminiKey && !zenmuxKey) {
+    log('no keys entered — skipping. You can rerun `devlink setup` anytime to add them.');
+    return;
+  }
+
+  const envPath = path.join(projectRoot, '.env');
+  setEnvVars(envPath, {
+    ANTHROPIC_API_KEY: anthropicKey,
+    OPENAI_API_KEY: openaiKey,
+    GEMINI_API_KEY: geminiKey,
+    ZENMUX_API_KEY: zenmuxKey,
+  });
+  ensureEnvGitignored();
+
+  const examplePath = path.join(projectRoot, '.env.example');
+  if (!exists(examplePath)) {
+    fs.writeFileSync(examplePath, 'ANTHROPIC_API_KEY=\nOPENAI_API_KEY=\nGEMINI_API_KEY=\nZENMUX_API_KEY=\n');
+    ok('created .env.example template');
+  }
+
+  const added = [anthropicKey && 'Claude', openaiKey && 'GPT/Codex', geminiKey && 'Gemini', zenmuxKey && 'ZenMux'].filter(Boolean).join(', ');
+  ok(`saved ${added} API key(s) to .env — restart devlink:bridge to pick them up`);
+}
+
 // ─── Detect framework ─────────────────────────────────────────────────────────
 
 function detectFramework() {
@@ -29,6 +198,38 @@ function detectFramework() {
   return 'unknown';
 }
 
+// When the current directory isn't a recognizable frontend project (e.g.
+// you're standing at the root of a monorepo whose real Vite/Next/CRA app
+// lives in ./frontend or ./apps/web), blindly writing devlink.config.js and
+// a devlink:bridge script *here* would just be clutter in the wrong place.
+// Check one level of subdirectories for a package.json that looks like a
+// real frontend project, so we can point the person at it instead.
+function findFrontendSubdirectories() {
+  const SKIP = new Set(['node_modules', '.git', 'dist', 'build', '.next', '.turbo', '.devlink']);
+  let entries;
+  try {
+    entries = fs.readdirSync(projectRoot, { withFileTypes: true });
+  } catch {
+    return [];
+  }
+  const candidates = [];
+  for (const entry of entries) {
+    if (!entry.isDirectory() || SKIP.has(entry.name) || entry.name.startsWith('.')) continue;
+    const pkgPath = path.join(projectRoot, entry.name, 'package.json');
+    if (!exists(pkgPath)) continue;
+    try {
+      const pkg = readJson(pkgPath);
+      const all = { ...pkg.dependencies, ...pkg.devDependencies };
+      if (all['vite'] || all['@vitejs/plugin-react'] || all['react-scripts'] || all['next']) {
+        candidates.push(entry.name);
+      }
+    } catch {
+      // Unparsable package.json in that subdir — not a candidate, skip it.
+    }
+  }
+  return candidates;
+}
+
 // ─── Add npm scripts ──────────────────────────────────────────────────────────
 
 function addScripts() {
@@ -47,11 +248,13 @@ function addScripts() {
 // ─── Setup Vite ───────────────────────────────────────────────────────────────
 
 function setupVite() {
-  const candidates = ['vite.config.ts', 'vite.config.js', 'vite.config.mts', 'vite.config.mjs'];
+  const candidates = ['vite.config.ts', 'vite.config.js', 'vite.config.mts', 'vite.config.mjs', 'vite.config.cts', 'vite.config.cjs'];
   const configFile = candidates.find(f => exists(path.join(projectRoot, f)));
 
   if (!configFile) {
-    // Create vite.config.ts from scratch
+    // Create a config from scratch — match extension to whether the project
+    // is actually TypeScript, rather than always assuming .ts.
+    const ext = projectUsesTypeScript() ? 'ts' : 'js';
     const content = `import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import { devlinkBabelConfig } from '@rahul_ur/devlink-vite-plugin';
@@ -68,38 +271,176 @@ export default defineConfig({
   ],
 });
 `;
-    fs.writeFileSync(path.join(projectRoot, 'vite.config.ts'), content);
-    ok('created vite.config.ts with devlink config');
+    fs.writeFileSync(path.join(projectRoot, `vite.config.${ext}`), content);
+    ok(`created vite.config.${ext} with devlink config`);
     return;
   }
 
   const configPath = path.join(projectRoot, configFile);
-  let src = fs.readFileSync(configPath, 'utf8');
+  const original = fs.readFileSync(configPath, 'utf8');
 
-  if (src.includes('@rahul_ur/devlink-vite-plugin') || src.includes('@rahul_ur/devlink-babel-plugin')) {
+  if (original.includes('@rahul_ur/devlink-vite-plugin') || original.includes('@rahul_ur/devlink-babel-plugin')) {
     ok(`${configFile} already has devlink config`);
     return;
   }
 
-  // Add import line after last import
-  const importLine = `import { devlinkBabelConfig } from '@rahul_ur/devlink-vite-plugin';\n`;
-  const lastImport = src.lastIndexOf('\nimport ');
-  const insertAt = lastImport === -1 ? 0 : src.indexOf('\n', lastImport) + 1;
-  src = src.slice(0, insertAt) + importLine + src.slice(insertAt);
+  // Bail out cleanly (no partial edits) for the one framework variant this
+  // technique can't support: @vitejs/plugin-react-swc compiles with SWC,
+  // not Babel, so a Babel plugin passed through `babel: { plugins }` is
+  // silently ignored. Rather than write a config that looks patched but
+  // does nothing, tell the person up front.
+  if (/@vitejs\/plugin-react-swc/.test(original)) {
+    warn(`${configFile} uses @vitejs/plugin-react-swc, which compiles with SWC and doesn't run Babel plugins.`);
+    warn(`devlink's inspector needs the Babel-based @vitejs/plugin-react instead. Skipping auto-patch — see the README for manual setup options.`);
+    return;
+  }
+
+  // Find the local name the React plugin was imported as (usually `react`,
+  // but people alias it — `import reactPlugin from '@vitejs/plugin-react'`).
+  // Also accept CommonJS-style configs (`const react = require('@vitejs/plugin-react')`),
+  // since a plain vite.config.js has no obligation to be ESM.
+  const importMatch =
+    original.match(/import\s+(\w+)\s+from\s+['"]@vitejs\/plugin-react['"]/) ||
+    original.match(/const\s+(\w+)\s*=\s*require\(\s*['"]@vitejs\/plugin-react['"]\s*\)/);
+  if (!importMatch) {
+    const nonReactPlugin = NON_REACT_VITE_PLUGINS.find(([pkg]) => original.includes(pkg));
+    if (nonReactPlugin) {
+      const [, framework] = nonReactPlugin;
+      warn(`${configFile} uses a ${framework} plugin, not @vitejs/plugin-react.`);
+      warn(`devlink's inspector currently only supports React projects (it hooks in via a Babel plugin on @vitejs/plugin-react) — there's no equivalent for ${framework} yet. Skipping auto-patch.`);
+      return;
+    }
+    warn(`Could not find an "import ... from '@vitejs/plugin-react'" (or the CommonJS equivalent) in ${configFile}. Add devlink manually:\n\n  import { devlinkBabelConfig } from '@rahul_ur/devlink-vite-plugin';\n  // inside react({ babel: { plugins: [devlinkBabelConfig({ root: process.cwd() })] } })\n`);
+    return;
+  }
+  const reactLocalName = importMatch[1];
+  const isCjsConfig = importMatch[0].trimStart().startsWith('const');
+
+  // Locate the actual call, e.g. `react(...)` or `react (...)`, skipping the
+  // import line itself.
+  const callRegex = new RegExp(`\\b${reactLocalName}\\s*\\(`, 'g');
+  callRegex.lastIndex = importMatch.index + importMatch[0].length;
+  const callMatch = callRegex.exec(original);
+  if (!callMatch) {
+    warn(`Could not find a ${reactLocalName}(...) call in ${configFile} to patch. Add devlink manually — see README.`);
+    return;
+  }
 
-  // Patch react() call
-  if (src.includes('react()')) {
-    src = src.replace(
-      'react()',
-      `react({\n    babel: {\n      plugins: [devlinkBabelConfig({ root: process.cwd() })].filter(Boolean),\n    },\n  })`
-    );
-    ok(`patched ${configFile} — react() updated`);
-  } else if (src.match(/react\s*\(\s*\{/)) {
-    warn(`Could not auto-patch ${configFile}. Add manually:\n\n  react({ babel: { plugins: [devlinkBabelConfig({ root: process.cwd() })] } })\n`);
+  const openParenIndex = callMatch.index + callMatch[0].length - 1;
+  const closeParenIndex = findMatchingBracket(original, openParenIndex, '(', ')');
+  if (closeParenIndex === -1) {
+    warn(`Could not parse the ${reactLocalName}(...) call in ${configFile} (unbalanced parens?). Add devlink manually — see README.`);
+    return;
   }
 
-  fs.writeFileSync(configPath, src);
-  ok(`updated ${configFile}`);
+  const argsText = original.slice(openParenIndex + 1, closeParenIndex);
+  const trimmedArgs = argsText.trim();
+  const devlinkPluginCall = `devlinkBabelConfig({ root: process.cwd() })`;
+
+  // We compute a single (insertAt, textToInsert) point-insertion into
+  // `original` — deliberately avoiding building up nested replacement
+  // strings with their own relative offsets, since re-deriving absolute
+  // positions from those is exactly where off-by-one bugs creep in.
+  let insertAt, insertText;
+
+  if (trimmedArgs === '') {
+    // react() — bare call, safe to fill in from scratch.
+    insertAt = openParenIndex + 1;
+    insertText = `{\n    babel: {\n      plugins: [${devlinkPluginCall}].filter(Boolean),\n    },\n  }`;
+    // This is a full replacement of the (empty) args, not an insertion —
+    // handle it as a range replace below via closeParenIndex.
+    const patchedBare = original.slice(0, insertAt) + insertText + original.slice(closeParenIndex);
+    finishPatch(patchedBare);
+    return;
+  }
+
+  if (!trimmedArgs.startsWith('{')) {
+    // react(someVariable) or react(...spread) — a bare identifier/expression
+    // we can't safely rewrite without risking breaking the config.
+    warn(`${reactLocalName}(...) in ${configFile} is called with something other than a literal object, so it can't be auto-patched safely. Add devlink manually:\n\n  babel: { plugins: [${devlinkPluginCall}].filter(Boolean) }\n\ninside whatever object is passed to ${reactLocalName}().`);
+    return;
+  }
+
+  // react({ ...existing options... }) — edit the object in place instead of
+  // clobbering whatever's already there (fast refresh options, other babel
+  // plugins, jsxImportSource, etc). All positions below are absolute
+  // offsets into `original`.
+  const objStart = openParenIndex + 1 + argsText.indexOf('{');
+  const objEnd = findMatchingBracket(original, objStart, '{', '}');
+  if (objEnd === -1) {
+    warn(`Could not parse the options object passed to ${reactLocalName}(...) in ${configFile}. Add devlink manually — see README.`);
+    return;
+  }
+
+  const babelKeyMatch = original.slice(objStart, objEnd).match(/\bbabel\s*:\s*\{/);
+  if (!babelKeyMatch) {
+    // No babel key at all — insert one right after the object's opening brace.
+    insertAt = objStart + 1;
+    insertText = `\n    babel: {\n      plugins: [${devlinkPluginCall}].filter(Boolean),\n    },`;
+    finishPatch(original.slice(0, insertAt) + insertText + original.slice(insertAt));
+    return;
+  }
+
+  const babelObjStart = objStart + babelKeyMatch.index + babelKeyMatch[0].length - 1;
+  const babelObjEnd = findMatchingBracket(original, babelObjStart, '{', '}');
+  if (babelObjEnd === -1) {
+    warn(`Could not parse the existing babel option in ${configFile}. Add devlink manually — see README.`);
+    return;
+  }
+
+  const pluginsKeyMatch = original.slice(babelObjStart, babelObjEnd).match(/\bplugins\s*:\s*\[/);
+  if (!pluginsKeyMatch) {
+    // babel: { ... } exists but has no plugins array yet.
+    insertAt = babelObjStart + 1;
+    insertText = `\n      plugins: [${devlinkPluginCall}].filter(Boolean),`;
+    finishPatch(original.slice(0, insertAt) + insertText + original.slice(insertAt));
+    return;
+  }
+
+  // babel.plugins already exists (e.g. another tool's babel plugin) —
+  // append devlink alongside it rather than overwrite it.
+  const arrStart = babelObjStart + pluginsKeyMatch.index + pluginsKeyMatch[0].length - 1;
+  const arrEnd = findMatchingBracket(original, arrStart, '[', ']');
+  if (arrEnd === -1) {
+    warn(`Could not parse the existing babel.plugins array in ${configFile}. Add devlink manually — see README.`);
+    return;
+  }
+  const arrInner = original.slice(arrStart + 1, arrEnd);
+  insertAt = arrEnd; // insert just before the closing ']'
+  insertText = arrInner.trim() === ''
+    ? `${devlinkPluginCall}`
+    : `${arrInner.trimEnd().endsWith(',') ? '' : ','}\n      ${devlinkPluginCall},`;
+  finishPatch(original.slice(0, insertAt) + insertText + original.slice(insertAt));
+  return;
+
+  function finishPatch(patched) {
+
+  // Only now that the react() call itself is confirmed patchable do we add
+  // the import — avoids leaving a dangling unused import if patching fails.
+  // Match the file's existing module style: mixing a top-level `import`
+  // into an otherwise-CommonJS (`require`/`module.exports`) config forces
+  // Node to load the whole file as ESM, at which point `require` is
+  // undefined and the config throws at load time — a worse outcome than
+  // not patching at all.
+  let insertAt = 0;
+  let importLine;
+  if (isCjsConfig) {
+    importLine = `const { devlinkBabelConfig } = require('@rahul_ur/devlink-vite-plugin');\n`;
+    const requireLines = [...patched.matchAll(/^.*\brequire\(['"][^'"]+['"]\).*$/gm)];
+    if (requireLines.length > 0) {
+      const last = requireLines[requireLines.length - 1];
+      insertAt = last.index + last[0].length + 1;
+    }
+  } else {
+    importLine = `import { devlinkBabelConfig } from '@rahul_ur/devlink-vite-plugin';\n`;
+    const lastImport = patched.lastIndexOf('\nimport ');
+    insertAt = lastImport === -1 ? 0 : patched.indexOf('\n', lastImport) + 1;
+  }
+  patched = patched.slice(0, insertAt) + importLine + patched.slice(insertAt);
+
+  fs.writeFileSync(configPath, patched);
+    ok(`patched ${configFile} — ${reactLocalName}() now runs devlink's babel plugin`);
+  }
 }
 
 // ─── Setup Next.js ────────────────────────────────────────────────────────────
@@ -161,21 +502,27 @@ function setupCra() {
 // ─── Generate devlink.config.ts ───────────────────────────────────────────────
 
 function generateConfig() {
-  const configPath = path.join(projectRoot, 'devlink.config.ts');
-  if (exists(configPath)) { ok('devlink.config.ts already exists'); return; }
+  const candidates = ['devlink.config.ts', 'devlink.config.js', 'devlink.config.mts', 'devlink.config.mjs', 'devlink.config.cts', 'devlink.config.cjs'];
+  const existingConfig = candidates.find(f => exists(path.join(projectRoot, f)));
+  if (existingConfig) { ok(`${existingConfig} already exists`); return; }
+
+  const ext = projectUsesTypeScript() ? 'ts' : 'js';
+  const configPath = path.join(projectRoot, `devlink.config.${ext}`);
 
-  const root = projectRoot.replace(/\\/g, '/');
-  const srcDir = exists(path.join(projectRoot, 'src')) ? `${root}/src` : root;
+  // Use relative paths, not absolute filesystem paths — this file is meant
+  // to be committed, and an absolute path baked in here would be wrong the
+  // moment anyone else on the team (or CI) checks the project out.
+  const rootPath = exists(path.join(projectRoot, 'src')) ? './src' : '.';
 
-  fs.writeFileSync(configPath, `// devlink.config.ts — edit projectRoot and rootPath for your project
+  fs.writeFileSync(configPath, `// devlink.config.${ext} — edit rootPath if your source lives somewhere other than ./src
 export const devlinkConfig = {
-  projectRoot: '${root}',
-  rootPath: '${srcDir}',
+  projectRoot: '.',
+  rootPath: '${rootPath}',
   defaultDocked: true,
   dockedWidth: 460,
 };
 `);
-  ok('created devlink.config.ts');
+  ok(`created devlink.config.${ext}`);
 }
 
 // ─── Print main.tsx instructions ──────────────────────────────────────────────
@@ -186,43 +533,77 @@ function printInstructions(framework) {
   console.log('\x1b[36m devlink setup complete — final step:\x1b[0m');
   console.log('\x1b[36m─────────────────────────────────────────────────\x1b[0m\n');
 
+  // A plain top-level `import { DevlinkStudio } from '@rahul_ur/devlink-studio'`
+  // bundles it (and its dependencies — Monaco, xterm) into every build,
+  // production included. DevlinkStudio's own `enabled` prop stops it from
+  // *rendering* outside dev, but that's a runtime check — it does nothing
+  // about bundle size or exposing the AI companion/inspector code to real
+  // users. A dynamic import gated on the DEV flag drops it during Rollup's
+  // production build entirely, as a separate chunk your production users
+  // never download.
   if (isNext) {
     console.log('Add to pages/_app.tsx:\n');
-    console.log(`  import { DevlinkBridge } from '@rahul_ur/devlink-bridge'
-  import { DevlinkStudio } from '@rahul_ur/devlink-studio'
+    console.log(`  import { lazy, Suspense } from 'react'
+  import { DevlinkBridge } from '@rahul_ur/devlink-bridge'
   import { devlinkConfig } from '../devlink.config'
 
-  const bridge = new DevlinkBridge()
+  // Dynamic + DEV-gated: keeps devlink-studio (and Monaco/xterm) out of
+  // the production bundle entirely — not just inactive, actually absent.
+  const DevlinkStudio = process.env.NODE_ENV === 'development'
+    ? lazy(() => import('@rahul_ur/devlink-studio').then(m => ({ default: m.DevlinkStudio })))
+    : null
+
+  const bridge = process.env.NODE_ENV === 'development' ? new DevlinkBridge() : null
 
   export default function App({ Component, pageProps }) {
+    if (!DevlinkStudio) return <Component {...pageProps} />
     return (
-      <DevlinkStudio bridge={bridge} {...devlinkConfig}>
-        <Component {...pageProps} />
-      </DevlinkStudio>
+      <Suspense fallback={<Component {...pageProps} />}>
+        <DevlinkStudio bridge={bridge} {...devlinkConfig}>
+          <Component {...pageProps} />
+        </DevlinkStudio>
+      </Suspense>
     )
   }`);
   } else {
     console.log('Add to src/main.tsx:\n');
-    console.log(`  import { DevlinkBridge } from '@rahul_ur/devlink-bridge'
-  import { DevlinkStudio } from '@rahul_ur/devlink-studio'
+    console.log(`  import { lazy, Suspense } from 'react'
+  import { DevlinkBridge } from '@rahul_ur/devlink-bridge'
   import { devlinkConfig } from '../devlink.config'
 
-  const bridge = new DevlinkBridge()
+  // Dynamic + DEV-gated: keeps devlink-studio (and Monaco/xterm) out of
+  // the production bundle entirely — not just inactive, actually absent.
+  const DevlinkStudio = import.meta.env.DEV
+    ? lazy(() => import('@rahul_ur/devlink-studio').then(m => ({ default: m.DevlinkStudio })))
+    : null
+
+  const bridge = import.meta.env.DEV ? new DevlinkBridge() : null
 
   function Root() {
+    if (!DevlinkStudio) return <App />
     return (
-      <DevlinkStudio bridge={bridge} {...devlinkConfig}>
-        <App />
-      </DevlinkStudio>
+      <Suspense fallback={<App />}>
+        <DevlinkStudio bridge={bridge} {...devlinkConfig}>
+          <App />
+        </DevlinkStudio>
+      </Suspense>
     )
   }
 
-  ReactDOM.createRoot(document.getElementById('root')!).render(
-    <React.StrictMode><Root /></React.StrictMode>
-  )`);
+const rootElement = document.getElementById("root");
+
+if (rootElement) {
+  ReactDOM.createRoot(rootElement).render(
+    <React.StrictMode>
+      <Root />
+    </React.StrictMode>,
+  );
+}`);
   }
 
-  console.log('\nThen start the bridge server:\n');
+  console.log('\nThis keeps the AI companion, editor, and inspector out of your production');
+  console.log('bundle entirely (dynamic import, dropped at build time) — not just hidden.\n');
+  console.log('Then start the bridge server:\n');
   console.log('  npm run devlink:bridge\n');
   console.log('Press \x1b[36mAlt+D\x1b[0m in the browser to activate inspect mode.\n');
   console.log('\x1b[36m─────────────────────────────────────────────────\x1b[0m\n');
@@ -230,11 +611,26 @@ function printInstructions(framework) {
 
 // ─── Commands ─────────────────────────────────────────────────────────────────
 
-function runSetup() {
+async function runSetup() {
   log(`setting up devlink in ${projectRoot}`);
   const framework = detectFramework();
   log(`detected framework: ${framework}`);
 
+  if (framework === 'unknown') {
+    const candidates = findFrontendSubdirectories();
+    if (candidates.length > 0) {
+      warn(`No frontend framework detected at ${projectRoot} — this looks like it might be a monorepo root.`);
+      if (candidates.length === 1) {
+        warn(`Found what looks like a frontend project in ./${candidates[0]}. Try running devlink setup from there instead:\n\n  cd ${candidates[0]} && npx devlink setup\n`);
+      } else {
+        warn(`Found possible frontend projects in: ${candidates.map(c => `./${c}`).join(', ')}. Re-run devlink setup from inside the right one.`);
+      }
+      // Deliberately stop here rather than writing devlink.config.js /
+      // package.json scripts at a root that isn't actually the app.
+      return;
+    }
+  }
+
   addScripts();
 
   if (framework === 'vite')        setupVite();
@@ -246,6 +642,7 @@ function runSetup() {
   }
 
   generateConfig();
+  await promptForApiKeys();
   printInstructions(framework);
 }
 
@@ -254,8 +651,9 @@ function runHelp() {
 \x1b[36mdevlink\x1b[0m — click any element in your browser, jump to source, edit, UI updates live.
 
 \x1b[1mCommands:\x1b[0m
-  devlink setup    Auto-configure your project (Vite / Next.js / CRA)
-  devlink help     Show this help message
+  devlink setup              Auto-configure your project (Vite / Next.js / CRA)
+  devlink setup --skip-keys  Same, but skip the optional cloud API key prompt
+  devlink help               Show this help message
 
 \x1b[1mQuick start:\x1b[0m
   npm install @rahul_ur/devlink
@@ -274,6 +672,12 @@ function runHelp() {
   @rahul_ur/devlink-babel-plugin   Stamps data-source at build time
   @rahul_ur/devlink-vite-plugin    Wires plugin into Vite automatically
 
+\x1b[1mCloud model keys:\x1b[0m
+  \`devlink setup\` will offer to save an Anthropic and/or OpenAI API key to
+  .env (gitignored automatically) so Claude/GPT show up in the AI companion's
+  model picker alongside your local Ollama models. Fully optional — Ollama
+  keeps working with no keys set at all.
+
 \x1b[1mDocs:\x1b[0m https://github.com/rahul_ur/devlink
 `);
 }

package/package.json

@@ -1,25 +1,19 @@
 {
   "name": "@rahul_ur/devlink",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "description": "Click any element in your browser → jump to source code → edit → UI updates live. One command setup for Vite, Next.js and CRA.",
-  "type": "module",
   "main": "index.js",
-  "exports": {
-    ".": {
-      "import": "./index.js",
-      "types": "./index.d.ts"
-    }
-  },
+  "type": "module",
   "bin": {
     "devlink": "./bin/cli.mjs",
     "devlink-setup": "./bin/cli.mjs"
   },
   "files": [
     "bin",
-    "templates",
     "index.js",
     "index.d.ts",
-    "README.md"
+    "README.md",
+    "logo.png"
   ],
   "scripts": {
     "prepublishOnly": "npm pack --dry-run"
@@ -37,21 +31,21 @@
     "editor",
     "babel-plugin"
   ],
-  "author": "Rahul Urmaliya",
+  "author": "Rahul <your@email.com>",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/BiginerCoder/devlink.git"
+    "url": "https://github.com/rahul_ur/devlink"
   },
   "bugs": {
-    "url": "https://github.com/BiginerCoder/devlink/issues"
+    "url": "https://github.com/rahul_ur/devlink/issues"
   },
-  "homepage": "https://github.com/BiginerCoder/devlink#readme",
+  "homepage": "https://github.com/rahul_ur/devlink#readme",
   "dependencies": {
-    "@rahul_ur/devlink-bridge": "^1.0.1",
-    "@rahul_ur/devlink-studio": "^1.0.5",
-    "@rahul_ur/devlink-babel-plugin": "^1.0.4",
-    "@rahul_ur/devlink-vite-plugin": "^1.0.6"
+    "@rahul_ur/devlink-babel-plugin":"1.0.6",
+    "@rahul_ur/devlink-bridge": "1.0.4",
+    "@rahul_ur/devlink-studio": "1.0.7",
+    "@rahul_ur/devlink-vite-plugin": "1.0.7"
   },
   "engines": {
     "node": ">=18.0.0"