Merge branch 'main' of https://git.reifonas.cloud/admtracksteel/webclone

Dockerfile

@@ -0,0 +1,35 @@
+# CloneWeb - Web Interface + Crawler Dockerfile
+FROM node:20-alpine
+
+WORKDIR /app
+
+# Install wget for crawler + bash for scripts
+RUN apk add --no-cache wget bash && ln -s /usr/bin/wget /bin/wget
+
+# --- Crawler service (port 3002) ---
+COPY simple-crawler/package*.json /app/simple-crawler/
+WORKDIR /app/simple-crawler
+RUN npm install --production
+
+COPY simple-crawler/ /app/simple-crawler/
+
+# --- Web interface service (port 3000) ---
+WORKDIR /app
+COPY web-interface/package*.json /app/web-interface/
+WORKDIR /app/web-interface
+RUN npm install --production
+
+COPY web-interface/ /app/web-interface/
+
+# --- Storage dir for clones ---
+RUN mkdir -p /app/cloned-sites
+
+# Expose port
+EXPOSE 3000
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
+    CMD wget --no-verbose --tries=1 --spider http://localhost:3000/ || exit 1
+
+# Start crawler in background (port 3002), then web server (port 3000)
+CMD bash -c "node /app/simple-crawler/wget-cloner.js > /tmp/crawler.log 2>&1 & node server.js"

web-interface/public/app-new.js

