ai-extension-preview 0.1.0

package/README.md

@@ -0,0 +1,32 @@
+# AI Extension Preview
+
+A local companion tool for the **AI Extension Builder**.
+This tool allows you to instantly preview and test your AI-generated Chrome Extensions locally, bridging the gap between the **AI Extension Builder** and your local browser.
+
+## Features
+
+-   **Instant Preview:** Launches a Chrome instance with your extension loaded.
+-   **Live Updates:** Automatically detects new builds from the AI Builder and reloads your extension (Hot Reload).
+-   **Secure Connection:** Uses a short-code "Device Flow" authentication to securely link to your account.
+-   **Cross-Platform:** Works on Windows, macOS, and Linux (including WSL/Git Bash via Detached Mode).
+
+## Usage
+
+You do NOT need to install this package globally. Just run it with `npx`:
+
+```bash
+npx ai-extension-preview
+```
+
+### Setup Flow
+
+1.  Run the command above.
+2.  The tool will display a **Link Code** (e.g., `ABCD`).
+3.  Go to your **AI Extension Builder Dashboard**.
+4.  Click **"Connect Preview"** and enter the code.
+5.  Enjoy! The tool will automatically download and launch your active extension.
+
+## Requirements
+
+-   Node.js v18+
+-   Google Chrome or Chromium installed.

package/dist/index.js

@@ -0,0 +1,136 @@
+#!/usr/bin/env node
+import 'dotenv/config'; // Load .env
+import { Command } from 'commander';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import fs from 'fs-extra';
+import { Runtime } from 'skeleton-crew-runtime';
+import { CorePlugin } from './plugins/CorePlugin.js';
+import { DownloaderPlugin } from './plugins/DownloaderPlugin.js';
+import { BrowserPlugin } from './plugins/BrowserPlugin.js';
+import axios from 'axios';
+import chalk from 'chalk';
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const DEFAULT_HOST = process.env.API_HOST || 'https://ai-extension-builder.01kb6018z1t9tpaza4y5f1c56w.lmapp.run/api';
+const program = new Command();
+program
+    .name('preview')
+    .description('Live preview companion for AI Extension Builder')
+    .option('--job <job>', 'Job ID to preview')
+    .option('--host <host>', 'API Host URL', DEFAULT_HOST)
+    .option('--token <token>', 'Auth Token (if required)')
+    .option('--user <user>', 'User ID (if required)')
+    .parse(process.argv);
+const options = program.opts();
+async function authenticate(host) {
+    try {
+        // 1. Init Session
+        const initRes = await axios.post(`${host}/preview/init`);
+        const { code, sessionId } = initRes.data;
+        console.log('\n' + chalk.bgBlue.bold(' DETACHED PREVIEW MODE ') + '\n');
+        console.log('To connect, please go to your Extension Dashboard and click "Connect Preview".');
+        console.log('Enter the following code:');
+        console.log('\n' + chalk.green.bold(`  ${code}  `) + '\n');
+        console.log('Waiting for connection...');
+        // 2. Poll for Status
+        while (true) {
+            await new Promise(resolve => setTimeout(resolve, 2000));
+            try {
+                const statusRes = await axios.get(`${host}/preview/status/${sessionId}`);
+                const data = statusRes.data;
+                if (data.status === 'linked') {
+                    console.log(chalk.green('✔ Connected!'));
+                    if (!data.jobId) {
+                        console.error('Error: No Job ID associated with this connection.');
+                        process.exit(1);
+                    }
+                    return {
+                        jobId: data.jobId,
+                        userId: data.userId,
+                        token: 'session:' + sessionId // Use session ID as token for now
+                    };
+                }
+                if (data.status === 'expired') {
+                    console.error(chalk.red('Code expired. Please restart.'));
+                    process.exit(1);
+                }
+            }
+            catch (e) {
+                // Ignore transient network errors
+            }
+        }
+    }
+    catch (error) {
+        console.error(chalk.red(`Failed to initialize session: ${error.message}`));
+        process.exit(1);
+    }
+}
+async function main() {
+    let jobId = options.job;
+    let userId = options.user;
+    let token = options.token;
+    const host = options.host;
+    // Interactive Auth Flow if no Job ID provided
+    if (!jobId) {
+        const authData = await authenticate(host);
+        jobId = authData.jobId;
+        userId = authData.userId || userId;
+        token = authData.token || token;
+    }
+    const WORK_DIR = path.join(process.cwd(), '.preview', jobId);
+    // 1. Initialize Runtime
+    const runtime = new Runtime({
+        hostContext: {
+            config: {
+                host,
+                token,
+                user: userId,
+                jobId,
+                workDir: WORK_DIR
+            }
+        }
+    });
+    // 2. Register Plugins
+    // Note: In a real dynamic system we might load these from a folder
+    runtime.logger.info('Registering plugins...');
+    runtime.registerPlugin(CorePlugin);
+    runtime.registerPlugin(DownloaderPlugin);
+    runtime.registerPlugin(BrowserPlugin);
+    runtime.logger.info('Initializing runtime...');
+    await runtime.initialize();
+    const ctx = runtime.getContext();
+    // 3. Start LifeCycle
+    await ctx.actions.runAction('core:log', { level: 'info', message: 'Initializing Local Satellite...' });
+    // Ensure work dir exists
+    await fs.ensureDir(WORK_DIR);
+    // Initial Check - Must succeed to continue
+    const success = await ctx.actions.runAction('downloader:check', null);
+    if (!success) {
+        await ctx.actions.runAction('core:log', { level: 'error', message: 'Initial check failed. Could not verify job or download extension.' });
+        process.exit(1);
+    }
+    // Start Browser (This will block until browser is closed OR return immediately if detached)
+    const browserSessionResult = await ctx.actions.runAction('browser:start', null);
+    // If detached launch (result=true) or web-ext blocked and finished...
+    // We should ONLY exit if the loop is also done (which it never is unless disposed).
+    // Actually, if web-ext finishes (e.g. user closed browser), we might want to exit?
+    // But for Detached Mode, we MUST stay open to poll updates.
+    // If browser:start returned, it means either:
+    // 1. Browser closed (web-ext mode) -> we arguably should exit.
+    // 2. Detached mode started -> we MUST NOT exit.
+    // Changing logic: rely on SIGINT to exit.
+    runtime.logger.info('Press Ctrl+C to exit.');
+}
+// Handle global errors
+process.on('uncaughtException', (err) => {
+    if (err.code === 'ECONNRESET' || err.message?.includes('ECONNRESET')) {
+        // Ignore pipe errors frequently caused by web-ext/chrome teardown
+        return;
+    }
+    console.error('Uncaught Exception:', err);
+    process.exit(1);
+});
+process.on('unhandledRejection', (reason) => {
+    console.error('Unhandled Rejection:', reason);
+});
+main();

