Hermes - BrainSteel VPS
50960bab21
- Brief: Market Intelligence (Binance data + LLM analysis) - Decio: Strategy decision (BUY/HOLD/SELL) - PaperT: Order executor (Binance API) - Anime-style Flask dashboard - Traefik-ready Docker deployment
213 lines
9.7 KiB
HTML
213 lines
9.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="pt-BR">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>BrainSteel Fin — Agent Office</title>
|
||
<link rel="stylesheet" href="/static/style.css">
|
||
<link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@400;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">
|
||
</head>
|
||
<body>
|
||
<div class="dashboard">
|
||
<!-- Header -->
|
||
<header class="header">
|
||
<div class="logo">
|
||
<span class="logo-icon">🏢</span>
|
||
<span class="logo-text">BrainSteel <strong>Fin</strong></span>
|
||
</div>
|
||
<div class="header-status">
|
||
<span class="status-dot" id="statusDot"></span>
|
||
<span id="statusText">Sistema online</span>
|
||
</div>
|
||
<div class="header-time" id="clock"></div>
|
||
</header>
|
||
|
||
<!-- Pipeline Flow -->
|
||
<section class="pipeline-section">
|
||
<h2>📊 Pipeline de Trading</h2>
|
||
<div class="pipeline-flow" id="pipelineFlow">
|
||
<!-- Nodes injected by JS -->
|
||
</div>
|
||
<div class="pipeline-controls">
|
||
<button class="btn btn-primary" id="btnRun" onclick="runPipeline()">
|
||
▶ Executar Pipeline
|
||
</button>
|
||
<button class="btn btn-secondary" onclick="toggleAuto()">
|
||
⏱ Auto: <span id="autoStatus">OFF</span>
|
||
</button>
|
||
<button class="btn btn-secondary" onclick="showHistory()">📊 Histórico</button>
|
||
</div>
|
||
<div id="lastDecisionBanner" class="decision-banner" style="display:none;"></div>
|
||
</section>
|
||
|
||
<!-- Office Floor -->
|
||
<section class="office-section">
|
||
<h2>🏠 Escritório Virtual</h2>
|
||
<div class="office-floor">
|
||
<div class="floor-grid" id="agentDesks">
|
||
<!-- Agent desks injected by JS -->
|
||
</div>
|
||
<div class="chat-bubble" id="chatBubble">
|
||
<span id="chatText">Olá! Eu sou o escritório virtual da BrainSteel Fin.</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Item 1: Agent Registry -->
|
||
<section class="registry-section">
|
||
<h2>👥 Cadastro de Agentes</h2>
|
||
<div class="registry-controls">
|
||
<button class="btn btn-small" onclick="showAddAgent()">+ Novo Agente</button>
|
||
<button class="btn btn-small btn-secondary" onclick="loadAgentRegistry()">↻ Atualizar</button>
|
||
</div>
|
||
<div class="agent-cards" id="agentCards">
|
||
<!-- Agent cards injected by JS -->
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Item 2 & 3: Metrics + Services -->
|
||
<div class="two-col-section">
|
||
<section class="metrics-section">
|
||
<h2>📈 Métricas de Agentes</h2>
|
||
<div class="metrics-grid" id="metricsGrid">
|
||
<!-- Metrics injected by JS -->
|
||
</div>
|
||
</section>
|
||
<section class="services-section">
|
||
<h2>🔌 Serviços</h2>
|
||
<div class="services-controls">
|
||
<button class="btn btn-small" onclick="showAddService()">+ Novo Serviço</button>
|
||
<button class="btn btn-small btn-secondary" onclick="pingAllServices()">🏓 Ping Todos</button>
|
||
</div>
|
||
<div class="services-list" id="servicesList">
|
||
<!-- Services injected by JS -->
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<!-- Item 4: Pipeline Visual -->
|
||
<section class="visual-section">
|
||
<h2>🔭 Pipeline Visual em Tempo Real</h2>
|
||
<div class="visual-container">
|
||
<div class="visual-flow" id="visualFlow">
|
||
<!-- Visual pipeline injected by JS -->
|
||
</div>
|
||
<div class="visual-timeline" id="visualTimeline">
|
||
<!-- Timeline injected by JS -->
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Portfolio Simulator -->
|
||
<section class="portfolio-section">
|
||
<div class="portfolio-header">
|
||
<h2>💹 Portfolio Simulado</h2>
|
||
<div class="portfolio-summary" id="portfolioSummary">
|
||
<span class="portfolio-balance" id="pfBalance">$10.000,00</span>
|
||
<span class="portfolio-pnl" id="pfPnl">P&L: $0,00 (0%)</span>
|
||
<span class="portfolio-trades" id="pfTrades">0 trades | 0% Win Rate</span>
|
||
</div>
|
||
<div class="portfolio-actions">
|
||
<button class="btn btn-small" onclick="resetPortfolio()">↺ Reset</button>
|
||
</div>
|
||
</div>
|
||
<div class="portfolio-chart" id="portfolioChart">
|
||
<canvas id="chartCanvas" width="800" height="200"></canvas>
|
||
</div>
|
||
<div class="portfolio-trades-list" id="portfolioTrades">
|
||
<!-- Recent trades injected by JS -->
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Token Tracker -->
|
||
<section class="tokens-section">
|
||
<h2>🧮 Tokens por Agente</h2>
|
||
<div class="tokens-controls">
|
||
<label>Dias: <select id="tokenDays" onchange="loadTokenChart()">
|
||
<option value="3">3 dias</option>
|
||
<option value="7" selected>7 dias</option>
|
||
<option value="14">14 dias</option>
|
||
<option value="30">30 dias</option>
|
||
</select></label>
|
||
<span id="tokenTotals"></span>
|
||
</div>
|
||
<div class="tokens-chart-wrap">
|
||
<canvas id="tokenChart" width="800" height="200"></canvas>
|
||
</div>
|
||
<div class="tokens-table-wrap">
|
||
<table class="tokens-table" id="tokenTotalsTable">
|
||
<thead><tr><th>Agente</th><th>Prompt</th><th>Completion</th><th>Total</th><th>Chamadas</th><th>Custo</th></tr></thead>
|
||
<tbody id="tokenTotalsBody"></tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Activity Log -->
|
||
<section class="log-section">
|
||
<h2>📝 Log de Atividades</h2>
|
||
<div class="log-container" id="logContainer">
|
||
<div class="log-entry system">
|
||
<span class="log-time">--:--</span>
|
||
<span class="log-agent">SYS</span>
|
||
<span class="log-message">Aguardando primeira execução...</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Modals -->
|
||
<div class="modal" id="modalHistory" style="display:none;">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3>📊 Histórico de Execuções</h3>
|
||
<button class="modal-close" onclick="closeHistory()">×</button>
|
||
</div>
|
||
<div class="modal-body" id="historyContent">
|
||
<div class="history-item"><span class="history-time">Carregando...</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal" id="modalAgent" style="display:none;">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3 id="modalAgentTitle">Novo Agente</h3>
|
||
<button class="modal-close" onclick="closeAgent()">×</button>
|
||
</div>
|
||
<div class="modal-body" id="modalAgentBody">
|
||
<label>ID (slug)</label><input type="text" id="agentId" placeholder="ex: brief">
|
||
<label>Nome</label><input type="text" id="agentName" placeholder="ex: Brief">
|
||
<label>Role</label><input type="text" id="agentRole" placeholder="ex: Market Intelligence">
|
||
<label>Intenção (o que faz)</label><textarea id="agentIntent" rows="3" placeholder="Descrição da intenção do agente..."></textarea>
|
||
<label>Modelo</label><input type="text" id="agentModel" placeholder="ex: google/gemma-4-31b-it:free">
|
||
<label>Provider</label><input type="text" id="agentProvider" placeholder="ex: openrouter">
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-primary" onclick="saveAgent()">Salvar</button>
|
||
<button class="btn btn-secondary" onclick="closeAgent()">Cancelar</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal" id="modalService" style="display:none;">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3>Novo Serviço</h3>
|
||
<button class="modal-close" onclick="closeService()">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<label>Nome</label><input type="text" id="serviceName" placeholder="ex: Binance API">
|
||
<label>Tipo</label><input type="text" id="serviceType" placeholder="ex: exchange, news, data">
|
||
<label>Endpoint</label><input type="text" id="serviceEndpoint" placeholder="ex: https://api.binance.com">
|
||
<label>Status</label><input type="text" id="serviceStatus" placeholder="ex: active">
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-primary" onclick="saveService()">Salvar</button>
|
||
<button class="btn btn-secondary" onclick="closeService()">Cancelar</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="/static/script.js"></script>
|
||
</body>
|
||
</html> |