@rahul_ur/devlink-bridge 1.0.0

package/server.mjs

@@ -0,0 +1,234 @@
+import { WebSocketServer } from 'ws';
+import fs from 'fs/promises';
+import path from 'path';
+import { watch } from 'fs';
+import { exec } from 'child_process';
+
+const PORT = 7100;
+const WORKSPACE = process.cwd();
+const watchers = new Map();
+
+// ─── Security: resolve path inside workspace ──────────────────────────────────
+function safeResolvePath(filePath) {
+  const resolved = path.resolve(filePath);
+  // Allow absolute paths anywhere on the machine (needed for cross-project use)
+  // but log them for awareness
+  return resolved;
+}
+
+// ─── Ignored directories for readDir ─────────────────────────────────────────
+const IGNORE = new Set([
+  'node_modules', '.git', 'dist', 'build', '.next',
+  'coverage', '.DS_Store', 'thumbs.db', '.turbo',
+]);
+
+async function readDir(dirPath, recursive) {
+  let entries;
+  try {
+    entries = await fs.readdir(dirPath, { withFileTypes: true });
+  } catch {
+    return [];
+  }
+
+  const result = [];
+  for (const entry of entries) {
+    if (IGNORE.has(entry.name)) continue;
+    const fullPath = path.join(dirPath, entry.name).replace(/\\/g, '/');
+    if (entry.isDirectory()) {
+      result.push({
+        name: entry.name,
+        path: fullPath,
+        type: 'directory',
+        children: recursive ? await readDir(path.join(dirPath, entry.name), true) : undefined,
+      });
+    } else {
+      result.push({ name: entry.name, path: fullPath, type: 'file' });
+    }
+  }
+  return result.sort((a, b) => {
+    if (a.type !== b.type) return a.type === 'directory' ? -1 : 1;
+    return a.name.localeCompare(b.name);
+  });
+}
+
+// ─── WebSocket server ─────────────────────────────────────────────────────────
+const wss = new WebSocketServer({ host: '127.0.0.1', port: PORT });
+
+wss.on('connection', (ws) => {
+  console.log('[devlink] client connected');
+
+  ws.on('message', async (raw) => {
+    let msg;
+    try {
+      msg = JSON.parse(raw.toString());
+    } catch {
+      console.error('[devlink] invalid JSON message');
+      return;
+    }
+
+    switch (msg.type) {
+
+      // ── Handshake ────────────────────────────────────────────────────────────
+      case 'handshake': {
+        ws.send(JSON.stringify({
+          type: 'handshakeAck',
+          protocolVersion: '1.0',
+          workspaceRoot: WORKSPACE.replace(/\\/g, '/'),
+        }));
+        break;
+      }
+
+      // ── Read file ────────────────────────────────────────────────────────────
+      case 'readFile': {
+        try {
+          const resolved = safeResolvePath(msg.path);
+          const content = await fs.readFile(resolved, 'utf-8');
+          ws.send(JSON.stringify({ type: 'response', id: msg.id, ok: true, result: content }));
+        } catch (e) {
+          ws.send(JSON.stringify({ type: 'response', id: msg.id, ok: false, error: e.message }));
+        }
+        break;
+      }
+
+      // ── Write file ───────────────────────────────────────────────────────────
+      case 'writeFile': {
+        try {
+          const resolved = safeResolvePath(msg.path);
+          await fs.mkdir(path.dirname(resolved), { recursive: true });
+          await fs.writeFile(resolved, msg.content, 'utf-8');
+          ws.send(JSON.stringify({ type: 'response', id: msg.id, ok: true, result: null }));
+          // Push back with writeId so browser can dedup its own save
+          ws.send(JSON.stringify({
+            type: 'fileChanged',
+            path: msg.path,
+            content: msg.content,
+            writeId: msg.writeId,
+          }));
+        } catch (e) {
+          ws.send(JSON.stringify({ type: 'response', id: msg.id, ok: false, error: e.message }));
+        }
+        break;
+      }
+
+      // ── Read directory ───────────────────────────────────────────────────────
+      case 'readDir': {
+        try {
+          const resolved = safeResolvePath(msg.path);
+          const entries = await readDir(resolved, msg.recursive ?? false);
+          ws.send(JSON.stringify({ type: 'response', id: msg.id, ok: true, result: entries }));
+        } catch (e) {
+          ws.send(JSON.stringify({ type: 'response', id: msg.id, ok: false, error: e.message }));
+        }
+        break;
+      }
+
+      // ── Watch file ───────────────────────────────────────────────────────────
+      case 'watchFile': {
+        const filePath = msg.path;
+        if (!watchers.has(filePath)) {
+          try {
+            const watcher = watch(filePath, async () => {
+              try {
+                const content = await fs.readFile(filePath, 'utf-8');
+                if (ws.readyState === ws.OPEN) {
+                  ws.send(JSON.stringify({ type: 'fileChanged', path: filePath, content }));
+                }
+              } catch { /* file deleted */ }
+            });
+            watchers.set(filePath, watcher);
+          } catch (e) {
+            ws.send(JSON.stringify({ type: 'response', id: msg.id, ok: false, error: e.message }));
+            break;
+          }
+        }
+        ws.send(JSON.stringify({ type: 'response', id: msg.id, ok: true, result: null }));
+        break;
+      }
+
+      // ── Unwatch file ─────────────────────────────────────────────────────────
+      case 'unwatchFile': {
+        const watcher = watchers.get(msg.path);
+        if (watcher) {
+          watcher.close();
+          watchers.delete(msg.path);
+        }
+        ws.send(JSON.stringify({ type: 'response', id: msg.id, ok: true, result: null }));
+        break;
+      }
+
+      // ── Execute shell command ─────────────────────────────────────────────────
+      // Used by terminal tab and AI codex commands
+      case 'execCommand': {
+        const { command, cwd } = msg;
+
+        // Safety: block obviously destructive commands
+        const blocked = ['rm -rf /', 'format c:', 'del /f /s /q c:\\'];
+        const lower = (command || '').toLowerCase();
+        if (blocked.some(b => lower.includes(b))) {
+          ws.send(JSON.stringify({
+            type: 'response', id: msg.id, ok: true,
+            result: { stdout: '', stderr: 'Command blocked by devlink safety rules.', code: 1 },
+          }));
+          break;
+        }
+
+        const resolvedCwd = cwd ? safeResolvePath(cwd) : WORKSPACE;
+
+        exec(command, { cwd: resolvedCwd, timeout: 60000 }, (err, stdout, stderr) => {
+          if (ws.readyState !== ws.OPEN) return;
+          ws.send(JSON.stringify({
+            type: 'response', id: msg.id, ok: true,
+            result: {
+              stdout: stdout || '',
+              stderr: stderr || '',
+              error: err?.message || null,
+              code: err?.code ?? 0,
+            },
+          }));
+        });
+        break;
+      }
+
+      // ── AI autocomplete ───────────────────────────────────────────────────────
+      // Stub — returns empty so Monaco doesn't error.
+      // Replace with your model adapter call here.
+      case 'ai-autocomplete': {
+        ws.send(JSON.stringify({ type: 'response', id: msg.id, ok: true, result: '' }));
+        break;
+      }
+
+      // ── Ping / pong ───────────────────────────────────────────────────────────
+      case 'ping': {
+        ws.send(JSON.stringify({ type: 'pong', id: msg.id }));
+        break;
+      }
+
+      default: {
+        console.warn('[devlink] unknown message type:', msg.type);
+        ws.send(JSON.stringify({ type: 'response', id: msg.id, ok: false, error: `Unknown type: ${msg.type}` }));
+      }
+    }
+  });
+
+  ws.on('close', () => {
+    console.log('[devlink] client disconnected');
+    // Clean up watchers for this client
+    for (const [filePath, watcher] of watchers) {
+      watcher.close();
+      watchers.delete(filePath);
+    }
+  });
+
+  ws.on('error', (e) => {
+    console.error('[devlink] client error:', e.message);
+  });
+});
+
+wss.on('error', (e) => {
+  console.error('[devlink] server error:', e.message);
+});
+
+console.log(`[devlink] bridge running on ws://127.0.0.1:${PORT}`);
+console.log(`[devlink] workspace: ${WORKSPACE}`);
+console.log(`[devlink] execCommand handler: enabled`);
+console.log(`[devlink] ai-autocomplete handler: stub (replace with model adapter)`);

