@velt-js/mcp-installer 0.1.0

package/src/utils/config.js

@@ -0,0 +1,149 @@
+/**
+ * Configuration Collection Utilities
+ * 
+ * Handles collecting user configuration from .env file
+ */
+
+import fs from 'fs';
+import path from 'path';
+
+/**
+ * Reads environment variables from .env.local or .env file
+ * 
+ * @param {string} projectPath - Project root path
+ * @returns {Object} Environment variables object
+ */
+function readEnvFile(projectPath) {
+  // Ensure we're using absolute path - never search outside the specified directory
+  const absolutePath = path.resolve(projectPath);
+  
+  // Process .env first, then .env.local so local overrides take precedence
+  // (later values overwrite earlier ones in the envVars object)
+  const envFiles = [
+    path.join(absolutePath, '.env'),
+    path.join(absolutePath, '.env.local'),
+  ];
+
+  const envVars = {};
+  
+  console.error(`   📂 Reading .env files from: ${absolutePath}`);
+
+  for (const envFile of envFiles) {
+    if (fs.existsSync(envFile)) {
+      try {
+        console.error(`   ✓ Found: ${path.basename(envFile)}`);
+        const content = fs.readFileSync(envFile, 'utf-8');
+        const lines = content.split('\n');
+
+        for (const line of lines) {
+          // Skip comments and empty lines
+          const trimmed = line.trim();
+          if (!trimmed || trimmed.startsWith('#')) {
+            continue;
+          }
+
+          // Parse KEY=VALUE format
+          const match = trimmed.match(/^([^=]+)=(.*)$/);
+          if (match) {
+            const key = match[1].trim();
+            let value = match[2].trim();
+
+            // Remove quotes if present
+            if ((value.startsWith('"') && value.endsWith('"')) ||
+                (value.startsWith("'") && value.endsWith("'"))) {
+              value = value.slice(1, -1);
+            }
+
+            envVars[key] = value;
+            // Log found keys (but not values for security)
+            if (key.includes('VELT') || key.includes('API')) {
+              console.error(`      ✓ Found ${key}`);
+            }
+          }
+        }
+      } catch (error) {
+        // Continue to next file if one fails
+        console.error(`   ⚠️  Could not read ${path.basename(envFile)}: ${error.message}`);
+      }
+    } else {
+      console.error(`   ⚠️  Not found: ${path.basename(envFile)}`);
+    }
+  }
+
+  return envVars;
+}
+
+/**
+ * Collects installation configuration from .env file or provided parameters
+ * 
+ * @param {Object} params
+ * @param {string} params.projectPath - Project path
+ * @param {string} [params.apiKey] - API key provided directly (optional, will read from .env if not provided)
+ * @param {string} [params.authToken] - Auth token provided directly (optional, will read from .env if not provided)
+ * @returns {Promise<Object>} Configuration result
+ */
+export async function collectConfiguration({ projectPath, apiKey: providedApiKey, authToken: providedAuthToken }) {
+  try {
+    // Resolve absolute path to ensure we're reading from the correct directory
+    const absoluteProjectPath = path.resolve(projectPath);
+    
+    // If API key provided directly, use it; otherwise read from .env file
+    let apiKey = providedApiKey;
+    let authToken = providedAuthToken;
+    
+    if (!apiKey) {
+      // Read from .env file ONLY in the specified project directory
+      console.error(`   📖 API key not provided, reading from .env files...`);
+      const envVars = readEnvFile(absoluteProjectPath);
+      apiKey = envVars.VELT_API_KEY || envVars.NEXT_PUBLIC_VELT_API_KEY;
+      if (!authToken) {
+        authToken = envVars.VELT_AUTH_TOKEN;
+      }
+    } else {
+      console.error(`   ✓ Using API key provided as parameter`);
+      if (!authToken) {
+        // Still try to read auth token from .env if not provided
+        const envVars = readEnvFile(absoluteProjectPath);
+        authToken = envVars.VELT_AUTH_TOKEN;
+      }
+    }
+
+    // API key is required - must be in .env file
+    if (!apiKey) {
+      const envLocalPath = path.join(absoluteProjectPath, '.env.local');
+      const envPath = path.join(absoluteProjectPath, '.env');
+      const envLocalExists = fs.existsSync(envLocalPath);
+      const envExists = fs.existsSync(envPath);
+      
+      let errorMessage = `API key not found in ${absoluteProjectPath}\n\n`;
+      errorMessage += `Checked files:\n`;
+      errorMessage += `  - ${envLocalPath} ${envLocalExists ? '(exists but no VELT_API_KEY found)' : '(not found)'}\n`;
+      errorMessage += `  - ${envPath} ${envExists ? '(exists but no VELT_API_KEY found)' : '(not found)'}\n\n`;
+      errorMessage += `Please add VELT_API_KEY or NEXT_PUBLIC_VELT_API_KEY to ${envLocalExists ? '.env.local' : '.env'} file in ${absoluteProjectPath}\n\n`;
+      errorMessage += `Example:\nVELT_API_KEY=your_api_key_here\n\n`;
+      errorMessage += `Get your API key from: https://console.velt.dev`;
+      
+      return {
+        success: false,
+        error: errorMessage,
+      };
+    }
+
+    return {
+      success: true,
+      data: {
+        installDir: absoluteProjectPath,
+        apiKey: apiKey,
+        authToken: authToken || null,
+        source: 'env-file',
+      },
+    };
+  } catch (error) {
+    return {
+      success: false,
+      error: error.message,
+    };
+  }
+}
+
+