package/dist/plugins/BrowserPlugin.js

@@ -0,0 +1,113 @@
+import webExt from 'web-ext';
+import path from 'path';
+import { spawn } from 'child_process';
+import fs from 'fs';
+const CHROME_PATHS = [
+    '/mnt/c/Program Files/Google/Chrome/Application/chrome.exe',
+    '/mnt/c/Program Files (x86)/Google/Chrome/Application/chrome.exe',
+    '/c/Program Files/Google/Chrome/Application/chrome.exe',
+    '/c/Program Files (x86)/Google/Chrome/Application/chrome.exe',
+    '/usr/bin/google-chrome',
+    '/usr/bin/chromium'
+];
+function findChrome() {
+    for (const p of CHROME_PATHS) {
+        if (fs.existsSync(p))
+            return p;
+    }
+    return null;
+}
+export const BrowserPlugin = {
+    name: 'browser',
+    version: '1.0.0',
+    setup(ctx) {
+        const config = ctx.host.config;
+        const DIST_DIR = path.join(config.workDir, 'dist');
+        let runner = null;
+        const launchDetached = async () => {
+            const chromePath = findChrome();
+            if (!chromePath) {
+                await ctx.actions.runAction('core:log', { level: 'error', message: 'Chrome not found for detached launch.' });
+                return false;
+            }
+            // Log with prefix to indicate we are handling the Env quirk
+            await ctx.actions.runAction('core:log', { level: 'info', message: '[WSL] Copying extension to Windows Temp: C:\\ai-ext-preview' });
+            // In a real scenario we might need to copy to a Windows-accessible path if /home/... isn't mapped well,
+            // but usually \\wsl$\... works or user is mapped.
+            // For now assuming direct path works or user has mapping.
+            // Actually, verify path.
+            // IMPORTANT: In WSL, standard linux paths might not be readable by Windows Chrome directly 
+            // without `\\wsl$\...` mapping.
+            // However, previous logs showed "Failed to load... CDP connection closed" which means 
+            // Chrome DID try to load it but failed communication.
+            // So path is likely fine.
+            await ctx.actions.runAction('core:log', { level: 'warning', message: 'Switching to Detached Mode (WSL/GitBash detected).' });
+            await ctx.actions.runAction('core:log', { level: 'info', message: 'Browser polling/logging is disabled. Please reload manually on updates.' });
+            const subprocess = spawn(chromePath, [
+                `--load-extension=${DIST_DIR}`,
+                '--disable-gpu',
+                'https://google.com'
+            ], {
+                detached: true,
+                stdio: 'ignore'
+            });
+            subprocess.unref();
+            return true;
+        };
+        ctx.actions.registerAction({
+            id: 'browser:start',
+            handler: async () => {
+                await ctx.actions.runAction('core:log', { level: 'info', message: 'Launching browser...' });
+                try {
+                    // Try web-ext first
+                    const runResult = await webExt.cmd.run({
+                        sourceDir: DIST_DIR,
+                        target: 'chromium',
+                        browserConsole: false,
+                        startUrl: ['https://google.com'],
+                        noInput: true,
+                        keepProfileChanges: false,
+                        args: [
+                            '--start-maximized',
+                            '--no-sandbox',
+                            '--disable-gpu',
+                            '--disable-dev-shm-usage'
+                        ]
+                    }, {
+                        shouldExitProgram: false
+                    });
+                    runner = runResult;
+                    await ctx.actions.runAction('core:log', { level: 'success', message: 'Browser session ended.' });
+                    return true;
+                }
+                catch (err) {
+                    // Check for expected environment failures
+                    if (err.code === 'ECONNRESET' || err.message?.includes('CDP connection closed')) {
+                        // Log specific WSL message for clarity
+                        await ctx.actions.runAction('core:log', { level: 'warning', message: 'WSL: CDP connection dropped (expected). Browser is running detached.' });
+                        await ctx.actions.runAction('core:log', { level: 'info', message: 'Please reload extension manually in Chrome if needed.' });
+                        return await launchDetached();
+                    }
+                    if (err.code !== 'ECONNRESET') {
+                        await ctx.actions.runAction('core:log', { level: 'error', message: `Browser failed: ${err.message}` });
+                    }
+                    return false;
+                }
+            }
+        });
+        ctx.events.on('downloader:updated', async () => {
+            if (runner && runner.reloadAllExtensions) {
+                await ctx.actions.runAction('core:log', { level: 'info', message: 'Triggering browser reload...' });
+                try {
+                    runner.reloadAllExtensions();
+                }
+                catch (e) {
+                    // Ignore
+                }
+            }
+            else {
+                await ctx.actions.runAction('core:log', { level: 'info', message: 'Update installed. Please reload extension in Chrome.' });
+            }
+        });
+    }
+};