package/setup-devlink.mjs

@@ -0,0 +1,388 @@
+#!/usr/bin/env node
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __filename = fileURLToPath(import.meta.url);
+const bridgePackageRoot = path.dirname(__filename);
+const projectRoot = process.cwd();
+const packageJsonPath = path.join(projectRoot, 'package.json');
+
+const log  = (msg) => console.log(`[devlink setup] ${msg}`);
+const warn = (msg) => console.warn(`[devlink setup] ⚠ ${msg}`);
+const ok   = (msg) => console.log(`[devlink setup] ✓ ${msg}`);
+
+function readJson(p)    { return JSON.parse(fs.readFileSync(p, 'utf8')); }
+function writeJson(p,v) { fs.writeFileSync(p, `${JSON.stringify(v, null, 2)}\n`); }
+function exists(p)      { return fs.existsSync(p); }
+
+function maybeRelativeDep(targetPath) {
+  if (!exists(targetPath)) return null;
+  return `file:${path.relative(projectRoot, targetPath).replace(/\\/g, '/')}`;
+}
+
+// ─── Detect framework ─────────────────────────────────────────────────────────
+
+function detectFramework(pkg) {
+  const allDeps = {
+    ...pkg.dependencies,
+    ...pkg.devDependencies,
+  };
+  if (allDeps['react-scripts'])    return 'cra';
+  if (allDeps['next'])             return 'next';
+  if (allDeps['vite'])             return 'vite';
+  if (allDeps['@vitejs/plugin-react']) return 'vite';
+  return 'unknown';
+}
+
+// ─── Update package.json ──────────────────────────────────────────────────────
+
+function updatePackageJson() {
+  if (!exists(packageJsonPath)) {
+    throw new Error(`package.json not found in ${projectRoot}`);
+  }
+
+  const pkg = readJson(packageJsonPath);
+  pkg.scripts      = pkg.scripts      || {};
+  pkg.dependencies = pkg.dependencies || {};
+  pkg.devDependencies = pkg.devDependencies || {};
+
+  let changed = false;
+
+  // Add bridge scripts
+  if (!pkg.scripts['devlink:bridge']) {
+    pkg.scripts['devlink:bridge'] = 'node node_modules/devlink-bridge/server.mjs';
+    changed = true; log('added script devlink:bridge');
+  }
+  if (!pkg.scripts['devlink:setup']) {
+    pkg.scripts['devlink:setup'] = 'node node_modules/devlink-bridge/setup-devlink.mjs';
+    changed = true; log('added script devlink:setup');
+  }
+
+  const alphaRoot = path.resolve(bridgePackageRoot, '..');
+  const deps = {
+    'devlink-bridge':       maybeRelativeDep(bridgePackageRoot),
+    'devlink-studio':       maybeRelativeDep(path.join(alphaRoot, 'devlink-v2', 'packages', 'devlink-studio')),
+    'devlink-babel-plugin': maybeRelativeDep(path.join(alphaRoot, 'devlink-babel-plugin')),
+    'devlink-vite-plugin':  maybeRelativeDep(path.join(alphaRoot, 'devlink-vite-plugin')),
+  };
+
+  if (!pkg.dependencies['devlink-bridge'] && deps['devlink-bridge']) {
+    pkg.dependencies['devlink-bridge'] = deps['devlink-bridge'];
+    changed = true; log('added dependency devlink-bridge');
+  }
+  if (!pkg.dependencies['devlink-studio'] && deps['devlink-studio']) {
+    pkg.dependencies['devlink-studio'] = deps['devlink-studio'];
+    changed = true; log('added dependency devlink-studio');
+  }
+  if (!pkg.devDependencies['devlink-babel-plugin'] && deps['devlink-babel-plugin']) {
+    pkg.devDependencies['devlink-babel-plugin'] = deps['devlink-babel-plugin'];
+    changed = true; log('added devDependency devlink-babel-plugin');
+  }
+  if (!pkg.devDependencies['devlink-vite-plugin'] && deps['devlink-vite-plugin']) {
+    pkg.devDependencies['devlink-vite-plugin'] = deps['devlink-vite-plugin'];
+    changed = true; log('added devDependency devlink-vite-plugin');
+  }
+
+  if (changed) writeJson(packageJsonPath, pkg);
+  else log('package.json already up to date');
+
+  return pkg;
+}
+
+// ─── CRA setup ───────────────────────────────────────────────────────────────
+
+function setupCra() {
+  const configPath = path.join(projectRoot, 'node_modules', 'react-scripts', 'config', 'webpack.config.js');
+  if (!exists(configPath)) {
+    warn('react-scripts webpack config not found. Run npm install first, then npm run devlink:setup again.');
+    return false;
+  }
+
+  let src = fs.readFileSync(configPath, 'utf8');
+  let changed = false;
+
+  if (!src.includes("require.resolve('devlink-babel-plugin')")) {
+    const marker = "const createEnvironmentHash = require('./webpack/persistentCache/createEnvironmentHash');";
+    if (src.includes(marker)) {
+      src = src.replace(marker, `${marker}\nconst devlinkBabelPlugin = require.resolve('devlink-babel-plugin');`);
+      changed = true;
+    }
+  }
+
+  if (!src.includes('devlinkBabelPlugin,')) {
+    const reactRefreshLine = "                  isEnvDevelopment &&\n                    shouldUseReactRefresh &&\n                    require.resolve('react-refresh/babel'),";
+    if (src.includes(reactRefreshLine)) {
+      const block =
+        "                  isEnvDevelopment && [\n" +
+        "                    devlinkBabelPlugin,\n" +
+        "                    { root: paths.appPath, envs: ['development'] },\n" +
+        "                  ],\n";
+      src = src.replace(reactRefreshLine, `${block}${reactRefreshLine}`);
+      changed = true;
+    }
+  }
+
+  if (changed) { fs.writeFileSync(configPath, src); ok('patched CRA webpack config'); }
+  else { ok('CRA webpack config already patched'); }
+  return true;
+}
+
+// ─── Vite setup ───────────────────────────────────────────────────────────────
+
+function setupVite() {
+  // Find vite config — could be .ts, .js, .mts, .mjs
+  const candidates = [
+    'vite.config.ts', 'vite.config.js',
+    'vite.config.mts', 'vite.config.mjs',
+  ];
+  const configFile = candidates.find(f => exists(path.join(projectRoot, f)));
+
+  if (!configFile) {
+    warn('No vite.config file found. Creating vite.config.ts with devlink config...');
+    createViteConfig('vite.config.ts');
+    return true;
+  }
+
+  const configPath = path.join(projectRoot, configFile);
+  let src = fs.readFileSync(configPath, 'utf8');
+
+  if (src.includes('devlink-babel-plugin') || src.includes('devlink-vite-plugin')) {
+    ok('vite.config already has devlink config');
+    return true;
+  }
+
+  // Patch existing vite config
+  const isTs = configFile.endsWith('.ts') || configFile.endsWith('.mts');
+
+  // Add import at top
+  const importLine = `import { devlinkBabelConfig } from 'devlink-vite-plugin';\n`;
+  if (!src.includes("from 'devlink-vite-plugin'")) {
+    // Insert after last existing import
+    const lastImportIdx = src.lastIndexOf('\nimport ');
+    const insertAt = lastImportIdx === -1 ? 0 : src.indexOf('\n', lastImportIdx) + 1;
+    src = src.slice(0, insertAt) + importLine + src.slice(insertAt);
+  }
+
+  // Patch react() plugin call to add babel config
+  // Handles: react() and react({ ... })
+  if (src.includes('react()')) {
+    src = src.replace(
+      'react()',
+      `react({\n    babel: {\n      plugins: [devlinkBabelConfig({ root: process.cwd() })].filter(Boolean),\n    },\n  })`
+    );
+    ok('patched react() in vite.config');
+  } else if (src.match(/react\(\s*\{/)) {
+    // react({ already has options — add babel inside
+    src = src.replace(
+      /react\(\s*\{/,
+      `react({\n    babel: {\n      plugins: [devlinkBabelConfig({ root: process.cwd() })].filter(Boolean),\n    },\n    `
+    );
+    ok('patched react({ in vite.config');
+  } else {
+    // Can't auto-patch safely — append comment instructions
+    src += `\n// TODO: add devlink babel plugin to your react() config:\n`;
+    src += `// import { devlinkBabelConfig } from 'devlink-vite-plugin'\n`;
+    src += `// react({ babel: { plugins: [devlinkBabelConfig({ root: process.cwd() })] } })\n`;
+    warn('Could not auto-patch vite.config. See TODO comment added at bottom of file.');
+  }
+
+  fs.writeFileSync(configPath, src);
+  ok(`patched ${configFile}`);
+  return true;
+}
+
+function createViteConfig(filename) {
+  const content = `import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { devlinkBabelConfig } from 'devlink-vite-plugin';
+
+export default defineConfig({
+  plugins: [
+    react({
+      babel: {
+        plugins: [
+          devlinkBabelConfig({ root: process.cwd() }),
+        ].filter(Boolean),
+      },
+    }),
+  ],
+});
+`;
+  fs.writeFileSync(path.join(projectRoot, filename), content);
+  ok(`created ${filename} with devlink config`);
+}
+
+// ─── Next.js setup ────────────────────────────────────────────────────────────
+
+function setupNext() {
+  const candidates = ['next.config.ts', 'next.config.js', 'next.config.mjs'];
+  const configFile = candidates.find(f => exists(path.join(projectRoot, f)));
+
+  if (!configFile) {
+    warn('No next.config file found. Creating next.config.js with devlink config...');
+    createNextConfig('next.config.js');
+    return true;
+  }
+
+  const configPath = path.join(projectRoot, configFile);
+  let src = fs.readFileSync(configPath, 'utf8');
+
+  if (src.includes('devlink-babel-plugin')) {
+    ok('next.config already has devlink config');
+    return true;
+  }
+
+  // Next.js uses .babelrc or babel.config.js to add babel plugins
+  // We patch/create .babelrc
+  const babelRcPath = path.join(projectRoot, '.babelrc');
+  if (exists(babelRcPath)) {
+    const babelRc = readJson(babelRcPath);
+    const devEnv = babelRc.env?.development || {};
+    devEnv.plugins = devEnv.plugins || [];
+    if (!devEnv.plugins.some(p => (Array.isArray(p) ? p[0] : p) === 'devlink-babel-plugin')) {
+      devEnv.plugins.push(['devlink-babel-plugin', { root: '.', envs: ['development'] }]);
+      babelRc.env = babelRc.env || {};
+      babelRc.env.development = devEnv;
+      writeJson(babelRcPath, babelRc);
+      ok('patched .babelrc for Next.js');
+    } else {
+      ok('.babelrc already has devlink config');
+    }
+  } else {
+    // Create .babelrc
+    const babelRc = {
+      presets: ['next/babel'],
+      env: {
+        development: {
+          plugins: [
+            ['devlink-babel-plugin', { root: '.', envs: ['development'] }]
+          ]
+        }
+      }
+    };
+    writeJson(babelRcPath, babelRc);
+    ok('created .babelrc for Next.js with devlink config');
+    warn('Adding .babelrc disables Next.js SWC compiler. Only use in development.');
+  }
+
+  return true;
+}
+
+function createNextConfig(filename) {
+  const content = `/** @type {import('next').NextConfig} */
+const nextConfig = {};
+module.exports = nextConfig;
+`;
+  fs.writeFileSync(path.join(projectRoot, filename), content);
+}
+
+// ─── Generate devlink.config.ts in user's project ─────────────────────────────
+
+function generateDevlinkConfig(framework) {
+  const configPath = path.join(projectRoot, 'devlink.config.ts');
+  if (exists(configPath)) { ok('devlink.config.ts already exists'); return; }
+
+  // Try to auto-detect project src folder
+  const srcDir = exists(path.join(projectRoot, 'src')) ? './src' : '.';
+  const winRoot = projectRoot.replace(/\\/g, '/');
+
+  const content = `// devlink.config.ts
+// Auto-generated by devlink setup. Edit projectRoot and rootPath for your project.
+
+export const devlinkConfig = {
+  /** Absolute path to your project root */
+  projectRoot: '${winRoot}',
+
+  /** Path shown in the file tree — usually projectRoot/src */
+  rootPath: '${winRoot}/${srcDir.replace('./', '')}',
+
+  /** Start editor docked to the right side */
+  defaultDocked: true,
+
+  /** Width of the docked editor panel in px */
+  dockedWidth: 460,
+};
+`;
+  fs.writeFileSync(configPath, content);
+  ok('created devlink.config.ts — edit projectRoot if needed');
+}
+
+// ─── Generate main devlink entry patch instructions ───────────────────────────
+
+function printMainInstructions(framework) {
+  console.log('');
+  console.log('─────────────────────────────────────────────────────');
+  console.log('[devlink setup] Final step — update your entry file:');
+  console.log('─────────────────────────────────────────────────────');
+  console.log('');
+  console.log('In your main.tsx / main.jsx / _app.tsx:');
+  console.log('');
+  if (framework === 'next') {
+    console.log(`  // pages/_app.tsx
+  import { DevlinkBridge } from 'devlink-bridge'
+  import { DevlinkStudio } from 'devlink-studio'
+  import devlinkConfig from '../devlink.config'
+
+  const bridge = new DevlinkBridge()
+
+  export default function App({ Component, pageProps }) {
+    return (
+      <DevlinkStudio bridge={bridge} {...devlinkConfig}>
+        <Component {...pageProps} />
+      </DevlinkStudio>
+    )
+  }`);
+  } else {
+    console.log(`  import { DevlinkBridge } from 'devlink-bridge'
+  import { DevlinkStudio } from 'devlink-studio'
+  import { devlinkConfig } from '../devlink.config'
+
+  const bridge = new DevlinkBridge()
+
+  function Root() {
+    return (
+      <DevlinkStudio bridge={bridge} {...devlinkConfig}>
+        <App />
+      </DevlinkStudio>
+    )
+  }`);
+  }
+  console.log('');
+  console.log('Then start the bridge server in a separate terminal:');
+  console.log('  npm run devlink:bridge');
+  console.log('');
+  console.log('─────────────────────────────────────────────────────');
+}
+
+// ─── Main ─────────────────────────────────────────────────────────────────────
+
+function main() {
+  log(`configuring ${projectRoot}`);
+
+  const pkg = updatePackageJson();
+  const framework = detectFramework(pkg);
+  log(`detected framework: ${framework}`);
+
+  let configured = false;
+  if (framework === 'cra')     configured = setupCra();
+  else if (framework === 'vite')  configured = setupVite();
+  else if (framework === 'next')  configured = setupNext();
+  else {
+    warn('Could not detect framework (CRA / Vite / Next.js).');
+    warn('Add devlink-babel-plugin manually to your build config.');
+    warn('See: https://github.com/your-org/devlink#manual-setup');
+  }
+
+  generateDevlinkConfig(framework);
+  printMainInstructions(framework);
+
+  ok('setup complete');
+}
+
+try {
+  main();
+} catch (err) {
+  console.error(`[devlink setup] failed: ${err.message}`);
+  process.exitCode = 1;
+}