package/src/utils/framework-detection.js

@@ -0,0 +1,262 @@
+/**
+ * Framework Detection Utility
+ *
+ * Detects whether the target project is Next.js, React (CRA/Vite), or unknown.
+ * This information is used for:
+ * - Determining if "use client" directives are needed (Next.js only)
+ * - Adjusting installation patterns based on framework
+ */
+
+import fs from 'fs';
+import path from 'path';
+
+/**
+ * Project type enum
+ */
+export const ProjectType = {
+  NEXTJS: 'nextjs',
+  REACT: 'react',
+  UNKNOWN: 'unknown',
+};
+
+/**
+ * Detects the project type by analyzing package.json and file structure
+ *
+ * @param {string} projectPath - Path to the project directory
+ * @returns {Object} Detection result { projectType, signals, confidence }
+ */
+export function detectProjectType(projectPath) {
+  const signals = [];
+  let nextjsScore = 0;
+  let reactScore = 0;
+
+  // === Check package.json dependencies ===
+  const packageJsonPath = path.join(projectPath, 'package.json');
+
+  if (fs.existsSync(packageJsonPath)) {
+    try {
+      const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+      const allDeps = {
+        ...packageJson.dependencies,
+        ...packageJson.devDependencies,
+      };
+
+      // Next.js indicators
+      if (allDeps.next) {
+        signals.push({ type: 'dependency', name: 'next', framework: 'nextjs' });
+        nextjsScore += 3; // Strong signal
+      }
+
+      // React (non-Next) indicators
+      if (allDeps['react-scripts']) {
+        signals.push({ type: 'dependency', name: 'react-scripts', framework: 'react' });
+        reactScore += 3; // CRA
+      }
+
+      if (allDeps.vite && allDeps.react) {
+        signals.push({ type: 'dependency', name: 'vite+react', framework: 'react' });
+        reactScore += 3; // Vite React
+      }
+
+      // Generic React (both Next.js and React have this)
+      if (allDeps.react) {
+        signals.push({ type: 'dependency', name: 'react', framework: 'both' });
+      }
+
+    } catch (err) {
+      signals.push({ type: 'error', message: `Failed to parse package.json: ${err.message}` });
+    }
+  }
+
+  // === Check file structure ===
+
+  // Next.js specific files/folders
+  const nextjsIndicators = [
+    { path: 'next.config.js', weight: 3 },
+    { path: 'next.config.ts', weight: 3 },
+    { path: 'next.config.mjs', weight: 3 },
+    { path: 'app', weight: 2, isDir: true }, // App Router
+    { path: 'pages', weight: 2, isDir: true }, // Pages Router
+    { path: 'app/layout.tsx', weight: 2 },
+    { path: 'app/layout.js', weight: 2 },
+    { path: 'app/page.tsx', weight: 1 },
+    { path: 'app/page.js', weight: 1 },
+    { path: 'pages/_app.tsx', weight: 2 },
+    { path: 'pages/_app.js', weight: 2 },
+    { path: 'src/app/layout.tsx', weight: 2 },
+    { path: 'src/app/layout.js', weight: 2 },
+  ];
+
+  for (const indicator of nextjsIndicators) {
+    const fullPath = path.join(projectPath, indicator.path);
+    const exists = indicator.isDir
+      ? fs.existsSync(fullPath) && fs.statSync(fullPath).isDirectory()
+      : fs.existsSync(fullPath);
+
+    if (exists) {
+      signals.push({ type: 'file', path: indicator.path, framework: 'nextjs' });
+      nextjsScore += indicator.weight;
+    }
+  }
+
+  // React (non-Next) specific files
+  const reactIndicators = [
+    { path: 'src/main.tsx', weight: 2 }, // Vite React
+    { path: 'src/main.jsx', weight: 2 },
+    { path: 'src/index.tsx', weight: 2 }, // CRA
+    { path: 'src/index.jsx', weight: 2 },
+    { path: 'vite.config.ts', weight: 2 },
+    { path: 'vite.config.js', weight: 2 },
+    { path: 'public/index.html', weight: 1 }, // CRA/Vite
+    { path: 'index.html', weight: 1 }, // Vite root
+  ];
+
+  for (const indicator of reactIndicators) {
+    const fullPath = path.join(projectPath, indicator.path);
+    if (fs.existsSync(fullPath)) {
+      signals.push({ type: 'file', path: indicator.path, framework: 'react' });
+      reactScore += indicator.weight;
+    }
+  }
+
+  // === Determine project type ===
+  let projectType;
+  let confidence;
+
+  if (nextjsScore > reactScore && nextjsScore >= 3) {
+    projectType = ProjectType.NEXTJS;
+    confidence = nextjsScore >= 6 ? 'high' : 'medium';
+  } else if (reactScore > nextjsScore && reactScore >= 3) {
+    projectType = ProjectType.REACT;
+    confidence = reactScore >= 6 ? 'high' : 'medium';
+  } else if (nextjsScore > 0 || reactScore > 0) {
+    // Some signals but not conclusive
+    projectType = nextjsScore >= reactScore ? ProjectType.NEXTJS : ProjectType.REACT;
+    confidence = 'low';
+  } else {
+    projectType = ProjectType.UNKNOWN;
+    confidence = 'none';
+  }
+
+  return {
+    projectType,
+    signals,
+    confidence,
+    scores: {
+      nextjs: nextjsScore,
+      react: reactScore,
+    },
+  };
+}
+
+/**
+ * Checks if project is Next.js
+ *
+ * @param {string} projectPath - Path to project
+ * @returns {boolean} True if Next.js project
+ */
+export function isNextJsProject(projectPath) {
+  const detection = detectProjectType(projectPath);
+  return detection.projectType === ProjectType.NEXTJS;
+}
+
+/**
+ * Detects which router type Next.js project uses
+ *
+ * @param {string} projectPath - Path to project
+ * @returns {Object} Router detection { routerType: 'app'|'pages'|'both'|'unknown', paths: {} }
+ */
+export function detectNextJsRouter(projectPath) {
+  const result = {
+    routerType: 'unknown',
+    paths: {
+      appDir: null,
+      pagesDir: null,
+      layoutFile: null,
+      pageFile: null,
+    },
+  };
+
+  // Check for app directory (App Router)
+  const appDirPaths = ['app', 'src/app'];
+  for (const dir of appDirPaths) {
+    const fullPath = path.join(projectPath, dir);
+    if (fs.existsSync(fullPath) && fs.statSync(fullPath).isDirectory()) {
+      result.paths.appDir = dir;
+
+      // Find layout file
+      for (const ext of ['tsx', 'jsx', 'ts', 'js']) {
+        const layoutPath = path.join(fullPath, `layout.${ext}`);
+        if (fs.existsSync(layoutPath)) {
+          result.paths.layoutFile = path.join(dir, `layout.${ext}`);
+          break;
+        }
+      }
+
+      // Find page file
+      for (const ext of ['tsx', 'jsx', 'ts', 'js']) {
+        const pagePath = path.join(fullPath, `page.${ext}`);
+        if (fs.existsSync(pagePath)) {
+          result.paths.pageFile = path.join(dir, `page.${ext}`);
+          break;
+        }
+      }
+      break;
+    }
+  }
+
+  // Check for pages directory (Pages Router)
+  const pagesDirPaths = ['pages', 'src/pages'];
+  for (const dir of pagesDirPaths) {
+    const fullPath = path.join(projectPath, dir);
+    if (fs.existsSync(fullPath) && fs.statSync(fullPath).isDirectory()) {
+      result.paths.pagesDir = dir;
+      break;
+    }
+  }
+
+  // Determine router type
+  if (result.paths.appDir && result.paths.pagesDir) {
+    result.routerType = 'both';
+  } else if (result.paths.appDir) {
+    result.routerType = 'app';
+  } else if (result.paths.pagesDir) {
+    result.routerType = 'pages';
+  }
+
+  return result;
+}
+
+/**
+ * Gets framework-specific information for installation
+ *
+ * @param {string} projectPath - Path to project
+ * @returns {Object} Framework info for installation
+ */
+export function getFrameworkInfo(projectPath) {
+  const detection = detectProjectType(projectPath);
+  const info = {
+    projectType: detection.projectType,
+    confidence: detection.confidence,
+    needsUseClient: false,
+    routerType: null,
+    paths: {},
+  };
+
+  if (detection.projectType === ProjectType.NEXTJS) {
+    info.needsUseClient = true;
+    const routerInfo = detectNextJsRouter(projectPath);
+    info.routerType = routerInfo.routerType;
+    info.paths = routerInfo.paths;
+  }
+
+  return info;
+}
+
+export default {
+  ProjectType,
+  detectProjectType,
+  isNextJsProject,
+  detectNextJsRouter,
+  getFrameworkInfo,
+};

