a063bd9d10
Some checks failed
CI / test (pull_request) Has been cancelled
- /api/status 응답에 MODE 환경변수 기반 mode 필드 추가 - 대시보드 헤더에 모드 배지 표시 (live=빨간색 깜빡임, paper=노란색) - 모드 관련 테스트 3개 추가 (total 26 passed) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
799 lines
33 KiB
HTML
799 lines
33 KiB
HTML
<!doctype html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>The Ouroboros Dashboard</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
|
|
<style>
|
|
:root {
|
|
--bg: #0b1724;
|
|
--panel: #12263a;
|
|
--fg: #e6eef7;
|
|
--muted: #9fb3c8;
|
|
--accent: #3cb371;
|
|
--red: #e05555;
|
|
--warn: #e8a040;
|
|
--border: #28455f;
|
|
}
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body {
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
background: radial-gradient(circle at top left, #173b58, var(--bg));
|
|
color: var(--fg);
|
|
min-height: 100vh;
|
|
font-size: 13px;
|
|
}
|
|
.wrap { max-width: 1100px; margin: 0 auto; padding: 20px 16px; }
|
|
|
|
/* Header */
|
|
header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 20px;
|
|
padding-bottom: 12px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
header h1 { font-size: 18px; color: var(--accent); letter-spacing: 0.5px; }
|
|
.header-right { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; }
|
|
.refresh-btn {
|
|
background: none; border: 1px solid var(--border); color: var(--muted);
|
|
padding: 4px 10px; border-radius: 6px; cursor: pointer; font-family: inherit;
|
|
font-size: 12px; transition: border-color 0.2s;
|
|
}
|
|
.refresh-btn:hover { border-color: var(--accent); color: var(--accent); }
|
|
.mode-badge {
|
|
padding: 3px 10px; border-radius: 5px; font-size: 12px; font-weight: 700;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
.mode-badge.live {
|
|
background: rgba(224, 85, 85, 0.15); color: var(--red);
|
|
border: 1px solid rgba(224, 85, 85, 0.4);
|
|
animation: pulse-warn 2s ease-in-out infinite;
|
|
}
|
|
.mode-badge.paper {
|
|
background: rgba(232, 160, 64, 0.15); color: var(--warn);
|
|
border: 1px solid rgba(232, 160, 64, 0.4);
|
|
}
|
|
|
|
/* CB Gauge */
|
|
.cb-gauge-wrap {
|
|
display: flex; align-items: center; gap: 8px;
|
|
font-size: 11px; color: var(--muted);
|
|
}
|
|
.cb-dot {
|
|
width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
|
|
}
|
|
.cb-dot.ok { background: var(--accent); }
|
|
.cb-dot.warning { background: var(--warn); animation: pulse-warn 1.2s ease-in-out infinite; }
|
|
.cb-dot.tripped { background: var(--red); animation: pulse-warn 0.6s ease-in-out infinite; }
|
|
.cb-dot.unknown { background: var(--border); }
|
|
@keyframes pulse-warn {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.35; }
|
|
}
|
|
.cb-bar-wrap { width: 64px; height: 5px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; }
|
|
.cb-bar-fill { height: 100%; border-radius: 3px; transition: width 0.4s, background 0.4s; }
|
|
|
|
/* Summary cards */
|
|
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
|
|
@media (max-width: 700px) { .cards { grid-template-columns: repeat(2, 1fr); } }
|
|
.card {
|
|
background: var(--panel);
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
padding: 16px;
|
|
}
|
|
.card-label { color: var(--muted); font-size: 11px; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
|
|
.card-value { font-size: 22px; font-weight: 700; }
|
|
.card-sub { color: var(--muted); font-size: 11px; margin-top: 4px; }
|
|
.positive { color: var(--accent); }
|
|
.negative { color: var(--red); }
|
|
.neutral { color: var(--fg); }
|
|
|
|
/* Chart panel */
|
|
.chart-panel {
|
|
background: var(--panel);
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
padding: 16px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.panel-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 16px;
|
|
}
|
|
.panel-title { font-size: 13px; color: var(--muted); font-weight: 600; }
|
|
.chart-container { position: relative; height: 180px; }
|
|
.chart-error { color: var(--muted); text-align: center; padding: 40px 0; font-size: 12px; }
|
|
|
|
/* Days selector */
|
|
.days-selector { display: flex; gap: 4px; }
|
|
.day-btn {
|
|
background: none; border: 1px solid var(--border); color: var(--muted);
|
|
padding: 3px 8px; border-radius: 4px; cursor: pointer; font-family: inherit; font-size: 11px;
|
|
}
|
|
.day-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(60, 179, 113, 0.08); }
|
|
|
|
/* Decisions panel */
|
|
.decisions-panel {
|
|
background: var(--panel);
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
padding: 16px;
|
|
}
|
|
.market-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
|
|
.tab-btn {
|
|
background: none; border: 1px solid var(--border); color: var(--muted);
|
|
padding: 4px 10px; border-radius: 6px; cursor: pointer; font-family: inherit; font-size: 11px;
|
|
}
|
|
.tab-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(60, 179, 113, 0.08); }
|
|
.decisions-table { width: 100%; border-collapse: collapse; margin-top: 14px; }
|
|
.decisions-table th {
|
|
text-align: left; color: var(--muted); font-size: 11px; font-weight: 600;
|
|
padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap;
|
|
}
|
|
.decisions-table td {
|
|
padding: 8px 8px; border-bottom: 1px solid rgba(40, 69, 95, 0.5);
|
|
vertical-align: middle; white-space: nowrap;
|
|
}
|
|
.decisions-table tr:last-child td { border-bottom: none; }
|
|
.decisions-table tr:hover td { background: rgba(255,255,255,0.02); }
|
|
.badge {
|
|
display: inline-block; padding: 2px 7px; border-radius: 4px;
|
|
font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
|
|
}
|
|
.badge-buy { background: rgba(60, 179, 113, 0.15); color: var(--accent); }
|
|
.badge-sell { background: rgba(224, 85, 85, 0.15); color: var(--red); }
|
|
.badge-hold { background: rgba(159, 179, 200, 0.12); color: var(--muted); }
|
|
.conf-bar-wrap { display: flex; align-items: center; gap: 6px; min-width: 90px; }
|
|
.conf-bar { flex: 1; height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; }
|
|
.conf-fill { height: 100%; border-radius: 3px; background: var(--accent); transition: width 0.3s; }
|
|
.conf-val { color: var(--muted); font-size: 11px; min-width: 26px; text-align: right; }
|
|
.rationale-cell { max-width: 200px; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
|
|
.empty-row td { text-align: center; color: var(--muted); padding: 24px; }
|
|
|
|
/* Positions panel */
|
|
.positions-panel {
|
|
background: var(--panel);
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
padding: 16px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.positions-table { width: 100%; border-collapse: collapse; margin-top: 14px; }
|
|
.positions-table th {
|
|
text-align: left; color: var(--muted); font-size: 11px; font-weight: 600;
|
|
padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap;
|
|
}
|
|
.positions-table td {
|
|
padding: 8px 8px; border-bottom: 1px solid rgba(40, 69, 95, 0.5);
|
|
vertical-align: middle; white-space: nowrap;
|
|
}
|
|
.positions-table tr:last-child td { border-bottom: none; }
|
|
.positions-table tr:hover td { background: rgba(255,255,255,0.02); }
|
|
.pos-empty { color: var(--muted); text-align: center; padding: 20px 0; font-size: 12px; }
|
|
.pos-count {
|
|
display: inline-block; background: rgba(60, 179, 113, 0.12);
|
|
color: var(--accent); font-size: 11px; font-weight: 700;
|
|
padding: 2px 8px; border-radius: 10px; margin-left: 8px;
|
|
}
|
|
|
|
/* Spinner */
|
|
.spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
|
|
/* Generic panel */
|
|
.panel {
|
|
background: var(--panel);
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
padding: 16px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
/* Playbook panel - details/summary accordion */
|
|
.playbook-panel details { border: 1px solid var(--border); border-radius: 4px; margin-bottom: 6px; }
|
|
.playbook-panel summary { padding: 8px 12px; cursor: pointer; font-weight: 600; background: var(--bg); color: var(--fg); }
|
|
.playbook-panel summary:hover { color: var(--accent); }
|
|
.playbook-panel pre { margin: 0; padding: 12px; background: var(--bg); overflow-x: auto;
|
|
font-size: 11px; color: #a0c4ff; white-space: pre-wrap; }
|
|
|
|
/* Scorecard KPI card grid */
|
|
.scorecard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
|
|
.kpi-card { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 12px; text-align: center; }
|
|
.kpi-card .kpi-label { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
|
|
.kpi-card .kpi-value { font-size: 20px; font-weight: 700; color: var(--fg); }
|
|
|
|
/* Scenarios table */
|
|
.scenarios-table { width: 100%; border-collapse: collapse; font-size: 13px; }
|
|
.scenarios-table th { background: var(--bg); padding: 8px; text-align: left; border-bottom: 1px solid var(--border);
|
|
color: var(--muted); font-size: 11px; font-weight: 600; white-space: nowrap; }
|
|
.scenarios-table td { padding: 7px 8px; border-bottom: 1px solid rgba(40,69,95,0.5); }
|
|
.scenarios-table tr:hover td { background: rgba(255,255,255,0.02); }
|
|
|
|
/* Context table */
|
|
.context-table { width: 100%; border-collapse: collapse; font-size: 12px; }
|
|
.context-table th { background: var(--bg); padding: 8px; text-align: left; border-bottom: 1px solid var(--border);
|
|
color: var(--muted); font-size: 11px; font-weight: 600; white-space: nowrap; }
|
|
.context-table td { padding: 6px 8px; border-bottom: 1px solid rgba(40,69,95,0.5); vertical-align: top; }
|
|
.context-value { max-height: 60px; overflow-y: auto; color: #a0c4ff; word-break: break-all; }
|
|
|
|
/* Common panel select controls */
|
|
.panel-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
|
|
.panel-controls select, .panel-controls input[type="number"] {
|
|
background: var(--bg); color: var(--fg); border: 1px solid var(--border);
|
|
border-radius: 4px; padding: 4px 8px; font-size: 13px; font-family: inherit;
|
|
}
|
|
.panel-date { color: var(--muted); font-size: 12px; }
|
|
.empty-msg { color: var(--muted); text-align: center; padding: 20px 0; font-size: 12px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
<!-- Header -->
|
|
<header>
|
|
<h1>🐍 The Ouroboros</h1>
|
|
<div class="header-right">
|
|
<span class="mode-badge" id="mode-badge">--</span>
|
|
<div class="cb-gauge-wrap" id="cb-gauge" title="Circuit Breaker">
|
|
<span class="cb-dot unknown" id="cb-dot"></span>
|
|
<span id="cb-label">CB --</span>
|
|
<div class="cb-bar-wrap">
|
|
<div class="cb-bar-fill" id="cb-bar" style="width:0%;background:var(--accent)"></div>
|
|
</div>
|
|
</div>
|
|
<span id="last-updated">--</span>
|
|
<button class="refresh-btn" onclick="refreshAll()">↺ 새로고침</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Summary cards -->
|
|
<div class="cards">
|
|
<div class="card">
|
|
<div class="card-label">오늘 거래</div>
|
|
<div class="card-value neutral" id="card-trades">--</div>
|
|
<div class="card-sub" id="card-trades-sub">거래 건수</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-label">오늘 P&L</div>
|
|
<div class="card-value" id="card-pnl">--</div>
|
|
<div class="card-sub" id="card-pnl-sub">실현 손익</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-label">승률</div>
|
|
<div class="card-value neutral" id="card-winrate">--</div>
|
|
<div class="card-sub">전체 누적</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-label">누적 거래</div>
|
|
<div class="card-value neutral" id="card-total">--</div>
|
|
<div class="card-sub">전체 기간</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Open Positions -->
|
|
<div class="positions-panel">
|
|
<div class="panel-header">
|
|
<span class="panel-title">
|
|
현재 보유 포지션
|
|
<span class="pos-count" id="positions-count">0</span>
|
|
</span>
|
|
</div>
|
|
<table class="positions-table">
|
|
<thead>
|
|
<tr>
|
|
<th>종목</th>
|
|
<th>시장</th>
|
|
<th>수량</th>
|
|
<th>진입가</th>
|
|
<th>보유 시간</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="positions-body">
|
|
<tr><td colspan="5" class="pos-empty"><span class="spinner"></span></td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- P&L Chart -->
|
|
<div class="chart-panel">
|
|
<div class="panel-header">
|
|
<span class="panel-title">P&L 추이</span>
|
|
<div class="days-selector">
|
|
<button class="day-btn active" data-days="7" onclick="selectDays(this)">7일</button>
|
|
<button class="day-btn" data-days="30" onclick="selectDays(this)">30일</button>
|
|
<button class="day-btn" data-days="90" onclick="selectDays(this)">90일</button>
|
|
</div>
|
|
</div>
|
|
<div class="chart-container">
|
|
<canvas id="pnl-chart"></canvas>
|
|
<div class="chart-error" id="chart-error" style="display:none">데이터 없음</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Decisions log -->
|
|
<div class="decisions-panel">
|
|
<div class="panel-header">
|
|
<span class="panel-title">최근 결정 로그</span>
|
|
<div class="market-tabs" id="market-tabs">
|
|
<button class="tab-btn active" data-market="KR" onclick="selectMarket(this)">KR</button>
|
|
<button class="tab-btn" data-market="US_NASDAQ" onclick="selectMarket(this)">US_NASDAQ</button>
|
|
<button class="tab-btn" data-market="US_NYSE" onclick="selectMarket(this)">US_NYSE</button>
|
|
<button class="tab-btn" data-market="JP" onclick="selectMarket(this)">JP</button>
|
|
<button class="tab-btn" data-market="HK" onclick="selectMarket(this)">HK</button>
|
|
</div>
|
|
</div>
|
|
<table class="decisions-table">
|
|
<thead>
|
|
<tr>
|
|
<th>시각</th>
|
|
<th>종목</th>
|
|
<th>액션</th>
|
|
<th>신뢰도</th>
|
|
<th>사유</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="decisions-body">
|
|
<tr class="empty-row"><td colspan="5"><span class="spinner"></span></td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- playbook panel -->
|
|
<div class="panel playbook-panel">
|
|
<div class="panel-header">
|
|
<span class="panel-title">📋 프리마켓 플레이북</span>
|
|
<div class="panel-controls">
|
|
<select id="pb-market-select" onchange="fetchPlaybook()">
|
|
<option value="KR">KR</option>
|
|
<option value="US_NASDAQ">US_NASDAQ</option>
|
|
<option value="US_NYSE">US_NYSE</option>
|
|
</select>
|
|
<span id="pb-date" class="panel-date"></span>
|
|
</div>
|
|
</div>
|
|
<div id="playbook-content"><p class="empty-msg">데이터 없음</p></div>
|
|
</div>
|
|
|
|
<!-- scorecard panel -->
|
|
<div class="panel">
|
|
<div class="panel-header">
|
|
<span class="panel-title">📊 일간 스코어카드</span>
|
|
<div class="panel-controls">
|
|
<select id="sc-market-select" onchange="fetchScorecard()">
|
|
<option value="KR">KR</option>
|
|
<option value="US_NASDAQ">US_NASDAQ</option>
|
|
</select>
|
|
<span id="sc-date" class="panel-date"></span>
|
|
</div>
|
|
</div>
|
|
<div id="scorecard-grid" class="scorecard-grid"><p class="empty-msg">데이터 없음</p></div>
|
|
</div>
|
|
|
|
<!-- scenarios panel -->
|
|
<div class="panel">
|
|
<div class="panel-header">
|
|
<span class="panel-title">🎯 활성 시나리오 매칭</span>
|
|
<div class="panel-controls">
|
|
<select id="scen-market-select" onchange="fetchScenarios()">
|
|
<option value="KR">KR</option>
|
|
<option value="US_NASDAQ">US_NASDAQ</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div id="scenarios-content"><p class="empty-msg">데이터 없음</p></div>
|
|
</div>
|
|
|
|
<!-- context layer panel -->
|
|
<div class="panel">
|
|
<div class="panel-header">
|
|
<span class="panel-title">🧠 컨텍스트 트리</span>
|
|
<div class="panel-controls">
|
|
<select id="ctx-layer-select" onchange="fetchContext()">
|
|
<option value="L7_REALTIME">L7_REALTIME</option>
|
|
<option value="L6_DAILY">L6_DAILY</option>
|
|
<option value="L5_WEEKLY">L5_WEEKLY</option>
|
|
<option value="L4_MONTHLY">L4_MONTHLY</option>
|
|
<option value="L3_QUARTERLY">L3_QUARTERLY</option>
|
|
<option value="L2_YEARLY">L2_YEARLY</option>
|
|
<option value="L1_LIFETIME">L1_LIFETIME</option>
|
|
</select>
|
|
<input id="ctx-limit" type="number" value="20" min="1" max="200"
|
|
style="width:60px;" onchange="fetchContext()">
|
|
</div>
|
|
</div>
|
|
<div id="context-content"><p class="empty-msg">데이터 없음</p></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let pnlChart = null;
|
|
let currentDays = 7;
|
|
let currentMarket = 'KR';
|
|
|
|
function fmt(dt) {
|
|
try {
|
|
const d = new Date(dt);
|
|
return d.toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit', hour12: false });
|
|
} catch { return dt || '--'; }
|
|
}
|
|
|
|
function fmtPnl(v) {
|
|
if (v === null || v === undefined) return '--';
|
|
const n = parseFloat(v);
|
|
const cls = n > 0 ? 'positive' : n < 0 ? 'negative' : 'neutral';
|
|
const sign = n > 0 ? '+' : '';
|
|
return `<span class="${cls}">${sign}${n.toFixed(2)}</span>`;
|
|
}
|
|
|
|
function badge(action) {
|
|
const a = (action || '').toUpperCase();
|
|
const cls = a === 'BUY' ? 'badge-buy' : a === 'SELL' ? 'badge-sell' : 'badge-hold';
|
|
return `<span class="badge ${cls}">${a}</span>`;
|
|
}
|
|
|
|
function confBar(conf) {
|
|
const pct = Math.min(Math.max(conf || 0, 0), 100);
|
|
return `<div class="conf-bar-wrap">
|
|
<div class="conf-bar"><div class="conf-fill" style="width:${pct}%"></div></div>
|
|
<span class="conf-val">${pct}</span>
|
|
</div>`;
|
|
}
|
|
|
|
function fmtPrice(v, market) {
|
|
if (v === null || v === undefined) return '--';
|
|
const n = parseFloat(v);
|
|
const sym = market === 'KR' ? '₩' : market === 'JP' ? '¥' : market === 'HK' ? 'HK$' : '$';
|
|
return sym + n.toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 4 });
|
|
}
|
|
|
|
async function fetchPositions() {
|
|
const tbody = document.getElementById('positions-body');
|
|
const countEl = document.getElementById('positions-count');
|
|
try {
|
|
const r = await fetch('/api/positions');
|
|
if (!r.ok) throw new Error('fetch failed');
|
|
const d = await r.json();
|
|
countEl.textContent = d.count ?? 0;
|
|
if (!d.positions || d.positions.length === 0) {
|
|
tbody.innerHTML = '<tr><td colspan="5" class="pos-empty">현재 보유 중인 포지션 없음</td></tr>';
|
|
return;
|
|
}
|
|
tbody.innerHTML = d.positions.map(p => `
|
|
<tr>
|
|
<td><strong>${p.stock_code || '--'}</strong></td>
|
|
<td><span style="color:var(--muted);font-size:11px">${p.market || '--'}</span></td>
|
|
<td>${p.quantity ?? '--'}</td>
|
|
<td>${fmtPrice(p.entry_price, p.market)}</td>
|
|
<td style="color:var(--muted);font-size:11px">${p.held || '--'}</td>
|
|
</tr>
|
|
`).join('');
|
|
} catch {
|
|
tbody.innerHTML = '<tr><td colspan="5" class="pos-empty">데이터 로드 실패</td></tr>';
|
|
}
|
|
}
|
|
|
|
function renderCbGauge(cb) {
|
|
if (!cb) return;
|
|
const dot = document.getElementById('cb-dot');
|
|
const label = document.getElementById('cb-label');
|
|
const bar = document.getElementById('cb-bar');
|
|
|
|
const status = cb.status || 'unknown';
|
|
const threshold = cb.threshold_pct ?? -3.0;
|
|
const current = cb.current_pnl_pct;
|
|
|
|
// dot color
|
|
dot.className = `cb-dot ${status}`;
|
|
|
|
// label
|
|
if (current !== null && current !== undefined) {
|
|
const sign = current > 0 ? '+' : '';
|
|
label.textContent = `CB ${sign}${current.toFixed(2)}%`;
|
|
} else {
|
|
label.textContent = 'CB --';
|
|
}
|
|
|
|
// bar: fill = how much of the threshold has been consumed (0%=safe, 100%=tripped)
|
|
const colorMap = { ok: 'var(--accent)', warning: 'var(--warn)', tripped: 'var(--red)', unknown: 'var(--border)' };
|
|
bar.style.background = colorMap[status] || 'var(--border)';
|
|
if (current !== null && current !== undefined && threshold < 0) {
|
|
const fillPct = Math.min(Math.max((current / threshold) * 100, 0), 100);
|
|
bar.style.width = `${fillPct}%`;
|
|
} else {
|
|
bar.style.width = '0%';
|
|
}
|
|
}
|
|
|
|
async function fetchStatus() {
|
|
try {
|
|
const r = await fetch('/api/status');
|
|
if (!r.ok) return;
|
|
const d = await r.json();
|
|
const t = d.totals || {};
|
|
document.getElementById('card-trades').textContent = t.trade_count ?? '--';
|
|
const pnlEl = document.getElementById('card-pnl');
|
|
const pnlV = t.total_pnl;
|
|
if (pnlV !== undefined) {
|
|
const n = parseFloat(pnlV);
|
|
const sign = n > 0 ? '+' : '';
|
|
pnlEl.textContent = `${sign}${n.toFixed(2)}`;
|
|
pnlEl.className = `card-value ${n > 0 ? 'positive' : n < 0 ? 'negative' : 'neutral'}`;
|
|
}
|
|
document.getElementById('card-pnl-sub').textContent = `결정 ${t.decision_count ?? 0}건`;
|
|
renderCbGauge(d.circuit_breaker);
|
|
renderModeBadge(d.mode);
|
|
} catch {}
|
|
}
|
|
|
|
function renderModeBadge(mode) {
|
|
const el = document.getElementById('mode-badge');
|
|
if (!el) return;
|
|
if (mode === 'live') {
|
|
el.textContent = '🔴 실전투자';
|
|
el.className = 'mode-badge live';
|
|
} else {
|
|
el.textContent = '🟡 모의투자';
|
|
el.className = 'mode-badge paper';
|
|
}
|
|
}
|
|
|
|
async function fetchPerformance() {
|
|
try {
|
|
const r = await fetch('/api/performance?market=all');
|
|
if (!r.ok) return;
|
|
const d = await r.json();
|
|
const c = d.combined || {};
|
|
document.getElementById('card-winrate').textContent = c.win_rate !== undefined ? `${c.win_rate}%` : '--';
|
|
document.getElementById('card-total').textContent = c.total_trades ?? '--';
|
|
} catch {}
|
|
}
|
|
|
|
async function fetchPnlHistory(days) {
|
|
try {
|
|
const r = await fetch(`/api/pnl/history?days=${days}`);
|
|
if (!r.ok) throw new Error('fetch failed');
|
|
const d = await r.json();
|
|
renderChart(d);
|
|
} catch {
|
|
document.getElementById('chart-error').style.display = 'block';
|
|
}
|
|
}
|
|
|
|
function renderChart(data) {
|
|
const errEl = document.getElementById('chart-error');
|
|
if (!data.labels || data.labels.length === 0) {
|
|
errEl.style.display = 'block';
|
|
return;
|
|
}
|
|
errEl.style.display = 'none';
|
|
|
|
const colors = data.pnl.map(v => v >= 0 ? 'rgba(60,179,113,0.75)' : 'rgba(224,85,85,0.75)');
|
|
const borderColors = data.pnl.map(v => v >= 0 ? '#3cb371' : '#e05555');
|
|
|
|
if (pnlChart) { pnlChart.destroy(); pnlChart = null; }
|
|
const ctx = document.getElementById('pnl-chart').getContext('2d');
|
|
pnlChart = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: data.labels,
|
|
datasets: [{
|
|
label: 'Daily P&L',
|
|
data: data.pnl,
|
|
backgroundColor: colors,
|
|
borderColor: borderColors,
|
|
borderWidth: 1,
|
|
borderRadius: 3,
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: { display: false },
|
|
tooltip: {
|
|
callbacks: {
|
|
label: ctx => {
|
|
const v = ctx.parsed.y;
|
|
const sign = v >= 0 ? '+' : '';
|
|
const trades = data.trades[ctx.dataIndex];
|
|
return [`P&L: ${sign}${v.toFixed(2)}`, `거래: ${trades}건`];
|
|
}
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
ticks: { color: '#9fb3c8', font: { size: 10 }, maxRotation: 0 },
|
|
grid: { color: 'rgba(40,69,95,0.4)' }
|
|
},
|
|
y: {
|
|
ticks: { color: '#9fb3c8', font: { size: 10 } },
|
|
grid: { color: 'rgba(40,69,95,0.4)' }
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
async function fetchDecisions(market) {
|
|
const tbody = document.getElementById('decisions-body');
|
|
tbody.innerHTML = '<tr class="empty-row"><td colspan="5"><span class="spinner"></span></td></tr>';
|
|
try {
|
|
const r = await fetch(`/api/decisions?market=${market}&limit=50`);
|
|
if (!r.ok) throw new Error('fetch failed');
|
|
const d = await r.json();
|
|
if (!d.decisions || d.decisions.length === 0) {
|
|
tbody.innerHTML = '<tr class="empty-row"><td colspan="5">결정 로그 없음</td></tr>';
|
|
return;
|
|
}
|
|
tbody.innerHTML = d.decisions.map(dec => `
|
|
<tr>
|
|
<td>${fmt(dec.timestamp)}</td>
|
|
<td>${dec.stock_code || '--'}</td>
|
|
<td>${badge(dec.action)}</td>
|
|
<td>${confBar(dec.confidence)}</td>
|
|
<td class="rationale-cell" title="${(dec.rationale || '').replace(/"/g, '"')}">${dec.rationale || '--'}</td>
|
|
</tr>
|
|
`).join('');
|
|
} catch {
|
|
tbody.innerHTML = '<tr class="empty-row"><td colspan="5">데이터 로드 실패</td></tr>';
|
|
}
|
|
}
|
|
|
|
function selectDays(btn) {
|
|
document.querySelectorAll('.day-btn').forEach(b => b.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
currentDays = parseInt(btn.dataset.days, 10);
|
|
fetchPnlHistory(currentDays);
|
|
}
|
|
|
|
function selectMarket(btn) {
|
|
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
currentMarket = btn.dataset.market;
|
|
fetchDecisions(currentMarket);
|
|
}
|
|
|
|
function todayStr() {
|
|
return new Date().toISOString().slice(0, 10);
|
|
}
|
|
|
|
function esc(s) {
|
|
return String(s ?? '').replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
|
|
}
|
|
|
|
async function fetchJSON(url) {
|
|
const r = await fetch(url);
|
|
if (!r.ok) throw new Error(`HTTP ${r.status}`);
|
|
return r.json();
|
|
}
|
|
|
|
async function fetchPlaybook() {
|
|
const market = document.getElementById('pb-market-select').value;
|
|
const date = todayStr();
|
|
document.getElementById('pb-date').textContent = date;
|
|
const el = document.getElementById('playbook-content');
|
|
try {
|
|
const data = await fetchJSON(`/api/playbook/${date}?market=${market}`);
|
|
const stocks = data.stock_playbooks ?? [];
|
|
if (stocks.length === 0) {
|
|
el.innerHTML = '<p class="empty-msg">오늘 플레이북 없음</p>';
|
|
return;
|
|
}
|
|
el.innerHTML = stocks.map(sp =>
|
|
`<details><summary>${esc(sp.stock_code ?? '?')} — ${esc(sp.signal ?? '')}</summary>` +
|
|
`<pre>${esc(JSON.stringify(sp, null, 2))}</pre></details>`
|
|
).join('');
|
|
} catch {
|
|
el.innerHTML = '<p class="empty-msg">플레이북 없음 (오늘 미생성 또는 API 오류)</p>';
|
|
}
|
|
}
|
|
|
|
async function fetchScorecard() {
|
|
const market = document.getElementById('sc-market-select').value;
|
|
const date = todayStr();
|
|
document.getElementById('sc-date').textContent = date;
|
|
const el = document.getElementById('scorecard-grid');
|
|
try {
|
|
const data = await fetchJSON(`/api/scorecard/${date}?market=${market}`);
|
|
const sc = data.scorecard ?? {};
|
|
const entries = Object.entries(sc);
|
|
if (entries.length === 0) {
|
|
el.innerHTML = '<p class="empty-msg">스코어카드 없음</p>';
|
|
return;
|
|
}
|
|
el.className = 'scorecard-grid';
|
|
el.innerHTML = entries.map(([k, v]) => `
|
|
<div class="kpi-card">
|
|
<div class="kpi-label">${esc(k)}</div>
|
|
<div class="kpi-value">${typeof v === 'number' ? v.toFixed(2) : esc(String(v))}</div>
|
|
</div>`).join('');
|
|
} catch {
|
|
el.innerHTML = '<p class="empty-msg">스코어카드 없음 (오늘 미생성 또는 API 오류)</p>';
|
|
}
|
|
}
|
|
|
|
async function fetchScenarios() {
|
|
const market = document.getElementById('scen-market-select').value;
|
|
const date = todayStr();
|
|
const el = document.getElementById('scenarios-content');
|
|
try {
|
|
const data = await fetchJSON(`/api/scenarios/active?market=${market}&date_str=${date}&limit=50`);
|
|
const matches = data.matches ?? [];
|
|
if (matches.length === 0) {
|
|
el.innerHTML = '<p class="empty-msg">활성 시나리오 없음</p>';
|
|
return;
|
|
}
|
|
el.innerHTML = `<table class="scenarios-table">
|
|
<thead><tr><th>종목</th><th>신호</th><th>신뢰도</th><th>매칭 조건</th></tr></thead>
|
|
<tbody>${matches.map(m => `
|
|
<tr>
|
|
<td>${esc(m.stock_code)}</td>
|
|
<td>${esc(m.signal ?? '-')}</td>
|
|
<td>${esc(m.confidence ?? '-')}</td>
|
|
<td><code style="font-size:11px">${esc(JSON.stringify(m.scenario_match ?? {}))}</code></td>
|
|
</tr>`).join('')}
|
|
</tbody></table>`;
|
|
} catch {
|
|
el.innerHTML = '<p class="empty-msg">데이터 없음</p>';
|
|
}
|
|
}
|
|
|
|
async function fetchContext() {
|
|
const layer = document.getElementById('ctx-layer-select').value;
|
|
const limit = Math.min(Math.max(parseInt(document.getElementById('ctx-limit').value, 10) || 20, 1), 200);
|
|
const el = document.getElementById('context-content');
|
|
try {
|
|
const data = await fetchJSON(`/api/context/${layer}?limit=${limit}`);
|
|
const entries = data.entries ?? [];
|
|
if (entries.length === 0) {
|
|
el.innerHTML = '<p class="empty-msg">컨텍스트 없음</p>';
|
|
return;
|
|
}
|
|
el.innerHTML = `<table class="context-table">
|
|
<thead><tr><th>timeframe</th><th>key</th><th>value</th><th>updated</th></tr></thead>
|
|
<tbody>${entries.map(e => `
|
|
<tr>
|
|
<td>${esc(e.timeframe)}</td>
|
|
<td>${esc(e.key)}</td>
|
|
<td><div class="context-value">${esc(JSON.stringify(e.value ?? e.raw_value))}</div></td>
|
|
<td style="font-size:11px;color:var(--muted)">${esc((e.updated_at ?? '').slice(0, 16))}</td>
|
|
</tr>`).join('')}
|
|
</tbody></table>`;
|
|
} catch {
|
|
el.innerHTML = '<p class="empty-msg">데이터 없음</p>';
|
|
}
|
|
}
|
|
|
|
async function refreshAll() {
|
|
document.getElementById('last-updated').textContent = '업데이트 중...';
|
|
await Promise.all([
|
|
fetchStatus(),
|
|
fetchPerformance(),
|
|
fetchPositions(),
|
|
fetchPnlHistory(currentDays),
|
|
fetchDecisions(currentMarket),
|
|
fetchPlaybook(),
|
|
fetchScorecard(),
|
|
fetchScenarios(),
|
|
fetchContext(),
|
|
]);
|
|
const now = new Date();
|
|
const timeStr = now.toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false });
|
|
document.getElementById('last-updated').textContent = `마지막 업데이트: ${timeStr}`;
|
|
}
|
|
|
|
// Initial load
|
|
refreshAll();
|
|
|
|
// Auto-refresh every 30 seconds
|
|
setInterval(refreshAll, 30000);
|
|
</script>
|
|
</body>
|
|
</html>
|