package/dist/plugins/CorePlugin.js

@@ -0,0 +1,40 @@
+import chalk from 'chalk';
+export const CorePlugin = {
+    name: 'core',
+    version: '1.0.0',
+    setup(ctx) {
+        console.log('CorePlugin: setup called');
+        // We assume config is passed in hostContext
+        const config = ctx.host.config;
+        ctx.actions.registerAction({
+            id: 'core:config',
+            handler: async () => config
+        });
+        console.log('CorePlugin: Registering core:log');
+        ctx.actions.registerAction({
+            id: 'core:log',
+            handler: async (payload) => {
+                // Access default logger from Runtime
+                const rt = typeof ctx.getRuntime === 'function' ? ctx.getRuntime() : ctx.runtime;
+                // Logger is now public
+                const logger = rt.logger || console;
+                const { level, message } = payload;
+                switch (level) {
+                    case 'error':
+                        logger.error(chalk.red(message));
+                        break;
+                    case 'warn':
+                        logger.warn(chalk.yellow(message));
+                        break;
+                    case 'success':
+                        // Default logger usually has info/warn/error/debug. Map success to info (green)
+                        logger.info(chalk.green(message));
+                        break;
+                    default:
+                        logger.info(message);
+                }
+                return true;
+            }
+        });
+    }
+};

package/dist/plugins/DownloaderPlugin.js

