@eyeglass/cli 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/index.js

@@ -0,0 +1,462 @@
+#!/usr/bin/env node
+import * as fs from 'fs';
+import * as path from 'path';
+import { execFileSync } from 'child_process';
+// ============================================================================
+// Templates
+// ============================================================================
+const VITE_PLUGIN = `// Eyeglass Vite Plugin - Auto-generated by eyeglass init
+export function eyeglassPlugin() {
+  return {
+    name: 'eyeglass',
+    transformIndexHtml(html) {
+      if (process.env.NODE_ENV === 'production') return html;
+      return html.replace(
+        '</body>',
+        '<script type="module">import "@eyeglass/inspector";</script></body>'
+      );
+    },
+  };
+}
+`;
+const NEXT_CONFIG_ADDITION = `
+// Eyeglass configuration - Auto-generated by eyeglass init
+const withEyeglass = (nextConfig) => {
+  if (process.env.NODE_ENV === 'production') return nextConfig;
+  return {
+    ...nextConfig,
+    webpack: (config, options) => {
+      if (!options.isServer) {
+        config.module.rules.push({
+          test: /node_modules\\/@eyeglass\\/inspector/,
+          sideEffects: true,
+        });
+      }
+      if (typeof nextConfig.webpack === 'function') {
+        return nextConfig.webpack(config, options);
+      }
+      return config;
+    },
+  };
+};
+`;
+const CLAUDE_CONFIG = {
+    mcpServers: {
+        eyeglass: {
+            command: 'npx',
+            args: ['eyeglass-bridge'],
+        },
+    },
+};
+// ============================================================================
+// Utilities
+// ============================================================================
+function log(message, type = 'info') {
+    const prefix = {
+        info: '\x1b[36m→\x1b[0m',
+        success: '\x1b[32m✓\x1b[0m',
+        warn: '\x1b[33m⚠\x1b[0m',
+        error: '\x1b[31m✗\x1b[0m',
+    };
+    console.log(`${prefix[type]} ${message}`);
+}
+function fileExists(filePath) {
+    return fs.existsSync(filePath);
+}
+function readFile(filePath) {
+    return fs.readFileSync(filePath, 'utf-8');
+}
+function writeFile(filePath, content) {
+    fs.writeFileSync(filePath, content, 'utf-8');
+}
+function detectPackageManager() {
+    const cwd = process.cwd();
+    if (fileExists(path.join(cwd, 'bun.lockb')))
+        return 'bun';
+    if (fileExists(path.join(cwd, 'pnpm-lock.yaml')))
+        return 'pnpm';
+    if (fileExists(path.join(cwd, 'yarn.lock')))
+        return 'yarn';
+    return 'npm';
+}
+function installPackage(packageName, dev = true) {
+    const pm = detectPackageManager();
+    const devFlag = {
+        npm: dev ? '--save-dev' : '--save',
+        yarn: dev ? '--dev' : '',
+        pnpm: dev ? '--save-dev' : '',
+        bun: dev ? '--dev' : '',
+    };
+    const installCmd = {
+        npm: 'install',
+        yarn: 'add',
+        pnpm: 'add',
+        bun: 'add',
+    };
+    log(`Installing ${packageName} with ${pm}...`);
+    try {
+        const args = [installCmd[pm], packageName];
+        if (devFlag[pm]) {
+            args.push(devFlag[pm]);
+        }
+        execFileSync(pm, args, { stdio: 'pipe', cwd: process.cwd() });
+        return true;
+    }
+    catch (error) {
+        return false;
+    }
+}
+function detectProject() {
+    const cwd = process.cwd();
+    const hasTs = fileExists(path.join(cwd, 'tsconfig.json'));
+    // Vite
+    const viteConfigTs = path.join(cwd, 'vite.config.ts');
+    const viteConfigJs = path.join(cwd, 'vite.config.js');
+    if (fileExists(viteConfigTs)) {
+        return { type: 'vite', configFile: viteConfigTs, typescript: true };
+    }
+    if (fileExists(viteConfigJs)) {
+        return { type: 'vite', configFile: viteConfigJs, typescript: hasTs };
+    }
+    // Next.js
+    const nextConfigs = ['next.config.ts', 'next.config.mjs', 'next.config.js'];
+    for (const config of nextConfigs) {
+        const configPath = path.join(cwd, config);
+        if (fileExists(configPath)) {
+            return { type: 'next', configFile: configPath, typescript: hasTs };
+        }
+    }
+    // Remix
+    const remixConfig = path.join(cwd, 'remix.config.js');
+    if (fileExists(remixConfig)) {
+        return { type: 'remix', configFile: remixConfig, typescript: hasTs };
+    }
+    // CRA
+    const pkgPath = path.join(cwd, 'package.json');
+    if (fileExists(pkgPath)) {
+        const pkg = JSON.parse(readFile(pkgPath));
+        if (pkg.dependencies?.['react-scripts']) {
+            // Find entry file
+            const entryFiles = ['src/index.tsx', 'src/index.ts', 'src/index.jsx', 'src/index.js'];
+            for (const entry of entryFiles) {
+                if (fileExists(path.join(cwd, entry))) {
+                    return { type: 'cra', entryFile: path.join(cwd, entry), typescript: hasTs };
+                }
+            }
+            return { type: 'cra', typescript: hasTs };
+        }
+    }
+    return { type: 'unknown', typescript: hasTs };
+}
+// ============================================================================
+// Config Modifiers
+// ============================================================================
+function setupClaudeConfig(dryRun) {
+    const cwd = process.cwd();
+    const claudeDir = path.join(cwd, '.claude');
+    const configPath = path.join(claudeDir, 'settings.json');
+    if (fileExists(configPath)) {
+        // Check if eyeglass is already configured
+        try {
+            const existing = JSON.parse(readFile(configPath));
+            if (existing.mcpServers?.eyeglass) {
+                log('Claude Code MCP config already exists', 'success');
+                return true;
+            }
+            // Merge with existing config
+            const merged = {
+                ...existing,
+                mcpServers: {
+                    ...existing.mcpServers,
+                    ...CLAUDE_CONFIG.mcpServers,
+                },
+            };
+            if (dryRun) {
+                log(`Would update ${configPath} with eyeglass MCP config`);
+            }
+            else {
+                writeFile(configPath, JSON.stringify(merged, null, 2));
+                log('Added eyeglass to existing Claude Code config', 'success');
+            }
+            return true;
+        }
+        catch {
+            log('Could not parse existing .claude/settings.json', 'warn');
+            return false;
+        }
+    }
+    if (dryRun) {
+        log(`Would create ${configPath}`);
+    }
+    else {
+        if (!fileExists(claudeDir)) {
+            fs.mkdirSync(claudeDir, { recursive: true });
+        }
+        writeFile(configPath, JSON.stringify(CLAUDE_CONFIG, null, 2));
+        log('Created .claude/settings.json with MCP server config', 'success');
+    }
+    return true;
+}
+function setupVite(configFile, dryRun) {
+    const cwd = process.cwd();
+    const isTs = configFile.endsWith('.ts');
+    const pluginFile = path.join(cwd, isTs ? 'eyeglass.plugin.ts' : 'eyeglass.plugin.js');
+    // Create plugin file
+    if (!fileExists(pluginFile)) {
+        if (dryRun) {
+            log(`Would create ${path.basename(pluginFile)}`);
+        }
+        else {
+            writeFile(pluginFile, VITE_PLUGIN);
+            log(`Created ${path.basename(pluginFile)}`, 'success');
+        }
+    }
+    // Modify vite.config
+    const config = readFile(configFile);
+    // Check if already configured
+    if (config.includes('eyeglassPlugin')) {
+        log('Vite config already has eyeglass plugin', 'success');
+        return true;
+    }
+    // Add import
+    const importStatement = `import { eyeglassPlugin } from './eyeglass.plugin';\n`;
+    let newConfig = config;
+    // Find a good place to add the import (after other imports or at the top)
+    const lastImportMatch = config.match(/^import .+$/gm);
+    if (lastImportMatch) {
+        const lastImport = lastImportMatch[lastImportMatch.length - 1];
+        const lastImportIndex = config.lastIndexOf(lastImport) + lastImport.length;
+        newConfig = config.slice(0, lastImportIndex) + '\n' + importStatement + config.slice(lastImportIndex);
+    }
+    else {
+        newConfig = importStatement + config;
+    }
+    // Add to plugins array
+    // This handles: plugins: [...] or plugins: [react(), ...]
+    const pluginsMatch = newConfig.match(/plugins\s*:\s*\[/);
+    if (pluginsMatch) {
+        const insertPos = newConfig.indexOf(pluginsMatch[0]) + pluginsMatch[0].length;
+        newConfig = newConfig.slice(0, insertPos) + 'eyeglassPlugin(), ' + newConfig.slice(insertPos);
+    }
+    else {
+        log('Could not find plugins array in vite config - please add eyeglassPlugin() manually', 'warn');
+        return false;
+    }
+    if (dryRun) {
+        log(`Would modify ${path.basename(configFile)} to add eyeglassPlugin()`);
+    }
+    else {
+        writeFile(configFile, newConfig);
+        log(`Updated ${path.basename(configFile)} with eyeglass plugin`, 'success');
+    }
+    return true;
+}
+function setupNext(configFile, dryRun) {
+    const cwd = process.cwd();
+    const config = readFile(configFile);
+    // Check if already configured
+    if (config.includes('@eyeglass/inspector')) {
+        log('Next.js config already has eyeglass', 'success');
+        return true;
+    }
+    // For Next.js, we'll add the inspector import to the layout or _app file
+    const layoutFiles = [
+        'app/layout.tsx',
+        'app/layout.jsx',
+        'src/app/layout.tsx',
+        'src/app/layout.jsx',
+        'pages/_app.tsx',
+        'pages/_app.jsx',
+        'src/pages/_app.tsx',
+        'src/pages/_app.jsx',
+    ];
+    let targetFile = null;
+    for (const file of layoutFiles) {
+        const fullPath = path.join(cwd, file);
+        if (fileExists(fullPath)) {
+            targetFile = fullPath;
+            break;
+        }
+    }
+    if (!targetFile) {
+        log('Could not find layout.tsx or _app.tsx - please import @eyeglass/inspector manually', 'warn');
+        return false;
+    }
+    const fileContent = readFile(targetFile);
+    // Check if already imported
+    if (fileContent.includes('@eyeglass/inspector')) {
+        log('Inspector already imported in ' + path.basename(targetFile), 'success');
+        return true;
+    }
+    // Add import at the top (after 'use client' if present)
+    const importStatement = `import '@eyeglass/inspector';\n`;
+    let newContent;
+    if (fileContent.startsWith("'use client'") || fileContent.startsWith('"use client"')) {
+        const firstLineEnd = fileContent.indexOf('\n') + 1;
+        newContent = fileContent.slice(0, firstLineEnd) + importStatement + fileContent.slice(firstLineEnd);
+    }
+    else {
+        newContent = importStatement + fileContent;
+    }
+    if (dryRun) {
+        log(`Would add inspector import to ${path.relative(cwd, targetFile)}`);
+    }
+    else {
+        writeFile(targetFile, newContent);
+        log(`Added inspector import to ${path.relative(cwd, targetFile)}`, 'success');
+    }
+    return true;
+}
+function setupCRA(entryFile, dryRun) {
+    const cwd = process.cwd();
+    // Find entry file if not provided
+    if (!entryFile) {
+        const entryFiles = ['src/index.tsx', 'src/index.ts', 'src/index.jsx', 'src/index.js'];
+        for (const entry of entryFiles) {
+            const fullPath = path.join(cwd, entry);
+            if (fileExists(fullPath)) {
+                entryFile = fullPath;
+                break;
+            }
+        }
+    }
+    if (!entryFile || !fileExists(entryFile)) {
+        log('Could not find entry file - please import @eyeglass/inspector manually', 'warn');
+        return false;
+    }
+    const content = readFile(entryFile);
+    // Check if already imported
+    if (content.includes('@eyeglass/inspector')) {
+        log('Inspector already imported', 'success');
+        return true;
+    }
+    // Add import at the top
+    const importStatement = `import '@eyeglass/inspector';\n`;
+    const newContent = importStatement + content;
+    if (dryRun) {
+        log(`Would add inspector import to ${path.relative(cwd, entryFile)}`);
+    }
+    else {
+        writeFile(entryFile, newContent);
+        log(`Added inspector import to ${path.relative(cwd, entryFile)}`, 'success');
+    }
+    return true;
+}
+function init(options) {
+    const { dryRun, skipInstall } = options;
+    console.log('\n\x1b[1m🔍 Eyeglass Setup\x1b[0m\n');
+    if (dryRun) {
+        log('Running in dry-run mode - no changes will be made\n', 'warn');
+    }
+    // Detect project
+    const project = detectProject();
+    log(`Detected: ${project.type}${project.typescript ? ' (TypeScript)' : ''}`);
+    // Step 1: Install inspector
+    if (!skipInstall) {
+        if (dryRun) {
+            log('Would install @eyeglass/inspector');
+        }
+        else {
+            const installed = installPackage('@eyeglass/inspector', true);
+            if (installed) {
+                log('Installed @eyeglass/inspector', 'success');
+            }
+            else {
+                log('Failed to install @eyeglass/inspector - please install manually', 'error');
+            }
+        }
+    }
+    // Step 2: Setup Claude Code MCP config
+    setupClaudeConfig(dryRun);
+    // Step 3: Setup project-specific integration
+    console.log('');
+    switch (project.type) {
+        case 'vite':
+            if (project.configFile) {
+                setupVite(project.configFile, dryRun);
+            }
+            break;
+        case 'next':
+            if (project.configFile) {
+                setupNext(project.configFile, dryRun);
+            }
+            break;
+        case 'cra':
+        case 'remix':
+            setupCRA(project.entryFile, dryRun);
+            break;
+        default:
+            log('Unknown project type - please configure manually:', 'warn');
+            console.log('  1. Import @eyeglass/inspector in your entry file');
+            console.log('  2. Or add <script type="module">import "@eyeglass/inspector";</script> to your HTML\n');
+    }
+    // Done!
+    console.log('\n\x1b[1m✨ Setup complete!\x1b[0m\n');
+    console.log('\x1b[1mHow to use Eyeglass:\x1b[0m\n');
+    console.log('  1. Start your dev server');
+    console.log('  2. Run \x1b[36mclaude\x1b[0m in this directory');
+    console.log('  3. Tell Claude: \x1b[36m"watch eyeglass"\x1b[0m or \x1b[36m"eg"\x1b[0m');
+    console.log('     → Claude will start listening for requests');
+    console.log('  4. In your browser, hover over any element and click it to select for Eyeglass context. You can multi-select up to 5 items.');
+    console.log('  5. Type your request (e.g., "make this blue") and submit');
+    console.log('     → Claude automatically receives it and starts working!\n');
+    console.log('\x1b[2mTip: You never need to leave your browser - Claude watches for requests.\x1b[0m\n');
+}
+function help() {
+    console.log(`
+\x1b[1mEyeglass\x1b[0m - Visual debugging for AI coding agents
+
+Point at UI elements in your browser and tell Claude what to change.
+Claude watches for requests, so you never need to leave your browser.
+
+\x1b[1mUSAGE\x1b[0m
+  npx @eyeglass/cli <command> [options]
+
+\x1b[1mCOMMANDS\x1b[0m
+  init          Initialize Eyeglass in your project
+  help          Show this help message
+
+\x1b[1mOPTIONS\x1b[0m
+  --dry-run       Preview changes without making them
+  --skip-install  Skip installing @eyeglass/inspector
+
+\x1b[1mEXAMPLES\x1b[0m
+  npx @eyeglass/cli init              # Full automatic setup
+  npx @eyeglass/cli init --dry-run    # Preview what would change
+
+\x1b[1mWORKFLOW\x1b[0m
+  1. Run \x1b[36mnpx @eyeglass/cli init\x1b[0m in your project
+  2. Start your dev server
+  3. Run \x1b[36mclaude\x1b[0m and say "watch eyeglass" or "eg"
+  4. In your browser: hover over element → press E → type request
+  5. Claude automatically picks up requests and makes changes!
+
+\x1b[1mMORE INFO\x1b[0m
+  https://github.com/donutboyband/eyeglass
+`);
+}
+// ============================================================================
+// Main
+// ============================================================================
+const args = process.argv.slice(2);
+const command = args.find((arg) => !arg.startsWith('-'));
+const flags = args.filter((arg) => arg.startsWith('-'));
+const options = {
+    dryRun: flags.includes('--dry-run'),
+    skipInstall: flags.includes('--skip-install'),
+};
+switch (command) {
+    case 'init':
+        init(options);
+        break;
+    case 'help':
+    case undefined:
+        help();
+        break;
+    default:
+        if (command) {
+            console.error(`Unknown command: ${command}\n`);
+        }
+        help();
+        process.exit(command ? 1 : 0);
+}

package/dist/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.test.js

@@ -0,0 +1,259 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import * as path from 'path';
+// Mock fs module
+vi.mock('fs', () => ({
+    existsSync: vi.fn(),
+    readFileSync: vi.fn(),
+    writeFileSync: vi.fn(),
+    mkdirSync: vi.fn(),
+}));
+// Mock child_process
+vi.mock('child_process', () => ({
+    execSync: vi.fn(),
+    spawnSync: vi.fn(),
+}));
+// Helper to recreate detectProject logic for testing
+function detectProject(cwd, mockFs) {
+    const hasTs = mockFs.existsSync(path.join(cwd, 'tsconfig.json'));
+    // Vite
+    if (mockFs.existsSync(path.join(cwd, 'vite.config.ts'))) {
+        return { type: 'vite', configFile: path.join(cwd, 'vite.config.ts'), typescript: true };
+    }
+    if (mockFs.existsSync(path.join(cwd, 'vite.config.js'))) {
+        return { type: 'vite', configFile: path.join(cwd, 'vite.config.js'), typescript: hasTs };
+    }
+    // Next.js
+    const nextConfigs = ['next.config.ts', 'next.config.mjs', 'next.config.js'];
+    for (const config of nextConfigs) {
+        if (mockFs.existsSync(path.join(cwd, config))) {
+            return { type: 'next', configFile: path.join(cwd, config), typescript: hasTs };
+        }
+    }
+    // Remix
+    if (mockFs.existsSync(path.join(cwd, 'remix.config.js'))) {
+        return { type: 'remix', configFile: path.join(cwd, 'remix.config.js'), typescript: hasTs };
+    }
+    // CRA
+    const pkgPath = path.join(cwd, 'package.json');
+    if (mockFs.existsSync(pkgPath)) {
+        try {
+            const pkg = JSON.parse(mockFs.readFileSync(pkgPath));
+            if (pkg.dependencies?.['react-scripts']) {
+                return { type: 'cra', typescript: hasTs };
+            }
+        }
+        catch {
+            // Invalid JSON
+        }
+    }
+    return { type: 'unknown', typescript: hasTs };
+}
+// Helper to recreate detectPackageManager logic
+function detectPackageManager(cwd, mockFs) {
+    if (mockFs.existsSync(path.join(cwd, 'bun.lockb')))
+        return 'bun';
+    if (mockFs.existsSync(path.join(cwd, 'pnpm-lock.yaml')))
+        return 'pnpm';
+    if (mockFs.existsSync(path.join(cwd, 'yarn.lock')))
+        return 'yarn';
+    return 'npm';
+}
+describe('eyeglass CLI', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+    describe('detectProject', () => {
+        it('should detect Vite TypeScript project', () => {
+            const mockFs = {
+                existsSync: (p) => p.endsWith('vite.config.ts') || p.endsWith('tsconfig.json'),
+                readFileSync: () => '',
+            };
+            const result = detectProject('/my/project', mockFs);
+            expect(result.type).toBe('vite');
+            expect(result.typescript).toBe(true);
+            expect(result.configFile).toContain('vite.config.ts');
+        });
+        it('should detect Vite JavaScript project', () => {
+            const mockFs = {
+                existsSync: (p) => p.endsWith('vite.config.js'),
+                readFileSync: () => '',
+            };
+            const result = detectProject('/my/project', mockFs);
+            expect(result.type).toBe('vite');
+            expect(result.configFile).toContain('vite.config.js');
+        });
+        it('should detect Next.js from next.config.mjs', () => {
+            const mockFs = {
+                existsSync: (p) => p.endsWith('next.config.mjs'),
+                readFileSync: () => '',
+            };
+            const result = detectProject('/my/project', mockFs);
+            expect(result.type).toBe('next');
+            expect(result.configFile).toContain('next.config.mjs');
+        });
+        it('should detect Next.js from next.config.ts', () => {
+            const mockFs = {
+                existsSync: (p) => p.endsWith('next.config.ts') || p.endsWith('tsconfig.json'),
+                readFileSync: () => '',
+            };
+            const result = detectProject('/my/project', mockFs);
+            expect(result.type).toBe('next');
+            expect(result.typescript).toBe(true);
+        });
+        it('should detect Remix project', () => {
+            const mockFs = {
+                existsSync: (p) => p.endsWith('remix.config.js'),
+                readFileSync: () => '',
+            };
+            const result = detectProject('/my/project', mockFs);
+            expect(result.type).toBe('remix');
+        });
+        it('should detect CRA project', () => {
+            const mockFs = {
+                existsSync: (p) => p.endsWith('package.json'),
+                readFileSync: () => JSON.stringify({ dependencies: { 'react-scripts': '^5.0.0' } }),
+            };
+            const result = detectProject('/my/project', mockFs);
+            expect(result.type).toBe('cra');
+        });
+        it('should return unknown for unrecognized project', () => {
+            const mockFs = {
+                existsSync: () => false,
+                readFileSync: () => '',
+            };
+            const result = detectProject('/my/project', mockFs);
+            expect(result.type).toBe('unknown');
+        });
+        it('should detect TypeScript from tsconfig.json', () => {
+            const mockFs = {
+                existsSync: (p) => p.endsWith('tsconfig.json'),
+                readFileSync: () => '',
+            };
+            const result = detectProject('/my/project', mockFs);
+            expect(result.typescript).toBe(true);
+        });
+    });
+    describe('detectPackageManager', () => {
+        it('should detect bun from bun.lockb', () => {
+            const mockFs = {
+                existsSync: (p) => p.endsWith('bun.lockb'),
+            };
+            const result = detectPackageManager('/my/project', mockFs);
+            expect(result).toBe('bun');
+        });
+        it('should detect pnpm from pnpm-lock.yaml', () => {
+            const mockFs = {
+                existsSync: (p) => p.endsWith('pnpm-lock.yaml'),
+            };
+            const result = detectPackageManager('/my/project', mockFs);
+            expect(result).toBe('pnpm');
+        });
+        it('should detect yarn from yarn.lock', () => {
+            const mockFs = {
+                existsSync: (p) => p.endsWith('yarn.lock'),
+            };
+            const result = detectPackageManager('/my/project', mockFs);
+            expect(result).toBe('yarn');
+        });
+        it('should default to npm', () => {
+            const mockFs = {
+                existsSync: () => false,
+            };
+            const result = detectPackageManager('/my/project', mockFs);
+            expect(result).toBe('npm');
+        });
+    });
+    describe('CLAUDE_CONFIG', () => {
+        it('should have correct MCP server structure', () => {
+            const config = {
+                mcpServers: {
+                    eyeglass: {
+                        command: 'npx',
+                        args: ['eyeglass-bridge'],
+                    },
+                },
+            };
+            expect(config.mcpServers.eyeglass.command).toBe('npx');
+            expect(config.mcpServers.eyeglass.args).toEqual(['eyeglass-bridge']);
+        });
+    });
+    describe('VITE_PLUGIN template', () => {
+        it('should contain required plugin structure', () => {
+            const plugin = `export function eyeglassPlugin() {
+  return {
+    name: 'eyeglass',
+    transformIndexHtml(html) {
+      if (process.env.NODE_ENV === 'production') return html;
+      return html.replace(
+        '</body>',
+        '<script type="module">import "@eyeglass/inspector";</script></body>'
+      );
+    },
+  };
+}`;
+            expect(plugin).toContain("name: 'eyeglass'");
+            expect(plugin).toContain('transformIndexHtml');
+            expect(plugin).toContain('@eyeglass/inspector');
+            expect(plugin).toContain("process.env.NODE_ENV === 'production'");
+        });
+    });
+    describe('Vite config modification', () => {
+        it('should detect if eyeglassPlugin is already configured', () => {
+            const existingConfig = `
+import { defineConfig } from 'vite';
+import { eyeglassPlugin } from './eyeglass.plugin';
+
+export default defineConfig({
+  plugins: [eyeglassPlugin()],
+});
+`;
+            expect(existingConfig.includes('eyeglassPlugin')).toBe(true);
+        });
+        it('should identify plugins array location', () => {
+            const config = `export default defineConfig({
+  plugins: [react()],
+});`;
+            const match = config.match(/plugins\s*:\s*\[/);
+            expect(match).not.toBeNull();
+        });
+    });
+    describe('Next.js layout detection', () => {
+        it('should check common layout file locations', () => {
+            const layoutFiles = [
+                'app/layout.tsx',
+                'app/layout.jsx',
+                'src/app/layout.tsx',
+                'src/app/layout.jsx',
+                'pages/_app.tsx',
+                'pages/_app.jsx',
+                'src/pages/_app.tsx',
+                'src/pages/_app.jsx',
+            ];
+            expect(layoutFiles).toContain('app/layout.tsx');
+            expect(layoutFiles).toContain('pages/_app.tsx');
+            expect(layoutFiles.length).toBe(8);
+        });
+    });
+    describe('use client directive handling', () => {
+        it('should preserve use client directive at top', () => {
+            const fileContent = `'use client';
+
+export default function Layout() {}`;
+            const importStatement = `import '@eyeglass/inspector';\n`;
+            let newContent;
+            if (fileContent.startsWith("'use client'") || fileContent.startsWith('"use client"')) {
+                const firstLineEnd = fileContent.indexOf('\n') + 1;
+                newContent = fileContent.slice(0, firstLineEnd) + importStatement + fileContent.slice(firstLineEnd);
+            }
+            else {
+                newContent = importStatement + fileContent;
+            }
+            expect(newContent.startsWith("'use client'")).toBe(true);
+            expect(newContent).toContain("import '@eyeglass/inspector'");
+            // Import should be after 'use client'
+            const useClientIndex = newContent.indexOf("'use client'");
+            const importIndex = newContent.indexOf("import '@eyeglass/inspector'");
+            expect(importIndex).toBeGreaterThan(useClientIndex);
+        });
+    });
+});

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@eyeglass/cli",
+  "version": "0.1.0",
+  "description": "Visual debugging for AI coding agents - CLI",
+  "type": "module",
+  "bin": {
+    "eyeglass": "./dist/index.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest run --project node --testNamePattern cli",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "eyeglass",
+    "debugging",
+    "ai",
+    "claude",
+    "inspector",
+    "mcp",
+    "react",
+    "vue",
+    "svelte",
+    "nextjs",
+    "vite"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/donutboyband/eyeglass.git",
+    "directory": "packages/cli"
+  },
+  "devDependencies": {
+    "@types/node": "^20.10.0",
+    "typescript": "^5.3.0"
+  }
+}