feat: 미구현 API 4개 대시보드 프론트 연결 (#198)

- Playbook(/api/playbook/{date}): 프리마켓 플레이북 아코디언 패널 추가
- Scorecard(/api/scorecard/{date}): 일간 스코어카드 KPI 카드 그리드 추가
- Scenarios(/api/scenarios/active): 활성 시나리오 매칭 테이블 추가
- Context(/api/context/{layer}): L1-L7 컨텍스트 트리 테이블 추가

모든 패널 decisions-panel 아래에 섹션 추가 방식으로 배치.
refreshAll()에 4개 함수 포함하여 30초 자동 갱신 지원.

보안:
- esc() 헬퍼로 innerHTML 삽입 값 XSS 방지
- ctx limit 값 parseInt + 범위 클램핑(1-200) 적용

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/dashboard/app.py

@@ -3,6 +3,7 @@
 from __future__ import annotations
 
 import json
+import os
 import sqlite3
 from datetime import UTC, datetime, timezone
 from pathlib import Path
@@ -79,6 +80,35 @@ def create_dashboard_app(db_path: str) -> FastAPI:
                 total_pnl += market_status[market]["total_pnl"]
                 total_decisions += market_status[market]["decision_count"]
 
+            cb_threshold = float(os.getenv("CIRCUIT_BREAKER_PCT", "-3.0"))
+            pnl_pct_rows = conn.execute(
+                """
+                SELECT key, value
+                FROM system_metrics
+                WHERE key LIKE 'portfolio_pnl_pct_%'
+                ORDER BY updated_at DESC
+                LIMIT 20
+                """
+            ).fetchall()
+            current_pnl_pct: float | None = None
+            if pnl_pct_rows:
+                values = [
+                    json.loads(row["value"]).get("pnl_pct")
+                    for row in pnl_pct_rows
+                    if json.loads(row["value"]).get("pnl_pct") is not None
+                ]
+                if values:
+                    current_pnl_pct = round(min(values), 4)
+
+            if current_pnl_pct is None:
+                cb_status = "unknown"
+            elif current_pnl_pct <= cb_threshold:
+                cb_status = "tripped"
+            elif current_pnl_pct <= cb_threshold + 1.0:
+                cb_status = "warning"
+            else:
+                cb_status = "ok"
+
             return {
                 "date": today,
                 "markets": market_status,
@@ -87,6 +117,11 @@ def create_dashboard_app(db_path: str) -> FastAPI:
                     "total_pnl": round(total_pnl, 2),
                     "decision_count": total_decisions,
                 },
+                "circuit_breaker": {
+                    "threshold_pct": cb_threshold,
+                    "current_pnl_pct": current_pnl_pct,
+                    "status": cb_status,
+                },
             }
 
     @app.get("/api/playbook/{date_str}")

src/dashboard/static/index.html

@@ -13,6 +13,7 @@
         --muted: #9fb3c8;
         --accent: #3cb371;
         --red: #e05555;
+        --warn: #e8a040;
         --border: #28455f;
       }
       * { box-sizing: border-box; margin: 0; padding: 0; }
@@ -43,6 +44,25 @@
       }
       .refresh-btn:hover { border-color: var(--accent); color: var(--accent); }
 
