ai-panel 1.0.0

package/README.md

@@ -0,0 +1,47 @@
+# AI Dev Panel
+
+Uma ferramenta revolucionária para edição de aplicações web em tempo real usando IA.
+
+## 🧩 Arquitetura
+
+O projeto é um monorepo TypeScript dividido em:
+
+- `packages/core`: Tipagens e contratos compartilhados.
+- `packages/overlay`: Script injetado no navegador que fornece a interface de seleção e chat.
+- `packages/plugin`: Plugin Vite que serve o overlay e processa as alterações no código.
+- `packages/cli-connector`: Módulo responsável pela comunicação com CLIs de IA (Claude, OpenAI, etc).
+
+## 🚀 Como usar (Demo)
+
+1. Instale as dependências:
+   ```bash
+   npm install
+   ```
+
+2. Inicie o projeto de exemplo:
+   ```bash
+   npm run dev
+   ```
+
+3. Abra o navegador em `http://localhost:3000`.
+
+4. Use o atalho **Ctrl + Espaço** para ativar o modo IA.
+
+5. Selecione um elemento (ex: o botão azul) e solicite uma alteração no painel lateral.
+
+## 🔥 Funcionalidades Implementadas
+
+- [x] Overlay flutuante com suporte a seleção de elementos.
+- [x] Highlight visual de elementos em hover.
+- [x] Painel de chat lateral integrado.
+- [x] Plugin Vite para injeção automática e Hot Reload.
+- [x] Middleware de servidor para processar comandos da IA.
+- [x] Mock de conector de IA com suporte a diffs.
+- [x] Aplicação automática de mudanças no sistema de arquivos.
+
+## 🛠️ Próximos Passos
+
+- Integração real com `claude-cli` ou `ollama`.
+- Uso de AST (Babel/TS Morph) para injeção de metadados de origem de forma robusta.
+- Preview de diff antes de aplicar.
+- Undo/Redo de alterações.

package/dist/core.d.ts

@@ -0,0 +1,9 @@
+export declare class AIPanelCore {
+    private projectRoot;
+    private historyFile;
+    constructor(projectRoot?: string);
+    handleRequest(body: any): Promise<any>;
+    private getHistory;
+    private saveToHistory;
+    private executeClaude;
+}

package/dist/core.js

