294 lines
15 KiB
HTML
294 lines
15 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>
|
||
|
||
<!-- Cockpit de Dosagens de Trabalho -->
|
||
<section class="cockpit-section">
|
||
<h2>🎛️ Dosagens de Trabalho <span class="badge">Cockpit do Investidor</span></h2>
|
||
<div class="cockpit-grid">
|
||
<!-- Ritmo de Análise -->
|
||
<div class="cockpit-card">
|
||
<div class="cockpit-card-header">
|
||
<span class="cockpit-icon">⏱️</span>
|
||
<h3>Ritmo de Análise</h3>
|
||
</div>
|
||
<p class="cockpit-desc">Frequência com que a equipe avalia o mercado.</p>
|
||
<div class="cockpit-options" id="freqOptions">
|
||
<button class="btn-opt" onclick="setFreq('4h')">🐢 4h <small>Posicional</small></button>
|
||
<button class="btn-opt active" onclick="setFreq('1h')">🚶 1h <small>Padrão</small></button>
|
||
<button class="btn-opt" onclick="setFreq('15m')">⚡ 15m <small>Scalp</small></button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Apetite ao Risco -->
|
||
<div class="cockpit-card">
|
||
<div class="cockpit-card-header">
|
||
<span class="cockpit-icon">🛡️</span>
|
||
<h3>Apetite ao Risco</h3>
|
||
</div>
|
||
<p class="cockpit-desc">Nível de exigência do CEO Décio para operar.</p>
|
||
<div class="cockpit-options" id="riskOptions">
|
||
<button class="btn-opt" onclick="setRisk(75)">🔒 75% <small>Conservador</small></button>
|
||
<button class="btn-opt active" onclick="setRisk(70)">⚖️ 70% <small>Moderado</small></button>
|
||
<button class="btn-opt" onclick="setRisk(60)">💥 60% <small>Agressivo</small></button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Capital e Alocação -->
|
||
<div class="cockpit-card">
|
||
<div class="cockpit-card-header">
|
||
<span class="cockpit-icon">💰</span>
|
||
<h3>Banca & Alocação</h3>
|
||
</div>
|
||
<p class="cockpit-desc">Capital virtual e limite de risco por trade.</p>
|
||
<div class="cockpit-inputs">
|
||
<label>Banca (USDT)
|
||
<input type="number" id="cockpitCapital" value="10000" onchange="saveConfigDebounced()">
|
||
</label>
|
||
<label>Mão Máx (%)
|
||
<input type="number" id="cockpitMaxAlloc" value="25" min="5" max="100" onchange="saveConfigDebounced()">
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Balança Técnica vs Sentimento -->
|
||
<div class="cockpit-card">
|
||
<div class="cockpit-card-header">
|
||
<span class="cockpit-icon">⚖️</span>
|
||
<h3>Balança de Pesos</h3>
|
||
</div>
|
||
<p class="cockpit-desc">Foco analítico: Técnica pura vs Sentimento/Macro.</p>
|
||
<div class="cockpit-slider-wrap">
|
||
<div class="slider-labels">
|
||
<span>◄ Técnica (Gráficos)</span>
|
||
<span>Sentimento (Macro) ►</span>
|
||
</div>
|
||
<input type="range" id="cockpitWeight" min="0" max="100" value="50" onchange="saveConfigDebounced()" oninput="updateWeightLabel(this.value)">
|
||
<div class="slider-val" id="weightValLabel">Equilíbrio (50/50)</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="cockpit-footer">
|
||
<span id="cockpitSaveStatus" class="save-status"></span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Performance Multi-Estratégia (Corrida do Alpha) -->
|
||
<section class="multistrat-section">
|
||
<div class="multistrat-header">
|
||
<h2>📈 Performance Multi-Estratégia <span class="badge">A Corrida do Alpha</span></h2>
|
||
<div class="multistrat-controls">
|
||
<button class="btn-strat active" onclick="loadMultiStratChart('live')">🔴 Ao Vivo</button>
|
||
<button class="btn-strat" onclick="loadMultiStratChart(30)">📅 30 Dias</button>
|
||
<button class="btn-strat" onclick="loadMultiStratChart(60)">📅 60 Dias</button>
|
||
<button class="btn-strat" onclick="loadMultiStratChart(90)">📅 90 Dias</button>
|
||
</div>
|
||
</div>
|
||
<div class="multistrat-legend">
|
||
<span class="legend-item"><span class="legend-dot" style="background:#69f0ae"></span> Soberana (Décio) <b id="legSoberana">$10.000</b></span>
|
||
<span class="legend-item"><span class="legend-dot" style="background:#4fc3f7"></span> Agressiva (Brief) <b id="legAgressiva">$10.000</b></span>
|
||
<span class="legend-item"><span class="legend-dot" style="background:#ffd54f"></span> HODL (BTC Puro) <b id="legHodl">$10.000</b></span>
|
||
<span class="legend-item"><span class="legend-dot" style="background:#b388ff"></span> Sentimento (F&G) <b id="legSentimento">50%</b></span>
|
||
</div>
|
||
<div class="multistrat-chart-wrap">
|
||
<canvas id="multiStratCanvas" width="900" height="260"></canvas>
|
||
</div>
|
||
<div id="multistratSpinner" class="strat-spinner" style="display:none;">⚙️ Calculando máquina do tempo (Backtest Binance)...</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> |