feat: adicionar painel Agentes BrainSteel Web (Scout, Designer, Outreach, Orchestrator)
This commit is contained in:
Hermes
@@ -6,6 +6,7 @@
|
||||
<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">
|
||||
<script src="agents-panel.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Sidebar -->
|
||||
@@ -28,6 +29,11 @@
|
||||
<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="settings">
|
||||
<i class="fas fa-cog"></i>
|
||||
<span>Configurações</span>
|
||||
@@ -290,6 +296,124 @@
|
||||
</div>
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user