@@ -0,0 +1,160 @@
+import { spawn } from 'child_process';
+import * as fs from 'fs';
+import * as path from 'path';
+import * as os from 'os';
+export class AIPanelCore {
+    projectRoot;
+    historyFile;
+    constructor(projectRoot = process.cwd()) {
+        this.projectRoot = projectRoot;
+        this.historyFile = path.join(this.projectRoot, 'ai_history.json');
+    }
+    async handleRequest(body) {
+        const { action } = body;
+        if (action === 'getHistory') {
+            return this.getHistory();
+        }
+        if (action === 'execute') {
+            const command = body;
+            const response = await this.executeClaude(command);
+            // Save to history
+            await this.saveToHistory(command, response);
+            return response;
+        }
+        throw new Error(`Unknown action: ${action}`);
+    }
+    getHistory() {
+        if (fs.existsSync(this.historyFile)) {
+            try {
+                return JSON.parse(fs.readFileSync(this.historyFile, 'utf-8'));
+            }
+            catch (e) {
+                console.error('[AI Core] Error parsing history file:', e);
+            }
+        }
+        return { messages: [] };
+    }
+    async saveToHistory(command, response) {
+        try {
+            const history = this.getHistory();
+            history.messages.push({
+                role: 'user',
+                content: command.instruction,
+                element: command.element,
+                timestamp: new Date().toISOString()
+            });
+            history.messages.push({
+                role: 'ai',
+                content: response.message,
+                timestamp: new Date().toISOString()
+            });
+            fs.writeFileSync(this.historyFile, JSON.stringify(history, null, 2));
+        }
+        catch (e) {
+            console.error('[AI Core] Error saving history:', e);
+        }
+    }
+    async executeClaude(command) {
+        const { instruction, element, context } = command;
+        const absolutePath = element?.source?.file ? path.resolve(this.projectRoot, element.source.file) : null;
+        const prompt = `
+USER INSTRUCTION: ${instruction}
+${element ? `TARGET ELEMENT: ${element.tagName}${element.className ? `.${element.className}` : ''}` : ''}
+${element?.source ? `FILE: ${element.source.file}` : ''}
+
+CONTEXT:
+${context.targetFileContent ? `Current file content:\n${context.targetFileContent}` : ''}
+${context.projectContext ? `Project context:\n${context.projectContext}` : ''}
+
+FINAL DIRECTIVE: ${instruction}
+`;
+        const tempPromptFile = path.join(os.tmpdir(), `claude_prompt_${Date.now()}.txt`);
+        const tempScriptFile = path.join(os.tmpdir(), `claude_run_${Date.now()}.ps1`);
+        try {
+            // Sync IDE content to disk before running Claude if possible
+            if (absolutePath && context.targetFileContent && fs.existsSync(absolutePath)) {
+                fs.writeFileSync(absolutePath, context.targetFileContent, 'utf8');
+            }
+            fs.writeFileSync(tempPromptFile, prompt, 'utf8');
+            const scriptContent = `
+$ErrorActionPreference = 'SilentlyContinue'
+$PromptText = Get-Content -Path "${tempPromptFile.replace(/\\/g, '\\\\')}" -Raw
+
+Write-Output "---CLAUDE-RESPONSE-START---"
+$input = $PromptText + [System.Environment]::NewLine + "exit"
+$input | & claude --dangerously-skip-permissions
+Write-Output "---CLAUDE-RESPONSE-END---"
+`;
+            fs.writeFileSync(tempScriptFile, scriptContent, 'utf8');
+            let capturedStdout = '';
+            await new Promise((resolve) => {
+                const child = spawn('powershell.exe', ['-NoProfile', '-ExecutionPolicy', 'Bypass', '-File', tempScriptFile], {
+                    stdio: ['pipe', 'pipe', 'inherit'],
+                    cwd: this.projectRoot,
+                    shell: false
+                });
+                child.stdout?.on('data', (data) => {
+                    const str = data.toString();
+                    capturedStdout += str;
+                    process.stdout.write(str);
+                    if (capturedStdout.includes("---CLAUDE-RESPONSE-END---")) {
+                        resolve(null);
+                        child.kill();
+                    }
+                });
+                child.on('exit', () => resolve(null));
+                setTimeout(() => { try {
+                    child.kill();
+                }
+                catch (e) { } resolve(null); }, 60000);
+            });
+            const stdout = capturedStdout.replace(/[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g, '');
+            // Parse diffs (simplified: read the file back)
+            let diffs = [];
+            let newContent = context.targetFileContent || '';
+            if (absolutePath && fs.existsSync(absolutePath)) {
+                newContent = fs.readFileSync(absolutePath, 'utf8');
+                if (newContent !== context.targetFileContent) {
+                    diffs.push({
+                        path: element?.source?.file || 'unknown',
+                        original: context.targetFileContent || '',
+                        modified: newContent,
+                        patch: ''
+                    });
+                }
+            }
+            // Extract message
+            const startMarker = "---CLAUDE-RESPONSE-START---";
+            const endMarker = "---CLAUDE-RESPONSE-END---";
+            const startIndex = stdout.indexOf(startMarker);
+            const endIndex = stdout.indexOf(endMarker);
+            let responseMessage = "";
+            if (startIndex !== -1) {
+                if (endIndex !== -1) {
+                    responseMessage = stdout.substring(startIndex + startMarker.length, endIndex).trim();
+                }
+                else {
+                    responseMessage = stdout.substring(startIndex + startMarker.length).trim();
+                }
+            }
+            responseMessage = responseMessage
+                .replace(/USER INSTRUCTION:[\s\S]*?FINAL DIRECTIVE:.*\n/g, '')
+                .replace(/\(To exit, type 'exit' or press Ctrl\+C\)/g, '')
+                .trim();
+            if (!responseMessage) {
+                responseMessage = diffs.length > 0 ? `Updated ${element?.source?.file}` : "Claude finished execution.";
+            }
+            return { message: responseMessage, diffs };
+        }
+        finally {
+            try {
+                fs.unlinkSync(tempPromptFile);
+            }
+            catch (e) { }
+            try {
+                fs.unlinkSync(tempScriptFile);
+            }
+            catch (e) { }
+        }
+    }
+}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export * from './types';
+export * from './core';
+export * from './overlay';
+export { aiPanelVite } from './vite';
+export { createNextAIPanelHandler } from './next';

package/dist/index.js

@@ -0,0 +1,5 @@
+export * from './types';
+export * from './core';
+export * from './overlay';
+export { aiPanelVite } from './vite';
+export { createNextAIPanelHandler } from './next';

package/dist/next.d.ts

@@ -0,0 +1,3 @@
+export declare function createNextAIPanelHandler(options?: {
+    projectRoot?: string;
+}): (req: any, res: any) => Promise<any>;

package/dist/next.js

@@ -0,0 +1,30 @@
+import { AIPanelCore } from './core';
+export function createNextAIPanelHandler(options = {}) {
+    const core = new AIPanelCore(options.projectRoot);
+    return async function handler(req, res) {
+        if (req.method !== 'POST') {
+            if (res.status)
+                return res.status(405).json({ error: 'Method not allowed' });
+            return new Response(JSON.stringify({ error: 'Method not allowed' }), { status: 405 });
+        }
+        try {
+            // Handle both Pages API (req.body) and App Router (req.json())
+            const body = req.body || (await req.json());
+            const result = await core.handleRequest(body);
+            if (res.status) {
+                return res.status(200).json(result);
+            }
+            return new Response(JSON.stringify(result), {
+                status: 200,
+                headers: { 'Content-Type': 'application/json' }
+            });
+        }
+        catch (e) {
+            const error = e;
+            if (res.status) {
+                return res.status(500).json({ error: error.message });
+            }
+            return new Response(JSON.stringify({ error: error.message }), { status: 500 });
+        }
+    };
+}

package/dist/overlay.d.ts

@@ -0,0 +1,21 @@
+export declare class AIOverlay {
+    private container;
+    private chatContent;
+    private input;
+    private selectedElement;
+    private isProcessing;
+    private endpoint;
+    constructor(options?: {
+        endpoint?: string;
+    });
+    private init;
+    private createStyles;
+    private createUI;
+    private loadHistory;
+    private addMessageToChat;
+    private startInspecting;
+    private setupElementPicker;
+    private handleSend;
+    private getElementMetadata;
+    private getFileContent;
+}

package/dist/overlay.js

@@ -0,0 +1,203 @@
+export class AIOverlay {
+    container = null;
+    chatContent = null;
+    input = null;
+    selectedElement = null;
+    isProcessing = false;
+    endpoint;
+    constructor(options = {}) {
+        this.endpoint = options.endpoint || '/__ai_dev_api';
+        this.init();
+    }
+    init() {
+        if (typeof document === 'undefined')
+            return;
+        this.createStyles();
+        this.createUI();
+        this.setupElementPicker();
+        this.loadHistory();
+    }
+    createStyles() {
+        const style = document.createElement('style');
+        style.textContent = `
+      #ai-panel-root {
+        position: fixed; top: 0; right: 0; width: 350px; height: 100vh;
+        background: #1e1e1e; color: white; z-index: 99999;
+        display: flex; flex-direction: column; font-family: sans-serif;
+        box-shadow: -2px 0 10px rgba(0,0,0,0.5); transform: translateX(100%);
+        transition: transform 0.3s ease; border-left: 1px solid #333;
+      }
+      #ai-panel-root.open { transform: translateX(0); }
+      #ai-panel-toggle {
+        position: fixed; bottom: 20px; right: 20px; width: 50px; height: 50px;
+        background: #007acc; border-radius: 25px; cursor: pointer; z-index: 100000;
+        display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,0.3);
+      }
+      #ai-panel-header { padding: 15px; border-bottom: 1px solid #333; font-weight: bold; display: flex; justify-content: space-between; }
+      #ai-panel-chat { flex: 1; overflow-y: auto; padding: 15px; display: flex; flex-direction: column; gap: 10px; }
+      .chat-msg { padding: 8px 12px; border-radius: 8px; max-width: 85%; font-size: 14px; line-height: 1.4; }
+      .chat-msg.user { background: #007acc; align-self: flex-end; }
+      .chat-msg.ai { background: #333; align-self: flex-start; }
+      #ai-panel-input-container { padding: 15px; border-top: 1px solid #333; }
+      #ai-panel-input { width: 100%; background: #2d2d2d; border: 1px solid #444; color: white; padding: 10px; border-radius: 4px; resize: none; box-sizing: border-box; }
+      #ai-panel-footer { padding: 0 15px 15px; display: flex; gap: 10px; }
+      .ai-btn { padding: 8px 12px; border-radius: 4px; border: none; cursor: pointer; font-size: 12px; }
+      .ai-btn-primary { background: #007acc; color: white; }
+      .ai-btn-secondary { background: #444; color: white; }
+      .inspecting { cursor: crosshair !important; }
+      .inspecting * { cursor: crosshair !important; }
+      .ai-highlight { outline: 2px solid #007acc !important; outline-offset: 2px; }
+    `;
+        document.head.appendChild(style);
+    }
+    createUI() {
+        this.container = document.createElement('div');
+        this.container.id = 'ai-panel-root';
+        this.container.innerHTML = `
+      <div id="ai-panel-header">
+        AI Assistant
+        <span style="cursor:pointer" onclick="document.getElementById('ai-panel-root').classList.remove('open')">×</span>
+      </div>
+      <div id="ai-panel-chat"></div>
+      <div id="ai-panel-input-container">
+        <div id="selected-element-info" style="font-size:10px; color:#aaa; margin-bottom:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis"></div>
+        <textarea id="ai-panel-input" placeholder="O que deseja alterar?" rows="3"></textarea>
+      </div>
+      <div id="ai-panel-footer">
+        <button id="ai-btn-inspect" class="ai-btn ai-btn-secondary">Selecionar Elemento</button>
+        <button id="ai-btn-send" class="ai-btn ai-btn-primary">Enviar</button>
+      </div>
+    `;
+        document.body.appendChild(this.container);
+        const toggle = document.createElement('div');
+        toggle.id = 'ai-panel-toggle';
+        toggle.innerHTML = 'AI';
+        toggle.onclick = () => this.container?.classList.toggle('open');
+        document.body.appendChild(toggle);
+        this.chatContent = this.container.querySelector('#ai-panel-chat');
+        this.input = this.container.querySelector('#ai-panel-input');
+        this.container.querySelector('#ai-btn-send')?.addEventListener('click', () => this.handleSend());
+        this.container.querySelector('#ai-btn-inspect')?.addEventListener('click', () => this.startInspecting());
+        this.input?.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                this.handleSend();
+            }
+        });
+    }
+    async loadHistory() {
+        try {
+            const response = await fetch(this.endpoint, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ action: 'getHistory' }),
+            });
+            const data = await response.json();
+            if (data.messages) {
+                data.messages.forEach((msg) => {
+                    this.addMessageToChat(msg.role, msg.content);
+                });
+            }
+        }
+        catch (e) {
+            console.error('Failed to load history:', e);
+        }
+    }
+    addMessageToChat(role, content) {
+        if (!this.chatContent)
+            return;
+        const msg = document.createElement('div');
+        msg.className = `chat-msg ${role}`;
+        msg.textContent = content;
+        this.chatContent.appendChild(msg);
+        this.chatContent.scrollTop = this.chatContent.scrollHeight;
+    }
+    startInspecting() {
+        document.body.classList.add('inspecting');
+        this.container?.classList.remove('open');
+        const onMouseOver = (e) => {
+            e.target.classList.add('ai-highlight');
+        };
+        const onMouseOut = (e) => {
+            e.target.classList.remove('ai-highlight');
+        };
+        const onClick = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.selectedElement = e.target;
+            const info = this.container?.querySelector('#selected-element-info');
+            if (info)
+                info.textContent = `Selecionado: <${this.selectedElement.tagName.toLowerCase()}>`;
+            stop();
+            this.container?.classList.add('open');
+        };
+        const stop = () => {
+            document.body.classList.remove('inspecting');
+            document.removeEventListener('mouseover', onMouseOver);
+            document.removeEventListener('mouseout', onMouseOut);
+            document.removeEventListener('click', onClick, true);
+        };
+        document.addEventListener('mouseover', onMouseOver);
+        document.addEventListener('mouseout', onMouseOut);
+        document.addEventListener('click', onClick, true);
+    }
+    setupElementPicker() {
+        // Already handled in startInspecting
+    }
+    async handleSend() {
+        const text = this.input?.value.trim();
+        if (!text || this.isProcessing)
+            return;
+        this.isProcessing = true;
+        this.addMessageToChat('user', text);
+        if (this.input)
+            this.input.value = '';
+        const aiMsg = document.createElement('div');
+        aiMsg.className = 'chat-msg ai';
+        aiMsg.textContent = 'AI está pensando...';
+        this.chatContent?.appendChild(aiMsg);
+        try {
+            const metadata = this.selectedElement ? this.getElementMetadata(this.selectedElement) : undefined;
+            const response = await fetch(this.endpoint, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    action: 'execute',
+                    instruction: text,
+                    element: metadata,
+                    context: {
+                        targetFileContent: metadata?.source?.file ? await this.getFileContent(metadata.source.file) : undefined
+                    }
+                }),
+            });
+            const result = await response.json();
+            aiMsg.textContent = result.message;
+            // If code was changed, we might want to notify or reload parts of the page
+            if (result.diffs && result.diffs.length > 0) {
+                console.log('Changes applied:', result.diffs);
+            }
+        }
+        catch (e) {
+            aiMsg.textContent = 'Erro ao processar solicitação.';
+            console.error(e);
+        }
+        finally {
+            this.isProcessing = false;
+        }
+    }
+    getElementMetadata(el) {
+        // This is a placeholder - in a real lib, we'd use a Vite plugin to inject source info
+        return {
+            tagName: el.tagName,
+            className: el.className,
+            id: el.id,
+            outerHTML: el.outerHTML,
+            source: el.__source
+        };
+    }
+    async getFileContent(file) {
+        // In a development environment, we might have an endpoint to read files
+        // For now, return empty or handle via core
+        return "";
+    }
+}

