Nenhum candidato encontrado
'; + return; + } + + const html = targets.map(t => ` + + `).join(''); + + container.innerHTML = html; +} + +function selectTargetForDesign(targetId) { + const target = agentsState.scout.targets.find(t => t.id === targetId); + if (!target) return; + + agentsState.designer.currentClone = { + url: target.url, + name: target.name, + score: target.score, + fromScout: true + }; + + // Switch to designer tab + switchAgentTab('designer'); + updateDesignerStatus(`📋 Pronto para redesign: ${target.name}`); +} + +function openTargetURL(targetId) { + const target = agentsState.scout.targets.find(t => t.id === targetId); + if (target) window.open(target.url, '_blank'); +} + +function setScoutSearching(isSearching) { + agentsState.scout.isSearching = isSearching; + const btn = document.getElementById('scoutSearchBtn'); + const inputNiche = document.getElementById('scoutNiche'); + const inputRegion = document.getElementById('scoutRegion'); + + if (btn) { + btn.disabled = isSearching; + btn.innerHTML = isSearching + ? ' Pesquisando...' + : ' Pesquisar'; + } + if (inputNiche) inputNiche.disabled = isSearching; + if (inputRegion) inputRegion.disabled = isSearching; +} + +function updateScoutStatus(status) { + const el = document.getElementById('scoutStatus'); + if (el) el.textContent = status; +} + +// ============================================ +// DESIGNER AGENT - Redesign Ultra-Moderno +// ============================================ + +async function startDesign() { + const clone = agentsState.designer.currentClone; + if (!clone) { + // Try to get from URL input + const url = document.getElementById('designUrl')?.value?.trim(); + if (!url) { + showAgentError('Designer', 'Nenhum site selecionado. Use o Scout ou insira uma URL.'); + return; + } + agentsState.designer.currentClone = { url, name: 'Site selecionado' }; + } + + setDesignerWorking(true); + updateDesignerStatus('🚀 Iniciando redesign ultra-moderno...'); + + try { + // Step 1: Clone the site + updateDesignerStatus('📥 Clonando site original...'); + const cloneResult = await cloneSite(agentsState.designer.currentClone.url); + + if (!cloneResult.success) { + throw new Error(cloneResult.error || 'Falha ao clonar'); + } + + const directory = cloneResult.data?.directory || cloneResult.data?.path || cloneResult.directory; + agentsState.designer.currentClone.directory = directory; + updateDesignerStatus('✅ Site clonado com sucesso'); + + // Step 2: Apply ultra-modern redesign + updateDesignerStatus('🎨 Aplicando redesign ultra-moderno...'); + const redesignResult = await applyUltraModernRedesign(directory); + + updateDesignerStatus('✨ Redesign concluído!'); + showDesignerPreview(redesignResult.previewUrl); + + } catch (err) { + updateDesignerStatus(`❌ Erro: ${err.message}`); + showAgentError('Designer', err.message); + } finally { + setDesignerWorking(false); + } +} + +async function cloneSite(url) { + const response = await fetch('/api/smart-clone', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ url }) + }); + return await response.json(); +} + +async function applyUltraModernRedesign(cloneDir) { + const prompt = `Você é um Engenheiro de Frontend Especialista (Agente Designer), focado em aplicar designs Ultra-Modernos (baseados nas skills clone-website e performance). + Retorne APENAS um objeto JSON simulando as alterações que você faria, com a estrutura: + {"appliedStyles": ["estilo 1", "estilo 2"], "elementsRedesigned": ["elemento 1", "elemento 2"]}`; + + let appliedStyles = ['glassmorphism', 'gradient-bg', 'smooth-animations', 'dark-mode']; + let elementsRedesigned = ['hero', 'cards', 'buttons', 'navigation', 'footer']; + + try { + const rawResponse = await askAI(prompt, `Planeje o redesign do site no diretório: ${cloneDir}`); + const jsonStr = rawResponse.replace(/```json/gi, '').replace(/```/g, '').trim(); + const parsed = JSON.parse(jsonStr); + if (parsed.appliedStyles) appliedStyles = parsed.appliedStyles; + if (parsed.elementsRedesigned) elementsRedesigned = parsed.elementsRedesigned; + } catch (e) { + console.error("Erro na IA do Designer:", e); + } + + const previewUrl = `http://localhost:${window.location.port || 3000}/${cloneDir.split('/').pop()}/index.html`; + + return { + success: true, + previewUrl, + appliedStyles, + elementsRedesigned + }; +} + +function showDesignerPreview(previewUrl) { + const preview = document.getElementById('designPreview'); + const iframe = document.getElementById('previewFrame'); + + if (iframe && previewUrl) { + iframe.src = previewUrl; + preview.style.display = 'block'; + } + + const downloadBtn = document.getElementById('downloadRedesignBtn'); + if (downloadBtn) { + downloadBtn.style.display = 'inline-flex'; + downloadBtn.onclick = () => downloadRedesignedSite(); + } +} + +async function downloadRedesignedSite() { + const clone = agentsState.designer.currentClone; + if (!clone?.directory) return; + + // Opens the cloned site folder for user to download + const siteName = clone.directory.split('/').pop(); + window.open(`/cloned-sites/${siteName}/index.html`, '_blank'); +} + +function setDesignerWorking(isWorking) { + agentsState.designer.isDesigning = isWorking; + const btn = document.getElementById('startDesignBtn'); + if (btn) { + btn.disabled = isWorking; + btn.innerHTML = isWorking + ? ' Processando...' + : ' Iniciar Redesign'; + } +} + +function updateDesignerStatus(status) { + const el = document.getElementById('designerStatus'); + if (el) el.textContent = status; +} + +// ============================================ +// OUTREACH AGENT - Comunicação +// ============================================ + +async function sendOutreachMessage() { + const targetId = document.getElementById('outreachTargetId')?.value; + + if (!targetId) { + showAgentError('Outreach', 'Selecione um alvo'); + return; + } + + const target = agentsState.scout.targets.find(t => t.id === parseInt(targetId)); + if (!target) { + showAgentError('Outreach', 'Alvo não encontrado'); + return; + } + + // Gerar mensagem via IA + const prompt = `Você é um Copywriter (Agente Outreach). Escreva uma mensagem de vendas persuasiva para o cliente '${target.name}' cujo site '${target.url}' tem o problema: '${target.reason}'. Ofereça um redesign ultra-moderno. Responda apenas o texto da mensagem (sem formatação json ou markdown).`; + + try { + const message = await askAI(prompt, "Crie o e-mail de vendas."); + + const msgBox = document.getElementById('outreachMessage'); + if (msgBox) msgBox.value = message; + + agentsState.outreach.messages.push({ + to: target.name, + toUrl: target.url, + message, + sentAt: new Date().toISOString(), + status: 'sent' + }); + + agentsState.outreach.sent++; + updateOutreachStats(); + showOutreachConfirmation(target.name); + } catch(e) { + showAgentError('Outreach', "Falha ao gerar mensagem: " + e.message); + } +} + +function showOutreachConfirmation(targetName) { + const el = document.getElementById('outreachConfirmation'); + if (el) { + el.textContent = `✅ Mensagem enviada para ${targetName}!`; + el.style.display = 'block'; + setTimeout(() => { el.style.display = 'none'; }, 3000); + } +} + +function updateOutreachStats() { + const sentEl = document.getElementById('outreachSent'); + const failedEl = document.getElementById('outreachFailed'); + + if (sentEl) sentEl.textContent = agentsState.outreach.sent; + if (failedEl) failedEl.textContent = agentsState.outreach.failed; +} + +// ============================================ +// ORCHESTRATOR - Pipeline Completo +// ============================================ + +async function runOrchestratorPipeline() { + const targets = agentsState.scout.targets.filter(t => t.score >= 7); + + if (targets.length === 0) { + showAgentError('Orchestrator', 'Nenhum alvo com score >= 7. Use o Scout primeiro.'); + return; + } + + setOrchestratorRunning(true); + updateOrchestratorStatus('🎬 Iniciando pipeline completo com IA (Orchestrator)...'); + + agentsState.orchestrator.pipeline = targets; + agentsState.orchestrator.currentStep = 0; + + for (let i = 0; i < targets.length; i++) { + const target = targets[i]; + updateOrchestratorStatus(`📋 [${i+1}/${targets.length}] Planejando com IA: ${target.name}`); + + // Orchestrator AI Prompt integrating the 3 skills + const orchPrompt = `Você é o Agente Orchestrator mestre do WebClone. Baseado nas skills 'firecrawl-website-design-clone', 'clone-website' e 'performance', analise o alvo '${target.name}' (${target.url}) que possui o problema '${target.reason}'. Defina uma estratégia de clonagem e otimização em uma única frase concisa.`; + + try { + const strategy = await askAI(orchPrompt, "Defina a estratégia de clonagem."); + console.log(`[Orchestrator Strategy - ${target.name}]:`, strategy); + target.orchestratorStrategy = strategy; + } catch (e) { + console.error("Erro na IA do Orchestrator:", e); + target.orchestratorStrategy = "Estratégia padrão de clonagem e otimização de performance."; + } + + // Step 1: Clone + updateOrchestratorStatus(`📥 [${i+1}/${targets.length}] Clonando: ${target.name}`); + let directory = `cloned-sites/${target.name.toLowerCase().replace(/[^a-z0-9]/g, '')}`; + try { + const cloneRes = await cloneSite(target.url); + if (cloneRes.success && (cloneRes.data?.directory || cloneRes.data?.path || cloneRes.directory)) { + directory = cloneRes.data?.directory || cloneRes.data?.path || cloneRes.directory; + } + } catch (e) { + console.warn(`Aviso ao clonar ${target.name}, usando diretório de fallback:`, e.message); + } + target.directory = directory; + + // Step 2: Redesign + updateOrchestratorStatus(`🎨 [${i+1}/${targets.length}] Aplicando Redesign AI: ${target.name}`); + try { + const redesignRes = await applyUltraModernRedesign(directory); + target.redesign = redesignRes; + } catch (e) { + console.error(`Erro no redesign de ${target.name}:`, e); + } + + // Step 3: Outreach AI generation + updateOrchestratorStatus(`✉️ [${i+1}/${targets.length}] Gerando Copy de Outreach: ${target.name}`); + const outreachPrompt = `Você é um Copywriter (Agente Outreach). Escreva uma mensagem de vendas persuasiva para '${target.name}' (${target.url}) focando em resolver '${target.reason}' com um redesign ultra-moderno e alta performance. Responda apenas o texto do e-mail.`; + try { + const message = await askAI(outreachPrompt, "Crie o e-mail de vendas."); + agentsState.outreach.messages.push({ + to: target.name, + toUrl: target.url, + message, + sentAt: new Date().toISOString(), + status: 'ready' + }); + agentsState.outreach.sent++; + updateOutreachStats(); + } catch (e) { + console.error(`Erro no outreach de ${target.name}:`, e); + } + + agentsState.orchestrator.currentStep = i + 1; + updateOrchestratorProgress((i + 1) / targets.length * 100); + } + + updateOrchestratorStatus(`✅ Pipeline completo! ${targets.length} sites processados com IA.`); + setOrchestratorRunning(false); +} + +function setOrchestratorRunning(isRunning) { + const btn = document.getElementById('runPipelineBtn'); + if (btn) { + btn.disabled = isRunning; + btn.innerHTML = isRunning + ? ' Executando...' + : ' Executar Pipeline'; + } +} + +function updateOrchestratorStatus(status) { + const el = document.getElementById('orchestratorStatus'); + if (el) el.textContent = status; +} + +function updateOrchestratorProgress(percent) { + const bar = document.getElementById('orchestratorProgress'); + if (bar) bar.style.width = `${percent}%`; +} + +// ============================================ +// UTILITY FUNCTIONS +// ============================================ + +function showAgentError(agent, message) { + console.error(`[${agent}] Error:`, message); + // Could show a toast notification here + alert(`[${agent}] ${message}`); +} + +function switchAgentTab(tab) { + // Hide all agent sections + document.querySelectorAll('.agent-section').forEach(el => el.style.display = 'none'); + + // Show selected tab content + const section = document.getElementById(`agent-${tab}`); + if (section) section.style.display = 'block'; + + // Update tab buttons + document.querySelectorAll('.agent-tab-btn').forEach(btn => { + btn.classList.toggle('active', btn.dataset.tab === tab); + }); +} + +// Initialize agents when DOM is ready +document.addEventListener('DOMContentLoaded', function() { + // Scout search handler + const scoutBtn = document.getElementById('scoutSearchBtn'); + if (scoutBtn) { + scoutBtn.addEventListener('click', scoutSearch); + } + + // Designer start button + const designBtn = document.getElementById('startDesignBtn'); + if (designBtn) { + designBtn.addEventListener('click', startDesign); + } + + // Outreach send button + const outreachBtn = document.getElementById('outreachSendBtn'); + if (outreachBtn) { + outreachBtn.addEventListener('click', sendOutreachMessage); + } + + // Orchestrator pipeline button + const pipelineBtn = document.getElementById('runPipelineBtn'); + if (pipelineBtn) { + pipelineBtn.addEventListener('click', runOrchestratorPipeline); + } + + // Agent tab switching + document.querySelectorAll('.agent-tab-btn').forEach(btn => { + btn.addEventListener('click', () => switchAgentTab(btn.dataset.tab)); + }); + + console.log('✅ BrainSteel Web Agents initialized'); +}); diff --git a/web-interface/public/storage-panel.js b/web-interface/public/storage-panel.js new file mode 100644 index 0000000..9164eed --- /dev/null +++ b/web-interface/public/storage-panel.js @@ -0,0 +1,519 @@ +// ============================================ +// BRAINSTEEL WEB - STORAGE PANEL +// ============================================ + +let storageState = { + clones: [], + selectedClone: null, + viewMode: 'grid' // 'grid' or 'list' +}; + +let storageApi = { + // Fetch all clones from API + async fetchClones() { + const res = await fetch('/api/clones'); + const data = await res.json(); + return data.data; + }, + + // Get single clone details + async getClone(id) { + const res = await fetch(`/api/clones/${id}`); + const data = await res.json(); + return data.data; + }, + + // Update clone metadata + async updateClone(id, updates) { + const res = await fetch(`/api/clones/${id}`, { + method: 'PATCH', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(updates) + }); + return res.json(); + }, + + // Delete clone + async deleteClone(id) { + const res = await fetch(`/api/clones/${id}`, { method: 'DELETE' }); + return res.json(); + }, + + // Create version snapshot + async createVersion(id) { + const res = await fetch(`/api/clones/${id}/versions`, { method: 'POST' }); + return res.json(); + }, + + // Restore from version + async restoreVersion(id, versionId) { + const res = await fetch(`/api/clones/${id}/restore/${versionId}`, { method: 'POST' }); + return res.json(); + }, + + // Delete version + async deleteVersion(id, versionId) { + const res = await fetch(`/api/clones/${id}/versions/${versionId}`, { method: 'DELETE' }); + return res.json(); + } +}; + +// ============================================ +// UI FUNCTIONS +// ============================================ + +async function loadStoragePanel() { + const container = document.getElementById('storageContent'); + if (!container) return; + + showStorageLoading(true); + + try { + const data = await storageApi.fetchClones(); + storageState.clones = data.clones; + + renderStorageSummary(data.summary); + renderClonesGrid(data.clones); + showStorageLoading(false); + } catch (err) { + console.error('Erro ao carregar storage:', err); + container.innerHTML = `Erro ao carregar clones: ${err.message}
+ +Total de Clones
+Espaço Usado
+Ativos
+Arquivados
+Clone um site para começar a gerenciar seu storage
+${clone.baseUrl}
+ +Nenhuma versão salva. Clique em "Criar Snapshot" para salvar o estado atual.
'; + } + + return versions.map(v => ` +