@@ -100,8 +100,8 @@ async function checkServiceStatus() {
     const statusIndicator = document.getElementById('serviceStatus');
 
     try {
-        // Verificar o serviço WGET na porta 3002 (não 3001)
-        const response = await fetch('http://localhost:3002/health', {
+        // Verificar o serviço WGET via proxy do servidor (mesma origem)
+        const response = await fetch('/api/health', {
             method: 'GET'
         });
 
@@ -200,13 +200,26 @@ function setupForms() {
 async function handleCloneSubmit(e) {
     e.preventDefault();
 
-    const url = document.getElementById('cloneUrl').value.trim();
-    const depth = parseInt(document.getElementById('depthLevel').value);
-    const includeImages = document.getElementById('includeImages').checked;
-    const includeCSS = document.getElementById('includeCSS').checked;
-    const includeJS = document.getElementById('includeJS').checked;
-    const convertLinks = document.getElementById('convertLinks').checked;
-    const cloneMethod = document.getElementById('cloneMethod').value;
+    const cloneUrlEl = document.getElementById('cloneUrl');
+    const depthLevelEl = document.getElementById('depthLevel');
+    const includeImagesEl = document.getElementById('includeImages');
+    const includeCSSEl = document.getElementById('includeCSS');
+    const includeJSEl = document.getElementById('includeJS');
+    const convertLinksEl = document.getElementById('convertLinks');
+
+    if (!cloneUrlEl || !depthLevelEl || !includeImagesEl || !includeCSSEl || !includeJSEl || !convertLinksEl) {
+        console.error('Form elements not found');
+        showToast('Erro: Elementos do formulário não encontrados', 'error');
+        return;
+    }
+
+    const url = cloneUrlEl.value.trim();
+    const depth = parseInt(depthLevelEl.value);
+    const includeImages = includeImagesEl.checked;
+    const includeCSS = includeCSSEl.checked;
+    const includeJS = includeJSEl.checked;
+    const convertLinks = convertLinksEl.checked;
+    const cloneMethod = 'wget';
 
     if (!url) {
         showToast('Por favor, insira uma URL válida', 'error');
@@ -582,18 +595,18 @@ function saveSettings() {
 // Utility Functions
 function openClonedSite(directory) {
     // Try to open via server endpoint
-    fetch('http://localhost:8080', {
+    fetch('/api/health', {
         method: 'GET'
     }).then(response => {
         if (response.ok) {
-            // Server is running, open the site
-            const siteName = directory.split('\\').pop();
-            window.open(`http://localhost:8080/${siteName}/`, '_blank');
+            // Server is running, open the site via same origin
+            const siteName = directory.split('/').pop();
+            window.open(`/${siteName}/index.html`, '_blank');
         } else {
-            showToast('Servidor HTTP não está rodando. Inicie o servidor na porta 8080.', 'error');
+            showToast('Servidor não está respondendo.', 'error');
         }
     }).catch(error => {
-        showToast('Servidor HTTP não está rodando. Inicie o servidor na porta 8080.', 'error');
+        showToast('Servidor não está respondendo.', 'error');
     });
 }
 

web-interface/public/index-new.html

@@ -5,7 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>CloneWeb Pro - Clonagem Profissional de Sites</title>
     <link rel="stylesheet" href="styles-new.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
+    <script src="agents-panel.js"></script>
+    <script src="storage-panel.js"></script>
 </head>
 <body>
     <!-- Sidebar -->
@@ -28,6 +30,16 @@
                 <i class="fas fa-history"></i>
                 <span>Histórico</span>
             </a>
+                        <a href="#" class="nav-item" data-page="agents">
+                <i class="fas fa-robot"></i>
+                <span>Agentes AI</span>
+            </a>
+
+                        <a href="#" class="nav-item" data-page="storage">
+                <i class="fas fa-database"></i>
+                <span>Storage</span>
+            </a>
+
             <a href="#" class="nav-item" data-page="settings">
                 <i class="fas fa-cog"></i>
                 <span>Configurações</span>
@@ -290,6 +302,154 @@
                 </div>
             </div>
         </div>
+
+
+        <!-- Storage Page - Clone Management -->
+        <div class="page" id="storage">
+            <div class="storage-header">
+                <h2>💾 Gestão de Storage</h2>
+                <p>Gerencie todos os sites clonados, versões e metadata</p>
+            </div>
+            
+            <div id="storageSummary" class="storage-summary">
+                <!-- Summary cards rendered by JS -->
+            </div>
+            
+            <div class="storage-toolbar">
+                <input type="text" id="storageSearch" class="form-control" placeholder="Buscar clones..." oninput="filterClones(this.value)">
+                <button class="btn btn-secondary" onclick="loadStoragePanel()">
+                    <i class="fas fa-redo"></i> Atualizar
+                </button>
+            </div>
+            
+            <div id="storageLoader" class="storage-loader" style="display:none;">
+                <i class="fas fa-spinner fa-spin"></i>
+                <span>Carregando clones...</span>
+            </div>
+            
+            <div id="storageClonesGrid" class="storage-clones-grid">
+                <!-- Clones rendered by JS -->
+            </div>
+        </div>
+
+
+        <!-- Agents Page - BrainSteel Web -->
+        <div class="page" id="agents">
+            <div class="agents-header">
+                <h2>🤖 Agentes BrainSteel Web</h2>
+                <p>Pipeline completo: Scout → Designer → Outreach → Orchestrator</p>
+            </div>
+            
+            <!-- Agent Tabs -->
+            <div class="agent-tabs">
+                <button class="agent-tab-btn active" data-tab="scout">
+                    <i class="fas fa-search"></i> Scout
+                </button>
+                <button class="agent-tab-btn" data-tab="designer">
+                    <i class="fas fa-magic"></i> Designer
+                </button>
+                <button class="agent-tab-btn" data-tab="outreach">
+                    <i class="fas fa-envelope"></i> Outreach
+                </button>
+                <button class="agent-tab-btn" data-tab="orchestrator">
+                    <i class="fas fa-tasks"></i> Orchestrator
+                </button>
+            </div>
+            
+            <!-- SCOUT SECTION -->
+            <div class="agent-section" id="agent-scout">
+                <div class="agent-card">
+                    <h3><i class="fas fa-search"></i> Scout - Prospecção</h3>
+                    <p class="agent-description">Identifica websites de empresas locais que precisam de redesign</p>
+                    
+                    <div class="agent-inputs">
+                        <input type="text" id="scoutNiche" class="form-control" placeholder="Nichos: restaurantes, academias, padarias...">
+                        <input type="text" id="scoutRegion" class="form-control" placeholder="Região: São Paulo, ABC, Zona Sul...">
+                        <button id="scoutSearchBtn" class="btn btn-primary">
+                            <i class="fas fa-search"></i> Pesquisar Alvos
+                        </button>
+                    </div>
+                    
+                    <div class="agent-status" id="scoutStatus">Aguardando pesquisa...</div>
+                    
+                    <div id="scoutResults" class="scout-results">
+                        <!-- Results will be rendered here -->
+                    </div>
+                </div>
+            </div>
+            
+            <!-- DESIGNER SECTION -->
+            <div class="agent-section" id="agent-designer" style="display:none;">
+                <div class="agent-card">
+                    <h3><i class="fas fa-magic"></i> Designer - Redesign Ultra-Moderno</h3>
+                    <p class="agent-description">Transforma sites clonados em interfaces premium com estética anime/moderna</p>
+                    
+                    <div class="agent-inputs">
+                        <input type="text" id="designUrl" class="form-control" placeholder="URL do site para redesign...">
+                        <button id="startDesignBtn" class="btn btn-primary">
+                            <i class="fas fa-rocket"></i> Iniciar Redesign
+                        </button>
+                    </div>
+                    
+                    <div class="agent-status" id="designerStatus">Aguardando instruções...</div>
+                    
+                    <div id="designPreview" class="design-preview" style="display:none;">
+                        <iframe id="previewFrame" src="" width="100%" height="500"></iframe>
+                        <button id="downloadRedesignBtn" class="btn btn-secondary" style="display:none;">
+                            <i class="fas fa-download"></i> Baixar Site Redesenhado
+                        </button>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- OUTREACH SECTION -->
+            <div class="agent-section" id="agent-outreach" style="display:none;">
+                <div class="agent-card">
+                    <h3><i class="fas fa-envelope"></i> Outreach - Comunicação</h3>
+                    <p class="agent-description">Envia mensagens para proprietários de sites identificados pelo Scout</p>
+                    
+                    <div class="agent-inputs">
+                        <select id="outreachTargetId" class="form-control">
+                            <option value="">Selecione um alvo do Scout...</option>
+                        </select>
+                        <textarea id="outreachMessage" class="form-control" rows="3" placeholder="Sua mensagem...">Olá! vimos o seu site e acreditamos que podemos ajudá-lo com um redesign moderno que pode aumentar suas vendas. Posso enviar uma proposta?</textarea>
+                        <button id="outreachSendBtn" class="btn btn-primary">
+                            <i class="fas fa-paper-plane"></i> Enviar Mensagem
+                        </button>
+                    </div>
+                    
+                    <div class="agent-status" id="outreachConfirmation" style="display:none;"></div>
+                    
+                    <div class="outreach-stats">
+                        <span><i class="fas fa-check"></i> Enviadas: <strong id="outreachSent">0</strong></span>
+                        <span><i class="fas fa-times"></i> Falhas: <strong id="outreachFailed">0</strong></span>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- ORCHESTRATOR SECTION -->
+            <div class="agent-section" id="agent-orchestrator" style="display:none;">
+                <div class="agent-card">
+                    <h3><i class="fas fa-tasks"></i> Orchestrator - Pipeline Completo</h3>
+                    <p class="agent-description">Executa o pipeline completo: Scout → Designer → Outreach para múltiplos alvos</p>
+                    
+                    <div class="orchestrator-info">
+                        <p><i class="fas fa-info-circle"></i> Execute primeiro o Scout para identificar alvos com score >= 7</p>
+                    </div>
+                    
+                    <button id="runPipelineBtn" class="btn btn-primary btn-lg">
+                        <i class="fas fa-play"></i> Executar Pipeline Completo
+                    </button>
+                    
+                    <div class="agent-status" id="orchestratorStatus">Aguardando...</div>
+                    
+                    <div class="progress-bar-container">
+                        <div id="orchestratorProgress" class="progress-bar" style="width:0%"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
     </main>
 
     <script src="app-new.js"></script>

web-interface/public/styles-new.css

@@ -738,3 +738,334 @@ input:checked + .slider:before {
     font-size: 1.25rem;
     margin-bottom: 0.5rem;
 }
+
+
+/* ============================================
+   BRAINSTEEL WEB - AGENTS PANEL STYLES
+   ============================================ */
+
+.agents-header {
+    text-align: center;
+    margin-bottom: 30px;
+}
+
+.agents-header h2 {
+    font-size: 28px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.agents-header p {
+    color: var(--text-secondary);
+    margin-top: 8px;
+}
+
+/* Agent Tabs */
+.agent-tabs {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 30px;
+    border-bottom: 2px solid var(--border-color);
+    padding-bottom: 10px;
+}
+
+.agent-tab-btn {
+    padding: 12px 24px;
+    border: none;
+    background: transparent;
+    color: var(--text-secondary);
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    border-radius: 8px 8px 0 0;
+    transition: var(--transition);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.agent-tab-btn:hover {
+    background: var(--bg-primary);
+    color: var(--text-primary);
+}
+
+.agent-tab-btn.active {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+}
+
+.agent-tab-btn i {
+    font-size: 16px;
+}
+
+/* Agent Cards */
+.agent-section .agent-card {
+    background: var(--bg-secondary);
+    border-radius: 16px;
+    padding: 30px;
+    box-shadow: var(--shadow-md);
+    margin-bottom: 20px;
+}
+
+.agent-card h3 {
+    font-size: 20px;
+    color: var(--text-primary);
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.agent-card h3 i {
+    color: var(--primary-color);
+}
+
+.agent-description {
+    color: var(--text-secondary);
+    margin-bottom: 25px;
+    font-size: 14px;
+}
+
+/* Agent Inputs */
+.agent-inputs {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 20px;
+    flex-wrap: wrap;
+}
+
+.agent-inputs .form-control {
+    flex: 1;
+    min-width: 200px;
+    padding: 12px 16px;
+    border: 2px solid var(--border-color);
+    border-radius: 10px;
+    font-size: 14px;
+    transition: var(--transition);
+}
+
+.agent-inputs .form-control:focus {
+    border-color: var(--primary-color);
+    outline: none;
+}
+
+.agent-inputs .btn {
+    padding: 12px 24px;
+    border-radius: 10px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+/* Agent Status */
+.agent-status {
+    padding: 12px 16px;
+    background: var(--bg-primary);
+    border-radius: 8px;
+    font-size: 14px;
+    color: var(--text-secondary);
+    margin-bottom: 20px;
+    border-left: 4px solid var(--primary-color);
+}
+
+/* Scout Results */
+.scout-results {
+    display: grid;
+    gap: 15px;
+    max-height: 500px;
+    overflow-y: auto;
+}
+
+.scout-target-card {
+    background: var(--bg-primary);
+    border-radius: 12px;
+    padding: 20px;
+    border: 1px solid var(--border-color);
+    transition: var(--transition);
+}
+
+.scout-target-card:hover {
+    border-color: var(--primary-color);
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+}
+
+.target-header {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    margin-bottom: 12px;
+}
+
+.target-score {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    font-size: 16px;
+    color: white;
+}
+
+.target-score.score-high { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
+.target-score.score-medium { background: linear-gradient(135deg, #ffa726 0%, #ff9800 100%); }
+.target-score.score-low { background: linear-gradient(135deg, #718096 0%, #546e7a 100%); }
+
+.target-info h4 {
+    font-size: 16px;
+    color: var(--text-primary);
+    margin-bottom: 4px;
+}
+
+.target-url {
+    font-size: 12px;
+    color: var(--primary-color);
+    text-decoration: none;
+}
+
+.target-body {
+    margin-bottom: 15px;
+}
+
+.target-reason {
+    font-size: 13px;
+    color: var(--text-secondary);
+    margin-bottom: 10px;
+}
+
+.target-meta {
+    display: flex;
+    gap: 15px;
+    font-size: 12px;
+    color: var(--text-light);
+}
+
+.target-meta i {
+    margin-right: 4px;
+}
+
+.target-niche {
+    background: var(--bg-secondary);
+    padding: 2px 8px;
+    border-radius: 4px;
+}
+
+.target-actions {
+    display: flex;
+    gap: 10px;
+}
+
+.target-actions .btn {
+    padding: 8px 16px;
+    font-size: 13px;
+}
+
+/* Design Preview */
+.design-preview {
+    background: var(--bg-primary);
+    border-radius: 12px;
+    padding: 15px;
+    margin-top: 20px;
+}
+
+.design-preview iframe {
+    border-radius: 8px;
+    border: 2px solid var(--border-color);
+}
+
+/* Outreach Stats */
+.outreach-stats {
+    display: flex;
+    gap: 30px;
+    margin-top: 20px;
+    padding: 15px;
+    background: var(--bg-primary);
+    border-radius: 8px;
+}
+
+.outreach-stats span {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+}
+
+.outreach-stats i {
+    font-size: 16px;
+}
+
+.outreach-stats strong {
+    font-size: 18px;
+    color: var(--text-primary);
+}
+
+/* Orchestrator */
+.orchestrator-info {
+    background: var(--bg-primary);
+    padding: 15px;
+    border-radius: 8px;
+    margin-bottom: 20px;
+    font-size: 14px;
+    color: var(--text-secondary);
+}
+
+.orchestrator-info i {
+    color: var(--info-color);
+    margin-right: 8px;
+}
+
+.btn-lg {
+    padding: 16px 32px;
+    font-size: 16px;
+}
+
+.progress-bar-container {
+    height: 8px;
+    background: var(--bg-primary);
+    border-radius: 4px;
+    margin-top: 20px;
+    overflow: hidden;
+}
+
+.progress-bar {
+    height: 100%;
+    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
+    border-radius: 4px;
+    transition: width 0.5s ease;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .agent-tabs {
+        flex-wrap: wrap;
+    }
+    
+    .agent-tab-btn {
+        flex: 1;
+        justify-content: center;
+        min-width: 100px;
+    }
+    
+    .agent-inputs {
+        flex-direction: column;
+    }
+    
+    .agent-inputs .form-control,
+    .agent-inputs .btn {
+        width: 100%;
+    }
+    
+    .target-actions {
+        flex-direction: column;
+    }
+    
+    .outreach-stats {
+        flex-direction: column;
+        gap: 15px;
+    }
+}