package/dist/types.d.ts

@@ -0,0 +1,39 @@
+export interface ElementMetadata {
+    tagName: string;
+    className?: string;
+    id?: string;
+    textContent?: string;
+    outerHTML: string;
+    source?: {
+        file: string;
+        line?: number;
+        column?: number;
+    };
+}
+export interface AIDiff {
+    path: string;
+    original: string;
+    modified: string;
+    patch: string;
+}
+export interface AIResponse {
+    message: string;
+    diffs: AIDiff[];
+}
+export interface AICommand {
+    instruction: string;
+    element?: ElementMetadata;
+    context: {
+        targetFileContent?: string;
+        projectContext?: string;
+    };
+}
+export interface ChatMessage {
+    role: 'user' | 'ai';
+    content: string;
+    element?: ElementMetadata;
+    timestamp: string;
+}
+export interface ChatHistory {
+    messages: ChatMessage[];
+}

package/dist/types.js

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

package/dist/vite.d.ts

@@ -0,0 +1,2 @@
+import { Plugin } from 'vite';
+export declare function aiPanelVite(): Plugin;

package/dist/vite.js

@@ -0,0 +1,36 @@
+import { AIPanelCore } from './core';
+export function aiPanelVite() {
+    const core = new AIPanelCore();
+    return {
+        name: 'vite-plugin-ai-panel',
+        // Inject source information during transformation (simplified)
+        transform(code, id) {
+            if (!id.endsWith('.tsx') && !id.endsWith('.jsx') && !id.endsWith('.html'))
+                return;
+            // In a real implementation, we would use a parser to inject data-source attributes
+            return code;
+        },
+        configureServer(server) {
+            server.middlewares.use(async (req, res, next) => {
+                if (req.url === '/__ai_dev_api') {
+                    let body = '';
+                    req.on('data', chunk => body += chunk);
+                    req.on('end', async () => {
+                        try {
+                            const data = JSON.parse(body);
+                            const result = await core.handleRequest(data);
+                            res.setHeader('Content-Type', 'application/json');
+                            res.end(JSON.stringify(result));
+                        }
+                        catch (e) {
+                            res.statusCode = 500;
+                            res.end(JSON.stringify({ error: e.message }));
+                        }
+                    });
+                    return;
+                }
+                next();
+            });
+        }
+    };
+}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "ai-panel",
+  "version": "1.0.0",
+  "description": "",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./client": {
+      "types": "./dist/overlay.d.ts",
+      "import": "./dist/overlay.mjs",
+      "require": "./dist/overlay.js"
+    },
+    "./server": {
+      "types": "./dist/core.d.ts",
+      "import": "./dist/core.mjs",
+      "require": "./dist/core.js"
+    }
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "vite example",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs",
+  "devDependencies": {
+    "@types/dotenv": "^6.1.1",
+    "@types/node": "^25.2.3",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1"
+  },
+  "dependencies": {
+    "dotenv": "^17.2.4",
+    "gsap": "^3.14.2"
+  }
+}