+      /* 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); } }
@@ -152,6 +172,51 @@
       /* 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>
@@ -160,6 +225,13 @@
       <header>
         <h1>&#x1F40D; The Ouroboros</h1>
         <div class="header-right">
+          <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()">&#x21BA; 새로고침</button>
         </div>
@@ -256,6 +328,72 @@
           </tbody>
         </table>
       </div>
+
+      <!-- playbook panel -->
+      <div class="panel playbook-panel">
+        <div class="panel-header">
+          <span class="panel-title">&#x1F4CB; 프리마켓 플레이북</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">&#x1F4CA; 일간 스코어카드</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">&#x1F3AF; 활성 시나리오 매칭</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">&#x1F9E0; 컨텍스트 트리</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>
@@ -325,6 +463,38 @@
         }
       }
 
+      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');
@@ -341,6 +511,7 @@
             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);
         } catch {}
       }
 
@@ -461,6 +632,117 @@
         fetchDecisions(currentMarket);
       }
 
+      function todayStr() {
+        return new Date().toISOString().slice(0, 10);
+      }
+
+      function esc(s) {
+        return String(s ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+      }
+
+      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([
@@ -469,6 +751,10 @@
           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 });

src/db.py

@@ -138,6 +138,18 @@ def init_db(db_path: str) -> sqlite3.Connection:
         " ON trades (stock_code, market, timestamp DESC)"
     )
 
+    # Lightweight key-value store for trading system runtime metrics (dashboard use only)
+    # Intentionally separate from the AI context tree to preserve separation of concerns.
+    conn.execute(
+        """
+        CREATE TABLE IF NOT EXISTS system_metrics (
+            key        TEXT PRIMARY KEY,
+            value      TEXT NOT NULL,
+            updated_at TEXT NOT NULL
+        )
+        """
+    )
+
     conn.commit()
     return conn
 

src/main.py

@@ -430,6 +430,17 @@ async def trading_cycle(
             {"volume_ratio": candidate.volume_ratio},
         )
 
+    # Write pnl_pct to system_metrics (dashboard-only table, separate from AI context tree)
+    db_conn.execute(
+        "INSERT OR REPLACE INTO system_metrics (key, value, updated_at) VALUES (?, ?, ?)",
+        (
+            f"portfolio_pnl_pct_{market.code}",
+            json.dumps({"pnl_pct": round(pnl_pct, 4)}),
+            datetime.now(UTC).isoformat(),
+        ),
+    )
+    db_conn.commit()
+
     # Build portfolio data for global rule evaluation
     portfolio_data = {
         "portfolio_pnl_pct": pnl_pct,

tests/test_dashboard.py

@@ -351,3 +351,65 @@ def test_positions_empty_when_no_trades(tmp_path: Path) -> None:
     body = get_positions()
     assert body["count"] == 0
     assert body["positions"] == []
+
+
+def _seed_cb_context(conn: sqlite3.Connection, pnl_pct: float, market: str = "KR") -> None:
+    import json as _json
+    conn.execute(
+        "INSERT OR REPLACE INTO system_metrics (key, value, updated_at) VALUES (?, ?, ?)",
+        (
+            f"portfolio_pnl_pct_{market}",
+            _json.dumps({"pnl_pct": pnl_pct}),
+            "2026-02-22T10:00:00+00:00",
+        ),
+    )
+    conn.commit()
+
+
+def test_status_circuit_breaker_ok(tmp_path: Path) -> None:
+    """pnl_pct가 -2.0%보다 높으면 status=ok를 반환해야 한다."""
+    db_path = tmp_path / "cb_ok.db"
+    conn = init_db(str(db_path))
+    _seed_cb_context(conn, -1.0)
+    conn.close()
+    app = create_dashboard_app(str(db_path))
+    get_status = _endpoint(app, "/api/status")
+    body = get_status()
+    cb = body["circuit_breaker"]
+    assert cb["status"] == "ok"
+    assert cb["current_pnl_pct"] == -1.0
+    assert cb["threshold_pct"] == -3.0
+
+
+def test_status_circuit_breaker_warning(tmp_path: Path) -> None:
+    """pnl_pct가 -2.0% 이하이면 status=warning을 반환해야 한다."""
+    db_path = tmp_path / "cb_warn.db"
+    conn = init_db(str(db_path))
+    _seed_cb_context(conn, -2.5)
+    conn.close()
+    app = create_dashboard_app(str(db_path))
+    get_status = _endpoint(app, "/api/status")
+    body = get_status()
+    assert body["circuit_breaker"]["status"] == "warning"
+
+
+def test_status_circuit_breaker_tripped(tmp_path: Path) -> None:
+    """pnl_pct가 임계값(-3.0%) 이하이면 status=tripped를 반환해야 한다."""
+    db_path = tmp_path / "cb_tripped.db"
+    conn = init_db(str(db_path))
+    _seed_cb_context(conn, -3.5)
+    conn.close()
+    app = create_dashboard_app(str(db_path))
+    get_status = _endpoint(app, "/api/status")
+    body = get_status()
+    assert body["circuit_breaker"]["status"] == "tripped"
+
+
+def test_status_circuit_breaker_unknown_when_no_data(tmp_path: Path) -> None:
+    """L7 context에 pnl_pct 데이터가 없으면 status=unknown을 반환해야 한다."""
+    app = _app(tmp_path)  # seed_db에는 portfolio_pnl_pct 없음
+    get_status = _endpoint(app, "/api/status")
+    body = get_status()
+    cb = body["circuit_breaker"]
+    assert cb["status"] == "unknown"
+    assert cb["current_pnl_pct"] is None