@rahul_ur/devlink 1.0.8 → 1.0.10

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,104 @@ 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`); }
 
+// ─── .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 Claude or GPT/Codex available in the model picker.');
+  console.log('Leave blank and press Enter to skip either one.\n');
+
+  const rl = createInterface({ input: process.stdin, output: process.stdout });
+  let anthropicKey, openaiKey;
+  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();
+  } finally {
+    rl.close();
+  }
+
+  if (!anthropicKey && !openaiKey) {
+    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,
+  });
+  ensureEnvGitignored();
+
+  const examplePath = path.join(projectRoot, '.env.example');
+  if (!exists(examplePath)) {
+    fs.writeFileSync(examplePath, 'ANTHROPIC_API_KEY=\nOPENAI_API_KEY=\n');
+    ok('created .env.example template');
+  }
+
+  const added = [anthropicKey && 'Claude', openaiKey && 'GPT/Codex'].filter(Boolean).join(' and ');
+  ok(`saved ${added} API key(s) to .env — restart devlink:bridge to pick them up`);
+}
+
 // ─── Detect framework ─────────────────────────────────────────────────────────
 
 function detectFramework() {
@@ -186,34 +286,60 @@ 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>
     )
   }
 
@@ -222,7 +348,9 @@ function printInstructions(framework) {
   )`);
   }
 
-  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,7 +358,7 @@ function printInstructions(framework) {
 
 // ─── Commands ─────────────────────────────────────────────────────────────────
 
-function runSetup() {
+async function runSetup() {
   log(`setting up devlink in ${projectRoot}`);
   const framework = detectFramework();
   log(`detected framework: ${framework}`);
@@ -246,6 +374,7 @@ function runSetup() {
   }
 
   generateConfig();
+  await promptForApiKeys();
   printInstructions(framework);
 }
 
@@ -254,8 +383,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 +404,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,7 +1,7 @@
 {
   "name": "@rahul_ur/devlink",
-  "version": "1.0.8",
-  "description": "Click any element in your browser → jump to source code → edit → UI updates live. One command setup for Vite, Next.js and CRA.",
+  "version": "1.0.10",
+  "description": "Click any element in your browser \u2192 jump to source code \u2192 edit \u2192 UI updates live. One command setup for Vite, Next.js and CRA.",
   "main": "index.js",
   "bin": {
     "devlink": "./bin/cli.mjs",
@@ -12,7 +12,8 @@
     "templates",
     "index.js",
     "index.d.ts",
-    "README.md"
+    "README.md",
+    "logo.png"
   ],
   "scripts": {
     "prepublishOnly": "npm pack --dry-run"
@@ -41,10 +42,10 @@
   },
   "homepage": "https://github.com/rahul_ur/devlink#readme",
   "dependencies": {
-    "@rahul_ur/devlink-bridge": "^1.0.0",
-    "@rahul_ur/devlink-studio": "^1.0.4",
-    "@rahul_ur/devlink-babel-plugin": "^1.0.3",
-    "@rahul_ur/devlink-vite-plugin": "^1.0.1"
+    "@rahul_ur/devlink-bridge": "^1.0.3",
+    "@rahul_ur/devlink-studio": "^1.0.6",
+    "@rahul_ur/devlink-babel-plugin": "^1.0.5",
+    "@rahul_ur/devlink-vite-plugin": "^1.0.7"
   },
   "engines": {
     "node": ">=18.0.0"