@@ -0,0 +1,122 @@
+import axios from 'axios';
+import fs from 'fs-extra';
+import path from 'path';
+import AdmZip from 'adm-zip';
+import ora from 'ora';
+import https from 'https';
+let checkInterval;
+export const DownloaderPlugin = {
+    name: 'downloader',
+    version: '1.0.0',
+    setup(ctx) {
+        const config = ctx.host.config;
+        const DIST_DIR = path.join(config.workDir, 'dist');
+        const DOWNLOAD_PATH = path.join(config.workDir, 'extension.zip');
+        const rawToken = config.token ? String(config.token) : '';
+        const token = rawToken.replace(/^Bearer\s+/i, '').trim();
+        // Auto-extract user ID from token if not provided
+        let userId = config.user;
+        if (!userId && token) {
+            try {
+                const parts = token.split('.');
+                if (parts.length === 3) {
+                    const payload = JSON.parse(Buffer.from(parts[1], 'base64').toString());
+                    userId = payload.id || payload.sub || payload.userId;
+                    // Add cleanup logging
+                    if (userId)
+                        ctx.actions.runAction('core:log', { level: 'info', message: `Extracted User ID: ${userId}` });
+                }
+            }
+            catch (e) {
+                // Ignore parse errors
+            }
+        }
+        const client = axios.create({
+            baseURL: config.host,
+            headers: {
+                'Authorization': token ? `Bearer ${token}` : undefined,
+                'X-User-Id': userId
+            },
+            httpsAgent: new https.Agent({
+                rejectUnauthorized: false
+            })
+        });
+        let lastModified = '';
+        let isChecking = false;
+        // Action: Check Status
+        ctx.actions.registerAction({
+            id: 'downloader:check',
+            handler: async () => {
+                if (isChecking)
+                    return true; // Skip if busy
+                isChecking = true;
+                try {
+                    const res = await client.get(`/jobs/${config.jobId}`);
+                    const job = res.data;
+                    const newVersion = job.version;
+                    // If no version in job yet, fall back to timestamp or ignore
+                    if (!newVersion && !lastModified) {
+                        // First run, just verify it exists
+                        // We might want to download anyway if we don't have it locally
+                    }
+                    if (job.status === 'completed' && newVersion !== lastModified) {
+                        await ctx.actions.runAction('core:log', { level: 'info', message: `New version detected (Old: "${lastModified}", New: "${newVersion}")` });
+                        const success = await ctx.actions.runAction('downloader:download', null);
+                        if (success) {
+                            lastModified = newVersion;
+                            ctx.events.emit('downloader:updated', { version: job.version });
+                        }
+                    }
+                    isChecking = false;
+                    return true;
+                }
+                catch (error) {
+                    isChecking = false;
+                    await ctx.actions.runAction('core:log', { level: 'error', message: `Check failed: ${error.message}` });
+                    // Return false only on actual error, so index.ts knows to fail
+                    return true;
+                }
+            }
+        });
+        // Action: Download
+        ctx.actions.registerAction({
+            id: 'downloader:download',
+            handler: async () => {
+                const spinner = ora('Downloading new version...').start();
+                try {
+                    const response = await client.get(`/download/${config.jobId}`, {
+                        responseType: 'arraybuffer'
+                    });
+                    await fs.ensureDir(config.workDir);
+                    await fs.writeFile(DOWNLOAD_PATH, response.data);
+                    await fs.emptyDir(DIST_DIR);
+                    const zip = new AdmZip(DOWNLOAD_PATH);
+                    zip.extractAllTo(DIST_DIR, true);
+                    spinner.succeed('Updated extension code!');
+                    return true;
+                }
+                catch (error) {
+                    spinner.fail(`Failed to download: ${error.message}`);
+                    await ctx.actions.runAction('core:log', { level: 'error', message: `Download failed: ${error.message}` });
+                    return false;
+                }
+            }
+        });
+        // Start Polling (Loop)
+        const scheduleNextCheck = () => {
+            checkInterval = setTimeout(async () => {
+                if (!checkInterval)
+                    return; // Disposed
+                await ctx.actions.runAction('downloader:check', null);
+                scheduleNextCheck();
+            }, 2000);
+        };
+        scheduleNextCheck();
+    },
+    dispose(ctx) {
+        if (checkInterval) {
+            clearTimeout(checkInterval);
+            checkInterval = undefined;
+        }
+    }
+};

package/package.json

@@ -0,0 +1,52 @@
+{
+    "name": "ai-extension-preview",
+    "version": "0.1.0",
+    "description": "Local preview tool for AI Extension Builder",
+    "type": "module",
+    "bin": {
+        "ai-extension-preview": "./dist/index.js"
+    },
+    "files": [
+        "dist",
+        "README.md"
+    ],
+    "keywords": [
+        "ai",
+        "chrome-extension",
+        "builder",
+        "preview",
+        "dev-tool"
+    ],
+    "author": "AI Extension Builder",
+    "license": "MIT",
+    "scripts": {
+        "build": "shx rm -rf dist && tsc -b",
+        "start": "tsx src/index.ts",
+        "dev": "tsx watch src/index.ts",
+        "preview": "node dist/index.js"
+    },
+    "dependencies": {
+        "adm-zip": "^0.5.16",
+        "axios": "^1.7.9",
+        "chalk": "^5.3.0",
+        "commander": "^12.1.0",
+        "dotenv": "^17.2.3",
+        "fs-extra": "^11.2.0",
+        "inquirer": "^12.0.1",
+        "node-fetch": "^3.3.2",
+        "ora": "^8.1.1",
+        "puppeteer-core": "^24.33.0",
+        "skeleton-crew-runtime": "^0.1.5",
+        "web-ext": "^8.3.0",
+        "ws": "^8.18.0"
+    },
+    "devDependencies": {
+        "@types/adm-zip": "^0.5.6",
+        "@types/fs-extra": "^11.0.4",
+        "@types/node": "^22.10.1",
+        "@types/ws": "^8.5.13",
+        "shx": "^0.4.0",
+        "tsx": "^4.21.0",
+        "typescript": "^5.7.2"
+    }
+}