package/src/utils/header-positioning.js

@@ -0,0 +1,146 @@
+/**
+ * Header Positioning Utility
+ *
+ * Handles VeltCommentsSidebar positioning based on user preference.
+ */
+
+import fs from 'fs';
+
+/**
+ * Position mapping
+ */
+const POSITION_STYLES = {
+  'top-left': {
+    position: 'fixed',
+    top: '20px',
+    left: '20px',
+    right: 'auto',
+    bottom: 'auto',
+  },
+  'top-right': {
+    position: 'fixed',
+    top: '20px',
+    right: '20px',
+    left: 'auto',
+    bottom: 'auto',
+  },
+  'bottom-left': {
+    position: 'fixed',
+    bottom: '20px',
+    left: '20px',
+    right: 'auto',
+    top: 'auto',
+  },
+  'bottom-right': {
+    position: 'fixed',
+    bottom: '20px',
+    right: '20px',
+    left: 'auto',
+    top: 'auto',
+  },
+};
+
+/**
+ * Applies header positioning to VeltCommentsSidebar
+ *
+ * @param {string} filePath - Path to the file containing VeltCommentsSidebar
+ * @param {string} position - Position (top-left, top-right, bottom-left, bottom-right)
+ * @param {string[]} filesModified - Array to track modified files
+ * @param {Object[]} integrationPoints - Array to track integration points
+ * @returns {boolean} Success status
+ */
+export function applyHeaderPositioning(filePath, position, filesModified, integrationPoints) {
+  if (!fs.existsSync(filePath)) {
+    return false;
+  }
+
+  try {
+    let content = fs.readFileSync(filePath, 'utf-8');
+
+    // Check if VeltCommentsSidebar exists
+    if (!content.includes('VeltCommentsSidebar')) {
+      console.error(`   ⚠️  VeltCommentsSidebar not found in ${filePath}`);
+      return false;
+    }
+
+    const positionStyle = POSITION_STYLES[position] || POSITION_STYLES['top-right'];
+
+    // Build inline style string
+    const styleString = `style={{ position: '${positionStyle.position}', top: '${positionStyle.top}', right: '${positionStyle.right}', bottom: '${positionStyle.bottom}', left: '${positionStyle.left}', zIndex: 9999 }}`;
+
+    // Match all VeltCommentsSidebar tags: self-closing (with or without props) and opening tags.
+    // Captures existing attributes in group 1 and self-closing slash in group 2.
+    const tagPattern = /<VeltCommentsSidebar(\s[^>]*?)?\s*(\/?)>/g;
+    content = content.replace(tagPattern, (match, existingAttrs, selfClose) => {
+      // Strip any existing style prop from the captured attributes to avoid
+      // the duplicate-prop override problem (last prop wins in JSX).
+      let attrs = (existingAttrs || '').replace(/\s*style=\{\{[^}]*\}\}/g, '');
+      const closing = selfClose ? ' /' : '';
+      return `<VeltCommentsSidebar ${styleString}${attrs}${closing}>`;
+    });
+
+    // Write back
+    fs.writeFileSync(filePath, content, 'utf-8');
+
+    const relativePath = filePath.split('/').slice(-3).join('/');
+    if (!filesModified.includes(relativePath)) {
+      filesModified.push(relativePath);
+    }
+
+    integrationPoints.push({
+      file: relativePath,
+      type: 'header-positioning',
+      description: `Applied ${position} positioning to VeltCommentsSidebar`,
+      position,
+    });
+
+    console.error(`   📍 Applied ${position} positioning to VeltCommentsSidebar`);
+    return true;
+  } catch (error) {
+    console.error(`   ❌ Error applying header positioning: ${error.message}`);
+    return false;
+  }
+}
+
+/**
+ * Finds files containing VeltCommentsSidebar
+ *
+ * @param {string} projectPath - Project root path
+ * @returns {string[]} Array of file paths
+ */
+export function findVeltSidebarFiles(projectPath) {
+  const results = [];
+
+  function searchDirectory(dir) {
+    if (!fs.existsSync(dir)) return;
+
+    const entries = fs.readdirSync(dir, { withFileTypes: true });
+
+    for (const entry of entries) {
+      const fullPath = `${dir}/${entry.name}`;
+
+      if (entry.isDirectory()) {
+        if (entry.name === 'node_modules' || entry.name === '.next') continue;
+        searchDirectory(fullPath);
+      } else if (entry.isFile() && /\.(tsx|jsx)$/.test(entry.name)) {
+        try {
+          const content = fs.readFileSync(fullPath, 'utf-8');
+          if (content.includes('VeltCommentsSidebar')) {
+            results.push(fullPath);
+          }
+        } catch (err) {
+          // Skip files we can't read
+        }
+      }
+    }
+  }
+
+  searchDirectory(projectPath);
+  return results;
+}
+
+export default {
+  applyHeaderPositioning,
+  findVeltSidebarFiles,
+  POSITION_STYLES,
+};