@gettrace/cli 1.2.6 → 1.2.8

package/dist/index.js

@@ -34,7 +34,7 @@ class TerminalBuffer {
         }
     }
     getLast(n = 100) {
-        return this.lines.slice(-n).join('\n');
+        return this.lines.slice(-n);
     }
     clear() {
         this.lines = [];
@@ -86,7 +86,7 @@ function detectDevCommand(projectPath, override) {
     };
     return { command: runCmd[pm] ?? `npm run ${script}`, pm, script };
 }
-const VERSION = '1.2.6';
+const VERSION = '1.2.8';
 /** Levenshtein distance for fuzzy block matching */
 function levenshtein(a, b) {
     if (a === '' || b === '')
@@ -540,9 +540,11 @@ program
         clientCount++;
         connectedClients.add(ws);
         console.log(chalk.green('●') + ` Extension connected (${clientCount} client${clientCount > 1 ? 's' : ''})`);
-        // Send the last 100 lines immediately so the extension has context on connect
+        // Wire up the full IDE bridge protocol (file read/write, detect project, etc.)
+        attachMessageHandler(ws, projectPath);
+        // Send the last 100 lines immediately so the extension has terminal context
         const catchup = globalTerminalBuffer.getLast(100);
-        if (catchup) {
+        if (catchup.length > 0) {
             ws.send(JSON.stringify({ type: 'TERMINAL_CATCHUP', lines: catchup }));
         }
         ws.on('close', () => {
@@ -577,965 +579,973 @@ program
     process.on('SIGTERM', shutdown);
 });
 // ============================================
-// COMMAND: trace connect (legacy / IDE-only)
+// SHARED MESSAGE HANDLER
+// Called by both `trace dev` and `trace connect`.
+// Attaches the full IDE bridge protocol to a WS.
 // ============================================
-program
-    .command('connect', { isDefault: true })
-    .alias('c')
-    .description('Start IDE bridge only (use "trace dev" to also start your dev server)')
-    .option('-p, --port <port>', 'WebSocket port', '8765')
-    .action(async (options) => {
-    const port = parseInt(options.port);
-    const projectPath = process.cwd();
-    console.log();
-    console.log(chalk.bold.cyan('🔗 Trace IDE Bridge'));
-    console.log(chalk.gray('─'.repeat(55)));
-    console.log();
-    console.log(`📁 Project: ${chalk.green(projectPath)}`);
-    console.log(`🌐 Port: ${chalk.cyan(port)}`);
-    console.log();
-    // Read package.json for project info
+function attachMessageHandler(ws, projectPath) {
+    // Per-connection undo stack
+    const undoStack = [];
+    // Build project info for GET_PROJECT_INFO responses
     let projectInfo = { projectPath };
     try {
         const pkgPath = path.join(projectPath, 'package.json');
         if (fs.existsSync(pkgPath)) {
             const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'));
-            projectInfo = {
-                ...projectInfo,
-                name: pkg.name,
-                version: pkg.version,
-                description: pkg.description
-            };
-            console.log(`📦 Package: ${chalk.yellow(pkg.name)} v${pkg.version}`);
+            projectInfo = { ...projectInfo, name: pkg.name, version: pkg.version, description: pkg.description };
         }
     }
-    catch (e) {
-        // No package.json, that's fine
-    }
-    // Start WebSocket server
-    const wss = new WebSocketServer({ port });
-    let clientCount = 0;
-    console.log();
-    console.log(chalk.green('✓') + ' WebSocket server started');
-    console.log(chalk.dim('Waiting for extension to connect...'));
-    console.log();
-    console.log(chalk.gray('─'.repeat(55)));
-    console.log(chalk.dim('Press Ctrl+C to stop'));
-    console.log();
-    wss.on('connection', (ws) => {
-        clientCount++;
-        console.log(chalk.green('●') + ` Extension connected (${clientCount} client${clientCount > 1 ? 's' : ''})`);
-        // Undo stack: stores file snapshots before each write/append/edit
-        const undoStack = [];
-        ws.on('message', async (data) => {
-            try {
-                const message = JSON.parse(data.toString());
-                const { id, type } = message;
-                let response = { id };
-                switch (type) {
-                    case 'GET_PROJECT_INFO':
-                        response.data = projectInfo;
-                        break;
-                    case 'READ_FILE':
-                        try {
-                            const filePath = path.resolve(projectPath, message.filePath);
-                            if (!filePath.startsWith(projectPath)) {
-                                response.error = 'Access denied';
-                            }
-                            else if (fs.existsSync(filePath)) {
-                                const stat = fs.statSync(filePath);
-                                // Binary file detection (check first 4KB for null bytes)
-                                if (stat.size > 0) {
-                                    const fd = fs.openSync(filePath, 'r');
-                                    const sample = Buffer.alloc(Math.min(4096, stat.size));
-                                    fs.readSync(fd, sample, 0, sample.length, 0);
-                                    fs.closeSync(fd);
-                                    if (sample.includes(0)) {
-                                        response.error = `Cannot read binary file: ${message.filePath}`;
-                                        break;
-                                    }
-                                }
-                                const rawContent = fs.readFileSync(filePath, 'utf-8');
-                                const allLines = rawContent.split('\n');
-                                const offset = message.offset || 1;
-                                const limit = message.limit || 2000;
-                                const startIdx = Math.max(0, offset - 1);
-                                const endIdx = Math.min(allLines.length, startIdx + limit);
-                                const sliced = allLines.slice(startIdx, endIdx);
-                                // Line-number prefixed output (like OpenCode)
-                                const numbered = sliced.map((line, i) => `${startIdx + i + 1}: ${line}`).join('\n');
-                                const truncated = endIdx < allLines.length;
-                                response.data = {
-                                    content: numbered,
-                                    rawContent: rawContent,
-                                    exists: true,
-                                    path: filePath,
-                                    totalLines: allLines.length,
-                                    showing: { from: offset, to: endIdx, truncated },
-                                };
-                            }
-                            else {
-                                // Suggest similar files if not found
-                                const dir = path.dirname(filePath);
-                                const base = path.basename(filePath);
-                                let suggestions = [];
-                                try {
-                                    suggestions = fs.readdirSync(dir)
-                                        .filter(e => e.toLowerCase().includes(base.toLowerCase()) || base.toLowerCase().includes(e.toLowerCase()))
-                                        .slice(0, 3)
-                                        .map(e => path.relative(projectPath, path.join(dir, e)));
+    catch (_) { }
+    ws.on('message', async (data) => {
+        try {
+            const message = JSON.parse(data.toString());
+            const { id, type } = message;
+            let response = { id };
+            switch (type) {
+                case 'GET_PROJECT_INFO':
+                    response.data = projectInfo;
+                    break;
+                case 'READ_FILE':
+                    try {
+                        const filePath = path.resolve(projectPath, message.filePath);
+                        if (!filePath.startsWith(projectPath)) {
+                            response.error = 'Access denied';
+                        }
+                        else if (fs.existsSync(filePath)) {
+                            const stat = fs.statSync(filePath);
+                            // Binary file detection (check first 4KB for null bytes)
+                            if (stat.size > 0) {
+                                const fd = fs.openSync(filePath, 'r');
+                                const sample = Buffer.alloc(Math.min(4096, stat.size));
+                                fs.readSync(fd, sample, 0, sample.length, 0);
+                                fs.closeSync(fd);
+                                if (sample.includes(0)) {
+                                    response.error = `Cannot read binary file: ${message.filePath}`;
+                                    break;
                                 }
-                                catch (_) { }
-                                response.data = { exists: false, suggestions };
                             }
+                            const rawContent = fs.readFileSync(filePath, 'utf-8');
+                            const allLines = rawContent.split('\n');
+                            const offset = message.offset || 1;
+                            const limit = message.limit || 2000;
+                            const startIdx = Math.max(0, offset - 1);
+                            const endIdx = Math.min(allLines.length, startIdx + limit);
+                            const sliced = allLines.slice(startIdx, endIdx);
+                            // Line-number prefixed output (like OpenCode)
+                            const numbered = sliced.map((line, i) => `${startIdx + i + 1}: ${line}`).join('\n');
+                            const truncated = endIdx < allLines.length;
+                            response.data = {
+                                content: numbered,
+                                rawContent: rawContent,
+                                exists: true,
+                                path: filePath,
+                                totalLines: allLines.length,
+                                showing: { from: offset, to: endIdx, truncated },
+                            };
                         }
-                        catch (e) {
-                            response.error = e.message;
-                        }
-                        break;
-                    case 'GET_SOURCE':
-                        try {
-                            const filePath = path.resolve(projectPath, message.filePath);
-                            if (!filePath.startsWith(projectPath)) {
-                                response.error = 'Access denied';
-                            }
-                            else if (fs.existsSync(filePath)) {
-                                const content = fs.readFileSync(filePath, 'utf-8');
-                                const lines = content.split('\n');
-                                const start = Math.max(0, (message.lineStart || 1) - 1);
-                                const end = message.lineEnd ? Math.min(lines.length, message.lineEnd) : lines.length;
-                                response.data = {
-                                    lines: lines.slice(start, end),
-                                    startLine: start + 1,
-                                    endLine: end,
-                                    totalLines: lines.length
-                                };
-                            }
-                            else {
-                                response.error = 'File not found';
+                        else {
+                            // Suggest similar files if not found
+                            const dir = path.dirname(filePath);
+                            const base = path.basename(filePath);
+                            let suggestions = [];
+                            try {
+                                suggestions = fs.readdirSync(dir)
+                                    .filter(e => e.toLowerCase().includes(base.toLowerCase()) || base.toLowerCase().includes(e.toLowerCase()))
+                                    .slice(0, 3)
+                                    .map(e => path.relative(projectPath, path.join(dir, e)));
                             }
+                            catch (_) { }
+                            response.data = { exists: false, suggestions };
                         }
-                        catch (e) {
-                            response.error = e.message;
-                        }
-                        break;
-                    case 'GET_ERROR_CONTEXT':
-                        try {
-                            const filePath = path.resolve(projectPath, message.filePath);
-                            if (!filePath.startsWith(projectPath)) {
-                                response.error = 'Access denied';
-                            }
-                            else if (fs.existsSync(filePath)) {
-                                const content = fs.readFileSync(filePath, 'utf-8');
-                                const lines = content.split('\n');
-                                const targetLine = message.line || 1;
-                                const contextLines = message.contextLines || 5;
-                                const start = Math.max(0, targetLine - contextLines - 1);
-                                const end = Math.min(lines.length, targetLine + contextLines);
-                                response.data = {
-                                    lines: lines.slice(start, end).map((line, i) => ({
-                                        number: start + i + 1,
-                                        content: line,
-                                        isError: start + i + 1 === targetLine
-                                    })),
-                                    errorLine: targetLine,
-                                    filePath: message.filePath
-                                };
-                            }
-                            else {
-                                response.error = 'File not found';
-                            }
+                    }
+                    catch (e) {
+                        response.error = e.message;
+                    }
+                    break;
+                case 'GET_SOURCE':
+                    try {
+                        const filePath = path.resolve(projectPath, message.filePath);
+                        if (!filePath.startsWith(projectPath)) {
+                            response.error = 'Access denied';
                         }
-                        catch (e) {
-                            response.error = e.message;
+                        else if (fs.existsSync(filePath)) {
+                            const content = fs.readFileSync(filePath, 'utf-8');
+                            const lines = content.split('\n');
+                            const start = Math.max(0, (message.lineStart || 1) - 1);
+                            const end = message.lineEnd ? Math.min(lines.length, message.lineEnd) : lines.length;
+                            response.data = {
+                                lines: lines.slice(start, end),
+                                startLine: start + 1,
+                                endLine: end,
+                                totalLines: lines.length
+                            };
                         }
-                        break;
-                    case 'GET_FILE_TREE':
-                        try {
-                            const depth = message.depth || 3;
-                            const tree = getFileTree(projectPath, depth);
-                            response.data = { tree };
+                        else {
+                            response.error = 'File not found';
                         }
-                        catch (e) {
-                            response.error = e.message;
+                    }
+                    catch (e) {
+                        response.error = e.message;
+                    }
+                    break;
+                case 'GET_ERROR_CONTEXT':
+                    try {
+                        const filePath = path.resolve(projectPath, message.filePath);
+                        if (!filePath.startsWith(projectPath)) {
+                            response.error = 'Access denied';
                         }
-                        break;
-                    case 'SEARCH_CODE':
-                        try {
-                            const query = message.query;
-                            const matches = searchInFiles(projectPath, query, 20);
-                            response.data = { matches };
+                        else if (fs.existsSync(filePath)) {
+                            const content = fs.readFileSync(filePath, 'utf-8');
+                            const lines = content.split('\n');
+                            const targetLine = message.line || 1;
+                            const contextLines = message.contextLines || 5;
+                            const start = Math.max(0, targetLine - contextLines - 1);
+                            const end = Math.min(lines.length, targetLine + contextLines);
+                            response.data = {
+                                lines: lines.slice(start, end).map((line, i) => ({
+                                    number: start + i + 1,
+                                    content: line,
+                                    isError: start + i + 1 === targetLine
+                                })),
+                                errorLine: targetLine,
+                                filePath: message.filePath
+                            };
                         }
-                        catch (e) {
-                            response.error = e.message;
+                        else {
+                            response.error = 'File not found';
                         }
-                        break;
-                    case 'FIND_FILES':
-                        try {
-                            const pattern = message.pattern || '';
-                            // Extract the filename from a glob like **/Services.css
-                            const fileName = pattern.split('/').pop().replace(/\*\*/g, '').replace(/\*/g, '');
-                            const maxResults = message.maxResults || 20;
-                            const ignorePatterns = ['node_modules', '.git', 'dist', 'build', '.next', '.cache'];
-                            const found = [];
-                            function findFiles(dir) {
-                                if (found.length >= maxResults)
-                                    return;
-                                try {
-                                    const items = fs.readdirSync(dir);
-                                    for (const item of items) {
-                                        if (found.length >= maxResults)
-                                            break;
-                                        if (ignorePatterns.includes(item) || item.startsWith('.'))
-                                            continue;
-                                        const fullPath = path.join(dir, item);
-                                        try {
-                                            const stat = fs.statSync(fullPath);
-                                            if (stat.isDirectory()) {
-                                                findFiles(fullPath);
-                                            }
-                                            else {
-                                                // Match by filename (with optional wildcard)
-                                                const matchByName = !fileName || item === fileName ||
-                                                    (pattern.includes('*') && item.endsWith(fileName));
-                                                if (matchByName) {
-                                                    found.push(path.relative(projectPath, fullPath));
-                                                }
+                    }
+                    catch (e) {
+                        response.error = e.message;
+                    }
+                    break;
+                case 'GET_FILE_TREE':
+                    try {
+                        const depth = message.depth || 3;
+                        const tree = getFileTree(projectPath, depth);
+                        response.data = { tree };
+                    }
+                    catch (e) {
+                        response.error = e.message;
+                    }
+                    break;
+                case 'SEARCH_CODE':
+                    try {
+                        const query = message.query;
+                        const matches = searchInFiles(projectPath, query, 20);
+                        response.data = { matches };
+                    }
+                    catch (e) {
+                        response.error = e.message;
+                    }
+                    break;
+                case 'FIND_FILES':
+                    try {
+                        const pattern = message.pattern || '';
+                        // Extract the filename from a glob like **/Services.css
+                        const fileName = pattern.split('/').pop().replace(/\*\*/g, '').replace(/\*/g, '');
+                        const maxResults = message.maxResults || 20;
+                        const ignorePatterns = ['node_modules', '.git', 'dist', 'build', '.next', '.cache'];
+                        const found = [];
+                        function findFiles(dir) {
+                            if (found.length >= maxResults)
+                                return;
+                            try {
+                                const items = fs.readdirSync(dir);
+                                for (const item of items) {
+                                    if (found.length >= maxResults)
+                                        break;
+                                    if (ignorePatterns.includes(item) || item.startsWith('.'))
+                                        continue;
+                                    const fullPath = path.join(dir, item);
+                                    try {
+                                        const stat = fs.statSync(fullPath);
+                                        if (stat.isDirectory()) {
+                                            findFiles(fullPath);
+                                        }
+                                        else {
+                                            // Match by filename (with optional wildcard)
+                                            const matchByName = !fileName || item === fileName ||
+                                                (pattern.includes('*') && item.endsWith(fileName));
+                                            if (matchByName) {
+                                                found.push(path.relative(projectPath, fullPath));
                                             }
                                         }
-                                        catch (e) { /* skip */ }
                                     }
+                                    catch (e) { /* skip */ }
                                 }
-                                catch (e) { /* skip */ }
                             }
-                            findFiles(projectPath);
-                            response.data = found;
+                            catch (e) { /* skip */ }
                         }
-                        catch (e) {
-                            response.error = e.message;
+                        findFiles(projectPath);
+                        response.data = found;
+                    }
+                    catch (e) {
+                        response.error = e.message;
+                    }
+                // ========== PROJECT DETECTION (Code Export Pipeline) ==========
+                case 'DETECT_PROJECT':
+                    try {
+                        const pkgPath = path.join(projectPath, 'package.json');
+                        let deps = {};
+                        let devDeps = {};
+                        let pkgName = '';
+                        if (fs.existsSync(pkgPath)) {
+                            const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'));
+                            deps = pkg.dependencies || {};
+                            devDeps = pkg.devDependencies || {};
+                            pkgName = pkg.name || '';
                         }
-                    // ========== PROJECT DETECTION (Code Export Pipeline) ==========
-                    case 'DETECT_PROJECT':
-                        try {
-                            const pkgPath = path.join(projectPath, 'package.json');
-                            let deps = {};
-                            let devDeps = {};
-                            let pkgName = '';
-                            if (fs.existsSync(pkgPath)) {
-                                const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'));
-                                deps = pkg.dependencies || {};
-                                devDeps = pkg.devDependencies || {};
-                                pkgName = pkg.name || '';
+                        const allDeps = { ...deps, ...devDeps };
+                        // --- Framework detection ---
+                        let framework = 'html';
+                        if (allDeps['next'])
+                            framework = 'next.js';
+                        else if (allDeps['nuxt'] || allDeps['nuxt3'])
+                            framework = 'nuxt';
+                        else if (allDeps['gatsby'])
+                            framework = 'gatsby';
+                        else if (allDeps['@remix-run/react'])
+                            framework = 'remix';
+                        else if (allDeps['svelte'] || allDeps['@sveltejs/kit'])
+                            framework = 'svelte';
+                        else if (allDeps['vue'])
+                            framework = 'vue';
+                        else if (allDeps['@angular/core'])
+                            framework = 'angular';
+                        else if (allDeps['react'])
+                            framework = 'react';
+                        // --- TypeScript detection ---
+                        const typescript = !!allDeps['typescript'] || fs.existsSync(path.join(projectPath, 'tsconfig.json'));
+                        const ext = typescript ? '.tsx' : '.jsx';
+                        // --- Styling detection ---
+                        let styling = 'plain-css';
+                        if (allDeps['tailwindcss'])
+                            styling = 'tailwind';
+                        else if (allDeps['styled-components'])
+                            styling = 'styled-components';
+                        else if (allDeps['@emotion/react'] || allDeps['@emotion/styled'])
+                            styling = 'emotion';
+                        else if (allDeps['sass'] || allDeps['node-sass'])
+                            styling = 'sass';
+                        // CSS Modules: detected by file presence later
+                        // --- Router detection (Next.js specific) ---
+                        let router = null;
+                        if (framework === 'next.js') {
+                            if (fs.existsSync(path.join(projectPath, 'src/app')) || fs.existsSync(path.join(projectPath, 'app'))) {
+                                router = 'app';
                             }
-                            const allDeps = { ...deps, ...devDeps };
-                            // --- Framework detection ---
-                            let framework = 'html';
-                            if (allDeps['next'])
-                                framework = 'next.js';
-                            else if (allDeps['nuxt'] || allDeps['nuxt3'])
-                                framework = 'nuxt';
-                            else if (allDeps['gatsby'])
-                                framework = 'gatsby';
-                            else if (allDeps['@remix-run/react'])
-                                framework = 'remix';
-                            else if (allDeps['svelte'] || allDeps['@sveltejs/kit'])
-                                framework = 'svelte';
-                            else if (allDeps['vue'])
-                                framework = 'vue';
-                            else if (allDeps['@angular/core'])
-                                framework = 'angular';
-                            else if (allDeps['react'])
-                                framework = 'react';
-                            // --- TypeScript detection ---
-                            const typescript = !!allDeps['typescript'] || fs.existsSync(path.join(projectPath, 'tsconfig.json'));
-                            const ext = typescript ? '.tsx' : '.jsx';
-                            // --- Styling detection ---
-                            let styling = 'plain-css';
-                            if (allDeps['tailwindcss'])
-                                styling = 'tailwind';
-                            else if (allDeps['styled-components'])
-                                styling = 'styled-components';
-                            else if (allDeps['@emotion/react'] || allDeps['@emotion/styled'])
-                                styling = 'emotion';
-                            else if (allDeps['sass'] || allDeps['node-sass'])
-                                styling = 'sass';
-                            // CSS Modules: detected by file presence later
-                            // --- Router detection (Next.js specific) ---
-                            let router = null;
-                            if (framework === 'next.js') {
-                                if (fs.existsSync(path.join(projectPath, 'src/app')) || fs.existsSync(path.join(projectPath, 'app'))) {
-                                    router = 'app';
-                                }
-                                else if (fs.existsSync(path.join(projectPath, 'src/pages')) || fs.existsSync(path.join(projectPath, 'pages'))) {
-                                    router = 'pages';
-                                }
+                            else if (fs.existsSync(path.join(projectPath, 'src/pages')) || fs.existsSync(path.join(projectPath, 'pages'))) {
+                                router = 'pages';
                             }
-                            // --- Key file location finder ---
-                            const findFirst = (candidates) => {
-                                for (const c of candidates) {
-                                    if (fs.existsSync(path.join(projectPath, c)))
-                                        return c;
-                                }
-                                return null;
-                            };
-                            const layoutFile = findFirst([
-                                'src/app/layout.tsx', 'src/app/layout.jsx', 'src/app/layout.js',
-                                'app/layout.tsx', 'app/layout.jsx', 'app/layout.js',
-                                'src/pages/_app.tsx', 'src/pages/_app.jsx', 'pages/_app.tsx', 'pages/_app.jsx',
-                                'src/App.tsx', 'src/App.jsx', 'src/App.js',
-                                'src/main.tsx', 'src/main.jsx', 'src/main.js',
-                                'index.html'
-                            ]);
-                            const globalStyleFile = findFirst([
-                                'src/app/globals.css', 'src/app/global.css',
-                                'app/globals.css', 'app/global.css',
-                                'src/index.css', 'src/styles/globals.css', 'src/styles/global.css',
-                                'src/App.css', 'src/styles.css',
-                                'styles/globals.css', 'styles/global.css',
-                                'css/style.css', 'css/main.css',
-                                'style.css', 'styles.css'
-                            ]);
-                            // Initial guess via disk — overridden after tree scan with real component count
-                            let componentsDir = findFirst([
-                                'src/components', 'src/app/components', 'components',
-                                'src/ui', 'src/app/ui'
-                            ]);
-                            // --- Tailwind config ---
-                            let tailwindConfig = null;
-                            let tailwindVersion = null;
-                            if (styling === 'tailwind') {
-                                tailwindConfig = findFirst([
-                                    'tailwind.config.ts', 'tailwind.config.js', 'tailwind.config.mjs', 'tailwind.config.cjs'
-                                ]);
-                                tailwindVersion = allDeps['tailwindcss'] || null;
+                        }
+                        // --- Key file location finder ---
+                        const findFirst = (candidates) => {
+                            for (const c of candidates) {
+                                if (fs.existsSync(path.join(projectPath, c)))
+                                    return c;
                             }
-                            // --- Detect code conventions from existing components ---
-                            let componentPattern = 'arrow-function';
-                            let exportPattern = 'default';
-                            let sampleComponentFile = null;
-                            let sampleComponentCode = null;
-                            if (componentsDir) {
-                                const compDir = path.join(projectPath, componentsDir);
-                                try {
-                                    const files = fs.readdirSync(compDir).filter(f => f.endsWith('.tsx') || f.endsWith('.jsx') || f.endsWith('.js') || f.endsWith('.vue') || f.endsWith('.svelte'));
-                                    if (files.length > 0) {
-                                        sampleComponentFile = path.join(componentsDir, files[0]);
-                                        const code = fs.readFileSync(path.join(compDir, files[0]), 'utf-8');
-                                        // Only include first 80 lines as a pattern reference
-                                        sampleComponentCode = code.split('\n').slice(0, 80).join('\n');
-                                        // Detect patterns
-                                        if (/^export default function /m.test(code)) {
-                                            componentPattern = 'function-declaration';
-                                            exportPattern = 'default';
-                                        }
-                                        else if (/^export function /m.test(code)) {
-                                            componentPattern = 'function-declaration';
-                                            exportPattern = 'named';
-                                        }
-                                        else if (/const \w+ = \(/.test(code) || /const \w+ = \(\) =>/.test(code)) {
-                                            componentPattern = 'arrow-function';
-                                        }
-                                        if (/^export default /m.test(code))
-                                            exportPattern = 'default';
-                                        else if (/^export \{/m.test(code) || /^export const/m.test(code))
-                                            exportPattern = 'named';
-                                        // CSS Modules detection from component imports
-                                        if (/import\s+\w+\s+from\s+['"][^'"]+\.module\.(css|scss|sass)['"]/.test(code)) {
-                                            styling = 'css-modules';
-                                        }
+                            return null;
+                        };
+                        const layoutFile = findFirst([
+                            'src/app/layout.tsx', 'src/app/layout.jsx', 'src/app/layout.js',
+                            'app/layout.tsx', 'app/layout.jsx', 'app/layout.js',
+                            'src/pages/_app.tsx', 'src/pages/_app.jsx', 'pages/_app.tsx', 'pages/_app.jsx',
+                            'src/App.tsx', 'src/App.jsx', 'src/App.js',
+                            'src/main.tsx', 'src/main.jsx', 'src/main.js',
+                            'index.html'
+                        ]);
+                        const globalStyleFile = findFirst([
+                            'src/app/globals.css', 'src/app/global.css',
+                            'app/globals.css', 'app/global.css',
+                            'src/index.css', 'src/styles/globals.css', 'src/styles/global.css',
+                            'src/App.css', 'src/styles.css',
+                            'styles/globals.css', 'styles/global.css',
+                            'css/style.css', 'css/main.css',
+                            'style.css', 'styles.css'
+                        ]);
+                        // Initial guess via disk — overridden after tree scan with real component count
+                        let componentsDir = findFirst([
+                            'src/components', 'src/app/components', 'components',
+                            'src/ui', 'src/app/ui'
+                        ]);
+                        // --- Tailwind config ---
+                        let tailwindConfig = null;
+                        let tailwindVersion = null;
+                        if (styling === 'tailwind') {
+                            tailwindConfig = findFirst([
+                                'tailwind.config.ts', 'tailwind.config.js', 'tailwind.config.mjs', 'tailwind.config.cjs'
+                            ]);
+                            tailwindVersion = allDeps['tailwindcss'] || null;
+                        }
+                        // --- Detect code conventions from existing components ---
+                        let componentPattern = 'arrow-function';
+                        let exportPattern = 'default';
+                        let sampleComponentFile = null;
+                        let sampleComponentCode = null;
+                        if (componentsDir) {
+                            const compDir = path.join(projectPath, componentsDir);
+                            try {
+                                const files = fs.readdirSync(compDir).filter(f => f.endsWith('.tsx') || f.endsWith('.jsx') || f.endsWith('.js') || f.endsWith('.vue') || f.endsWith('.svelte'));
+                                if (files.length > 0) {
+                                    sampleComponentFile = path.join(componentsDir, files[0]);
+                                    const code = fs.readFileSync(path.join(compDir, files[0]), 'utf-8');
+                                    // Only include first 80 lines as a pattern reference
+                                    sampleComponentCode = code.split('\n').slice(0, 80).join('\n');
+                                    // Detect patterns
+                                    if (/^export default function /m.test(code)) {
+                                        componentPattern = 'function-declaration';
+                                        exportPattern = 'default';
                                     }
-                                }
-                                catch (e) { /* skip */ }
-                            }
-                            // --- Also check layout file for CSS Modules if not yet detected ---
-                            if (styling === 'plain-css' && layoutFile) {
-                                try {
-                                    const layoutCode = fs.readFileSync(path.join(projectPath, layoutFile), 'utf-8');
-                                    if (/import\s+\w+\s+from\s+['"][^'"]+\.module\.(css|scss|sass)['"]/.test(layoutCode)) {
+                                    else if (/^export function /m.test(code)) {
+                                        componentPattern = 'function-declaration';
+                                        exportPattern = 'named';
+                                    }
+                                    else if (/const \w+ = \(/.test(code) || /const \w+ = \(\) =>/.test(code)) {
+                                        componentPattern = 'arrow-function';
+                                    }
+                                    if (/^export default /m.test(code))
+                                        exportPattern = 'default';
+                                    else if (/^export \{/m.test(code) || /^export const/m.test(code))
+                                        exportPattern = 'named';
+                                    // CSS Modules detection from component imports
+                                    if (/import\s+\w+\s+from\s+['"][^'"]+\.module\.(css|scss|sass)['"]/.test(code)) {
                                         styling = 'css-modules';
                                     }
                                 }
-                                catch (e) { /* skip */ }
                             }
-                            // --- Read a snippet of global CSS for context ---
-                            let globalStylePreview = null;
-                            if (globalStyleFile) {
-                                try {
-                                    const css = fs.readFileSync(path.join(projectPath, globalStyleFile), 'utf-8');
-                                    globalStylePreview = css.split('\n').slice(0, 40).join('\n');
+                            catch (e) { /* skip */ }
+                        }
+                        // --- Also check layout file for CSS Modules if not yet detected ---
+                        if (styling === 'plain-css' && layoutFile) {
+                            try {
+                                const layoutCode = fs.readFileSync(path.join(projectPath, layoutFile), 'utf-8');
+                                if (/import\s+\w+\s+from\s+['"][^'"]+\.module\.(css|scss|sass)['"]/.test(layoutCode)) {
+                                    styling = 'css-modules';
                                 }
-                                catch (e) { /* skip */ }
                             }
-                            // --- Build filtered scaffolding tree (UI-relevant files only) ---
-                            const SKIP_DIRS = new Set([
-                                'node_modules', '.git', '.next', '.nuxt', '.svelte-kit',
-                                'dist', 'build', '.cache', '.turbo', 'coverage',
-                                '__pycache__', '.vercel', '.output', '.parcel-cache'
-                            ]);
-                            const UI_EXTENSIONS = new Set([
-                                '.tsx', '.jsx', '.js', '.ts', '.vue', '.svelte',
-                                '.css', '.scss', '.sass', '.less', '.module.css', '.module.scss',
-                                '.html', '.astro'
-                            ]);
-                            const treeLines = [];
-                            const MAX_TREE_LINES = 120;
-                            // Track dir → count of Pascal-case component files for smart detection
-                            const dirComponentCount = new Map();
-                            const buildTree = (dir, prefix, depth) => {
-                                if (depth > 4 || treeLines.length >= MAX_TREE_LINES)
-                                    return;
-                                try {
-                                    const entries = fs.readdirSync(path.join(projectPath, dir), { withFileTypes: true });
-                                    // Sort: directories first, then files
-                                    const sorted = entries
-                                        .filter(e => !e.name.startsWith('.') || e.name === '.env')
-                                        .sort((a, b) => {
-                                        if (a.isDirectory() && !b.isDirectory())
-                                            return -1;
-                                        if (!a.isDirectory() && b.isDirectory())
-                                            return 1;
-                                        return a.name.localeCompare(b.name);
-                                    });
-                                    for (let i = 0; i < sorted.length && treeLines.length < MAX_TREE_LINES; i++) {
-                                        const entry = sorted[i];
-                                        const isLast = i === sorted.length - 1;
-                                        const connector = isLast ? '└── ' : '├── ';
-                                        const childPrefix = isLast ? '    ' : '│   ';
-                                        const childPath = dir ? `${dir}/${entry.name}` : entry.name;
-                                        if (entry.isDirectory()) {
-                                            if (SKIP_DIRS.has(entry.name))
-                                                continue;
-                                            treeLines.push(`${prefix}${connector}${entry.name}/`);
-                                            buildTree(childPath, prefix + childPrefix, depth + 1);
-                                        }
-                                        else {
-                                            const ext = path.extname(entry.name).toLowerCase();
-                                            // Count Pascal-case component files per dir (Footer.tsx, Button.tsx, etc.)
-                                            const COMPONENT_EXTS = new Set(['.tsx', '.jsx', '.vue', '.svelte']);
-                                            if (COMPONENT_EXTS.has(ext) && /^[A-Z]/.test(entry.name)) {
-                                                dirComponentCount.set(dir, (dirComponentCount.get(dir) ?? 0) + 1);
-                                            }
-                                            // Include UI-relevant files + config files at root
-                                            if (UI_EXTENSIONS.has(ext) || (depth <= 1 && (entry.name === 'package.json' || entry.name === 'tsconfig.json' ||
-                                                entry.name.startsWith('tailwind.config') || entry.name.startsWith('next.config') ||
-                                                entry.name.startsWith('vite.config')))) {
-                                                treeLines.push(`${prefix}${connector}${entry.name}`);
-                                            }
-                                        }
-                                    }
-                                }
-                                catch (e) { /* permission error, skip */ }
-                            };
-                            // Only scan UI-relevant root dirs (not the entire project)
-                            const scanRoots = ['src', 'app', 'pages', 'components', 'styles', 'public', 'lib', 'utils'];
-                            const existingRoots = [];
-                            for (const root of scanRoots) {
-                                if (fs.existsSync(path.join(projectPath, root))) {
-                                    existingRoots.push(root);
-                                }
+                            catch (e) { /* skip */ }
+                        }
+                        // --- Read a snippet of global CSS for context ---
+                        let globalStylePreview = null;
+                        if (globalStyleFile) {
+                            try {
+                                const css = fs.readFileSync(path.join(projectPath, globalStyleFile), 'utf-8');
+                                globalStylePreview = css.split('\n').slice(0, 40).join('\n');
                             }
-                            // Also add root-level config files
+                            catch (e) { /* skip */ }
+                        }
+                        // --- Build filtered scaffolding tree (UI-relevant files only) ---
+                        const SKIP_DIRS = new Set([
+                            'node_modules', '.git', '.next', '.nuxt', '.svelte-kit',
+                            'dist', 'build', '.cache', '.turbo', 'coverage',
+                            '__pycache__', '.vercel', '.output', '.parcel-cache'
+                        ]);
+                        const UI_EXTENSIONS = new Set([
+                            '.tsx', '.jsx', '.js', '.ts', '.vue', '.svelte',
+                            '.css', '.scss', '.sass', '.less', '.module.css', '.module.scss',
+                            '.html', '.astro'
+                        ]);
+                        const treeLines = [];
+                        const MAX_TREE_LINES = 120;
+                        // Track dir → count of Pascal-case component files for smart detection
+                        const dirComponentCount = new Map();
+                        const buildTree = (dir, prefix, depth) => {
+                            if (depth > 4 || treeLines.length >= MAX_TREE_LINES)
+                                return;
                             try {
-                                const rootEntries = fs.readdirSync(projectPath, { withFileTypes: true });
-                                for (const entry of rootEntries) {
-                                    if (!entry.isDirectory() && (entry.name === 'package.json' || entry.name === 'tsconfig.json' ||
-                                        entry.name.startsWith('tailwind.config') || entry.name.startsWith('next.config') ||
-                                        entry.name.startsWith('vite.config') || entry.name === 'index.html')) {
-                                        treeLines.push(entry.name);
+                                const entries = fs.readdirSync(path.join(projectPath, dir), { withFileTypes: true });
+                                // Sort: directories first, then files
+                                const sorted = entries
+                                    .filter(e => !e.name.startsWith('.') || e.name === '.env')
+                                    .sort((a, b) => {
+                                    if (a.isDirectory() && !b.isDirectory())
+                                        return -1;
+                                    if (!a.isDirectory() && b.isDirectory())
+                                        return 1;
+                                    return a.name.localeCompare(b.name);
+                                });
+                                for (let i = 0; i < sorted.length && treeLines.length < MAX_TREE_LINES; i++) {
+                                    const entry = sorted[i];
+                                    const isLast = i === sorted.length - 1;
+                                    const connector = isLast ? '└── ' : '├── ';
+                                    const childPrefix = isLast ? '    ' : '│   ';
+                                    const childPath = dir ? `${dir}/${entry.name}` : entry.name;
+                                    if (entry.isDirectory()) {
+                                        if (SKIP_DIRS.has(entry.name))
+                                            continue;
+                                        treeLines.push(`${prefix}${connector}${entry.name}/`);
+                                        buildTree(childPath, prefix + childPrefix, depth + 1);
+                                    }
+                                    else {
+                                        const ext = path.extname(entry.name).toLowerCase();
+                                        // Count Pascal-case component files per dir (Footer.tsx, Button.tsx, etc.)
+                                        const COMPONENT_EXTS = new Set(['.tsx', '.jsx', '.vue', '.svelte']);
+                                        if (COMPONENT_EXTS.has(ext) && /^[A-Z]/.test(entry.name)) {
+                                            dirComponentCount.set(dir, (dirComponentCount.get(dir) ?? 0) + 1);
+                                        }
+                                        // Include UI-relevant files + config files at root
+                                        if (UI_EXTENSIONS.has(ext) || (depth <= 1 && (entry.name === 'package.json' || entry.name === 'tsconfig.json' ||
+                                            entry.name.startsWith('tailwind.config') || entry.name.startsWith('next.config') ||
+                                            entry.name.startsWith('vite.config')))) {
+                                            treeLines.push(`${prefix}${connector}${entry.name}`);
+                                        }
                                     }
                                 }
                             }
-                            catch (e) { /* skip */ }
-                            // Build tree for each UI root
-                            for (const root of existingRoots) {
-                                treeLines.push(`${root}/`);
-                                buildTree(root, '', 1);
+                            catch (e) { /* permission error, skip */ }
+                        };
+                        // Only scan UI-relevant root dirs (not the entire project)
+                        const scanRoots = ['src', 'app', 'pages', 'components', 'styles', 'public', 'lib', 'utils'];
+                        const existingRoots = [];
+                        for (const root of scanRoots) {
+                            if (fs.existsSync(path.join(projectPath, root))) {
+                                existingRoots.push(root);
                             }
-                            const projectTree = treeLines.length > 0 ? treeLines.join('\n') : null;
-                            // --- Override componentsDir with real scan result ---
-                            // Pick the dir with the most Pascal-case component files.
-                            // This beats any hardcoded list: works for src/features, src/modules,
-                            // src/views, src/app/components — whatever the project uses.
-                            if (dirComponentCount.size > 0) {
-                                let bestDir = '';
-                                let bestCount = 0;
-                                for (const [dir, count] of dirComponentCount.entries()) {
-                                    if (count > bestCount) {
-                                        bestCount = count;
-                                        bestDir = dir;
-                                    }
+                        }
+                        // Also add root-level config files
+                        try {
+                            const rootEntries = fs.readdirSync(projectPath, { withFileTypes: true });
+                            for (const entry of rootEntries) {
+                                if (!entry.isDirectory() && (entry.name === 'package.json' || entry.name === 'tsconfig.json' ||
+                                    entry.name.startsWith('tailwind.config') || entry.name.startsWith('next.config') ||
+                                    entry.name.startsWith('vite.config') || entry.name === 'index.html')) {
+                                    treeLines.push(entry.name);
                                 }
-                                if (bestCount > 0)
-                                    componentsDir = bestDir;
                             }
-                            response.data = {
-                                framework,
-                                typescript,
-                                styling,
-                                router,
-                                ext,
-                                pkgName,
-                                // Key file locations
-                                layoutFile,
-                                globalStyleFile,
-                                componentsDir,
-                                tailwindConfig,
-                                tailwindVersion,
-                                // Code conventions
-                                componentPattern,
-                                exportPattern,
-                                sampleComponentFile,
-                                sampleComponentCode,
-                                // CSS context
-                                globalStylePreview,
-                                // Scaffolding tree
-                                projectTree,
-                            };
-                            console.log(chalk.blue('ℹ') + ` Project detected: ${chalk.yellow(framework)} + ${chalk.cyan(styling)}${typescript ? chalk.dim(' (TS)') : ''}${router ? chalk.dim(` [${router} router]`) : ''}`);
                         }
-                        catch (e) {
-                            response.error = e.message;
+                        catch (e) { /* skip */ }
+                        // Build tree for each UI root
+                        for (const root of existingRoots) {
+                            treeLines.push(`${root}/`);
+                            buildTree(root, '', 1);
                         }
-                        break;
-                    // ========== FILE WRITING (UI Design Export) ==========
-                    // --- Undo Stack ---
-                    // Snapshots file contents before every write/append/edit.
-                    // UNDO_LAST pops the most recent snapshot and restores it.
-                    // Max 20 entries to avoid unbounded memory growth.
-                    case 'WRITE_FILE':
-                        try {
-                            const filePath = path.resolve(projectPath, message.filePath);
-                            if (!filePath.startsWith(projectPath)) {
-                                response.error = 'Access denied: Path outside project';
-                            }
-                            else {
-                                // Snapshot before write
-                                const prevContent = fs.existsSync(filePath) ? fs.readFileSync(filePath, 'utf-8') : null;
-                                undoStack.push({ filePath, prevContent, operation: 'WRITE_FILE', timestamp: Date.now(), relativePath: message.filePath });
-                                if (undoStack.length > 20)
-                                    undoStack.shift();
-                                // --- CSS safety: validate balanced braces ---
-                                if (filePath.endsWith('.css')) {
-                                    const writeContent = message.content || '';
-                                    const opens = (writeContent.match(/\{/g) || []).length;
-                                    const closes = (writeContent.match(/\}/g) || []).length;
-                                    if (opens !== closes) {
-                                        // Remove snapshot since we're rejecting the write
-                                        undoStack.pop();
-                                        response.error = `CSS validation failed: unbalanced braces (${opens} opening vs ${closes} closing). Fix the CSS before writing.`;
-                                        break;
-                                    }
-                                }
-                                const dirPath = path.dirname(filePath);
-                                if (!fs.existsSync(dirPath)) {
-                                    fs.mkdirSync(dirPath, { recursive: true });
+                        const projectTree = treeLines.length > 0 ? treeLines.join('\n') : null;
+                        // --- Override componentsDir with real scan result ---
+                        // Pick the dir with the most Pascal-case component files.
+                        // This beats any hardcoded list: works for src/features, src/modules,
+                        // src/views, src/app/components — whatever the project uses.
+                        if (dirComponentCount.size > 0) {
+                            let bestDir = '';
+                            let bestCount = 0;
+                            for (const [dir, count] of dirComponentCount.entries()) {
+                                if (count > bestCount) {
+                                    bestCount = count;
+                                    bestDir = dir;
                                 }
-                                fs.writeFileSync(filePath, message.content, 'utf-8');
-                                // Auto-format after write
-                                const formatter = await autoFormat(filePath, projectPath);
-                                response.data = { success: true, path: filePath, formatted: formatter, undoAvailable: true };
-                                console.log(chalk.blue('ℹ') + ` Wrote file: ${message.filePath}` + (formatter ? chalk.dim(` (formatted with ${formatter})`) : '') + chalk.dim(' [undo saved]'));
                             }
+                            if (bestCount > 0)
+                                componentsDir = bestDir;
                         }
-                        catch (e) {
-                            response.error = e.message;
+                        response.data = {
+                            framework,
+                            typescript,
+                            styling,
+                            router,
+                            ext,
+                            pkgName,
+                            // Key file locations
+                            layoutFile,
+                            globalStyleFile,
+                            componentsDir,
+                            tailwindConfig,
+                            tailwindVersion,
+                            // Code conventions
+                            componentPattern,
+                            exportPattern,
+                            sampleComponentFile,
+                            sampleComponentCode,
+                            // CSS context
+                            globalStylePreview,
+                            // Scaffolding tree
+                            projectTree,
+                        };
+                        console.log(chalk.blue('ℹ') + ` Project detected: ${chalk.yellow(framework)} + ${chalk.cyan(styling)}${typescript ? chalk.dim(' (TS)') : ''}${router ? chalk.dim(` [${router} router]`) : ''}`);
+                    }
+                    catch (e) {
+                        response.error = e.message;
+                    }
+                    break;
+                // ========== FILE WRITING (UI Design Export) ==========
+                // --- Undo Stack ---
+                // Snapshots file contents before every write/append/edit.
+                // UNDO_LAST pops the most recent snapshot and restores it.
+                // Max 20 entries to avoid unbounded memory growth.
+                case 'WRITE_FILE':
+                    try {
+                        const filePath = path.resolve(projectPath, message.filePath);
+                        if (!filePath.startsWith(projectPath)) {
+                            response.error = 'Access denied: Path outside project';
                         }
-                        break;
-                    case 'APPEND_FILE':
-                        try {
-                            const filePath = path.resolve(projectPath, message.filePath);
-                            if (!filePath.startsWith(projectPath)) {
-                                response.error = 'Access denied: Path outside project';
+                        else {
+                            // Snapshot before write
+                            const prevContent = fs.existsSync(filePath) ? fs.readFileSync(filePath, 'utf-8') : null;
+                            undoStack.push({ filePath, prevContent, operation: 'WRITE_FILE', timestamp: Date.now(), relativePath: message.filePath });
+                            if (undoStack.length > 20)
+                                undoStack.shift();
+                            // --- CSS safety: validate balanced braces ---
+                            if (filePath.endsWith('.css')) {
+                                const writeContent = message.content || '';
+                                const opens = (writeContent.match(/\{/g) || []).length;
+                                const closes = (writeContent.match(/\}/g) || []).length;
+                                if (opens !== closes) {
+                                    // Remove snapshot since we're rejecting the write
+                                    undoStack.pop();
+                                    response.error = `CSS validation failed: unbalanced braces (${opens} opening vs ${closes} closing). Fix the CSS before writing.`;
+                                    break;
+                                }
                             }
-                            else {
-                                const isCssFile = filePath.endsWith('.css');
-                                const newContent = message.content || '';
-                                // --- CSS safety: validate balanced braces ---
-                                if (isCssFile) {
-                                    const opens = (newContent.match(/\{/g) || []).length;
-                                    const closes = (newContent.match(/\}/g) || []).length;
-                                    if (opens !== closes) {
-                                        response.error = `CSS validation failed: unbalanced braces (${opens} opening vs ${closes} closing). Fix the CSS before appending.`;
-                                        break;
-                                    }
+                            const dirPath = path.dirname(filePath);
+                            if (!fs.existsSync(dirPath)) {
+                                fs.mkdirSync(dirPath, { recursive: true });
+                            }
+                            fs.writeFileSync(filePath, message.content, 'utf-8');
+                            // Auto-format after write
+                            const formatter = await autoFormat(filePath, projectPath);
+                            response.data = { success: true, path: filePath, formatted: formatter, undoAvailable: true };
+                            console.log(chalk.blue('ℹ') + ` Wrote file: ${message.filePath}` + (formatter ? chalk.dim(` (formatted with ${formatter})`) : '') + chalk.dim(' [undo saved]'));
+                        }
+                    }
+                    catch (e) {
+                        response.error = e.message;
+                    }
+                    break;
+                case 'APPEND_FILE':
+                    try {
+                        const filePath = path.resolve(projectPath, message.filePath);
+                        if (!filePath.startsWith(projectPath)) {
+                            response.error = 'Access denied: Path outside project';
+                        }
+                        else {
+                            const isCssFile = filePath.endsWith('.css');
+                            const newContent = message.content || '';
+                            // --- CSS safety: validate balanced braces ---
+                            if (isCssFile) {
+                                const opens = (newContent.match(/\{/g) || []).length;
+                                const closes = (newContent.match(/\}/g) || []).length;
+                                if (opens !== closes) {
+                                    response.error = `CSS validation failed: unbalanced braces (${opens} opening vs ${closes} closing). Fix the CSS before appending.`;
+                                    break;
                                 }
-                                // Snapshot before append
-                                const prevContent = fs.existsSync(filePath) ? fs.readFileSync(filePath, 'utf-8') : null;
-                                undoStack.push({ filePath, prevContent, operation: 'APPEND_FILE', timestamp: Date.now(), relativePath: message.filePath });
-                                if (undoStack.length > 20)
-                                    undoStack.shift();
-                                // --- CSS safety: hoist @import/@charset to file top ---
-                                if (isCssFile && prevContent !== null) {
-                                    // Extract @import and @charset from the NEW content
-                                    const importRegex = /^@(?:import|charset)\s+[^;]+;\s*$/gm;
-                                    const newImports = [];
-                                    const bodyContent = newContent.replace(importRegex, (match) => {
-                                        newImports.push(match.trim());
-                                        return '';
-                                    }).trim();
-                                    if (newImports.length > 0) {
-                                        // Find where existing imports end in the original file
-                                        const existingLines = prevContent.split('\n');
-                                        let lastImportLineIdx = -1;
-                                        for (let i = 0; i < existingLines.length; i++) {
-                                            const trimmed = existingLines[i].trim();
-                                            if (trimmed.startsWith('@import') || trimmed.startsWith('@charset')) {
-                                                lastImportLineIdx = i;
-                                            }
-                                            // Stop scanning after first non-import, non-comment, non-empty line
-                                            if (trimmed && !trimmed.startsWith('@import') && !trimmed.startsWith('@charset') && !trimmed.startsWith('/*') && !trimmed.startsWith('*') && !trimmed.startsWith('//')) {
-                                                break;
-                                            }
+                            }
+                            // Snapshot before append
+                            const prevContent = fs.existsSync(filePath) ? fs.readFileSync(filePath, 'utf-8') : null;
+                            undoStack.push({ filePath, prevContent, operation: 'APPEND_FILE', timestamp: Date.now(), relativePath: message.filePath });
+                            if (undoStack.length > 20)
+                                undoStack.shift();
+                            // --- CSS safety: hoist @import/@charset to file top ---
+                            if (isCssFile && prevContent !== null) {
+                                // Extract @import and @charset from the NEW content
+                                const importRegex = /^@(?:import|charset)\s+[^;]+;\s*$/gm;
+                                const newImports = [];
+                                const bodyContent = newContent.replace(importRegex, (match) => {
+                                    newImports.push(match.trim());
+                                    return '';
+                                }).trim();
+                                if (newImports.length > 0) {
+                                    // Find where existing imports end in the original file
+                                    const existingLines = prevContent.split('\n');
+                                    let lastImportLineIdx = -1;
+                                    for (let i = 0; i < existingLines.length; i++) {
+                                        const trimmed = existingLines[i].trim();
+                                        if (trimmed.startsWith('@import') || trimmed.startsWith('@charset')) {
+                                            lastImportLineIdx = i;
+                                        }
+                                        // Stop scanning after first non-import, non-comment, non-empty line
+                                        if (trimmed && !trimmed.startsWith('@import') && !trimmed.startsWith('@charset') && !trimmed.startsWith('/*') && !trimmed.startsWith('*') && !trimmed.startsWith('//')) {
+                                            break;
                                         }
-                                        // Deduplicate: only add imports that don't already exist
-                                        const dedupedImports = newImports.filter(imp => !prevContent.includes(imp));
-                                        // Build new file: existing imports + new imports + rest of existing + new body
-                                        const insertIdx = lastImportLineIdx + 1;
-                                        const topLines = existingLines.slice(0, insertIdx);
-                                        const restLines = existingLines.slice(insertIdx);
-                                        const merged = [
-                                            ...topLines,
-                                            ...dedupedImports,
-                                            ...restLines,
-                                            '', // separator
-                                            bodyContent
-                                        ].join('\n');
-                                        fs.writeFileSync(filePath, merged, 'utf-8');
-                                        console.log(chalk.blue('ℹ') + ` CSS-safe append: hoisted ${dedupedImports.length} @import(s) to top of ${message.filePath}`);
-                                    }
-                                    else {
-                                        // No imports in new content — simple append
-                                        fs.appendFileSync(filePath, '\n\n' + newContent, 'utf-8');
                                     }
+                                    // Deduplicate: only add imports that don't already exist
+                                    const dedupedImports = newImports.filter(imp => !prevContent.includes(imp));
+                                    // Build new file: existing imports + new imports + rest of existing + new body
+                                    const insertIdx = lastImportLineIdx + 1;
+                                    const topLines = existingLines.slice(0, insertIdx);
+                                    const restLines = existingLines.slice(insertIdx);
+                                    const merged = [
+                                        ...topLines,
+                                        ...dedupedImports,
+                                        ...restLines,
+                                        '', // separator
+                                        bodyContent
+                                    ].join('\n');
+                                    fs.writeFileSync(filePath, merged, 'utf-8');
+                                    console.log(chalk.blue('ℹ') + ` CSS-safe append: hoisted ${dedupedImports.length} @import(s) to top of ${message.filePath}`);
                                 }
                                 else {
-                                    // Non-CSS file or new file — simple append
-                                    fs.appendFileSync(filePath, '\n' + newContent, 'utf-8');
+                                    // No imports in new content — simple append
+                                    fs.appendFileSync(filePath, '\n\n' + newContent, 'utf-8');
                                 }
-                                // Auto-format after append
-                                const formatter = await autoFormat(filePath, projectPath);
-                                response.data = { success: true, path: filePath, formatted: formatter, undoAvailable: true };
-                                console.log(chalk.blue('ℹ') + ` Appended file: ${message.filePath}` + (formatter ? chalk.dim(` (formatted with ${formatter})`) : '') + chalk.dim(' [undo saved]'));
                             }
+                            else {
+                                // Non-CSS file or new file — simple append
+                                fs.appendFileSync(filePath, '\n' + newContent, 'utf-8');
+                            }
+                            // Auto-format after append
+                            const formatter = await autoFormat(filePath, projectPath);
+                            response.data = { success: true, path: filePath, formatted: formatter, undoAvailable: true };
+                            console.log(chalk.blue('ℹ') + ` Appended file: ${message.filePath}` + (formatter ? chalk.dim(` (formatted with ${formatter})`) : '') + chalk.dim(' [undo saved]'));
                         }
-                        catch (e) {
-                            response.error = e.message;
+                    }
+                    catch (e) {
+                        response.error = e.message;
+                    }
+                    break;
+                case 'EDIT_FILE':
+                    try {
+                        const filePath = path.resolve(projectPath, message.filePath);
+                        if (!filePath.startsWith(projectPath)) {
+                            response.error = 'Access denied: Path outside project';
                         }
-                        break;
-                    case 'EDIT_FILE':
-                        try {
-                            const filePath = path.resolve(projectPath, message.filePath);
-                            if (!filePath.startsWith(projectPath)) {
-                                response.error = 'Access denied: Path outside project';
-                            }
-                            else if (!fs.existsSync(filePath)) {
-                                // Find similarly-named files to help the LLM self-correct
-                                const requestedBase = path.basename(message.filePath);
-                                const requestedExt = path.extname(requestedBase);
-                                const requestedStem = requestedBase.replace(requestedExt, '');
-                                // Walk shallow project tree to find candidates
-                                const suggestions = [];
-                                const dirsToSearch = ['src/app', 'app', 'src/pages', 'pages', 'src/components', 'components', 'src'];
-                                for (const dir of dirsToSearch) {
-                                    const absDir = path.join(projectPath, dir);
-                                    if (fs.existsSync(absDir)) {
-                                        try {
-                                            const files = fs.readdirSync(absDir, { recursive: true });
-                                            for (const f of files.slice(0, 100)) {
-                                                const fBase = path.basename(f);
-                                                // Same stem, any extension (page.tsx → page.js, page.jsx)
-                                                if (fBase.startsWith(requestedStem + '.') ||
-                                                    fBase === requestedBase) {
-                                                    suggestions.push(path.join(dir, f).replace(/\\/g, '/'));
-                                                }
+                        else if (!fs.existsSync(filePath)) {
+                            // Find similarly-named files to help the LLM self-correct
+                            const requestedBase = path.basename(message.filePath);
+                            const requestedExt = path.extname(requestedBase);
+                            const requestedStem = requestedBase.replace(requestedExt, '');
+                            // Walk shallow project tree to find candidates
+                            const suggestions = [];
+                            const dirsToSearch = ['src/app', 'app', 'src/pages', 'pages', 'src/components', 'components', 'src'];
+                            for (const dir of dirsToSearch) {
+                                const absDir = path.join(projectPath, dir);
+                                if (fs.existsSync(absDir)) {
+                                    try {
+                                        const files = fs.readdirSync(absDir, { recursive: true });
+                                        for (const f of files.slice(0, 100)) {
+                                            const fBase = path.basename(f);
+                                            // Same stem, any extension (page.tsx → page.js, page.jsx)
+                                            if (fBase.startsWith(requestedStem + '.') ||
+                                                fBase === requestedBase) {
+                                                suggestions.push(path.join(dir, f).replace(/\\/g, '/'));
                                             }
                                         }
-                                        catch (e) { /* skip unreadable dirs */ }
                                     }
+                                    catch (e) { /* skip unreadable dirs */ }
                                 }
-                                const hint = suggestions.length > 0
-                                    ? ' Did you mean: ' + suggestions.slice(0, 3).join(' or ') + '?'
-                                    : ' Double-check the path against detect_project() output (layoutFile, globalStyleFile) or projectTree.';
-                                response.error = 'File not found: "' + message.filePath + '".' + hint;
+                            }
+                            const hint = suggestions.length > 0
+                                ? ' Did you mean: ' + suggestions.slice(0, 3).join(' or ') + '?'
+                                : ' Double-check the path against detect_project() output (layoutFile, globalStyleFile) or projectTree.';
+                            response.error = 'File not found: "' + message.filePath + '".' + hint;
+                        }
+                        else {
+                            const content = fs.readFileSync(filePath, 'utf-8');
+                            // Snapshot before edit
+                            undoStack.push({ filePath, prevContent: content, operation: 'EDIT_FILE', timestamp: Date.now(), relativePath: message.filePath });
+                            if (undoStack.length > 20)
+                                undoStack.shift();
+                            // Use the 9-layer fuzzy replacer cascade (ported from OpenCode)
+                            const result = fuzzyReplace(content, message.target, message.replacement, message.replaceAll || false);
+                            if ('error' in result) {
+                                // Edit failed — remove the snapshot we just pushed
+                                undoStack.pop();
+                                response.error = result.error;
                             }
                             else {
-                                const content = fs.readFileSync(filePath, 'utf-8');
-                                // Snapshot before edit
-                                undoStack.push({ filePath, prevContent: content, operation: 'EDIT_FILE', timestamp: Date.now(), relativePath: message.filePath });
-                                if (undoStack.length > 20)
-                                    undoStack.shift();
-                                // Use the 9-layer fuzzy replacer cascade (ported from OpenCode)
-                                const result = fuzzyReplace(content, message.target, message.replacement, message.replaceAll || false);
-                                if ('error' in result) {
-                                    // Edit failed — remove the snapshot we just pushed
-                                    undoStack.pop();
-                                    response.error = result.error;
-                                }
-                                else {
-                                    fs.writeFileSync(filePath, result.result, 'utf-8');
-                                    // Auto-format after edit
-                                    const formatter = await autoFormat(filePath, projectPath);
-                                    response.data = {
-                                        success: true,
-                                        path: filePath,
-                                        strategy: result.strategy,
-                                        formatted: formatter,
-                                        undoAvailable: true,
-                                    };
-                                    const strategyLabel = result.strategy === 'exact' ? '' : chalk.dim(` [${result.strategy}]`);
-                                    const formatLabel = formatter ? chalk.dim(` (${formatter})`) : '';
-                                    console.log(chalk.blue('ℹ') + ` Edited file: ${message.filePath}${strategyLabel}${formatLabel}` + chalk.dim(' [undo saved]'));
-                                }
+                                fs.writeFileSync(filePath, result.result, 'utf-8');
+                                // Auto-format after edit
+                                const formatter = await autoFormat(filePath, projectPath);
+                                response.data = {
+                                    success: true,
+                                    path: filePath,
+                                    strategy: result.strategy,
+                                    formatted: formatter,
+                                    undoAvailable: true,
+                                };
+                                const strategyLabel = result.strategy === 'exact' ? '' : chalk.dim(` [${result.strategy}]`);
+                                const formatLabel = formatter ? chalk.dim(` (${formatter})`) : '';
+                                console.log(chalk.blue('ℹ') + ` Edited file: ${message.filePath}${strategyLabel}${formatLabel}` + chalk.dim(' [undo saved]'));
                             }
                         }
-                        catch (e) {
-                            response.error = e.message;
+                    }
+                    catch (e) {
+                        response.error = e.message;
+                    }
+                    break;
+                case 'REPLACE_LINES':
+                    try {
+                        const filePath = path.resolve(projectPath, message.filePath);
+                        if (!filePath.startsWith(projectPath)) {
+                            response.error = 'Access denied: Path outside project';
+                        }
+                        else if (!fs.existsSync(filePath)) {
+                            response.error = 'File not found: ' + message.filePath;
                         }
-                        break;
-                    case 'REPLACE_LINES':
-                        try {
-                            const filePath = path.resolve(projectPath, message.filePath);
-                            if (!filePath.startsWith(projectPath)) {
-                                response.error = 'Access denied: Path outside project';
+                        else {
+                            const content = fs.readFileSync(filePath, 'utf-8');
+                            const lines = content.split('\n');
+                            const startLine = Math.max(1, message.startLine || 1);
+                            const endLine = Math.min(lines.length, message.endLine || startLine);
+                            if (startLine > lines.length) {
+                                response.error = `Start line ${startLine} is beyond file end (${lines.length} lines)`;
                             }
-                            else if (!fs.existsSync(filePath)) {
-                                response.error = 'File not found: ' + message.filePath;
+                            else if (startLine > endLine) {
+                                response.error = `Invalid range: start (${startLine}) > end (${endLine})`;
                             }
                             else {
-                                const content = fs.readFileSync(filePath, 'utf-8');
-                                const lines = content.split('\n');
-                                const startLine = Math.max(1, message.startLine || 1);
-                                const endLine = Math.min(lines.length, message.endLine || startLine);
-                                if (startLine > lines.length) {
-                                    response.error = `Start line ${startLine} is beyond file end (${lines.length} lines)`;
-                                }
-                                else if (startLine > endLine) {
-                                    response.error = `Invalid range: start (${startLine}) > end (${endLine})`;
-                                }
-                                else {
-                                    // Snapshot for undo
-                                    undoStack.push({
-                                        filePath,
-                                        prevContent: content,
-                                        operation: 'REPLACE_LINES',
-                                        timestamp: Date.now(),
-                                        relativePath: message.filePath
-                                    });
-                                    if (undoStack.length > 20)
-                                        undoStack.shift();
-                                    const oldLineCount = endLine - startLine + 1;
-                                    const newLines = (message.newContent || '').split('\n');
-                                    // splice: remove old range, insert new lines
-                                    lines.splice(startLine - 1, oldLineCount, ...newLines);
-                                    const newContent = lines.join('\n');
-                                    fs.writeFileSync(filePath, newContent, 'utf-8');
-                                    // Auto-format
-                                    const formatter = await autoFormat(filePath, projectPath);
-                                    const lineDelta = newLines.length - oldLineCount;
-                                    response.data = {
-                                        success: true,
-                                        path: filePath,
-                                        linesReplaced: `${startLine}-${endLine}`,
-                                        oldLineCount,
-                                        newLineCount: newLines.length,
-                                        lineDelta: lineDelta,
-                                        totalLines: lines.length,
-                                        formatted: formatter,
-                                        undoAvailable: true,
-                                        hint: lineDelta !== 0
-                                            ? `Line count changed by ${lineDelta > 0 ? '+' : ''}${lineDelta}. Adjust subsequent line numbers if making more edits.`
-                                            : null
-                                    };
-                                    const formatLabel = formatter ? chalk.dim(` (${formatter})`) : '';
-                                    console.log(chalk.blue('ℹ') + ` Replaced lines ${startLine}-${endLine} in ${message.filePath} (${oldLineCount}→${newLines.length} lines)${formatLabel}` + chalk.dim(' [undo saved]'));
-                                }
+                                // Snapshot for undo
+                                undoStack.push({
+                                    filePath,
+                                    prevContent: content,
+                                    operation: 'REPLACE_LINES',
+                                    timestamp: Date.now(),
+                                    relativePath: message.filePath
+                                });
+                                if (undoStack.length > 20)
+                                    undoStack.shift();
+                                const oldLineCount = endLine - startLine + 1;
+                                const newLines = (message.newContent || '').split('\n');
+                                // splice: remove old range, insert new lines
+                                lines.splice(startLine - 1, oldLineCount, ...newLines);
+                                const newContent = lines.join('\n');
+                                fs.writeFileSync(filePath, newContent, 'utf-8');
+                                // Auto-format
+                                const formatter = await autoFormat(filePath, projectPath);
+                                const lineDelta = newLines.length - oldLineCount;
+                                response.data = {
+                                    success: true,
+                                    path: filePath,
+                                    linesReplaced: `${startLine}-${endLine}`,
+                                    oldLineCount,
+                                    newLineCount: newLines.length,
+                                    lineDelta: lineDelta,
+                                    totalLines: lines.length,
+                                    formatted: formatter,
+                                    undoAvailable: true,
+                                    hint: lineDelta !== 0
+                                        ? `Line count changed by ${lineDelta > 0 ? '+' : ''}${lineDelta}. Adjust subsequent line numbers if making more edits.`
+                                        : null
+                                };
+                                const formatLabel = formatter ? chalk.dim(` (${formatter})`) : '';
+                                console.log(chalk.blue('ℹ') + ` Replaced lines ${startLine}-${endLine} in ${message.filePath} (${oldLineCount}→${newLines.length} lines)${formatLabel}` + chalk.dim(' [undo saved]'));
                             }
                         }
-                        catch (e) {
-                            response.error = e.message;
+                    }
+                    catch (e) {
+                        response.error = e.message;
+                    }
+                    break;
+                case 'UNDO_LAST':
+                    try {
+                        if (undoStack.length === 0) {
+                            response.error = 'Nothing to undo — no file changes recorded in this session.';
                         }
-                        break;
-                    case 'UNDO_LAST':
-                        try {
-                            if (undoStack.length === 0) {
-                                response.error = 'Nothing to undo — no file changes recorded in this session.';
-                            }
-                            else {
-                                const snapshot = undoStack.pop();
-                                if (snapshot.prevContent === null) {
-                                    // File was created from scratch — delete it
-                                    if (fs.existsSync(snapshot.filePath)) {
-                                        fs.unlinkSync(snapshot.filePath);
-                                        response.data = {
-                                            success: true,
-                                            undone: snapshot.operation,
-                                            file: snapshot.relativePath,
-                                            action: 'deleted (was new file)',
-                                            remaining: undoStack.length,
-                                        };
-                                        console.log(chalk.yellow('↩') + ` Undo: deleted ${snapshot.relativePath} (was a new file)`);
-                                    }
-                                    else {
-                                        response.data = {
-                                            success: true,
-                                            undone: snapshot.operation,
-                                            file: snapshot.relativePath,
-                                            action: 'already gone',
-                                            remaining: undoStack.length,
-                                        };
-                                    }
+                        else {
+                            const snapshot = undoStack.pop();
+                            if (snapshot.prevContent === null) {
+                                // File was created from scratch — delete it
+                                if (fs.existsSync(snapshot.filePath)) {
+                                    fs.unlinkSync(snapshot.filePath);
+                                    response.data = {
+                                        success: true,
+                                        undone: snapshot.operation,
+                                        file: snapshot.relativePath,
+                                        action: 'deleted (was new file)',
+                                        remaining: undoStack.length,
+                                    };
+                                    console.log(chalk.yellow('↩') + ` Undo: deleted ${snapshot.relativePath} (was a new file)`);
                                 }
                                 else {
-                                    // Restore previous content
-                                    fs.writeFileSync(snapshot.filePath, snapshot.prevContent, 'utf-8');
                                     response.data = {
                                         success: true,
                                         undone: snapshot.operation,
                                         file: snapshot.relativePath,
-                                        action: 'restored',
+                                        action: 'already gone',
                                         remaining: undoStack.length,
                                     };
-                                    console.log(chalk.yellow('↩') + ` Undo: restored ${snapshot.relativePath} (reverted ${snapshot.operation})`);
                                 }
                             }
-                        }
-                        catch (e) {
-                            response.error = e.message;
-                        }
-                        break;
-                    // ========== GIT & ENVIRONMENT TOOLS ==========
-                    case 'GIT_BLAME':
-                        try {
-                            const filePath = message.filePath;
-                            const line = message.line;
-                            const { stdout } = await execAsync(`git blame -L ${line},${line} --porcelain "${filePath}"`, { cwd: projectPath });
-                            const lines = stdout.split('\n');
-                            const commitHash = lines[0].split(' ')[0];
-                            const author = lines.find((l) => l.startsWith('author '))?.substring(7);
-                            const email = lines.find((l) => l.startsWith('author-mail '))?.substring(12);
-                            const date = lines.find((l) => l.startsWith('author-time '))?.substring(12);
-                            const summary = lines.find((l) => l.startsWith('summary '))?.substring(8);
-                            response.data = {
-                                commit: commitHash,
-                                author,
-                                email,
-                                date: new Date(parseInt(date) * 1000).toISOString().split('T')[0],
-                                message: summary
-                            };
-                        }
-                        catch (e) {
-                            response.error = `Git blame failed: ${e.message}`;
-                        }
-                        break;
-                    case 'GIT_RECENT_CHANGES':
-                        try {
-                            const filePath = message.filePath;
-                            const days = message.days || 7;
-                            const { stdout } = await execAsync(`git log -n 10 --since="${days} days ago" --pretty=format:"%h|%an|%ad|%s" --date=short "${filePath}"`, { cwd: projectPath });
-                            response.data = {
-                                history: stdout.split('\n').filter(Boolean).map((line) => {
-                                    const [hash, author, date, message] = line.split('|');
-                                    return { hash, author, date, message };
-                                })
-                            };
-                        }
-                        catch (e) {
-                            response.error = `Git log failed: ${e.message}`;
-                        }
-                        break;
-                    case 'GET_IMPORTS':
-                        try {
-                            const filePath = path.resolve(projectPath, message.filePath);
-                            if (fs.existsSync(filePath)) {
-                                const content = fs.readFileSync(filePath, 'utf-8');
-                                const importRegex = /import\s+(?:[\w*\s{},]*)\s+from\s+['"]([^'"]+)['"]/g;
-                                const imports = [];
-                                let match;
-                                while ((match = importRegex.exec(content)) !== null) {
-                                    imports.push(match[1]);
-                                }
-                                response.data = { imports };
-                            }
                             else {
-                                response.error = 'File not found';
+                                // Restore previous content
+                                fs.writeFileSync(snapshot.filePath, snapshot.prevContent, 'utf-8');
+                                response.data = {
+                                    success: true,
+                                    undone: snapshot.operation,
+                                    file: snapshot.relativePath,
+                                    action: 'restored',
+                                    remaining: undoStack.length,
+                                };
+                                console.log(chalk.yellow('↩') + ` Undo: restored ${snapshot.relativePath} (reverted ${snapshot.operation})`);
                             }
                         }
-                        catch (e) {
-                            response.error = e.message;
-                        }
-                        break;
-                    case 'FIND_USAGES':
-                        try {
-                            const query = message.query;
-                            const { stdout } = await execAsync(`git grep -n "${query}"`, { cwd: projectPath });
-                            response.data = {
-                                usages: stdout.split('\n').filter(Boolean).slice(0, 20).map((line) => {
-                                    const parts = line.split(':');
-                                    return {
-                                        file: parts[0],
-                                        line: parseInt(parts[1]),
-                                        content: parts.slice(2).join(':').trim()
-                                    };
-                                })
-                            };
-                        }
-                        catch (e) {
-                            if (e.code === 1)
-                                response.data = { usages: [] };
-                            else
-                                response.error = `Grep failed: ${e.message}`;
-                        }
-                        break;
-                    case 'GET_ENV_VARS':
-                        try {
-                            const filePath = path.resolve(projectPath, message.filePath);
-                            if (fs.existsSync(filePath)) {
-                                const content = fs.readFileSync(filePath, 'utf-8');
-                                const envRegex = /(?:process\.env\.|import\.meta\.env\.)([A-Z_][A-Z0-9_]*)/g;
-                                const vars = new Set();
-                                let match;
-                                while ((match = envRegex.exec(content)) !== null) {
-                                    vars.add(match[1]);
-                                }
-                                response.data = { envVars: Array.from(vars) };
-                            }
-                            else {
-                                response.error = 'File not found';
+                    }
+                    catch (e) {
+                        response.error = e.message;
+                    }
+                    break;
+                // ========== GIT & ENVIRONMENT TOOLS ==========
+                case 'GIT_BLAME':
+                    try {
+                        const filePath = message.filePath;
+                        const line = message.line;
+                        const { stdout } = await execAsync(`git blame -L ${line},${line} --porcelain "${filePath}"`, { cwd: projectPath });
+                        const lines = stdout.split('\n');
+                        const commitHash = lines[0].split(' ')[0];
+                        const author = lines.find((l) => l.startsWith('author '))?.substring(7);
+                        const email = lines.find((l) => l.startsWith('author-mail '))?.substring(12);
+                        const date = lines.find((l) => l.startsWith('author-time '))?.substring(12);
+                        const summary = lines.find((l) => l.startsWith('summary '))?.substring(8);
+                        response.data = {
+                            commit: commitHash,
+                            author,
+                            email,
+                            date: new Date(parseInt(date) * 1000).toISOString().split('T')[0],
+                            message: summary
+                        };
+                    }
+                    catch (e) {
+                        response.error = `Git blame failed: ${e.message}`;
+                    }
+                    break;
+                case 'GIT_RECENT_CHANGES':
+                    try {
+                        const filePath = message.filePath;
+                        const days = message.days || 7;
+                        const { stdout } = await execAsync(`git log -n 10 --since="${days} days ago" --pretty=format:"%h|%an|%ad|%s" --date=short "${filePath}"`, { cwd: projectPath });
+                        response.data = {
+                            history: stdout.split('\n').filter(Boolean).map((line) => {
+                                const [hash, author, date, message] = line.split('|');
+                                return { hash, author, date, message };
+                            })
+                        };
+                    }
+                    catch (e) {
+                        response.error = `Git log failed: ${e.message}`;
+                    }
+                    break;
+                case 'GET_IMPORTS':
+                    try {
+                        const filePath = path.resolve(projectPath, message.filePath);
+                        if (fs.existsSync(filePath)) {
+                            const content = fs.readFileSync(filePath, 'utf-8');
+                            const importRegex = /import\s+(?:[\w*\s{},]*)\s+from\s+['"]([^'"]+)['"]/g;
+                            const imports = [];
+                            let match;
+                            while ((match = importRegex.exec(content)) !== null) {
+                                imports.push(match[1]);
                             }
+                            response.data = { imports };
                         }
-                        catch (e) {
-                            response.error = e.message;
+                        else {
+                            response.error = 'File not found';
                         }
-                        break;
-                    // ========== TERMINAL BUFFER ACCESS ==========
-                    case 'GET_TERMINAL_BUFFER': {
-                        // Returns the last N lines of the dev server terminal output.
-                        // Agents use this to get compiler errors without running a build.
-                        const lines = parseInt(message.lines) || 100;
-                        const buffer = globalTerminalBuffer.getLast(lines);
-                        response.data = {
-                            lines: buffer,
-                            totalLines: globalTerminalBuffer.length,
-                            hasDevProcess: devProcess !== null && !devProcess.killed,
-                        };
-                        break;
                     }
-                    case 'GET_DEV_STATUS': {
+                    catch (e) {
+                        response.error = e.message;
+                    }
+                    break;
+                case 'FIND_USAGES':
+                    try {
+                        const query = message.query;
+                        const { stdout } = await execAsync(`git grep -n "${query}"`, { cwd: projectPath });
                         response.data = {
-                            running: devProcess !== null && !devProcess.killed,
-                            pid: devProcess?.pid ?? null,
+                            usages: stdout.split('\n').filter(Boolean).slice(0, 20).map((line) => {
+                                const parts = line.split(':');
+                                return {
+                                    file: parts[0],
+                                    line: parseInt(parts[1]),
+                                    content: parts.slice(2).join(':').trim()
+                                };
+                            })
                         };
-                        break;
                     }
-                    default:
-                        response.error = `Unknown message type: ${type}`;
+                    catch (e) {
+                        if (e.code === 1)
+                            response.data = { usages: [] };
+                        else
+                            response.error = `Grep failed: ${e.message}`;
+                    }
+                    break;
+                case 'GET_ENV_VARS':
+                    try {
+                        const filePath = path.resolve(projectPath, message.filePath);
+                        if (fs.existsSync(filePath)) {
+                            const content = fs.readFileSync(filePath, 'utf-8');
+                            const envRegex = /(?:process\.env\.|import\.meta\.env\.)([A-Z_][A-Z0-9_]*)/g;
+                            const vars = new Set();
+                            let match;
+                            while ((match = envRegex.exec(content)) !== null) {
+                                vars.add(match[1]);
+                            }
+                            response.data = { envVars: Array.from(vars) };
+                        }
+                        else {
+                            response.error = 'File not found';
+                        }
+                    }
+                    catch (e) {
+                        response.error = e.message;
+                    }
+                    break;
+                // ========== TERMINAL BUFFER ACCESS ==========
+                case 'GET_TERMINAL_BUFFER': {
+                    // Returns the last N lines of the dev server terminal output.
+                    // Agents use this to get compiler errors without running a build.
+                    const lines = parseInt(message.lines) || 100;
+                    const buffer = globalTerminalBuffer.getLast(lines);
+                    response.data = {
+                        lines: buffer,
+                        totalLines: globalTerminalBuffer.length,
+                        hasDevProcess: devProcess !== null && !devProcess.killed,
+                    };
+                    break;
                 }
-                ws.send(JSON.stringify(response));
-            }
-            catch (e) {
-                console.error(chalk.red('Parse error:'), e.message);
+                case 'GET_DEV_STATUS': {
+                    response.data = {
+                        running: devProcess !== null && !devProcess.killed,
+                        pid: devProcess?.pid ?? null,
+                    };
+                    break;
+                }
+                default:
+                    response.error = `Unknown message type: ${type}`;
             }
-        });
+            ws.send(JSON.stringify(response));
+        }
+        catch (e) {
+            console.error(chalk.red('Parse error:'), e.message);
+        }
+    });
+}
+// ============================================
+// COMMAND: trace connect (legacy / IDE-only)
+// ============================================
+program
+    .command('connect', { isDefault: true })
+    .alias('c')
+    .description('Start IDE bridge only (use "trace dev" to also start your dev server)')
+    .option('-p, --port <port>', 'WebSocket port', '8765')
+    .action(async (options) => {
+    const port = parseInt(options.port);
+    const projectPath = process.cwd();
+    console.log();
+    console.log(chalk.bold.cyan('🔗 Trace IDE Bridge'));
+    console.log(chalk.gray('─'.repeat(55)));
+    console.log();
+    console.log(`Project: ${chalk.green(projectPath)}`);
+    console.log(`Port: ${chalk.cyan(port)}`);
+    console.log();
+    try {
+        const pkgPath = path.join(projectPath, 'package.json');
+        if (fs.existsSync(pkgPath)) {
+            const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'));
+            console.log(`📦 Package: ${chalk.yellow(pkg.name)} v${pkg.version}`);
+        }
+    }
+    catch (_) { }
+    const wss = new WebSocketServer({ port });
+    let clientCount = 0;
+    console.log();
+    console.log(chalk.green('✓') + ' WebSocket server started');
+    console.log(chalk.dim('Waiting for extension to connect...'));
+    console.log();
+    console.log(chalk.gray('─'.repeat(55)));
+    console.log(chalk.dim('Press Ctrl+C to stop'));
+    console.log();
+    wss.on('connection', (ws) => {
+        clientCount++;
+        console.log(chalk.green('●') + ` Extension connected (${clientCount} client${clientCount > 1 ? 's' : ''})`);
+        // Wire up the full IDE bridge protocol
+        attachMessageHandler(ws, projectPath);
         ws.on('close', () => {
             clientCount--;
             console.log(chalk.yellow('●') + ` Extension disconnected (${clientCount} client${clientCount > 1 ? 's' : ''})`);