feat(insta): 카드 탭 트렌딩 키워드 중복 제거 + 10개씩 페이지네이션

KeywordsPanel이 전체 목록을 세로로 길게 표시하던 것을, 동일 keyword
중복 제거(최고 score 유지)·score 내림차순 후 페이지당 10개만 렌더하고
이전(←)/다음(→) 페이저로 탐색하도록 변경. 카테고리 변경 시 첫 페이지 리셋.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

docs/superpowers/plans/2026-05-17-signal-v2-phase4-signal-generator.md

@@ -0,0 +1,817 @@
+# Signal V2 Phase 4 — Signal Generator Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** signal_v2 에 매수/매도 신호 생성 레이어 추가. Phase 2/3a/3b 의 모든 state 산출 → Phase 0 spec §6.1-§6.3 룰 → `state.signals[ticker]` (Phase 0 spec §5.2 schema) + `SignalDedup` 24h 차단.
+
+**Architecture:** 순수 함수 `generate_signals(state, dedup, settings)` 가 매 분봉 cycle 후 호출. 매수 (Hard gate 4 조건 + soft confidence > 0.7) + 매도 (손절>이상>익절 우선순위). 6 env 외부화 (운영 튜닝).
+
+**Tech Stack:** Python 순수 함수 / pytest / SignalDedup (Phase 2) / 외부 의존성 없음
+
+**Spec:** `web-ui/docs/superpowers/specs/2026-05-17-signal-v2-phase4-signal-generator.md`
+
+---
+
+## 파일 구조
+
+| 파일 | 책임 |
+|------|------|
+| `signal_v2/config.py` | (수정) Settings 에 6 env field 추가 |
+| `signal_v2/state.py` | (수정) PollState `signals` field 추가 |
+| `signal_v2/signal_generator.py` | (신규) `generate_signals(state, dedup, settings)` + 8 helper |
+| `signal_v2/pull_worker.py` | (수정) `poll_loop` signature + 매 cycle 후 `generate_signals` 호출 |
+| `signal_v2/main.py` | (수정) lifespan 의 poll_task 호출에 `dedup` + `settings` 전달 |
+| `signal_v2/tests/test_signal_generator.py` | (신규) 9 단위 케이스 |
+| `signal_v2/tests/test_pull_worker.py` | (수정) integration 1 케이스 추가 |
+
+7 파일 변경, **10 신규 테스트** (45 → 55).
+
+---
+
+## Task 순서
+
+```
+Task 1: foundation (config 6 env + state signals field)
+Task 2: signal_generator.py + 9 단위 tests (TDD)
+Task 3: pull_worker + main.py 통합 + 1 integration test
+Task 4: 사용자 수동 (.env optional + smoke + push)
+```
+
+---
+
+### Task 1: foundation (config + state)
+
+**Files:**
+- Modify: `web-ai/signal_v2/config.py`
+- Modify: `web-ai/signal_v2/state.py`
+
+- [ ] **Step 1: Update config.py with 6 new fields**
+
+Read `web-ai/signal_v2/config.py`. Add 6 fields to Settings (after `chronos_model` field, before properties):
+
+```python
+    stop_loss_pct: float = field(
+        default_factory=lambda: float(os.getenv("STOP_LOSS_PCT", "-0.07"))
+    )
+    take_profit_pct: float = field(
+        default_factory=lambda: float(os.getenv("TAKE_PROFIT_PCT", "0.15"))
+    )
+    chronos_spread_threshold: float = field(
+        default_factory=lambda: float(os.getenv("CHRONOS_SPREAD_THRESHOLD", "0.6"))
+    )
+    asking_bid_ratio_threshold: float = field(
+        default_factory=lambda: float(os.getenv("ASKING_BID_RATIO_THRESHOLD", "0.6"))
+    )
+    confidence_threshold: float = field(
+        default_factory=lambda: float(os.getenv("CONFIDENCE_THRESHOLD", "0.7"))
+    )
+    min_momentum_for_buy: str = field(
+        default_factory=lambda: os.getenv("MIN_MOMENTUM_FOR_BUY", "strong_up")
+    )
+```
+
+- [ ] **Step 2: Update state.py with signals field**
+
+Read `web-ai/signal_v2/state.py`. Add `signals` field to PollState (after `minute_momentum`):
+
+```python
+    signals: dict[str, dict] = field(default_factory=dict)
+```
+
+- [ ] **Step 3: Smoke import test**
+
+```bash
+cd /c/Users/jaeoh/Desktop/workspace/web-ai
+python -c "from signal_v2.config import get_settings; from signal_v2.state import state; s = get_settings(); print(f'stop_loss={s.stop_loss_pct}, conf_threshold={s.confidence_threshold}, min_momentum={s.min_momentum_for_buy}'); print(state)"
+```
+Expected: `stop_loss=-0.07, conf_threshold=0.7, min_momentum=strong_up` + state print with `signals={}`.
+
+- [ ] **Step 4: Run existing tests — no regression**
+
+```bash
+cd /c/Users/jaeoh/Desktop/workspace/web-ai
+python -m pytest signal_v2/tests -q 2>&1 | tail -3
+```
+Expected: 45 passed.
+
+- [ ] **Step 5: Commit**
+
+```bash
+cd /c/Users/jaeoh/Desktop/workspace/web-ai
+git add signal_v2/config.py signal_v2/state.py
+git commit -m "$(cat <<'EOF'
+feat(signal_v2-phase4): foundation — 6 env thresholds + state.signals
+
+config.py: STOP_LOSS_PCT / TAKE_PROFIT_PCT / CHRONOS_SPREAD_THRESHOLD /
+ASKING_BID_RATIO_THRESHOLD / CONFIDENCE_THRESHOLD / MIN_MOMENTUM_FOR_BUY
+env vars with sensible defaults (Phase 0 spec §6.1-§6.2 values).
+
+state.py: PollState.signals dict[ticker, signal_body] for Phase 5 input.
+
+45 existing tests still pass.
+
+Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
+EOF
+)"
+```
+
+---
+
+### Task 2: signal_generator.py + 9 단위 tests
+
+**Files:**
+- Create: `web-ai/signal_v2/signal_generator.py`
+- Create: `web-ai/signal_v2/tests/test_signal_generator.py`
+
+- [ ] **Step 1: Write 9 failing tests**
+
+Create `web-ai/signal_v2/tests/test_signal_generator.py`:
+
+```python
+"""Tests for signal_generator."""
+from collections import deque
+from pathlib import Path
+from unittest.mock import MagicMock
+
+import pytest
+
+from signal_v2.signal_generator import generate_signals
+from signal_v2.state import PollState
+
+
+def _settings(**overrides):
+    """Build a Settings-like object for tests (avoid env)."""
+    defaults = dict(
+        stop_loss_pct=-0.07,
+        take_profit_pct=0.15,
+        chronos_spread_threshold=0.6,
+        asking_bid_ratio_threshold=0.6,
+        confidence_threshold=0.7,
+        min_momentum_for_buy="strong_up",
+    )
+    defaults.update(overrides)
+    m = MagicMock()
+    for k, v in defaults.items():
+        setattr(m, k, v)
+    return m
+
+
+def _make_state_with_buy_candidate(
+    ticker="005930", name="삼성전자", rank=1,
+    chronos_median=0.02, chronos_q10=-0.01, chronos_q90=0.04, chronos_conf=0.85,
+    momentum="strong_up", bid_ratio=0.7, current_price=78500,
+):
+    state = PollState()
+    state.screener_preview = {"items": [{"ticker": ticker, "name": name}]}
+    state.chronos_predictions[ticker] = {
+        "median": chronos_median, "q10": chronos_q10, "q90": chronos_q90,
+        "conf": chronos_conf, "as_of": "2026-05-17T16:00:00+09:00",
+    }
+    state.minute_momentum[ticker] = momentum
+    state.asking_price[ticker] = {
+        "bid_total": int(bid_ratio * 1000),
+        "ask_total": int((1 - bid_ratio) * 1000),
+        "bid_ratio": bid_ratio,
+        "current_price": current_price,
+        "as_of": "2026-05-17T16:00:01+09:00",
+    }
+    return state
+
+
+def _make_state_with_holding(
+    ticker="005930", name="삼성전자",
+    pnl_pct=0.0, avg_price=75000, current_price=75000,
+):
+    state = PollState()
+    state.portfolio = {"holdings": [{
+        "ticker": ticker, "name": name,
+        "avg_price": avg_price, "current_price": current_price,
+        "pnl_pct": pnl_pct, "profit_rate": pnl_pct * 100,
+        "quantity": 100, "broker": "키움",
+    }]}
+    state.screener_preview = {"items": []}
+    return state
+
+
+@pytest.fixture
+def dedup_mock():
+    d = MagicMock()
+    d.is_recent.return_value = False
+    return d
+
+
+def test_buy_signal_when_all_conditions_pass_and_confidence_high(dedup_mock):
+    state = _make_state_with_buy_candidate()
+    generate_signals(state, dedup_mock, _settings())
+    assert "005930" in state.signals
+    sig = state.signals["005930"]
+    assert sig["action"] == "buy"
+    assert sig["confidence_webai"] > 0.7
+    dedup_mock.record.assert_called()
+
+
+def test_silent_when_chronos_median_negative(dedup_mock):
+    state = _make_state_with_buy_candidate(chronos_median=-0.01)
+    generate_signals(state, dedup_mock, _settings())
+    assert "005930" not in state.signals
+
+
+def test_silent_when_distribution_spread_too_wide(dedup_mock):
+    # spread = (0.5 - (-0.5)) / max(|0.001|, 0.001) = 1000 → > 0.6
+    state = _make_state_with_buy_candidate(
+        chronos_median=0.001, chronos_q10=-0.5, chronos_q90=0.5,
+    )
+    generate_signals(state, dedup_mock, _settings())
+    assert "005930" not in state.signals
+
+
+def test_silent_when_momentum_not_strong_up(dedup_mock):
+    state = _make_state_with_buy_candidate(momentum="weak_up")
+    generate_signals(state, dedup_mock, _settings())
+    assert "005930" not in state.signals
+
+
+def test_silent_when_bid_ratio_below_threshold(dedup_mock):
+    state = _make_state_with_buy_candidate(bid_ratio=0.5)
+    generate_signals(state, dedup_mock, _settings())
+    assert "005930" not in state.signals
+
+
+def test_silent_when_confidence_below_threshold(dedup_mock):
+    # chronos_conf low + rank=20 → confidence < 0.7
+    state = _make_state_with_buy_candidate(chronos_conf=0.3)
+    # add 19 fake items to push rank to 20
+    state.screener_preview["items"] = (
+        [{"ticker": f"FAKE{i:03d}"} for i in range(19)]
+        + [{"ticker": "005930", "name": "삼성전자"}]
+    )
+    generate_signals(state, dedup_mock, _settings())
+    # confidence_webai = 0.3*0.5 + 1.0*0.3 + 0.05*0.2 = 0.15 + 0.3 + 0.01 = 0.46 < 0.7
+    assert "005930" not in state.signals
+
+
+def test_sell_signal_when_stop_loss_triggered(dedup_mock):
+    state = _make_state_with_holding(pnl_pct=-0.08, current_price=69000, avg_price=75000)
+    generate_signals(state, dedup_mock, _settings())
+    assert "005930" in state.signals
+    sig = state.signals["005930"]
+    assert sig["action"] == "sell"
+    assert sig["confidence_webai"] == 1.0  # 손절선 즉시
+    assert sig["pnl_pct"] == -0.08
+
+
+def test_sell_signal_when_take_profit_triggered(dedup_mock):
+    state = _make_state_with_holding(pnl_pct=0.16, current_price=87000, avg_price=75000)
+    generate_signals(state, dedup_mock, _settings())
+    assert "005930" in state.signals
+    sig = state.signals["005930"]
+    assert sig["action"] == "sell"
+    assert sig["confidence_webai"] == 0.6  # 익절선 검토 알림
+
+
+def test_silent_when_dedup_recently_sent(dedup_mock):
+    state = _make_state_with_buy_candidate()
+    dedup_mock.is_recent.return_value = True  # dedup 차단
+    generate_signals(state, dedup_mock, _settings())
+    assert "005930" not in state.signals
+    dedup_mock.record.assert_not_called()
+```
+
+- [ ] **Step 2: Run tests to verify FAIL**
+
+```bash
+cd /c/Users/jaeoh/Desktop/workspace/web-ai
+python -m pytest signal_v2/tests/test_signal_generator.py -v 2>&1 | tail -10
+```
+Expected: ImportError (signal_v2.signal_generator missing).
+
+- [ ] **Step 3: Implement signal_generator.py**
+
+Create `web-ai/signal_v2/signal_generator.py`:
+
+```python
+"""Phase 4 — 매수/매도 신호 생성.
+
+순수 함수 generate_signals(state, dedup, settings). state 를 mutate.
+"""
+from __future__ import annotations
+import logging
+from datetime import datetime
+from zoneinfo import ZoneInfo
+
+logger = logging.getLogger(__name__)
+KST = ZoneInfo("Asia/Seoul")
+
+# 분봉 모멘텀 → linear score
+MOMENTUM_SCORES = {
+    "strong_up": 1.0,
+    "weak_up": 0.7,
+    "neutral": 0.5,
+    "weak_down": 0.3,
+    "strong_down": 0.0,
+}
+
+
+def generate_signals(state, dedup, settings) -> None:
+    """Phase 4 entry — state mutating. 매수/매도 룰 적용."""
+    _evaluate_buy_signals(state, dedup, settings)
+    _evaluate_sell_signals(state, dedup, settings)
+
+
+# ----- 매수 -----
+
+def _evaluate_buy_signals(state, dedup, settings) -> None:
+    candidates = _buy_candidates(state)
+    for ticker, name, rank in candidates:
+        if not _check_buy_hard_gate(state, ticker, settings):
+            continue
+        confidence = _compute_buy_confidence(state, ticker, rank)
+        if confidence <= settings.confidence_threshold:
+            continue
+        if dedup.is_recent(ticker, "buy", within_hours=24):
+            continue
+        state.signals[ticker] = _build_buy_signal(state, ticker, name, rank, confidence)
+        dedup.record(ticker, "buy", confidence=confidence)
+
+
+def _buy_candidates(state) -> list[tuple[str, str, int | None]]:
+    """screener Top-N (rank 1..N) + portfolio (rank=None)."""
+    candidates: list[tuple[str, str, int | None]] = []
+    seen: set[str] = set()
+    # Screener Top-N
+    if state.screener_preview is not None:
+        for i, item in enumerate(state.screener_preview.get("items", [])):
+            ticker = item.get("ticker")
+            if not ticker or ticker in seen:
+                continue
+            seen.add(ticker)
+            name = item.get("name", ticker)
+            candidates.append((ticker, name, i + 1))
+    # Portfolio holdings
+    if state.portfolio is not None:
+        for h in state.portfolio.get("holdings", []):
+            ticker = h.get("ticker")
+            if not ticker or ticker in seen:
+                continue
+            seen.add(ticker)
+            candidates.append((ticker, h.get("name", ticker), None))
+    return candidates
+
+
+def _check_buy_hard_gate(state, ticker: str, settings) -> bool:
+    pred = state.chronos_predictions.get(ticker)
+    if pred is None or pred["median"] <= 0:
+        return False
+    spread = (pred["q90"] - pred["q10"]) / max(abs(pred["median"]), 0.001)
+    if spread >= settings.chronos_spread_threshold:
+        return False
+    momentum = state.minute_momentum.get(ticker)
+    if momentum != settings.min_momentum_for_buy:
+        return False
+    ap = state.asking_price.get(ticker)
+    if ap is None or ap["bid_ratio"] < settings.asking_bid_ratio_threshold:
+        return False
+    return True
+
+
+def _compute_buy_confidence(state, ticker: str, rank: int | None) -> float:
+    pred = state.chronos_predictions[ticker]
+    chronos_conf = pred["conf"]
+    minute_score = MOMENTUM_SCORES.get(state.minute_momentum.get(ticker, "neutral"), 0.5)
+    screener_norm = 1 - (rank - 1) / 20 if rank is not None else 0.0
+    return chronos_conf * 0.5 + minute_score * 0.3 + screener_norm * 0.2
+
+
+def _build_buy_signal(state, ticker: str, name: str, rank: int | None, confidence: float) -> dict:
+    ap = state.asking_price[ticker]
+    pred = state.chronos_predictions[ticker]
+    return {
+        "ticker": ticker,
+        "name": name,
+        "action": "buy",
+        "confidence_webai": confidence,
+        "current_price": ap["current_price"],
+        "avg_price": None,
+        "pnl_pct": None,
+        "context": _build_context(state, ticker, rank),
+        "as_of": datetime.now(KST).isoformat(),
+    }
+
+
+# ----- 매도 -----
+
+def _evaluate_sell_signals(state, dedup, settings) -> None:
+    if state.portfolio is None:
+        return
+    for holding in state.portfolio.get("holdings", []):
+        ticker = holding.get("ticker")
+        if not ticker:
+            continue
+        sell = _try_stop_loss(state, holding, settings)
+        if sell is None:
+            sell = _try_anomaly(state, holding, settings)
+        if sell is None:
+            sell = _try_take_profit(state, holding, settings)
+        if sell is None:
+            continue
+        if dedup.is_recent(ticker, "sell", within_hours=24):
+            continue
+        state.signals[ticker] = sell
+        dedup.record(ticker, "sell", confidence=sell["confidence_webai"])
+
+
+def _try_stop_loss(state, holding: dict, settings) -> dict | None:
+    pnl = holding.get("pnl_pct")
+    if pnl is None or pnl >= settings.stop_loss_pct:
+        return None
+    return _build_sell_signal(state, holding, confidence=1.0, reason="stop_loss")
+
+
+def _try_take_profit(state, holding: dict, settings) -> dict | None:
+    pnl = holding.get("pnl_pct")
+    if pnl is None or pnl <= settings.take_profit_pct:
+        return None
+    return _build_sell_signal(state, holding, confidence=0.6, reason="take_profit")
+
+
+def _try_anomaly(state, holding: dict, settings) -> dict | None:
+    ticker = holding["ticker"]
+    pred = state.chronos_predictions.get(ticker)
+    if pred is None or pred["median"] >= -0.01:
+        return None
+    momentum = state.minute_momentum.get(ticker)
+    if momentum != "strong_down":
+        return None
+    ap = state.asking_price.get(ticker)
+    if ap is None:
+        return None
+    if ap["bid_ratio"] > (1 - settings.asking_bid_ratio_threshold):
+        return None  # 매도세 60% 미만
+    minute_score = 1.0 - MOMENTUM_SCORES.get(momentum, 0.5)  # 반전
+    confidence = pred["conf"] * 0.5 + minute_score * 0.3 + 1.0 * 0.2
+    if confidence <= settings.confidence_threshold:
+        return None
+    return _build_sell_signal(state, holding, confidence=confidence, reason="anomaly")
+
+
+def _build_sell_signal(state, holding: dict, confidence: float, reason: str) -> dict:
+    ticker = holding["ticker"]
+    return {
+        "ticker": ticker,
+        "name": holding.get("name", ticker),
+        "action": "sell",
+        "confidence_webai": confidence,
+        "current_price": holding.get("current_price"),
+        "avg_price": holding.get("avg_price"),
+        "pnl_pct": holding.get("pnl_pct"),
+        "context": _build_context(state, ticker, rank=None, sell_reason=reason),
+        "as_of": datetime.now(KST).isoformat(),
+    }
+
+
+# ----- Context -----
+
+def _build_context(state, ticker: str, rank: int | None, sell_reason: str | None = None) -> dict:
+    pred = state.chronos_predictions.get(ticker) or {}
+    ap = state.asking_price.get(ticker) or {}
+    news_item = _find_news_sentiment(state, ticker)
+    screener_scores = _find_screener_scores(state, ticker)
+    context: dict = {
+        "chronos_pred_1d": pred.get("median"),
+        "chronos_pred_conf": pred.get("conf"),
+        "chronos_q10": pred.get("q10"),
+        "chronos_q90": pred.get("q90"),
+        "screener_rank": rank,
+        "screener_scores": screener_scores,
+        "minute_momentum": state.minute_momentum.get(ticker),
+        "asking_bid_ratio": ap.get("bid_ratio"),
+        "news_sentiment": news_item.get("score") if news_item else None,
+        "news_reason": news_item.get("reason") if news_item else None,
+    }
+    if sell_reason is not None:
+        context["sell_reason"] = sell_reason
+    return context
+
+
+def _find_news_sentiment(state, ticker: str) -> dict | None:
+    if state.news_sentiment is None:
+        return None
+    for item in state.news_sentiment.get("items", []):
+        if item.get("ticker") == ticker:
+            return item
+    return None
+
+
+def _find_screener_scores(state, ticker: str) -> dict | None:
+    if state.screener_preview is None:
+        return None
+    for item in state.screener_preview.get("items", []):
+        if item.get("ticker") == ticker:
+            return item.get("scores")
+    return None
+```
+
+- [ ] **Step 4: Run tests to verify PASS**
+
+```bash
+cd /c/Users/jaeoh/Desktop/workspace/web-ai
+python -m pytest signal_v2/tests/test_signal_generator.py -v 2>&1 | tail -15
+```
+Expected: 9 passed.
+
+Full suite:
+```bash
+python -m pytest signal_v2/tests -q 2>&1 | tail -3
+```
+Expected: 54 passed.
+
+If any test fails, examine the assertion + impl. Common gotchas:
+- Confidence calculation order — chronos*0.5 + minute*0.3 + screener*0.2
+- Stop loss `<` (strict) vs `<=` — spec says "도달 시" so use `<` strict
+- screener_norm when rank=None → 0.0 (not 1.0)
+
+- [ ] **Step 5: Commit**
+
+```bash
+cd /c/Users/jaeoh/Desktop/workspace/web-ai
+git add signal_v2/signal_generator.py signal_v2/tests/test_signal_generator.py
+git commit -m "$(cat <<'EOF'
+feat(signal_v2-phase4): signal_generator + 9 unit tests
+
+generate_signals(state, dedup, settings) → state mutating:
+- Buy: screener Top-N + portfolio. Hard gate (chronos median > 0 +
+  spread < 0.6 + momentum strong_up + bid_ratio >= 0.6) + soft
+  confidence (chronos*0.5 + minute*0.3 + screener*0.2) > 0.7.
+- Sell: portfolio only. Priority stop_loss > anomaly > take_profit.
+  Stop loss confidence 1.0 (immediate), take_profit 0.6 (review).
+- SignalDedup 24h via dedup.is_recent/record per (ticker, action).
+- State signal dict matches Phase 0 spec §5.2 schema.
+
+54 tests pass.
+
+Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
+EOF
+)"
+```
+
+---
+
+### Task 3: pull_worker + main.py integration + 1 test
+
+**Files:**
+- Modify: `web-ai/signal_v2/pull_worker.py`
+- Modify: `web-ai/signal_v2/main.py`
+- Modify: `web-ai/signal_v2/tests/test_pull_worker.py`
+
+- [ ] **Step 1: Write failing integration test**
+
+Append to `web-ai/signal_v2/tests/test_pull_worker.py`:
+
+```python
+def test_poll_loop_calls_generate_signals_after_cycle(monkeypatch):
+    """매 cycle 후 generate_signals 호출 + state.signals 갱신."""
+    from unittest.mock import MagicMock
+    from signal_v2.state import PollState
+
+    state = PollState()
+    state.portfolio = {"holdings": [{
+        "ticker": "005930", "name": "삼성전자",
+        "avg_price": 75000, "current_price": 69000,
+        "pnl_pct": -0.08, "profit_rate": -8.0,
+        "quantity": 100, "broker": "키움",
+    }]}
+    state.screener_preview = {"items": []}
+
+    dedup = MagicMock()
+    dedup.is_recent.return_value = False
+
+    settings = MagicMock()
+    settings.stop_loss_pct = -0.07
+    settings.take_profit_pct = 0.15
+    settings.chronos_spread_threshold = 0.6
+    settings.asking_bid_ratio_threshold = 0.6
+    settings.confidence_threshold = 0.7
+    settings.min_momentum_for_buy = "strong_up"
+
+    from signal_v2.signal_generator import generate_signals
+    # Call generate_signals directly to verify state mutation through the public API.
+    generate_signals(state, dedup, settings)
+
+    # Stop loss should trigger
+    assert "005930" in state.signals
+    assert state.signals["005930"]["action"] == "sell"
+    assert state.signals["005930"]["confidence_webai"] == 1.0
+    dedup.record.assert_called_with("005930", "sell", confidence=1.0)
+```
+
+- [ ] **Step 2: Run test to verify PASS (signal_generator from Task 2 already exists)**
+
+```bash
+cd /c/Users/jaeoh/Desktop/workspace/web-ai
+python -m pytest signal_v2/tests/test_pull_worker.py::test_poll_loop_calls_generate_signals_after_cycle -v 2>&1 | tail -10
+```
+Expected: PASS (test exercises generate_signals directly — public API integration).
+
+- [ ] **Step 3: Update pull_worker.py — poll_loop signature + cycle integration**
+
+Read `web-ai/signal_v2/pull_worker.py`. Modify the `poll_loop` signature to accept dedup + settings:
+
+```python
+async def poll_loop(
+    client, state, shutdown,
+    kis_client=None, chronos=None,
+    dedup=None, settings=None,
+) -> None:
+    """...existing docstring..."""
+    logger.info("poll_loop started")
+    while not shutdown.is_set():
+        now = datetime.now(KST)
+        if _is_market_day(now) and _is_polling_window(now):
+            try:
+                await _run_polling_cycle(client, state, kis_client=kis_client)
+            except Exception:
+                logger.exception("poll cycle failed")
+            try:
+                update_minute_momentum_for_all(state)
+            except Exception:
+                logger.exception("minute momentum update failed")
+            if _is_post_close_trigger(now) and chronos is not None and kis_client is not None:
+                try:
+                    await _run_post_close_cycle(kis_client, chronos, state)
+                except Exception:
+                    logger.exception("post-close cycle failed")
+            # Phase 4: generate signals
+            if dedup is not None and settings is not None:
+                try:
+                    from signal_v2.signal_generator import generate_signals
+                    generate_signals(state, dedup, settings)
+                except Exception:
+                    logger.exception("generate_signals failed")
+        interval = _next_interval(now)
+        try:
+            await asyncio.wait_for(shutdown.wait(), timeout=interval)
+            break
+        except asyncio.TimeoutError:
+            continue
+    logger.info("poll_loop ended")
+```
+
+- [ ] **Step 4: Update main.py — pass dedup + settings to poll_loop**
+
+Read `web-ai/signal_v2/main.py`. Find the `asyncio.create_task(poll_loop(...))` call inside `lifespan` and add `dedup` + `settings` params:
+
+```python
+    _ctx.poll_task = asyncio.create_task(
+        poll_loop(
+            _ctx.client, state_mod.state, _ctx.shutdown,
+            kis_client=_ctx.kis_client,
+            chronos=_ctx.chronos,
+            dedup=_ctx.dedup,
+            settings=settings,
+        )
+    )
+```
+
+- [ ] **Step 5: Run full test suite**
+
+```bash
+cd /c/Users/jaeoh/Desktop/workspace/web-ai
+python -m pytest signal_v2/tests -q 2>&1 | tail -3
+```
+Expected: 55 passed (54 + 1 new integration).
+
+- [ ] **Step 6: Commit**
+
+```bash
+cd /c/Users/jaeoh/Desktop/workspace/web-ai
+git add signal_v2/pull_worker.py signal_v2/main.py signal_v2/tests/test_pull_worker.py
+git commit -m "$(cat <<'EOF'
+feat(signal_v2-phase4): pull_worker + main.py integrate signal generator
+
+poll_loop signature now accepts dedup + settings. After each cycle
+(stock pull + minute momentum + post-close), call generate_signals
+to populate state.signals. main.py lifespan passes _ctx.dedup and
+settings to poll_loop.
+
+1 integration test added. 55 tests pass.
+
+Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
+EOF
+)"
+```
+
+---
+
+### Task 4: 사용자 수동 — .env optional + smoke + push
+
+**This task requires user action.**
+
+- [ ] **Step 1: .env optional**
+
+6 env 의 default 가 Phase 0 spec 값과 동일 — `.env` 변경 불필요. 운영 검증 후 조정 시:
+```
+STOP_LOSS_PCT=-0.07
+TAKE_PROFIT_PCT=0.15
+CHRONOS_SPREAD_THRESHOLD=0.6
+ASKING_BID_RATIO_THRESHOLD=0.6
+CONFIDENCE_THRESHOLD=0.7
+MIN_MOMENTUM_FOR_BUY=strong_up
+```
+
+- [ ] **Step 2: signal_v2 재시작**
+
+기존 signal_v2 가 가동 중이면 Ctrl+C 후:
+```powershell
+cd C:\Users\jaeoh\Desktop\workspace\web-ai\signal_v2
+.\start.bat
+```
+기대: 정상 시작 (signal_generator 자동 호출 — 매 cycle 마다).
+
+- [ ] **Step 3: state.signals 검증 (수동)**
+
+운영 시간대라면 cycle 진행 + state.signals 채워질 수 있음. 수동 검증:
+```powershell
+cd C:\Users\jaeoh\Desktop\workspace\web-ai
+python -c "
+import asyncio
+from signal_v2.config import get_settings
+from signal_v2.kis_client import KISClient
+from signal_v2.chronos_predictor import ChronosPredictor
+from signal_v2.state import PollState
+from signal_v2.rate_limit import SignalDedup
+from signal_v2.pull_worker import _run_post_close_cycle, update_minute_momentum_for_all
+from signal_v2.signal_generator import generate_signals
+
+async def main():
+    s = get_settings()
+    kc = KISClient(app_key=s.kis_app_key, app_secret=s.kis_app_secret, account=s.kis_account, is_virtual=s.kis_is_virtual, v1_token_path=s.v1_token_path)
+    cp = ChronosPredictor(model_name=s.chronos_model)
+    dedup = SignalDedup(s.db_path)
+    state = PollState()
+    state.portfolio = {'holdings': [{'ticker': '005930', 'name': '삼성전자', 'avg_price': 75000, 'current_price': 78500, 'pnl_pct': 0.047, 'profit_rate': 4.67, 'quantity': 100, 'broker': '키움'}]}
+    state.screener_preview = {'items': []}
+    try:
+        await _run_post_close_cycle(kc, cp, state)
+        update_minute_momentum_for_all(state)
+        generate_signals(state, dedup, s)
+        print('Signals:', state.signals)
+    finally:
+        await kc.close()
+asyncio.run(main())
+"
+```
+Expected: `Signals: {}` (정상 — pnl_pct 0.047 은 손절/익절 트리거 안 함, 매수 조건 다 만족 어려움) 또는 일부 신호 dict.
+
+- [ ] **Step 4: V1 무영향**
+
+V1 정상 가동 확인.
+
+- [ ] **Step 5: push**
+
+```powershell
+cd C:\Users\jaeoh\Desktop\workspace\web-ai
+git push
+```
+
+- [ ] **Step 6: 결과 보고**
+
+- Step 2 (signal_v2 시작): PASS / FAIL
+- Step 3 (state.signals 검증): PASS — empty dict or 신호 결과 공유 / FAIL
+- Step 4 (V1 무영향): PASS / FAIL
+- Step 5 (push): PASS / FAIL
+
+전체 PASS 시 **Phase 4 완료** → Phase 5 (agent-office /signal + Qwen3 + 이중 텔레그램) brainstorming.
+
+---
+
+## Self-Review
+
+**1. Spec coverage:**
+
+| Spec § | 요구사항 | Plan task |
+|--------|----------|----------|
+| §2 ① signal_generator | Task 2 ✅ |
+| §2 ② config 6 env | Task 1 ✅ |
+| §2 ③ state.signals | Task 1 ✅ |
+| §2 ④ pull_worker integration | Task 3 ✅ |
+| §2 ⑤ main.py lifespan | Task 3 ✅ |
+| §2 ⑥ 10 tests | Task 2 (9) + Task 3 (1) = 10 ✅ |
+| §4 매수 룰 + confidence | Task 2 (_check_buy_hard_gate + _compute_buy_confidence) ✅ |
+| §5 매도 룰 + dedup | Task 2 (_try_stop_loss/anomaly/take_profit + dedup.is_recent/record) ✅ |
+| §6 state 통합 + pull_worker | Task 1 + Task 3 ✅ |
+| §7 signal_generator 구조 | Task 2 Step 3 (8 helpers) ✅ |
+| §8 10 테스트 케이스 | Task 2-3 ✅ |
+| §9 DoD 8 항목 | Task 1-4 합산 ✅ |
+
+No gaps.
+
+**2. Placeholder scan**: No "TBD" / "implement later". 각 step 의 코드 + 명령 모두 명시.
+
+**3. Type consistency:**
+- `generate_signals(state, dedup, settings) -> None` consistent Task 2 + Task 3 ✅
+- `MOMENTUM_SCORES` 매핑 consistent (1.0/0.7/0.5/0.3/0.0) ✅
+- Settings field names consistent Task 1 + Task 2 (stop_loss_pct, etc.) ✅
+- PollState.signals dict[str, dict] consistent ✅
+- helper signatures (_check_buy_hard_gate, _compute_buy_confidence, _try_stop_loss, _try_anomaly, _try_take_profit, _build_buy_signal, _build_sell_signal, _build_context) consistent ✅
+
+Plan passes self-review.

docs/superpowers/specs/2026-05-15-confidence-signal-pipeline-v2-architecture.md

@@ -194,7 +194,7 @@ agent-office 가 web-ai 의 Ollama (Qwen3 14B Q4) 에 보내는 prompt 의 응
 ### 6.1 매수 신호 (screener Top-20 종목 대상)
 
 조건 (전부 충족):
-1. Chronos-2 1-day quantile (median) 예측 > 0% 그리고 분포 폭 (90-10 분위수 / 50 분위수) < 0.6 (좁은 분포 = 높은 conf)
+1. Chronos-2 1-day quantile (median) 예측 > 0% 그리고 분포 폭 `q90 - q10` < 0.6 (절대 spread, 60% return 변동 미만 = 모델 확신; **Phase 4 amend 2026-05-17**: 기존 relative formula `(q90-q10)/median` 는 Chronos-bolt 의 median≈0 출력에서 거의 모든 신호 거부 → absolute spread 채택. 자세한 사유는 `2026-05-17-signal-v2-phase4-signal-generator.md` §4.2 참조)
 2. 분봉 모멘텀 = `strong_up`:
    - 5분봉 5개 연속 양봉
    - 거래량 > 평균 1.5배

docs/superpowers/specs/2026-05-17-agent-office-grid-redesign-design.md

@@ -0,0 +1,345 @@
+# Agent Office 그리드 재설계 — Design Spec
+
+**Date:** 2026-05-17
+**Author:** CEO (with Claude)
+**Target:** `web-ui` `/agent-office` 페이지
+
+---
+
+## 1. 배경 & 목적
+
+현재 `/agent-office` 페이지는 픽셀 사무실 Canvas 위에서 5명의 에이전트 캐릭터가 무의미하게 걸어다니는 형태다. 시각적 즐거움은 있으나 정보 밀도가 낮고, 각 에이전트가 무슨 일을 하는지 한눈에 파악하기 어렵다.
+
+이를 **3x3 그리드** 기반의 정보 중심 UI로 재설계한다. 왼편에 9개의 에이전트 이미지 카드를 배치하고, 카드 클릭 시 오른편 패널에서 해당 에이전트의 명령·태스크·토큰·로그를 확인한다.
+
+---
+
+## 2. 범위 (Scope)
+
+### In scope
+- `src/pages/agent-office/AgentOffice.jsx` 전면 재작성 (Canvas → Grid)
+- 그리드 카드 컴포넌트 신규 작성
+- `SidePanel.jsx` 헤더 부분 수정 (emoji → 이미지)
+- `SidePanel.jsx`의 `AGENT_META`에서 `blog` 제거, `insta` 추가
+- TopBar 단순화 (theme/zoom 컨트롤 제거)
+- Canvas 관련 파일/디렉토리 전체 삭제
+- 이미지 에셋 디렉토리 신설
+
+### Out of scope
+- 백엔드 변경 (현재 백엔드의 `insta` 에이전트는 이미 등록 완료, 추가 작업 불필요)
+- 새 에이전트 추가 (4개 placeholder는 "준비 중" 표시만)
+- 4탭 컨텐츠 (Commands/Tasks/Tokens/Logs) 로직 수정
+
+---
+
+## 3. 에이전트 구성
+
+### 실제 작동 5명
+
+| ID | 표시명 | 색상 | 역할 요약 |
+|----|--------|------|-----------|
+| `stock` | 주식 트레이더 | `#4488cc` | 주식 매매·뉴스 분석·포트폴리오 |
+| `music` | 음악 프로듀서 | `#44aa88` | AI 음악 생성 |
+| `insta` | 인스타 큐레이터 | `#d97706` | 매일 09:30 뉴스 수집 → 키워드 추출 → AI 카드 10장 생성 → 텔레그램 푸시 |
+| `realestate` | 청약 애널리스트 | `#c026d3` | 부동산 청약 매칭·자치구 5티어 분석 |
+| `lotto` | 로또 큐레이터 | `#ef4444` | 로또 번호 추천·브리핑 |
+
+> `blog`는 `insta`로 대체됨. 기존 `SidePanel.jsx`의 `AGENT_META`에서 `blog` 항목 삭제 + `insta` 추가.
+
+### Placeholder 4개
+
+- ID 없음 (그리드 슬롯 인덱스 6/7/8/9로만 식별)
+- 모두 동일하게 `agent_undetermined.png` + "준비 중" 라벨
+- 클릭 시 정적 안내 패널 노출
+
+---
+
+## 4. 디렉토리 & 파일 구조
+
+### 신설 디렉토리
+
+```
+src/pages/agent-office/assets/agents/
+├── agent_stock.png          (사용자 제공)
+├── agent_music.png          (사용자 제공)
+├── agent_insta.png          (사용자 제공)
+├── agent_realestate.png     (사용자 제공)
+├── agent_lotto.png          (사용자 제공)
+└── agent_undetermined.png   (사용자 제공, 4 placeholder 공유)
+```
+
+### 파일명 규칙
+`agent_{id}.png` 형식. `{id}`는 백엔드의 agent_id와 일치 (소문자, underscore).
+
+### 권장 이미지 사양
+- 정사각형 (예: 512x512)
+- PNG (투명 배경 허용)
+- 카드 표시 시 `object-fit: cover`로 정사각 크롭
+
+### 삭제 대상
+
+```
+src/pages/agent-office/
+├── canvas/                  ← 전체 삭제
+│   ├── themes.js
+│   ├── FurnitureRenderer.js
+│   ├── ProceduralSprite.js
+│   ├── AgentSprite.js
+│   ├── SpriteLoader.js
+│   ├── OverlayRenderer.js
+│   ├── Pathfinder.js
+│   ├── OfficeRenderer.js
+│   └── TileMap.js
+├── hooks/
+│   └── useOfficeCanvas.js   ← 삭제
+└── assets/
+    └── office-map.json      ← 삭제
+```
+
+### 유지 대상
+
+```
+src/pages/agent-office/
+├── AgentOffice.jsx               ← 재작성
+├── AgentOffice.css               ← 재작성
+├── hooks/
+│   └── useAgentManager.js        ← 그대로 (WebSocket 로직)
+└── components/
+    ├── TopBar.jsx                ← 단순화 (theme/zoom 제거)
+    ├── SidePanel.jsx             ← 헤더 수정 + AGENT_META 갱신
+    ├── CommandTab.jsx            ← 그대로
+    ├── TaskTab.jsx               ← 그대로
+    ├── TokenTab.jsx              ← 그대로
+    └── LogTab.jsx                ← 그대로
+```
+
+### 신규 컴포넌트
+
+```
+src/pages/agent-office/components/
+├── AgentGrid.jsx           ← 3x3 그리드 래퍼
+├── AgentCard.jsx           ← 카드 1개 (image + state dot + badge + name)
+├── PlaceholderCard.jsx     ← "준비 중" 카드
+└── EmptyDetailPanel.jsx    ← 초기 안내 / placeholder 클릭 시 안내
+```
+
+---
+
+## 5. 레이아웃
+
+### 전체 화면 구조
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│  TopBar (connected status only)                              │
+├──────────────────────────────────┬──────────────────────────┤
+│                                  │                          │
+│  AgentGrid (3x3)                 │  Right Panel              │
+│  ┌──────┬──────┬──────┐          │                          │
+│  │stock │music │insta │          │  ┌─ active 선택 시 ─┐    │
+│  ├──────┼──────┼──────┤          │  │ SidePanel        │    │
+│  │realE │lotto │  ??  │          │  │ - 헤더(이미지+이름)│    │
+│  ├──────┼──────┼──────┤          │  │ - 4 tabs         │    │
+│  │  ??  │  ??  │  ??  │          │  └──────────────────┘    │
+│  └──────┴──────┴──────┘          │                          │
+│                                  │  ┌─ placeholder 선택 ─┐  │
+│                                  │  │ "준비 중인 에이전트"│  │
+│                                  │  └────────────────────┘  │
+│                                  │                          │
+│                                  │  ┌─ 초기(미선택) ──────┐ │
+│                                  │  │ "에이전트를 선택…"  │ │
+│                                  │  └────────────────────┘ │
+└──────────────────────────────────┴──────────────────────────┘
+```
+
+### 그리드 슬롯 순서 (좌→우, 위→아래)
+
+| Index | Slot |
+|-------|------|
+| 1 (행1·열1) | `stock` |
+| 2 (행1·열2) | `music` |
+| 3 (행1·열3) | `insta` |
+| 4 (행2·열1) | `realestate` |
+| 5 (행2·열2) | `lotto` |
+| 6 (행2·열3) | placeholder |
+| 7 (행3·열1) | placeholder |
+| 8 (행3·열2) | placeholder |
+| 9 (행3·열3) | placeholder |
+
+### AgentCard 시각 구조
+
+```
+┌─────────────────────┐
+│ ● state    [③]      │ ← 상태 dot(좌상, image 약간 위) + 알림 뱃지(우상)
+│  ┌───────────────┐  │
+│  │               │  │
+│  │  agent_xxx    │  │ ← 정사각 이미지 (object-fit: cover)
+│  │     .png      │  │
+│  │               │  │
+│  └───────────────┘  │
+│   주식 트레이더      │ ← display_name
+└─────────────────────┘
+```
+
+#### 상태 dot
+
+| state | color | 동작 |
+|-------|-------|------|
+| `idle` | `#6b7280` (회색) | 정적 |
+| `working` | `#22c55e` (초록) | pulse 애니메이션 |
+| `error` | `#ef4444` (빨강) | 정적 |
+| `waiting_approval` | `#f59e0b` (주황) | pulse |
+| `break` | `#94a3b8` (밝은 회색) | 정적 |
+
+상태 dot은 카드의 좌상단, 이미지보다 약간 위쪽에 위치 (이미지 영역 바깥 또는 모서리 살짝 걸침).
+
+#### 알림 뱃지
+
+- `notifications[agentId] > 0`일 때만 우상단에 표시
+- 빨강 배경에 흰 숫자 (count > 9면 "9+")
+- 카드 클릭 시 자동으로 0으로 리셋 (`clearNotifications` 호출 — 기존 로직 재사용)
+
+---
+
+## 6. 데이터 플로우
+
+```
+useAgentManager (그대로 유지)
+   ├── WebSocket /api/agent-office/ws
+   ├── agents: { [id]: { state, detail, task_id } }
+   ├── notifications: { [id]: count }
+   ├── pendingTasks: [...]
+   ├── connected: bool
+   └── refreshTrigger: number
+
+AgentOffice.jsx
+   ├── agents → AgentGrid에 전달 → 각 AgentCard가 state로 dot 색상 결정
+   ├── notifications → 각 AgentCard가 badge 표시
+   ├── selectedAgent (local state): string | null | "placeholder"
+   └── 카드 클릭 시 setSelectedAgent + clearNotifications
+
+Right Panel 분기
+   ├── selectedAgent === null         → EmptyDetailPanel (초기 안내)
+   ├── selectedAgent === "placeholder"→ EmptyDetailPanel ("준비 중" 메시지)
+   └── selectedAgent ∈ active 5명     → SidePanel (4탭, 기존 로직)
+```
+
+---
+
+## 7. SidePanel 수정 사항
+
+### AGENT_META 갱신
+
+```js
+// src/pages/agent-office/components/SidePanel.jsx
+import stockImg from '../assets/agents/agent_stock.png';
+import musicImg from '../assets/agents/agent_music.png';
+import instaImg from '../assets/agents/agent_insta.png';
+import realestateImg from '../assets/agents/agent_realestate.png';
+import lottoImg from '../assets/agents/agent_lotto.png';
+
+const AGENT_META = {
+  stock:      { displayName: '주식 트레이더',  image: stockImg,      color: '#4488cc' },
+  music:      { displayName: '음악 프로듀서',  image: musicImg,      color: '#44aa88' },
+  insta:      { displayName: '인스타 큐레이터', image: instaImg,      color: '#d97706' },
+  realestate: { displayName: '청약 애널리스트', image: realestateImg, color: '#c026d3' },
+  lotto:      { displayName: '로또 큐레이터',  image: lottoImg,      color: '#ef4444' }
+};
+// blog 항목 삭제
+```
+
+### 헤더 시각 변경
+
+```jsx
+// 변경 전: emoji icon
+<div className="ao-sidepanel-icon" style={{ background: meta.color }}>
+  {meta.emoji}
+</div>
+
+// 변경 후: 이미지
+<div className="ao-sidepanel-icon" style={{ borderColor: meta.color }}>
+  <img src={meta.image} alt={meta.displayName} />
+</div>
+```
+
+4탭(Commands/Tasks/Tokens/Logs) 본체 로직은 손대지 않음.
+
+---
+
+## 8. CSS 토큰 (제안)
+
+```css
+:root {
+  --ao-bg: #0f172a;
+  --ao-card-bg: #1e293b;
+  --ao-card-border: #334155;
+  --ao-card-border-active: #60a5fa;
+  --ao-text: #e2e8f0;
+  --ao-text-muted: #94a3b8;
+  --ao-grid-gap: 16px;
+  --ao-card-radius: 12px;
+}
+
+.ao-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--ao-grid-gap);
+}
+
+.ao-card {
+  aspect-ratio: 1 / 1.15;  /* 이미지 정사각 + 이름줄 */
+  background: var(--ao-card-bg);
+  border: 1px solid var(--ao-card-border);
+  border-radius: var(--ao-card-radius);
+  cursor: pointer;
+  transition: transform 120ms ease, border-color 120ms ease;
+}
+
+.ao-card:hover { transform: translateY(-2px); }
+.ao-card.active { border-color: var(--ao-card-border-active); }
+.ao-card.placeholder { opacity: 0.55; cursor: pointer; }
+```
+
+반응형: 모바일에서는 `grid-template-columns: repeat(2, 1fr)` 또는 `repeat(1, 1fr)`로 축소.
+
+---
+
+## 9. 에러 처리 / Edge Cases
+
+| 상황 | 동작 |
+|------|------|
+| 이미지 로드 실패 | `<img onError>`로 단색 배경 + 첫 글자 fallback |
+| WebSocket 끊김 | TopBar에 disconnected 표시. 카드는 마지막 상태 유지 (회색 처리 안 함 — 기존 동작 유지) |
+| `agents[id]` 미존재 | dot 회색(`idle`), 정상 표시 |
+| placeholder 클릭 | 우측 패널만 변경, WebSocket 호출/clearNotifications 호출 없음 |
+
+---
+
+## 10. 테스트 계획
+
+- [ ] 6개 이미지 파일이 디렉토리에 존재할 때 그리드 정상 렌더링
+- [ ] 이미지 누락 시 fallback 표시
+- [ ] WebSocket으로 `agent_state` 수신 시 dot 색상 변경
+- [ ] `notification` 수신 시 뱃지 표시, 카드 클릭 시 0으로 리셋
+- [ ] active 5명 클릭 → SidePanel 4탭 표시 (기존 동작 유지)
+- [ ] placeholder 4슬롯 클릭 → "준비 중" 패널
+- [ ] TopBar의 connected/disconnected 표시 정상
+- [ ] Canvas 잔재(파일 import 누락 등) 없음 — `npm run build` 통과
+- [ ] 모바일 뷰(<768px) 그리드 축소 정상
+
+---
+
+## 11. 이행 절차 (사용자 작업 포함)
+
+1. **사용자**: `src/pages/agent-office/assets/agents/` 디렉토리에 6개 PNG 파일 배치
+2. **Claude (구현 단계)**: writing-plans 스킬로 단계별 작업 계획 작성
+3. 구현·삭제·테스트 후 commit
+4. NAS 배포는 별도 (`npm run release:nas`)
+
+---
+
+## 12. 향후 확장
+
+- 9번째 active 에이전트 채용 시: 이미지 추가 + `AGENT_META` 갱신 + 슬롯 인덱스 매핑 변경
+- 그리드 자동 정렬(상태별/우선순위별 sort) — 현재는 정적 배치
+- 카드 hover 시 미니 프리뷰 (최근 활동 1줄 요약) — 추후 검토

docs/superpowers/specs/2026-05-17-signal-v2-phase4-signal-generator.md

@@ -0,0 +1,406 @@
+# Confidence Signal Pipeline V2 — Phase 4: Signal Generator Design
+
+**작성일**: 2026-05-17
+**작성자**: gahusb
+**상태**: Approved for implementation
+**선행 spec**:
+- Phase 0 architecture (`2026-05-15-confidence-signal-pipeline-v2-architecture.md`)
+- Phase 1 stock WebAI API (`2026-05-15-signal-v2-phase1-webai-api.md`)
+- Phase 2 web-ai pull worker (`2026-05-16-signal-v2-phase2-web-ai-pull-worker.md`)
+- Phase 3a KIS data collection (`2026-05-16-signal-v2-phase3a-kis-data-collection.md`)
+- Phase 3b Chronos-2 + momentum (`2026-05-16-signal-v2-phase3b-chronos-momentum.md`)
+
+**브레인스토밍 결정 6개**:
+- scope = A (신호 생성만, Phase 5 가 발송)
+- trigger = A (매 분봉 cycle 후 일괄 평가)
+- minute_score = A (Linear 5-level 1.0/0.7/0.5/0.3/0.0)
+- 임계값 = A+ (6 env 외부화)
+- state.signals schema = A (Phase 0 spec §5.2 그대로)
+- 테스트 = A (9 단위 + 1 integration = 10 신규)
+
+---
+
+## 1. 목표
+
+Phase 2/3a/3b 의 모든 산출을 종합해 Phase 0 spec §6.1/§6.2/§6.3 의 매수/매도/dedup 룰 적용. 임계값 통과한 신호를 `state.signals` 에 저장 + `SignalDedup` 으로 24h 중복 차단.
+
+**Why**: Phase 5 (agent-office) 의 입력 계약 완성. signal_v2 가 자체적으로 매수/매도 신호 생성 → Phase 5 가 발송.
+
+---
+
+## 2. 범위
+
+### 포함 (6 항목)
+
+- ① `signal_generator.py` 신규 — `generate_signals(state, dedup, settings) -> None` (state mutating)
+- ② `config.py` 확장 — 6 env (`STOP_LOSS_PCT`, `TAKE_PROFIT_PCT`, `CHRONOS_SPREAD_THRESHOLD`, `ASKING_BID_RATIO_THRESHOLD`, `CONFIDENCE_THRESHOLD`, `MIN_MOMENTUM_FOR_BUY`)
+- ③ `state.py` 확장 — `signals: dict[str, dict]` (Phase 5 input)
+- ④ `pull_worker.py` 확장 — 매 cycle 후 `generate_signals` 호출 + signature 확장 (dedup + settings)
+- ⑤ `main.py` 의 lifespan poll_task 호출 시 dedup/settings 전달
+- ⑥ 테스트 9 단위 + 1 integration = **10 신규** (45 → 55)
+
+### Phase 4 산출 (Phase 5 input)
+
+`state.signals[ticker]` — Phase 0 spec §5.2 schema:
+```python
+{
+    "ticker": str, "name": str,
+    "action": "buy" | "sell",
+    "confidence_webai": float,
+    "current_price": int,
+    "avg_price": int | None,    # sell 시만
+    "pnl_pct": float | None,
+    "context": {
+        "chronos_pred_1d": float (median),
+        "chronos_pred_conf": float,
+        "chronos_q10": float, "chronos_q90": float,
+        "screener_rank": int | None,
+        "screener_scores": dict | None,
+        "minute_momentum": str,
+        "asking_bid_ratio": float,
+        "news_sentiment": float | None,
+        "news_reason": str | None,
+    },
+    "as_of": str (ISO),
+}
+```
+
+### 범위 외 (NOT)
+
+- agent-office `/signal` HTTP POST (Phase 5)
+- Qwen3 검증 + 이중 텔레그램 (Phase 5)
+- 호가 변경 시 즉시 매도 trigger (Phase 7 backlog)
+- 자동 매매 (Phase 8 backlog)
+- ML 기반 룰 변종 (Phase 7 백테스트 후)
+- `kospi_change`, `news_top` 컨텍스트 (Phase 7 backlog)
+- 외부 API 호출 — Phase 4 는 state 만 사용 (pure function)
+
+---
+
+## 3. 파일 구조 + 변경 매트릭스
+
+| 파일 | 작업 | 라인 |
+|------|------|------|
+| `signal_v2/signal_generator.py` | 신규 (generate_signals + 5 helpers) | ~250 |
+| `signal_v2/config.py` | Settings 6 field 추가 | +15 |
+| `signal_v2/state.py` | PollState `signals` 필드 | +2 |
+| `signal_v2/pull_worker.py` | poll_loop signature + 매 cycle 호출 | +10 |
+| `signal_v2/main.py` | lifespan poll_task 인자 추가 | +3 |
+| `signal_v2/tests/test_signal_generator.py` | 9 단위 신규 | ~350 |
+| `signal_v2/tests/test_pull_worker.py` | 1 integration 추가 | +50 |
+
+**합계**: 7 파일 변경, 10 신규 테스트.
+
+### 외부 의존성 신규
+
+**없음**. signal_generator 는 순수 함수, 외부 라이브러리 0.
+
+### 6 신규 env
+
+| env | 기본값 | 의미 |
+|-----|--------|------|
+| `STOP_LOSS_PCT` | `-0.07` | 손절선 비율. `pnl_pct < 이 값` → 즉시 매도 |
+| `TAKE_PROFIT_PCT` | `0.15` | 익절선 비율. `pnl_pct > 이 값` → 검토 알림 |
+| `CHRONOS_SPREAD_THRESHOLD` | `0.6` | `(q90-q10)/max(|median|, 0.001) < 이 값` → 매수 통과 |
+| `ASKING_BID_RATIO_THRESHOLD` | `0.6` | `bid_ratio >= 이 값` → 매수 통과 |
+| `CONFIDENCE_THRESHOLD` | `0.7` | `confidence_webai > 이 값` → 신호 발생 |
+| `MIN_MOMENTUM_FOR_BUY` | `strong_up` | 분봉 모멘텀 카테고리 |
+
+---
+
+## 4. 매수 룰 + Confidence
+
+### 4.1 매수 룰 대상
+
+- screener Top-N (`state.screener_preview.items`)
+- portfolio 보유 종목 (추가 매수 검토, dedup 으로 중복 차단)
+
+### 4.2 Hard gate (모든 조건 충족)
+
+1. `state.chronos_predictions[ticker].median > 0` (다음날 상승)
+2. `(q90 - q10) < settings.chronos_spread_threshold` (**absolute spread** — Phase 3b 실 운영 데이터 기반 변경)
+3. `state.minute_momentum[ticker] == settings.min_momentum_for_buy` (기본 strong_up)
+4. `state.asking_price[ticker].bid_ratio >= settings.asking_bid_ratio_threshold`
+
+**Spread formula 결정 노트 (2026-05-17 implementer 변경 채택)**:
+- Phase 0 spec §6.1 의 한국어 "(90-10 분위수) / 50 분위수 < 0.6" 은 *relative spread* 로 명시되었으나, Phase 3b 실 운영 결과 (Chronos zero-shot prediction 의 median 이 종종 0 가까이) 에서 relative formula 가 거의 모든 신호 거부 → useless.
+- **변경**: absolute spread `(q90 - q10) < 0.6` 사용. 0.6 = 60% 변동 예측 — 한국 주식 1-day 변동성 (1-2%) 대비 매우 넓음 (모델 자신 없음 신호).
+- 결과: Phase 3b smoke 005930 (median=-0.59%, q10=-8.9%, q90=6.4%, spread=15.3%) → spread 0.153 < 0.6 → hard gate 통과 가능 (다른 조건 충족 시).
+- Phase 7 IC 검증 시 임계값 재조정 가능 (env `CHRONOS_SPREAD_THRESHOLD`).
+
+### 4.3 Soft confidence (Phase 0 spec §6.1)
+
+```python
+chronos_conf = state.chronos_predictions[ticker]["conf"]
+minute_score = MOMENTUM_SCORES[state.minute_momentum[ticker]]
+# MOMENTUM_SCORES = {"strong_up": 1.0, "weak_up": 0.7, "neutral": 0.5,
+#                    "weak_down": 0.3, "strong_down": 0.0}
+screener_norm = 1 - (rank - 1) / 20 if rank is not None else 0.0
+confidence_webai = chronos_conf * 0.5 + minute_score * 0.3 + screener_norm * 0.2
+```
+
+### 4.4 임계값
+
+`confidence_webai > settings.confidence_threshold` (기본 0.7) → 신호 발생.
+
+### 4.5 누락 처리
+
+- portfolio (Top-N 외) 매수: `screener_rank = None` → `screener_norm = 0` (보수적)
+- `chronos_predictions[ticker]` 누락 → silent (Hard gate 위반)
+- `asking_price[ticker]` 누락 → silent
+
+---
+
+## 5. 매도 룰 + Dedup
+
+### 5.1 매도 대상
+
+portfolio holdings 만 (`state.portfolio.holdings`).
+
+### 5.2 매도 룰 (Phase 0 spec §6.2)
+
+**(a) 손절선 (즉시 trigger)**:
+- `pnl_pct < settings.stop_loss_pct` (기본 -0.07)
+- 다른 룰 무관 — 즉시 매도
+- `confidence_webai = 1.0`
+
+**(b) 익절선 (검토 알림)**:
+- `pnl_pct > settings.take_profit_pct` (기본 0.15)
+- "검토 권고" — 강제 매도 X
+- `confidence_webai = 0.6`
+
+**(c) 이상 신호**:
+- `chronos_predictions[ticker].median < -0.01`
+- `minute_momentum[ticker] == "strong_down"`
+- `asking_price[ticker].bid_ratio < (1 - settings.asking_bid_ratio_threshold)` (매도세 ≥ 60%)
+- confidence_webai = chronos_conf × 0.5 + inverted_minute × 0.3 + 1.0 × 0.2
+- 임계값 > `settings.confidence_threshold`
+
+### 5.3 우선순위 (같은 ticker 다중 trigger 시)
+
+1. **손절** (Phase 0 spec §6.2 "즉시") — 다른 룰 우회
+2. **이상 신호**
+3. **익절선**
+
+상위 trigger 시 하위 skip (한 종목당 한 cycle 1 매도 신호).
+
+### 5.4 Dedup (Phase 0 spec §6.3 + Phase 2 SignalDedup)
+
+```python
+if dedup.is_recent(ticker, action, within_hours=24):
+    continue  # silent
+# 신호 dict 생성
+state.signals[ticker] = {...}
+dedup.record(ticker, action, confidence=confidence_webai)
+```
+
+Dedup 키 `(ticker, action)` — 같은 종목의 매수/매도 별도 추적, 충돌 없음.
+
+손절선도 dedup 적용 (Phase 0 spec §6.3 "1일 1회 max").
+
+---
+
+## 6. State 통합 + pull_worker
+
+### 6.1 PollState 확장
+
+```python
+signals: dict[str, dict] = field(default_factory=dict)
+```
+
+매 cycle 마다 **덮어쓰기 X** — 같은 ticker key 재발생 시 갱신, 그 외 유지. dedup 으로 중복 차단되므로 누적 안전. Phase 5 consumer 가 처리 후 본인 측 dedup.
+
+### 6.2 pull_worker 흐름
+
+```python
+async def poll_loop(client, state, shutdown,
+                   kis_client=None, chronos=None,
+                   dedup=None, settings=None) -> None:
+    while not shutdown.is_set():
+        now = datetime.now(KST)
+        if _is_market_day(now) and _is_polling_window(now):
+            # 1. stock + KIS 분봉/호가 (Phase 2 + 3a)
+            await _run_polling_cycle(client, state, kis_client=kis_client)
+            # 2. 분봉 모멘텀 (Phase 3b)
+            update_minute_momentum_for_all(state)
+            # 3. 종가 트리거 시 Chronos (Phase 3b)
+            if _is_post_close_trigger(now) and chronos and kis_client:
+                await _run_post_close_cycle(kis_client, chronos, state)
+            # 4. (신규 Phase 4) 신호 생성
+            if dedup is not None and settings is not None:
+                try:
+                    generate_signals(state, dedup, settings)
+                except Exception:
+                    logger.exception("generate_signals failed")
+        ...
+```
+
+### 6.3 main.py lifespan
+
+```python
+_ctx.poll_task = asyncio.create_task(
+    poll_loop(
+        _ctx.client, state_mod.state, _ctx.shutdown,
+        kis_client=_ctx.kis_client,
+        chronos=_ctx.chronos,
+        dedup=_ctx.dedup,
+        settings=settings,
+    )
+)
+```
+
+---
+
+## 7. signal_generator.py 구조
+
+```python
+def generate_signals(state: PollState, dedup: SignalDedup, settings: Settings) -> None:
+    """Phase 4 entry point — state mutating."""
+    _evaluate_buy_signals(state, dedup, settings)
+    _evaluate_sell_signals(state, dedup, settings)
+
+
+def _evaluate_buy_signals(state, dedup, settings) -> None:
+    """screener Top-N + portfolio 매수 후보 평가."""
+    candidates = _buy_candidates(state)  # screener Top-N + portfolio holdings
+    for ticker, rank in candidates:
+        if not _check_buy_hard_gate(state, ticker, settings):
+            continue
+        confidence = _compute_buy_confidence(state, ticker, rank)
+        if confidence <= settings.confidence_threshold:
+            continue
+        if dedup.is_recent(ticker, "buy", within_hours=24):
+            continue
+        state.signals[ticker] = _build_buy_signal(state, ticker, rank, confidence)
+        dedup.record(ticker, "buy", confidence=confidence)
+
+
+def _evaluate_sell_signals(state, dedup, settings) -> None:
+    """portfolio 보유 종목 매도 평가 — 손절 > 이상 > 익절 우선순위."""
+    if state.portfolio is None:
+        return
+    for holding in state.portfolio.get("holdings", []):
+        ticker = holding["ticker"]
+        # 우선순위 1: 손절선
+        sell = _try_stop_loss(state, holding, settings)
+        # 우선순위 2: 이상 신호
+        if sell is None:
+            sell = _try_anomaly(state, holding, settings)
+        # 우선순위 3: 익절선
+        if sell is None:
+            sell = _try_take_profit(state, holding, settings)
+        if sell is None:
+            continue
+        if dedup.is_recent(ticker, "sell", within_hours=24):
+            continue
+        state.signals[ticker] = sell
+        dedup.record(ticker, "sell", confidence=sell["confidence_webai"])
+```
+
+Helper 함수:
+- `_buy_candidates(state) -> list[tuple[ticker, rank | None]]`
+- `_check_buy_hard_gate(state, ticker, settings) -> bool`
+- `_compute_buy_confidence(state, ticker, rank | None) -> float`
+- `_build_buy_signal(state, ticker, rank, confidence) -> dict`
+- `_try_stop_loss(state, holding, settings) -> dict | None`
+- `_try_anomaly(state, holding, settings) -> dict | None`
+- `_try_take_profit(state, holding, settings) -> dict | None`
+- `_build_context(state, ticker, rank, ...) -> dict`
+
+---
+
+## 8. 테스트 (10 신규)
+
+### 8.1 `test_signal_generator.py` (9 단위)
+
+| # | 이름 | Setup | 검증 |
+|---|------|-------|------|
+| 1 | `test_buy_signal_when_all_conditions_pass_and_confidence_high` | chronos +2%, narrow, strong_up, bid_ratio 0.7, rank 1 | state.signals[ticker]["action"]=="buy", confidence > 0.7, dedup.record 호출 |
+| 2 | `test_silent_when_chronos_median_negative` | median -1% | state.signals empty |
+| 3 | `test_silent_when_distribution_spread_too_wide` | spread 1.0 | empty |
+| 4 | `test_silent_when_momentum_not_strong_up` | weak_up | empty |
+| 5 | `test_silent_when_bid_ratio_below_threshold` | 0.5 | empty |
+| 6 | `test_silent_when_confidence_below_threshold` | rank 20 + median +0.5% (chronos_conf 낮음) → confidence < 0.7 | empty |
+| 7 | `test_sell_signal_when_stop_loss_triggered` | pnl_pct -0.08 | "sell" + confidence 1.0 |
+| 8 | `test_sell_signal_when_take_profit_triggered` | pnl_pct 0.16 | "sell" + confidence 0.6 |
+| 9 | `test_silent_when_dedup_recently_sent` | dedup.is_recent True | empty |
+
+### 8.2 `test_pull_worker.py` (1 integration)
+
+| # | 이름 | 검증 |
+|---|------|------|
+| 10 | `test_poll_loop_calls_generate_signals_after_cycle` | mock state setup + mock dedup → poll_loop 1 cycle → state.signals 갱신 |
+
+**합계**: 9 + 1 = **10 신규**. 45 → 55 total.
+
+---
+
+## 9. 위험 / 운영 / DoD
+
+### 9.1 위험 매트릭스
+
+| 위험 | 완화 |
+|------|------|
+| Phase 0 spec 의 confidence 공식이 실 운영과 안 맞음 | 6 env 외부화 → Phase 7 IC 검증 후 .env 조정 |
+| Chronos 누락 (장 시작 첫 cycle) | Hard gate 위반 → silent. 종가 cron 후 매수 신호 가능 |
+| Dedup DB 손상 | WAL + busy_timeout. 운영자 manual 복구 (signal_v2.db 삭제) |
+| 동시 cycle 에서 같은 종목 buy + sell trigger | dedup PK `(ticker, action)` 별도 추적 — 충돌 없음 |
+| portfolio 매수 → screener_norm=0 → 신호 발생 어려움 | 보수적. 다른 component 높아야 신호. 의도된 동작 |
+| 손절선 trigger 후 24h 추가 손실 → 다음 알림 차단 | 운영적 허용 (Phase 0 spec §6.3 1일 1회 max) |
+| 신호 빈도 너무 적음 | 4주 IC 검증 + 임계값 완화 |
+| 신호 빈도 너무 많음 (false positive) | dedup + 임계값 강화. Phase 7 |
+| 매도 우선순위 잘못 (손절 > 이상 > 익절) | 테스트 케이스로 검증 + 코드 명시 |
+| signals dict 누적 (cycle 사이 stale entry) | dedup 으로 중복 차단되므로 안전. Phase 5 consumer 가 처리 후 본인 측 marker |
+
+### 9.2 운영 영향
+
+| 항목 | 영향 |
+|------|------|
+| 다운타임 | signal_v2 재기동 ~5초 |
+| 사용자 영향 | 없음 (Phase 5 까지 발송 없음) |
+| `.env` 갱신 | optional 0-6개 (기본값 충분) |
+| V1 영향 | 0 |
+| KIS API 부하 | 0 (Phase 4 는 외부 호출 없음) |
+
+### 9.3 Phase 4 완료 조건 (DoD)
+
+- [ ] `signal_v2/signal_generator.py` 신규 (generate_signals + 8 helpers)
+- [ ] `signal_v2/config.py` Settings 에 6 field 추가 (default 있음)
+- [ ] `signal_v2/state.py` PollState `signals` field
+- [ ] `signal_v2/pull_worker.py` poll_loop signature + 매 cycle 호출
+- [ ] `signal_v2/main.py` lifespan 의 poll_task 인자 (dedup, settings) 추가
+- [ ] 9 단위 + 1 integration 테스트 PASS (총 55)
+- [ ] 운영 smoke: signal_v2 시작 → 1 cycle 후 state.signals 빈 dict (운영 시간대 신호 발생 가능 종목 없을 시 정상) 또는 ≥ 1 신호 생성
+- [ ] V1 무영향
+- [ ] git push
+
+---
+
+## 10. Phase 5 와의 관계
+
+본 Phase 4 완료 후 즉시 **Phase 5 (agent-office /signal + Qwen3 + 이중 텔레그램)** brainstorming. 의존성:
+
+```
+[Phase 4 spec/plan/실행]   →   [Phase 5 spec/plan/실행]
+       3-5일                       2주
+```
+
+Phase 5 의 입력 = 본 spec 의 `state.signals[ticker]` (state polling 또는 HTTP push). Phase 5 작업:
+- agent-office `/signal` endpoint 신설 (Phase 0 spec §5.2 schema 수신)
+- web-ai → agent-office HTTP client 추가 (signal_v2 측)
+- web-ai 의 Ollama Qwen3 14B Q4 설치 + agent-office 의 LLM 검증 호출
+- 이중 텔레그램 (본인 풀 / 아내 lite)
+
+---
+
+## 11. Backlog (본 spec NOT)
+
+- 호가 변경 시 즉시 매도 trigger — Phase 7 운영 후 검토
+- `kospi_change` 컨텍스트 (KIS 지수 fetch) — Phase 7
+- `news_top` 컨텍스트 (news_sentiment.reason 다중 추출) — Phase 7
+- 매수/매도 ML 룰 — Phase 7 백테스트 후
+- portfolio 매수의 screener_norm fallback (다른 default 값) — IC 검증 후
+- 신호 hit-rate 대시보드 — Phase 7
+- 분할 매수/매도 전략 — Phase 7 이후
+- 자동 매매 (실주문) — Phase 8
+- 손절선 dedup 면제 (즉시성 위해) — Phase 7 운영 검증 후

src/api.js

@@ -681,3 +681,45 @@ export const refreshScreenerSnap  = ()           => apiPost('/api/stock/screener
 export const listScreenerRuns     = (limit = 30) => apiGet (`/api/stock/screener/runs?limit=${limit}`);
 export const getScreenerRun       = (id)         => apiGet (`/api/stock/screener/runs/${id}`);
 
+// --- Lotto Weight Evolver ---
+
+export async function fetchEvolverStatus() {
+    const r = await fetch('/api/lotto/evolver/status');
+    if (!r.ok) throw new Error(`evolver/status ${r.status}`);
+    return r.json();
+}
+
+export async function fetchEvolverHistory(weeks = 12) {
+    const r = await fetch(`/api/lotto/evolver/history?weeks=${weeks}`);
+    if (!r.ok) throw new Error(`evolver/history ${r.status}`);
+    return r.json();
+}
+
+export async function fetchLottoTasks({ days = 7, taskType = null } = {}) {
+    const params = new URLSearchParams({ days: String(days), limit: '100' });
+    if (taskType) params.set('task_type', taskType);
+    const r = await fetch(`/api/agent-office/agents/lotto/tasks?${params}`);
+    if (!r.ok) throw new Error(`agent-office tasks ${r.status}`);
+    return r.json();
+}
+
+export async function fetchLottoLogs({ days = 7 } = {}) {
+    const r = await fetch(`/api/agent-office/agents/lotto/logs?limit=200`);
+    if (!r.ok) throw new Error(`agent-office logs ${r.status}`);
+    const data = await r.json();
+    if (!days) return data;
+    const cutoff = new Date(Date.now() - days * 24 * 3600 * 1000).toISOString();
+    return { items: (data.items || data.logs || []).filter(l => (l.created_at || '') >= cutoff) };
+}
+
+export async function triggerEvolverGenerate() {
+    const r = await fetch('/api/lotto/evolver/generate-now', { method: 'POST' });
+    if (!r.ok) throw new Error(`generate-now ${r.status}`);
+    return r.json();
+}
+
+export async function triggerEvolverEvaluate() {
+    const r = await fetch('/api/lotto/evolver/evaluate-now', { method: 'POST' });
+    if (!r.ok) throw new Error(`evaluate-now ${r.status}`);
+    return r.json();
+}

src/pages/agent-office/AgentOffice.css

@@ -5,8 +5,8 @@
   display: flex;
   flex-direction: column;
   height: 100vh;
-  background: #0d0d1a;
-  color: #ffffff;
+  background: #0f172a;
+  color: #e2e8f0;
   font-family: 'Courier New', monospace;
   overflow: hidden;
 }
@@ -32,50 +32,9 @@
   font-size: 15px;
   color: #8b5cf6;
 }
-.ao-topbar-status {
-  font-size: 11px;
-}
+.ao-topbar-status { font-size: 11px; }
 .ao-topbar-status.connected { color: #22c55e; }
 .ao-topbar-status.disconnected { color: #ef4444; }
-.ao-topbar-right {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-.ao-topbar-select {
-  background: #2a2a3e;
-  color: #aaa;
-  border: 1px solid #444;
-  padding: 3px 8px;
-  border-radius: 4px;
-  font-size: 12px;
-  font-family: inherit;
-}
-.ao-topbar-zoom {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-.ao-topbar-zoom button {
-  background: #2a2a3e;
-  color: #aaa;
-  border: 1px solid #444;
-  width: 24px;
-  height: 24px;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-}
-.ao-topbar-zoom button:disabled {
-  opacity: 0.3;
-  cursor: default;
-}
-.ao-topbar-zoom span {
-  color: #888;
-  font-size: 12px;
-  min-width: 28px;
-  text-align: center;
-}
 
 /* ===== Main Area ===== */
 .ao-main {
@@ -84,13 +43,103 @@
   position: relative;
   overflow: hidden;
 }
-.ao-canvas {
+
+/* ===== Grid Wrap ===== */
+.ao-grid-wrap {
   flex: 1;
-  cursor: grab;
+  overflow-y: auto;
+  padding: 24px;
+}
+.ao-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+  width: 100%;
+}
+
+/* ===== Agent Card ===== */
+.ao-card {
+  position: relative;
+  background: #1e293b;
+  border: 1px solid #334155;
+  border-radius: 12px;
+  cursor: pointer;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-family: inherit;
+  color: inherit;
+  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
+}
+.ao-card:hover {
+  transform: translateY(-2px);
+  border-color: var(--card-accent, #60a5fa);
+}
+.ao-card.active {
+  border-color: var(--card-accent, #60a5fa);
+  box-shadow: 0 0 0 2px var(--card-accent, #60a5fa);
+}
+.ao-card.placeholder {
+  opacity: 0.55;
+}
+
+.ao-card-dot {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: #6b7280;
+  box-shadow: 0 0 0 2px #0f172a;
+}
+.ao-card-dot.working          { background: #22c55e; }
+.ao-card-dot.error            { background: #ef4444; }
+.ao-card-dot.waiting_approval { background: #f59e0b; }
+.ao-card-dot.pulse {
+  animation: ao-pulse 1.6s ease-in-out infinite;
+}
+@keyframes ao-pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50%      { opacity: 0.45; transform: scale(1.2); }
+}
+
+.ao-card-badge {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  background: #ef4444;
+  color: #fff;
+  border-radius: 9px;
+  font-size: 10px;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ao-card-image {
+  width: 100%;
+  aspect-ratio: 941 / 1672;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #0f172a;
+  margin-bottom: 8px;
+}
+.ao-card-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
   display: block;
 }
-.ao-canvas:active {
-  cursor: grabbing;
+.ao-card-name {
+  font-size: 12px;
+  color: #e2e8f0;
+  text-align: center;
 }
 
 /* ===== Side Panel ===== */
@@ -103,6 +152,11 @@
   flex-shrink: 0;
   animation: slideIn 0.2s ease-out;
 }
+.ao-sidepanel-initial {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 @keyframes slideIn {
   from { transform: translateX(100%); }
   to { transform: translateX(0); }
@@ -120,13 +174,18 @@
   gap: 10px;
 }
 .ao-sidepanel-icon {
-  width: 36px;
-  height: 36px;
+  width: 40px;
+  height: 40px;
   border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 18px;
+  border: 2px solid #444;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+.ao-sidepanel-icon img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
 }
 .ao-sidepanel-name {
   font-weight: bold;
@@ -134,7 +193,12 @@
 }
 .ao-sidepanel-state {
   font-size: 11px;
-  color: #22c55e;
+  color: #94a3b8;
+}
+.ao-sidepanel-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
 }
 .ao-sidepanel-close {
   background: none;
@@ -144,9 +208,19 @@
   cursor: pointer;
   padding: 0 4px;
 }
-.ao-sidepanel-close:hover {
-  color: #fff;
+.ao-sidepanel-close:hover { color: #fff; }
+/* 전체 화면 토글 — 모바일 전용 (데스크톱에서는 숨김) */
+.ao-sidepanel-expand {
+  display: none;
+  background: none;
+  border: none;
+  color: #888;
+  font-size: 18px;
+  cursor: pointer;
+  padding: 0 4px;
+  line-height: 1;
 }
+.ao-sidepanel-expand:hover { color: #fff; }
 
 /* Tabs */
 .ao-sidepanel-tabs {
@@ -170,9 +244,7 @@
   border-bottom-color: #8b5cf6;
   font-weight: bold;
 }
-.ao-sidepanel-tab:hover {
-  color: #aaa;
-}
+.ao-sidepanel-tab:hover { color: #aaa; }
 .ao-sidepanel-content {
   flex: 1;
   overflow-y: auto;
@@ -207,10 +279,7 @@
 .ao-btn-quick:hover { background: #3a3a5e; }
 .ao-btn-quick:disabled { opacity: 0.4; }
 
-.ao-param-row {
-  display: flex;
-  gap: 6px;
-}
+.ao-param-row { display: flex; gap: 6px; }
 .ao-input {
   flex: 1;
   background: #1a1a2e;
@@ -236,177 +305,67 @@
 .ao-btn-send:hover { background: #5b21b6; }
 .ao-btn-send:disabled { opacity: 0.4; }
 
-/* Approval */
 .ao-approval-card {
   background: rgba(146,64,14,0.15);
   border: 1px solid #92400e;
   border-radius: 6px;
   padding: 10px;
 }
-.ao-approval-title {
-  color: #fbbf24;
-  font-size: 12px;
-  font-weight: bold;
-  margin-bottom: 4px;
-}
-.ao-approval-desc {
-  color: #ddd;
-  font-size: 11px;
-  margin-bottom: 8px;
-  word-break: break-all;
-}
-.ao-approval-actions {
-  display: flex;
-  gap: 6px;
-}
+.ao-approval-title { color: #fbbf24; font-size: 12px; font-weight: bold; margin-bottom: 4px; }
+.ao-approval-desc { color: #ddd; font-size: 11px; margin-bottom: 8px; word-break: break-all; }
+.ao-approval-actions { display: flex; gap: 6px; }
 .ao-btn-approve {
-  flex: 1;
-  background: #065f46;
-  color: #fff;
-  border: none;
-  padding: 7px;
-  border-radius: 4px;
-  font-size: 12px;
-  cursor: pointer;
+  flex: 1; background: #065f46; color: #fff; border: none;
+  padding: 7px; border-radius: 4px; font-size: 12px; cursor: pointer;
 }
 .ao-btn-reject {
-  flex: 1;
-  background: #7f1d1d;
-  color: #fff;
-  border: none;
-  padding: 7px;
-  border-radius: 4px;
-  font-size: 12px;
-  cursor: pointer;
+  flex: 1; background: #7f1d1d; color: #fff; border: none;
+  padding: 7px; border-radius: 4px; font-size: 12px; cursor: pointer;
 }
 
 /* ===== Task Tab ===== */
 .ao-task-tab { display: flex; flex-direction: column; gap: 4px; }
-.ao-task-item {
-  background: #1a1a2e;
-  border-radius: 4px;
-  padding: 8px;
-  cursor: pointer;
-}
+.ao-task-item { background: #1a1a2e; border-radius: 4px; padding: 8px; cursor: pointer; }
 .ao-task-item:hover { background: #222240; }
-.ao-task-header {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 12px;
-}
+.ao-task-header { display: flex; align-items: center; gap: 6px; font-size: 12px; }
 .ao-task-type { color: #ccc; font-weight: bold; flex: 1; }
-.ao-task-badge {
-  padding: 1px 6px;
-  border-radius: 3px;
-  font-size: 10px;
-}
+.ao-task-badge { padding: 1px 6px; border-radius: 3px; font-size: 10px; }
 .ao-task-time { color: #666; font-size: 10px; }
 .ao-task-result {
-  margin-top: 6px;
-  background: #0d0d1a;
-  padding: 6px;
-  border-radius: 3px;
-  font-size: 10px;
-  color: #aaa;
-  max-height: 200px;
-  overflow-y: auto;
-  white-space: pre-wrap;
-  word-break: break-all;
+  margin-top: 6px; background: #0d0d1a; padding: 6px; border-radius: 3px;
+  font-size: 10px; color: #aaa; max-height: 200px; overflow-y: auto;
+  white-space: pre-wrap; word-break: break-all;
 }
 
 /* ===== Token Tab ===== */
 .ao-token-tab { display: flex; flex-direction: column; gap: 12px; }
-.ao-token-period {
-  display: flex;
-  gap: 4px;
-}
+.ao-token-period { display: flex; gap: 4px; }
 .ao-btn-period {
-  flex: 1;
-  background: #1a1a2e;
-  color: #888;
-  border: 1px solid #333;
-  padding: 5px;
-  border-radius: 4px;
-  font-size: 11px;
-  font-family: inherit;
-  cursor: pointer;
-}
-.ao-btn-period.active {
-  background: #4c1d95;
-  color: #fff;
-  border-color: #4c1d95;
-}
-.ao-token-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 8px;
-}
-.ao-token-card {
-  background: #1a1a2e;
-  border-radius: 6px;
-  padding: 10px;
-  text-align: center;
-}
-.ao-token-label {
-  font-size: 10px;
-  color: #888;
-  text-transform: uppercase;
-  margin-bottom: 4px;
-}
-.ao-token-value {
-  font-size: 18px;
-  font-weight: bold;
-  color: #fff;
+  flex: 1; background: #1a1a2e; color: #888; border: 1px solid #333;
+  padding: 5px; border-radius: 4px; font-size: 11px; font-family: inherit; cursor: pointer;
 }
+.ao-btn-period.active { background: #4c1d95; color: #fff; border-color: #4c1d95; }
+.ao-token-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+.ao-token-card { background: #1a1a2e; border-radius: 6px; padding: 10px; text-align: center; }
+.ao-token-label { font-size: 10px; color: #888; text-transform: uppercase; margin-bottom: 4px; }
+.ao-token-value { font-size: 18px; font-weight: bold; color: #fff; }
 .ao-token-bar { margin-top: 4px; }
 .ao-token-bar-label { font-size: 10px; color: #888; margin-bottom: 4px; }
-.ao-token-bar-track {
-  display: flex;
-  height: 8px;
-  border-radius: 4px;
-  overflow: hidden;
-  background: #1a1a2e;
-}
+.ao-token-bar-track { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: #1a1a2e; }
 .ao-token-bar-fill.input { background: #3b82f6; }
 .ao-token-bar-fill.output { background: #8b5cf6; }
-.ao-token-bar-legend {
-  display: flex;
-  gap: 12px;
-  font-size: 10px;
-  color: #888;
-  margin-top: 4px;
-}
-.ao-token-bar-legend .dot {
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  margin-right: 4px;
-}
+.ao-token-bar-legend { display: flex; gap: 12px; font-size: 10px; color: #888; margin-top: 4px; }
+.ao-token-bar-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
 .ao-token-bar-legend .dot.input { background: #3b82f6; }
 .ao-token-bar-legend .dot.output { background: #8b5cf6; }
-.ao-token-detail {
-  display: flex;
-  justify-content: space-between;
-  font-size: 10px;
-  color: #666;
-}
+.ao-token-detail { display: flex; justify-content: space-between; font-size: 10px; color: #666; }
 
 /* ===== Log Tab ===== */
 .ao-log-tab {
-  max-height: 100%;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
+  max-height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: 2px;
 }
 .ao-log-item {
-  display: flex;
-  gap: 6px;
-  font-size: 11px;
-  padding: 3px 0;
-  border-bottom: 1px solid #1a1a2e;
+  display: flex; gap: 6px; font-size: 11px; padding: 3px 0; border-bottom: 1px solid #1a1a2e;
 }
 .ao-log-time { color: #555; min-width: 60px; }
 .ao-log-level { min-width: 48px; font-weight: bold; }
@@ -414,47 +373,53 @@
 
 /* ===== Common ===== */
 .ao-empty {
-  color: #555;
+  color: #94a3b8;
   text-align: center;
   padding: 24px;
   font-size: 13px;
+  line-height: 1.6;
 }
 
 /* ===== Mobile (< 768px) ===== */
 @media (max-width: 768px) {
-  .ao-topbar-right { gap: 6px; }
-  .ao-topbar-select { font-size: 11px; padding: 2px 6px; }
-
-  .ao-main {
-    flex-direction: column;
+  .ao-grid-wrap { padding: 12px; }
+  .ao-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 10px;
   }
+  .ao-main { flex-direction: column; }
 
-  .ao-canvas {
-    flex: 1;
-  }
-
-  /* Side panel → bottom sheet */
   .ao-sidepanel {
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
+    top: auto;
     width: 100%;
+    height: 55vh;
     max-height: 55vh;
     border-left: none;
     border-top: 1px solid #333;
     border-radius: 16px 16px 0 0;
     animation: slideUp 0.25s ease-out;
     z-index: 100;
+    transition: height 0.25s ease, max-height 0.25s ease, border-radius 0.25s ease;
+  }
+  /* 전체 화면으로 확장 */
+  .ao-sidepanel.expanded {
+    top: 0;
+    height: 100dvh;
+    max-height: 100dvh;
+    border-radius: 0;
+    border-top: none;
   }
   @keyframes slideUp {
     from { transform: translateY(100%); }
     to { transform: translateY(0); }
   }
 
-  .ao-sidepanel-header {
-    padding: 8px 12px;
-  }
+  .ao-sidepanel-expand { display: inline-block; }
+  .ao-sidepanel-header { padding: 8px 12px; }
   .ao-sidepanel-header::before {
     content: '';
     display: block;
@@ -464,12 +429,7 @@
     border-radius: 2px;
     margin: 0 auto 8px;
   }
-
-  .ao-sidepanel-tab {
-    font-size: 11px;
-    padding: 6px 2px;
-  }
-
+  .ao-sidepanel-tab { font-size: 11px; padding: 6px 2px; }
   .ao-sidepanel-content {
     padding: 8px 12px;
     padding-bottom: env(safe-area-inset-bottom, 16px);

src/pages/agent-office/AgentOffice.jsx

@@ -1,96 +1,70 @@
 // src/pages/agent-office/AgentOffice.jsx
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useCallback } from 'react';
 import { useAgentManager } from './hooks/useAgentManager.js';
-import { useOfficeCanvas } from './hooks/useOfficeCanvas.js';
+import { AGENT_META } from './constants.js';
 import TopBar from './components/TopBar.jsx';
+import AgentGrid from './components/AgentGrid.jsx';
 import SidePanel from './components/SidePanel.jsx';
+import EmptyDetailPanel from './components/EmptyDetailPanel.jsx';
 import './AgentOffice.css';
 
 export default function AgentOffice() {
   const {
-    agents, pendingTasks, notifications, connected,
+    agents, pendingTasks, notifications, connected, reconnectAttempt,
     refreshTrigger, clearNotifications
   } = useAgentManager();
 
-  const {
-    canvasRef, updateAgentState, setAgentNotification,
-    setTheme, setZoom, hitTest, getZoom, wasDragging
-  } = useOfficeCanvas();
-
+  // selectedAgent: null | active agent id | "placeholder-N"
   const [selectedAgent, setSelectedAgent] = useState(null);
-  const [theme, setThemeState] = useState(localStorage.getItem('agent-office-theme') || 'modern');
-  const [zoom, setZoomState] = useState(2);
 
-  // WebSocket 상태 → 캔버스 동기화
-  useEffect(() => {
-    for (const [id, agentState] of Object.entries(agents)) {
-      updateAgentState(id, agentState.state, agentState.detail);
-    }
-  }, [agents, updateAgentState]);
+  const handleSelectAgent = useCallback((agentId) => {
+    setSelectedAgent(agentId);
+    clearNotifications(agentId);
+  }, [clearNotifications]);
 
-  // 알림 → 캔버스 동기화
-  useEffect(() => {
-    for (const [id, count] of Object.entries(notifications)) {
-      setAgentNotification(id, count);
-    }
-  }, [notifications, setAgentNotification]);
+  const handleSelectPlaceholder = useCallback((placeholderKey) => {
+    setSelectedAgent(placeholderKey);
+  }, []);
 
-  // 캔버스 클릭 핸들러
-  const handleCanvasClick = useCallback((e) => {
-    if (wasDragging()) return; // 드래그 후 발생하는 클릭 무시
-    const result = hitTest(e.clientX, e.clientY);
-    if (result.type === 'agent') {
-      setSelectedAgent(result.id);
-      clearNotifications(result.id);
-      setAgentNotification(result.id, 0);
-    } else {
-      setSelectedAgent(null);
-    }
-  }, [hitTest, clearNotifications, setAgentNotification, wasDragging]);
+  const handleClose = useCallback(() => {
+    setSelectedAgent(null);
+  }, []);
 
-  // 테마 변경
-  const handleThemeChange = useCallback((name) => {
-    setThemeState(name);
-    setTheme(name);
-  }, [setTheme]);
-
-  // 줌 변경
-  const handleZoomChange = useCallback((level) => {
-    setZoomState(level);
-    setZoom(level);
-  }, [setZoom]);
-
-  // 선택된 에이전트의 pending task
-  const pendingTask = selectedAgent
+  const pendingTask = selectedAgent && AGENT_META[selectedAgent]
     ? pendingTasks.find(t => t.agent_id === selectedAgent)
     : null;
 
+  let rightPanel;
+  if (selectedAgent === null) {
+    rightPanel = <EmptyDetailPanel variant="initial" />;
+  } else if (selectedAgent.startsWith('placeholder-')) {
+    rightPanel = <EmptyDetailPanel variant="placeholder" onClose={handleClose} />;
+  } else {
+    rightPanel = (
+      <SidePanel
+        agentId={selectedAgent}
+        agentState={agents[selectedAgent]}
+        pendingTask={pendingTask}
+        onClose={handleClose}
+        refreshTrigger={refreshTrigger}
+      />
+    );
+  }
+
   return (
     <div className="ao-root">
-      <TopBar
-        connected={connected}
-        theme={theme}
-        onThemeChange={handleThemeChange}
-        zoom={zoom}
-        onZoomChange={handleZoomChange}
-      />
-
+      <TopBar connected={connected} reconnectAttempt={reconnectAttempt} />
       <div className="ao-main">
-        <canvas
-          ref={canvasRef}
-          className="ao-canvas"
-          onClick={handleCanvasClick}
-        />
-
-        {selectedAgent && (
-          <SidePanel
-            agentId={selectedAgent}
-            agentState={agents[selectedAgent]}
-            pendingTask={pendingTask}
-            onClose={() => setSelectedAgent(null)}
-            refreshTrigger={refreshTrigger}
+        <div className="ao-grid-wrap">
+          <AgentGrid
+            agents={agents}
+            notifications={notifications}
+            selectedAgent={selectedAgent}
+            onSelectAgent={handleSelectAgent}
+            onSelectPlaceholder={handleSelectPlaceholder}
           />
-        )}
+        </div>
+        {rightPanel}
       </div>
     </div>
   );

src/pages/agent-office/assets/office-map.json

@@ -1,72 +0,0 @@
-{
-  "cols": 32,
-  "rows": 20,
-  "tileSize": 32,
-  "floor": [
-    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
-    [0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
-    [0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
-    [0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
-    [0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
-    [0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
-    [0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
-    [0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
-    [0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
-    [0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
-    [0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
-    [0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
-    [0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
-    [0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
-    [0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
-    [0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
-    [0,2,2,2,2,2,2,2,2,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
-    [0,2,2,2,2,2,2,2,2,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
-    [0,2,2,2,2,2,2,2,2,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
-    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
-  ],
-  "furniture": [
-    {"type": "desk_monitor", "col": 3,  "row": 3, "agent": "stock",      "monitors": 3},
-    {"type": "desk_monitor", "col": 10, "row": 3, "agent": "music",      "monitors": 1, "accent": "instrument"},
-    {"type": "desk_monitor", "col": 17, "row": 3, "agent": "blog",       "monitors": 2, "accent": "papers"},
-    {"type": "desk_monitor", "col": 24, "row": 3, "agent": "realestate", "monitors": 2, "accent": "briefcase"},
-    {"type": "desk_monitor", "col": 14, "row": 7, "agent": "lotto",      "monitors": 1, "accent": "dice"},
-    {"type": "meeting_table","col": 13, "row": 11,"width": 6, "height": 2},
-    {"type": "sofa",         "col": 2,  "row": 17},
-    {"type": "coffee_machine","col": 5, "row": 16},
-    {"type": "bookshelf",    "col": 27, "row": 16, "height": 3},
-    {"type": "plant",        "col": 1,  "row": 1},
-    {"type": "plant",        "col": 30, "row": 1},
-    {"type": "plant",        "col": 1,  "row": 14},
-    {"type": "plant",        "col": 30, "row": 14},
-    {"type": "water_cooler", "col": 8,  "row": 17}
-  ],
-  "waypoints": {
-    "desk_stock":      {"col": 3,  "row": 4},
-    "desk_music":      {"col": 10, "row": 4},
-    "desk_blog":       {"col": 17, "row": 4},
-    "desk_realestate": {"col": 24, "row": 4},
-    "desk_lotto":      {"col": 14, "row": 8},
-    "meeting":         {"col": 16, "row": 13},
-    "break_room":      {"col": 4,  "row": 17},
-    "coffee":          {"col": 6,  "row": 17},
-    "water_cooler":    {"col": 8,  "row": 18}
-  },
-  "blocked": [
-    [3,3],[4,3],[5,3],
-    [10,3],[11,3],
-    [17,3],[18,3],[19,3],
-    [24,3],[25,3],[26,3],
-    [14,7],[15,7],
-    [13,11],[14,11],[15,11],[16,11],[17,11],[18,11],
-    [13,12],[14,12],[15,12],[16,12],[17,12],[18,12],
-    [2,17],[3,17],
-    [5,16],[6,16],
-    [27,16],[27,17],[27,18],
-    [8,17]
-  ],
-  "tileTypes": {
-    "0": "wall",
-    "1": "floor",
-    "2": "floor_break"
-  }
-}

src/pages/agent-office/canvas/AgentSprite.js

@@ -1,261 +0,0 @@
-// src/pages/agent-office/canvas/AgentSprite.js
-
-import { ProceduralSprite } from './ProceduralSprite.js';
-
-const WALK_SPEED = 3; // tiles per second
-const WANDER_DELAY_MIN = 3;
-const WANDER_DELAY_MAX = 8;
-const WANDER_LIMIT_MIN = 3;
-const WANDER_LIMIT_MAX = 6;
-const REST_DELAY_MIN = 2;
-const REST_DELAY_MAX = 20;
-
-export class AgentSprite {
-  constructor(id, meta, col, row, pathfinder) {
-    this.id = id;
-    this.meta = meta;
-    this.pathfinder = pathfinder;
-
-    // 위치 (타일 좌표, 실수)
-    this.x = col;
-    this.y = row;
-    this.deskCol = col;
-    this.deskRow = row;
-
-    // 상태
-    this.state = 'idle';        // FSM 상태 (from backend)
-    this.detail = '';
-    this.notificationCount = 0;
-
-    // 애니메이션
-    this.animState = 'idle';    // 렌더링용 상태
-    this.direction = 'down';
-    this.animFrame = 0;
-    this.animTimer = 0;
-
-    // 이동
-    this.path = [];             // BFS 경로 [{col, row}, ...]
-    this.moveProgress = 0;      // 0~1 현재 타일 → 다음 타일
-    this.moveFrom = { col, row };
-    this.moveTo_target = null;
-
-    // 배회
-    this._wandering = false;
-    this._wanderTimer = 0;
-    this._wanderCount = 0;
-    this._wanderLimit = 0;
-    this._restTimer = 0;
-    this._isResting = false;
-    this._isAtDesk = true;
-  }
-
-  /** 매 프레임 호출 */
-  update(dt) {
-    // 이동 처리
-    if (this.path.length > 0) {
-      this._updateMovement(dt);
-    } else if (this._wandering) {
-      this._updateWander(dt);
-    }
-
-    // 애니메이션 프레임 업데이트
-    this._updateAnimation(dt);
-  }
-
-  _updateMovement(dt) {
-    this.animState = 'walk';
-    this.moveProgress += WALK_SPEED * dt;
-
-    if (this.moveProgress >= 1) {
-      // 현재 구간 완료
-      const arrived = this.path.shift();
-      this.x = arrived.col;
-      this.y = arrived.row;
-      this.moveFrom = { col: arrived.col, row: arrived.row };
-      this.moveProgress = 0;
-
-      if (this.path.length === 0) {
-        // 최종 목적지 도착
-        this._onArrival();
-      } else {
-        // 다음 구간의 방향 설정
-        this._updateDirection(this.path[0]);
-      }
-    } else {
-      // 보간
-      const next = this.path[0];
-      this.x = this.moveFrom.col + (next.col - this.moveFrom.col) * this.moveProgress;
-      this.y = this.moveFrom.row + (next.row - this.moveFrom.row) * this.moveProgress;
-    }
-  }
-
-  _onArrival() {
-    const atDesk = Math.abs(this.x - this.deskCol) < 0.5 && Math.abs(this.y - this.deskRow) < 0.5;
-    this._isAtDesk = atDesk;
-
-    if (this.state === 'working' || this.state === 'reporting') {
-      this.animState = 'type';
-      this.direction = 'up'; // 모니터를 바라봄
-    } else if (this.state === 'waiting') {
-      this.animState = 'wait';
-    } else if (this.state === 'break') {
-      this.animState = 'break_anim';
-    } else {
-      // idle 도착 — 배회 계속 또는 자리에서 쉬기
-      if (this._wandering && this._wanderCount < this._wanderLimit) {
-        // 다음 배회 타이머 설정
-        this._wanderTimer = WANDER_DELAY_MIN + Math.random() * (WANDER_DELAY_MAX - WANDER_DELAY_MIN);
-      } else if (this._wandering) {
-        // 배회 끝, 휴식
-        this._wandering = false;
-        this._isResting = true;
-        this._restTimer = REST_DELAY_MIN + Math.random() * (REST_DELAY_MAX - REST_DELAY_MIN);
-      }
-      this.animState = 'idle';
-    }
-  }
-
-  _updateWander(dt) {
-    if (this._isResting) {
-      this._restTimer -= dt;
-      if (this._restTimer <= 0) {
-        this._isResting = false;
-        this._startWandering();
-      }
-      return;
-    }
-
-    this._wanderTimer -= dt;
-    if (this._wanderTimer <= 0) {
-      // 랜덤 인접 타일로 이동
-      const target = this.pathfinder.getRandomNearbyFloor(
-        Math.round(this.x), Math.round(this.y), 4
-      );
-      if (target) {
-        const path = this.pathfinder.findPath(
-          Math.round(this.x), Math.round(this.y), target.col, target.row
-        );
-        if (path.length > 0 && path.length <= 6) {
-          this.path = path;
-          this.moveFrom = { col: Math.round(this.x), row: Math.round(this.y) };
-          this.moveProgress = 0;
-          this._updateDirection(path[0]);
-          this._wanderCount++;
-        }
-      }
-      // 실패해도 타이머 리셋
-      this._wanderTimer = WANDER_DELAY_MIN + Math.random() * (WANDER_DELAY_MAX - WANDER_DELAY_MIN);
-    }
-  }
-
-  _updateDirection(nextTile) {
-    const dx = nextTile.col - Math.round(this.x);
-    const dy = nextTile.row - Math.round(this.y);
-    if (Math.abs(dx) > Math.abs(dy)) {
-      this.direction = dx > 0 ? 'right' : 'left';
-    } else {
-      this.direction = dy > 0 ? 'down' : 'up';
-    }
-  }
-
-  _updateAnimation(dt) {
-    const config = ProceduralSprite.getAnimConfig(
-      this.animState === 'walk' ? 'walk' : this.state
-    );
-    this.animTimer += dt;
-    if (this.animTimer >= config.speed) {
-      this.animTimer = 0;
-      this.animFrame = (this.animFrame + 1) % config.frames;
-    }
-  }
-
-  /** 백엔드 상태 변경 시 호출 */
-  onStateChange(newState, detail, waypoints) {
-    const prevState = this.state;
-    this.state = newState;
-    this.detail = detail || '';
-
-    // 배회 중단
-    this._wandering = false;
-    this._isResting = false;
-
-    switch (newState) {
-      case 'working':
-      case 'reporting':
-      case 'waiting':
-        // 자리에 없으면 자리로 이동
-        if (!this._isAtDesk) {
-          this._moveToDesk();
-        } else {
-          this.animState = newState === 'waiting' ? 'wait' : 'type';
-          this.direction = 'up';
-        }
-        break;
-
-      case 'break': {
-        // 휴게실로 이동
-        const breakWp = waypoints.break_room || waypoints.coffee;
-        if (breakWp) {
-          this._navigateTo(breakWp.col, breakWp.row);
-        }
-        break;
-      }
-
-      case 'idle':
-        if (prevState === 'break') {
-          // 휴게실에서 자리로 복귀
-          this._moveToDesk();
-        }
-        // 복귀 후 배회 시작 (도착 콜백에서 처리)
-        this._startWanderingAfterDelay(3);
-        break;
-    }
-  }
-
-  _moveToDesk() {
-    this._navigateTo(this.deskCol, this.deskRow);
-  }
-
-  _navigateTo(goalCol, goalRow) {
-    const startCol = Math.round(this.x);
-    const startRow = Math.round(this.y);
-    const path = this.pathfinder.findPath(startCol, startRow, goalCol, goalRow);
-    if (path.length > 0) {
-      this.path = path;
-      this.moveFrom = { col: startCol, row: startRow };
-      this.moveProgress = 0;
-      this._updateDirection(path[0]);
-    }
-  }
-
-  _startWanderingAfterDelay(delay) {
-    this._wandering = true;
-    this._wanderCount = 0;
-    this._wanderLimit = WANDER_LIMIT_MIN + Math.floor(Math.random() * (WANDER_LIMIT_MAX - WANDER_LIMIT_MIN));
-    this._wanderTimer = delay;
-    this._isResting = false;
-  }
-
-  _startWandering() {
-    this._startWanderingAfterDelay(WANDER_DELAY_MIN + Math.random() * (WANDER_DELAY_MAX - WANDER_DELAY_MIN));
-  }
-
-  isAtDesk() {
-    return this._isAtDesk;
-  }
-
-  /** 렌더링 */
-  draw(ctx, zoom, panX, panY, tileSize) {
-    const ts = tileSize * zoom;
-    const screenX = this.x * ts + panX + ts / 2;
-    const screenY = this.y * ts + panY + ts;
-    const spriteScale = zoom * 1.5; // 캐릭터 약간 크게
-
-    ProceduralSprite.draw(
-      ctx, this.id,
-      this.animState === 'walk' ? 'walk' : this.state,
-      this.direction, this.animFrame,
-      screenX, screenY, spriteScale
-    );
-  }
-}

src/pages/agent-office/canvas/FurnitureRenderer.js

@@ -1,209 +0,0 @@
-// src/pages/agent-office/canvas/FurnitureRenderer.js
-
-/**
- * 가구 프로시저럴 렌더러 — 테마 팔레트 기반
- * 각 가구 타입별 draw 함수, Y-sort를 위한 zY 반환
- */
-export class FurnitureRenderer {
-  constructor(furnitureList, tileSize) {
-    this.furnitureList = furnitureList;
-    this.tileSize = tileSize;
-  }
-
-  /**
-   * 모든 가구를 Y-sort 순서로 반환 (에이전트와 함께 정렬하기 위함)
-   * @returns {Array<{type, col, row, zY, draw: Function}>}
-   */
-  getRenderables(theme, scale, offsetX, offsetY) {
-    const ts = this.tileSize * scale;
-    return this.furnitureList.map(f => ({
-      ...f,
-      zY: f.row,
-      draw: (ctx) => this._drawFurniture(ctx, f, theme, ts, offsetX, offsetY)
-    }));
-  }
-
-  _drawFurniture(ctx, f, theme, ts, ox, oy) {
-    const x = f.col * ts + ox;
-    const y = f.row * ts + oy;
-
-    switch (f.type) {
-      case 'desk_monitor':  this._drawDesk(ctx, f, theme, ts, x, y); break;
-      case 'meeting_table': this._drawMeetingTable(ctx, f, theme, ts, x, y); break;
-      case 'sofa':          this._drawSofa(ctx, theme, ts, x, y); break;
-      case 'coffee_machine':this._drawCoffeeMachine(ctx, theme, ts, x, y); break;
-      case 'bookshelf':     this._drawBookshelf(ctx, f, theme, ts, x, y); break;
-      case 'plant':         this._drawPlant(ctx, theme, ts, x, y); break;
-      case 'water_cooler':  this._drawWaterCooler(ctx, theme, ts, x, y); break;
-    }
-  }
-
-  _drawDesk(ctx, f, theme, ts, x, y) {
-    // 책상 상판
-    const dw = ts * 2;
-    const dh = ts * 0.6;
-    ctx.fillStyle = theme.furniture.desk;
-    ctx.fillRect(x, y + ts * 0.2, dw, dh);
-    // 책상 다리
-    ctx.fillStyle = theme.wall.border;
-    ctx.fillRect(x + ts * 0.1, y + dh + ts * 0.2, ts * 0.15, ts * 0.3);
-    ctx.fillRect(x + dw - ts * 0.25, y + dh + ts * 0.2, ts * 0.15, ts * 0.3);
-
-    // 모니터들
-    const monCount = f.monitors || 1;
-    const monW = ts * 0.5;
-    const monH = ts * 0.4;
-    const totalW = monCount * monW + (monCount - 1) * ts * 0.1;
-    let monX = x + (dw - totalW) / 2;
-
-    for (let i = 0; i < monCount; i++) {
-      // 모니터 프레임
-      ctx.fillStyle = theme.furniture.monitor;
-      ctx.fillRect(monX, y - monH + ts * 0.2, monW, monH);
-      // 화면
-      ctx.fillStyle = theme.furniture.monitorScreen;
-      ctx.fillRect(monX + ts * 0.05, y - monH + ts * 0.25, monW - ts * 0.1, monH - ts * 0.1);
-      // 모니터 받침대
-      ctx.fillStyle = theme.furniture.monitor;
-      ctx.fillRect(monX + monW * 0.35, y + ts * 0.2 - ts * 0.05, monW * 0.3, ts * 0.08);
-      monX += monW + ts * 0.1;
-    }
-
-    // 의자 (책상 아래)
-    ctx.fillStyle = theme.furniture.chair;
-    ctx.fillRect(x + dw * 0.35, y + ts, dw * 0.3, ts * 0.5);
-    ctx.fillRect(x + dw * 0.3, y + ts * 0.8, dw * 0.4, ts * 0.25);
-
-    // 에이전트별 악센트 소품
-    if (f.accent === 'instrument') {
-      // 음표 모양
-      ctx.fillStyle = theme.ui.accent;
-      ctx.fillRect(x + dw + ts * 0.2, y + ts * 0.3, ts * 0.1, ts * 0.5);
-      ctx.beginPath();
-      ctx.arc(x + dw + ts * 0.2, y + ts * 0.8, ts * 0.15, 0, Math.PI * 2);
-      ctx.fill();
-    } else if (f.accent === 'papers') {
-      // 서류 더미
-      ctx.fillStyle = '#ffffff';
-      ctx.fillRect(x + dw + ts * 0.1, y + ts * 0.3, ts * 0.35, ts * 0.45);
-      ctx.fillStyle = theme.text.label;
-      for (let i = 0; i < 3; i++) {
-        ctx.fillRect(x + dw + ts * 0.15, y + ts * 0.38 + i * ts * 0.1, ts * 0.25, ts * 0.02);
-      }
-    } else if (f.accent === 'briefcase') {
-      ctx.fillStyle = '#8B4513';
-      ctx.fillRect(x + dw + ts * 0.1, y + ts * 0.5, ts * 0.4, ts * 0.3);
-      ctx.fillStyle = '#D4A06A';
-      ctx.fillRect(x + dw + ts * 0.2, y + ts * 0.45, ts * 0.2, ts * 0.08);
-    } else if (f.accent === 'dice') {
-      ctx.fillStyle = '#ef4444';
-      ctx.fillRect(x + dw + ts * 0.15, y + ts * 0.4, ts * 0.3, ts * 0.3);
-      ctx.fillStyle = '#ffffff';
-      ctx.beginPath();
-      ctx.arc(x + dw + ts * 0.3, y + ts * 0.55, ts * 0.05, 0, Math.PI * 2);
-      ctx.fill();
-    }
-  }
-
-  _drawMeetingTable(ctx, f, theme, ts, x, y) {
-    const w = (f.width || 4) * ts;
-    const h = (f.height || 2) * ts;
-    // 테이블 상판
-    ctx.fillStyle = theme.furniture.table;
-    ctx.fillRect(x + ts * 0.1, y + ts * 0.1, w - ts * 0.2, h - ts * 0.2);
-    // 테이블 그림자
-    ctx.fillStyle = 'rgba(0,0,0,0.15)';
-    ctx.fillRect(x + ts * 0.15, y + h - ts * 0.1, w - ts * 0.25, ts * 0.1);
-    // 의자들 (상하 4개씩)
-    for (let i = 0; i < 4; i++) {
-      const cx = x + ts * 0.5 + i * (w - ts) / 3;
-      ctx.fillStyle = theme.furniture.chair;
-      ctx.fillRect(cx, y - ts * 0.3, ts * 0.4, ts * 0.35);
-      ctx.fillRect(cx, y + h - ts * 0.05, ts * 0.4, ts * 0.35);
-    }
-  }
-
-  _drawSofa(ctx, theme, ts, x, y) {
-    ctx.fillStyle = theme.furniture.sofa;
-    ctx.fillRect(x, y, ts * 2, ts * 0.8);
-    // 등받이
-    ctx.fillStyle = theme.furniture.sofa;
-    ctx.fillRect(x, y - ts * 0.3, ts * 2, ts * 0.35);
-    // 쿠션 구분선
-    ctx.strokeStyle = theme.wall.border;
-    ctx.lineWidth = 1;
-    ctx.beginPath();
-    ctx.moveTo(x + ts, y);
-    ctx.lineTo(x + ts, y + ts * 0.8);
-    ctx.stroke();
-  }
-
-  _drawCoffeeMachine(ctx, theme, ts, x, y) {
-    ctx.fillStyle = theme.furniture.coffee;
-    ctx.fillRect(x + ts * 0.15, y, ts * 0.7, ts * 0.8);
-    // 디스펜서
-    ctx.fillStyle = theme.furniture.monitor;
-    ctx.fillRect(x + ts * 0.25, y + ts * 0.15, ts * 0.5, ts * 0.3);
-    // 커피 잔
-    ctx.fillStyle = '#ffffff';
-    ctx.fillRect(x + ts * 0.3, y + ts * 0.55, ts * 0.2, ts * 0.15);
-    // 스팀
-    ctx.strokeStyle = 'rgba(255,255,255,0.3)';
-    ctx.lineWidth = 1;
-    ctx.beginPath();
-    ctx.moveTo(x + ts * 0.4, y + ts * 0.5);
-    ctx.quadraticCurveTo(x + ts * 0.45, y + ts * 0.35, x + ts * 0.4, y + ts * 0.2);
-    ctx.stroke();
-  }
-
-  _drawBookshelf(ctx, f, theme, ts, x, y) {
-    const h = (f.height || 3) * ts;
-    ctx.fillStyle = theme.furniture.shelf;
-    ctx.fillRect(x, y, ts * 0.9, h);
-    // 선반 및 책
-    const bookColors = ['#aa4444', '#4444aa', '#44aa44', '#aaaa44', '#aa44aa', '#44aaaa'];
-    const shelfCount = f.height || 3;
-    for (let i = 0; i < shelfCount; i++) {
-      const sy = y + i * ts + ts * 0.1;
-      // 선반 판
-      ctx.fillStyle = theme.furniture.shelf;
-      ctx.fillRect(x, sy + ts * 0.7, ts * 0.9, ts * 0.05);
-      // 책들
-      for (let b = 0; b < 4; b++) {
-        ctx.fillStyle = bookColors[(i * 4 + b) % bookColors.length];
-        ctx.fillRect(x + ts * 0.05 + b * ts * 0.2, sy + ts * 0.1, ts * 0.15, ts * 0.6);
-      }
-    }
-  }
-
-  _drawPlant(ctx, theme, ts, x, y) {
-    // 화분
-    ctx.fillStyle = theme.decor.pot;
-    ctx.fillRect(x + ts * 0.25, y + ts * 0.6, ts * 0.5, ts * 0.35);
-    ctx.fillRect(x + ts * 0.2, y + ts * 0.55, ts * 0.6, ts * 0.1);
-    // 잎
-    ctx.fillStyle = theme.decor.plant;
-    ctx.beginPath();
-    ctx.ellipse(x + ts * 0.5, y + ts * 0.35, ts * 0.3, ts * 0.25, 0, 0, Math.PI * 2);
-    ctx.fill();
-    ctx.beginPath();
-    ctx.ellipse(x + ts * 0.35, y + ts * 0.25, ts * 0.15, ts * 0.2, -0.3, 0, Math.PI * 2);
-    ctx.fill();
-    ctx.beginPath();
-    ctx.ellipse(x + ts * 0.65, y + ts * 0.25, ts * 0.15, ts * 0.2, 0.3, 0, Math.PI * 2);
-    ctx.fill();
-  }
-
-  _drawWaterCooler(ctx, theme, ts, x, y) {
-    // 본체
-    ctx.fillStyle = theme.furniture.shelf;
-    ctx.fillRect(x + ts * 0.2, y + ts * 0.3, ts * 0.6, ts * 0.6);
-    // 물통
-    ctx.fillStyle = 'rgba(100,180,255,0.5)';
-    ctx.fillRect(x + ts * 0.3, y, ts * 0.4, ts * 0.35);
-    ctx.fillStyle = 'rgba(100,180,255,0.3)';
-    ctx.beginPath();
-    ctx.arc(x + ts * 0.5, y, ts * 0.2, 0, Math.PI * 2);
-    ctx.fill();
-  }
-}

src/pages/agent-office/canvas/OfficeRenderer.js

@@ -1,316 +0,0 @@
-// src/pages/agent-office/canvas/OfficeRenderer.js
-
-import mapData from '../assets/office-map.json';
-import { TileMap } from './TileMap.js';
-import { FurnitureRenderer } from './FurnitureRenderer.js';
-import { Pathfinder } from './Pathfinder.js';
-import { AgentSprite } from './AgentSprite.js';
-import { OverlayRenderer } from './OverlayRenderer.js';
-import { getTheme } from './themes.js';
-
-const AGENT_META = {
-  stock:      { displayName: '주식 트레이더', emoji: '📈', color: '#4488cc' },
-  music:      { displayName: '음악 프로듀서', emoji: '🎵', color: '#44aa88' },
-  blog:       { displayName: '블로그 마케터', emoji: '✍️', color: '#d97706' },
-  realestate: { displayName: '청약 애널리스트', emoji: '🏢', color: '#c026d3' },
-  lotto:      { displayName: '로또 큐레이터', emoji: '🎱', color: '#ef4444' }
-};
-
-export class OfficeRenderer {
-  constructor(canvas) {
-    this.canvas = canvas;
-    this.ctx = canvas.getContext('2d');
-
-    // 맵 & 렌더러
-    this.tileMap = new TileMap(mapData);
-    this.furnitureRenderer = new FurnitureRenderer(mapData.furniture, mapData.tileSize);
-    this.pathfinder = new Pathfinder(mapData.cols, mapData.rows);
-    this.overlayRenderer = new OverlayRenderer();
-
-    // blocked 타일 설정
-    this.pathfinder.setWalls(mapData.floor);
-    this.pathfinder.setBlocked(mapData.blocked);
-
-    // 테마 & 뷰포트
-    this.theme = getTheme(
-      (typeof localStorage !== 'undefined' && localStorage.getItem('agent-office-theme')) || 'modern'
-    );
-    this.zoom = 2;
-    this.panX = 0;
-    this.panY = 0;
-    this._isPanning = false;
-    this._panStart = { x: 0, y: 0 };
-
-    // 에이전트
-    this.agents = new Map();
-    this._initAgents();
-
-    // 게임 루프
-    this._lastTime = 0;
-    this._animId = null;
-    this._lastDpr = window.devicePixelRatio || 1;
-
-    // 드래그 감지
-    this._mouseDownPos = { x: 0, y: 0 };
-    this._wasDragging = false;
-
-    // 이벤트
-    this._setupInputHandlers();
-  }
-
-  _initAgents() {
-    for (const [id, meta] of Object.entries(AGENT_META)) {
-      const waypoint = mapData.waypoints[`desk_${id}`];
-      if (!waypoint) continue;
-      const sprite = new AgentSprite(id, meta, waypoint.col, waypoint.row, this.pathfinder);
-      sprite.deskCol = waypoint.col;
-      sprite.deskRow = waypoint.row;
-      this.agents.set(id, sprite);
-    }
-  }
-
-  /** 줌/팬/클릭 이벤트 핸들러 */
-  _setupInputHandlers() {
-    // 마우스 휠 줌
-    this.canvas.addEventListener('wheel', (e) => {
-      e.preventDefault();
-      const oldZoom = this.zoom;
-      if (e.deltaY < 0) {
-        this.zoom = Math.min(this.zoom + 0.5, 4);
-      } else {
-        this.zoom = Math.max(this.zoom - 0.5, 1);
-      }
-      // 마우스 위치 기준 줌
-      if (this.zoom !== oldZoom) {
-        const rect = this.canvas.getBoundingClientRect();
-        const mx = e.clientX - rect.left;
-        const my = e.clientY - rect.top;
-        const ratio = this.zoom / oldZoom;
-        this.panX = mx - (mx - this.panX) * ratio;
-        this.panY = my - (my - this.panY) * ratio;
-      }
-    }, { passive: false });
-
-    // 마우스 드래그 패닝
-    this.canvas.addEventListener('mousedown', (e) => {
-      if (e.button === 0) {
-        this._isPanning = true;
-        this._panStart = { x: e.clientX - this.panX, y: e.clientY - this.panY };
-        this._mouseDownPos = { x: e.clientX, y: e.clientY };
-        this._wasDragging = false;
-      }
-    });
-    this._onMouseMove = (e) => {
-      if (this._isPanning) {
-        this.panX = e.clientX - this._panStart.x;
-        this.panY = e.clientY - this._panStart.y;
-        const dx = e.clientX - this._mouseDownPos.x;
-        const dy = e.clientY - this._mouseDownPos.y;
-        if (Math.abs(dx) > 5 || Math.abs(dy) > 5) this._wasDragging = true;
-      }
-    };
-    this._onMouseUp = () => {
-      this._isPanning = false;
-    };
-    window.addEventListener('mousemove', this._onMouseMove);
-    window.addEventListener('mouseup', this._onMouseUp);
-
-    // 터치 (모바일)
-    let lastTouchDist = 0;
-    let lastTouchCenter = { x: 0, y: 0 };
-    this.canvas.addEventListener('touchstart', (e) => {
-      if (e.touches.length === 1) {
-        this._isPanning = true;
-        this._panStart = { x: e.touches[0].clientX - this.panX, y: e.touches[0].clientY - this.panY };
-      } else if (e.touches.length === 2) {
-        this._isPanning = false;
-        const dx = e.touches[0].clientX - e.touches[1].clientX;
-        const dy = e.touches[0].clientY - e.touches[1].clientY;
-        lastTouchDist = Math.hypot(dx, dy);
-        lastTouchCenter = {
-          x: (e.touches[0].clientX + e.touches[1].clientX) / 2,
-          y: (e.touches[0].clientY + e.touches[1].clientY) / 2
-        };
-      }
-    }, { passive: false });
-    this.canvas.addEventListener('touchmove', (e) => {
-      e.preventDefault();
-      if (e.touches.length === 1 && this._isPanning) {
-        this.panX = e.touches[0].clientX - this._panStart.x;
-        this.panY = e.touches[0].clientY - this._panStart.y;
-      } else if (e.touches.length === 2) {
-        const dx = e.touches[0].clientX - e.touches[1].clientX;
-        const dy = e.touches[0].clientY - e.touches[1].clientY;
-        const dist = Math.hypot(dx, dy);
-        const oldZoom = this.zoom;
-        this.zoom = Math.min(4, Math.max(1, this.zoom * (dist / lastTouchDist)));
-        lastTouchDist = dist;
-        const rect = this.canvas.getBoundingClientRect();
-        const cx = lastTouchCenter.x - rect.left;
-        const cy = lastTouchCenter.y - rect.top;
-        const ratio = this.zoom / oldZoom;
-        this.panX = cx - (cx - this.panX) * ratio;
-        this.panY = cy - (cy - this.panY) * ratio;
-      }
-    }, { passive: false });
-    this.canvas.addEventListener('touchend', () => {
-      this._isPanning = false;
-    });
-  }
-
-  /** 클릭 히트 테스트 — AgentOffice에서 호출 */
-  hitTest(clientX, clientY) {
-    const rect = this.canvas.getBoundingClientRect();
-    const screenX = clientX - rect.left;
-    const screenY = clientY - rect.top;
-    const { col, row } = this.tileMap.screenToTile(screenX, screenY, this.zoom, this.panX, this.panY);
-
-    // 에이전트 히트 (역순, 최상위 우선)
-    for (const [id, sprite] of [...this.agents.entries()].reverse()) {
-      const dx = Math.abs(sprite.x - col);
-      const dy = Math.abs(sprite.y - row);
-      if (dx < 1.2 && dy < 1.5) {
-        return { type: 'agent', id };
-      }
-    }
-    return { type: 'empty' };
-  }
-
-  /** 에이전트 상태 업데이트 (WebSocket에서 호출) */
-  updateAgentState(agentId, state, detail) {
-    const sprite = this.agents.get(agentId);
-    if (!sprite) return;
-    sprite.onStateChange(state, detail, mapData.waypoints);
-  }
-
-  /** 에이전트 알림 배지 설정 */
-  setAgentNotification(agentId, count) {
-    const sprite = this.agents.get(agentId);
-    if (sprite) sprite.notificationCount = count;
-  }
-
-  /** 테마 변경 */
-  setTheme(themeName) {
-    this.theme = getTheme(themeName);
-    if (typeof localStorage !== 'undefined') {
-      localStorage.setItem('agent-office-theme', themeName);
-    }
-  }
-
-  /** 줌 레벨 설정 */
-  setZoom(level) {
-    const cx = this.canvas.width / 2;
-    const cy = this.canvas.height / 2;
-    const oldZoom = this.zoom;
-    this.zoom = Math.min(4, Math.max(1, level));
-    const ratio = this.zoom / oldZoom;
-    this.panX = cx - (cx - this.panX) * ratio;
-    this.panY = cy - (cy - this.panY) * ratio;
-  }
-
-  /** 카메라를 맵 중앙에 맞추기 */
-  centerCamera() {
-    const mapW = mapData.cols * mapData.tileSize * this.zoom;
-    const mapH = mapData.rows * mapData.tileSize * this.zoom;
-    this.panX = (this.canvas.clientWidth - mapW) / 2;
-    this.panY = (this.canvas.clientHeight - mapH) / 2;
-  }
-
-  /** 게임 루프 시작 */
-  start() {
-    this.centerCamera();
-    this._lastTime = performance.now();
-    this._loop(this._lastTime);
-  }
-
-  /** 게임 루프 중지 */
-  stop() {
-    if (this._animId) {
-      cancelAnimationFrame(this._animId);
-      this._animId = null;
-    }
-  }
-
-  _loop(timestamp) {
-    const dt = Math.min((timestamp - this._lastTime) / 1000, 0.1); // cap dt to avoid spiral
-    this._lastTime = timestamp;
-
-    this._update(dt);
-    this._render();
-
-    this._animId = requestAnimationFrame((t) => this._loop(t));
-  }
-
-  _update(dt) {
-    for (const sprite of this.agents.values()) {
-      sprite.update(dt);
-    }
-  }
-
-  _render() {
-    const ctx = this.ctx;
-    const dpr = window.devicePixelRatio || 1;
-
-    // 캔버스 크기 조정
-    const displayW = this.canvas.clientWidth;
-    const displayH = this.canvas.clientHeight;
-    if (this.canvas.width !== displayW * dpr || this.canvas.height !== displayH * dpr || this._lastDpr !== dpr) {
-      this.canvas.width = displayW * dpr;
-      this.canvas.height = displayH * dpr;
-      this._lastDpr = dpr;
-    }
-    // setTransform 방식으로 누적 없이 항상 올바른 변환 적용
-    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-
-    ctx.imageSmoothingEnabled = false;
-    ctx.clearRect(0, 0, displayW, displayH);
-
-    // 배경
-    ctx.fillStyle = this.theme.wall.color;
-    ctx.fillRect(0, 0, displayW, displayH);
-
-    // 1. 타일맵 (바닥 + 벽)
-    this.tileMap.render(ctx, this.theme, this.zoom, this.panX, this.panY);
-
-    // 2. Y-sorted: 가구 + 에이전트
-    const renderables = [];
-
-    // 가구
-    const furnitureItems = this.furnitureRenderer.getRenderables(this.theme, this.zoom, this.panX, this.panY);
-    renderables.push(...furnitureItems);
-
-    // 에이전트
-    for (const sprite of this.agents.values()) {
-      renderables.push({
-        zY: sprite.y,
-        draw: (ctx2) => sprite.draw(ctx2, this.zoom, this.panX, this.panY, mapData.tileSize)
-      });
-    }
-
-    // Y좌표 정렬
-    renderables.sort((a, b) => a.zY - b.zY);
-    for (const item of renderables) {
-      item.draw(ctx);
-    }
-
-    // 3. 오버레이 (항상 최상위)
-    for (const sprite of this.agents.values()) {
-      this.overlayRenderer.draw(ctx, sprite, this.theme, this.zoom, this.panX, this.panY, mapData.tileSize);
-    }
-  }
-
-  /** 드래그 여부 반환 (클릭 이벤트 필터링용) */
-  wasDragging() { return this._wasDragging; }
-
-  /** 리사이즈 처리 */
-  resize() {
-    // 다음 프레임에서 자동 조정됨 (_render에서 크기 체크)
-  }
-
-  destroy() {
-    this.stop();
-    // window 이벤트 리스너 정리
-    if (this._onMouseMove) window.removeEventListener('mousemove', this._onMouseMove);
-    if (this._onMouseUp) window.removeEventListener('mouseup', this._onMouseUp);
-  }
-}

src/pages/agent-office/canvas/OverlayRenderer.js

@@ -1,122 +0,0 @@
-// src/pages/agent-office/canvas/OverlayRenderer.js
-
-/**
- * 캔버스 위 오버레이 렌더링:
- * - 이름 라벨 (항상)
- * - 상태 배지 (항상)
- * - 말풍선 (waiting 상태에서만)
- * - 알림 배지 (notification > 0 일 때)
- */
-
-const STATE_BADGE = {
-  idle:      { text: 'idle',      bg: '#374151', fg: '#9ca3af' },
-  working:   { text: 'working',   bg: '#1e3a5f', fg: '#60a5fa' },
-  waiting:   { text: 'waiting',   bg: '#92400e', fg: '#fbbf24' },
-  reporting: { text: 'reporting', bg: '#1e3a5f', fg: '#60a5fa' },
-  break:     { text: 'break',     bg: '#065f46', fg: '#34d399' }
-};
-
-export class OverlayRenderer {
-  constructor() {
-    this._bubbleAlpha = new Map(); // agentId → alpha (fade in/out)
-  }
-
-  draw(ctx, sprite, theme, zoom, panX, panY, tileSize) {
-    const ts = tileSize * zoom;
-    const centerX = sprite.x * ts + panX + ts / 2;
-    const topY = sprite.y * ts + panY - ts * 0.3;
-
-    const fontSize = Math.max(10, 11 * zoom / 2);
-    const smallFontSize = Math.max(8, 9 * zoom / 2);
-
-    // 1. 이름 라벨
-    ctx.font = `bold ${fontSize}px 'Courier New', monospace`;
-    ctx.textAlign = 'center';
-    ctx.fillStyle = sprite.meta.color;
-    ctx.fillText(sprite.meta.displayName, centerX, topY + ts * 1.85);
-
-    // 2. 상태 배지
-    const badge = STATE_BADGE[sprite.state] || STATE_BADGE.idle;
-    const badgeText = badge.text;
-    ctx.font = `${smallFontSize}px 'Courier New', monospace`;
-    const badgeW = ctx.measureText(badgeText).width + 8;
-    const badgeH = smallFontSize + 4;
-    const badgeX = centerX - badgeW / 2;
-    const badgeY = topY + ts * 1.9;
-
-    ctx.fillStyle = badge.bg;
-    this._roundRect(ctx, badgeX, badgeY, badgeW, badgeH, 3);
-    ctx.fill();
-    ctx.fillStyle = badge.fg;
-    ctx.textAlign = 'center';
-    ctx.fillText(badgeText, centerX, badgeY + badgeH - 3);
-
-    // 3. 말풍선 (waiting 상태에서만)
-    if (sprite.state === 'waiting') {
-      this._drawBubble(ctx, sprite, centerX, topY - ts * 0.2, zoom);
-    }
-
-    // 4. 알림 배지
-    if (sprite.notificationCount > 0) {
-      this._drawNotificationBadge(ctx, centerX + ts * 0.5, topY + ts * 0.2, sprite.notificationCount, zoom);
-    }
-  }
-
-  _drawBubble(ctx, sprite, x, y, zoom) {
-    const text = '승인 대기!';
-    const fontSize = Math.max(10, 11 * zoom / 2);
-    ctx.font = `bold ${fontSize}px 'Courier New', monospace`;
-    const tw = ctx.measureText(text).width;
-    const pw = tw + 16;
-    const ph = fontSize + 12;
-    const px = x - pw / 2;
-    const py = y - ph;
-
-    // 말풍선 배경
-    ctx.fillStyle = '#fbbf24';
-    this._roundRect(ctx, px, py, pw, ph, 6);
-    ctx.fill();
-
-    // 꼬리 삼각형
-    ctx.beginPath();
-    ctx.moveTo(x - 5, py + ph);
-    ctx.lineTo(x + 5, py + ph);
-    ctx.lineTo(x, py + ph + 6);
-    ctx.closePath();
-    ctx.fill();
-
-    // 텍스트
-    ctx.fillStyle = '#000000';
-    ctx.textAlign = 'center';
-    ctx.fillText(text, x, py + ph - 5);
-  }
-
-  _drawNotificationBadge(ctx, x, y, count, zoom) {
-    const r = Math.max(7, 8 * zoom / 2);
-    ctx.fillStyle = '#ef4444';
-    ctx.beginPath();
-    ctx.arc(x, y, r, 0, Math.PI * 2);
-    ctx.fill();
-
-    ctx.fillStyle = '#ffffff';
-    ctx.font = `bold ${r}px sans-serif`;
-    ctx.textAlign = 'center';
-    ctx.textBaseline = 'middle';
-    ctx.fillText(count > 9 ? '9+' : String(count), x, y);
-    ctx.textBaseline = 'alphabetic';
-  }
-
-  _roundRect(ctx, x, y, w, h, r) {
-    ctx.beginPath();
-    ctx.moveTo(x + r, y);
-    ctx.lineTo(x + w - r, y);
-    ctx.quadraticCurveTo(x + w, y, x + w, y + r);
-    ctx.lineTo(x + w, y + h - r);
-    ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
-    ctx.lineTo(x + r, y + h);
-    ctx.quadraticCurveTo(x, y + h, x, y + h - r);
-    ctx.lineTo(x, y + r);
-    ctx.quadraticCurveTo(x, y, x + r, y);
-    ctx.closePath();
-  }
-}

src/pages/agent-office/canvas/Pathfinder.js

@@ -1,112 +0,0 @@
-// src/pages/agent-office/canvas/Pathfinder.js
-
-/**
- * BFS 4방향 경로 탐색 (대각선 없음)
- * blocked 타일과 벽 타일을 회피하여 최단 경로 반환
- */
-export class Pathfinder {
-  constructor(cols, rows) {
-    this.cols = cols;
-    this.rows = rows;
-    this.blocked = new Set();
-  }
-
-  /** blocked 타일 세팅 (wall + furniture footprint) */
-  setBlocked(blockedList) {
-    // Do NOT clear — setWalls already added wall tiles
-    for (const [col, row] of blockedList) {
-      this.blocked.add(`${col},${row}`);
-    }
-  }
-
-  /** wall 타일도 blocked로 추가 (floor 배열에서 0인 셀) */
-  setWalls(floorGrid) {
-    for (let r = 0; r < this.rows; r++) {
-      for (let c = 0; c < this.cols; c++) {
-        if (floorGrid[r][c] === 0) {
-          this.blocked.add(`${c},${r}`);
-        }
-      }
-    }
-  }
-
-  isBlocked(col, row) {
-    if (col < 0 || col >= this.cols || row < 0 || row >= this.rows) return true;
-    return this.blocked.has(`${col},${row}`);
-  }
-
-  /**
-   * BFS 최단 경로
-   * @returns {Array<{col, row}>} 시작점 제외, 도착점 포함 경로. 경로 없으면 빈 배열.
-   */
-  findPath(startCol, startRow, goalCol, goalRow) {
-    if (startCol === goalCol && startRow === goalRow) return [];
-
-    const key = (c, r) => `${c},${r}`;
-    const startKey = key(startCol, startRow);
-    const goalKey = key(goalCol, goalRow);
-
-    const queue = [{ col: startCol, row: startRow }];
-    const visited = new Set([startKey]);
-    const parent = new Map();
-
-    const dirs = [
-      { dc: 0, dr: -1 }, // up
-      { dc: 0, dr: 1 },  // down
-      { dc: -1, dr: 0 }, // left
-      { dc: 1, dr: 0 }   // right
-    ];
-
-    while (queue.length > 0) {
-      const current = queue.shift();
-
-      for (const { dc, dr } of dirs) {
-        const nc = current.col + dc;
-        const nr = current.row + dr;
-        const nk = key(nc, nr);
-
-        if (visited.has(nk)) continue;
-        // 골 지점은 blocked여도 이동 가능 (에이전트가 자기 자리에 앉으려면)
-        if (nk !== goalKey && this.isBlocked(nc, nr)) continue;
-
-        visited.add(nk);
-        parent.set(nk, key(current.col, current.row));
-        queue.push({ col: nc, row: nr });
-
-        if (nc === goalCol && nr === goalRow) {
-          return this._reconstructPath(parent, startKey, goalKey);
-        }
-      }
-    }
-
-    return []; // 경로 없음
-  }
-
-  _reconstructPath(parent, startKey, goalKey) {
-    const path = [];
-    let current = goalKey;
-    while (current !== startKey) {
-      const [c, r] = current.split(',').map(Number);
-      path.unshift({ col: c, row: r });
-      current = parent.get(current);
-    }
-    return path;
-  }
-
-  /** idle 배회용: start 주변 반경 내 랜덤 walkable 타일 */
-  getRandomNearbyFloor(col, row, radius = 4) {
-    const candidates = [];
-    for (let dr = -radius; dr <= radius; dr++) {
-      for (let dc = -radius; dc <= radius; dc++) {
-        const nc = col + dc;
-        const nr = row + dr;
-        if (nc === col && nr === row) continue;
-        if (!this.isBlocked(nc, nr)) {
-          candidates.push({ col: nc, row: nr });
-        }
-      }
-    }
-    if (candidates.length === 0) return null;
-    return candidates[Math.floor(Math.random() * candidates.length)];
-  }
-}

src/pages/agent-office/canvas/ProceduralSprite.js

@@ -1,164 +0,0 @@
-// src/pages/agent-office/canvas/ProceduralSprite.js
-
-/**
- * 프로시저럴 픽셀 캐릭터 렌더러 (16×32px 기본 해상도)
- * Phase 1: 코드로 캐릭터를 그림
- * Phase 2: SpriteLoader가 PNG 스프라이트로 대체
- */
-
-const AGENT_COLORS = {
-  stock:      { body: '#4488cc', hair: '#2255aa', accent: '#66aaee' },
-  music:      { body: '#44aa88', hair: '#228866', accent: '#66ccaa' },
-  blog:       { body: '#d97706', hair: '#b45e04', accent: '#f59e0b' },
-  realestate: { body: '#c026d3', hair: '#9b1dab', accent: '#e044f0' },
-  lotto:      { body: '#ef4444', hair: '#cc2222', accent: '#ff6666' }
-};
-
-/** 애니메이션 프레임 설정 */
-const ANIM_CONFIG = {
-  idle:      { frames: 2, speed: 0.8 },
-  walk:      { frames: 4, speed: 0.15, cycle: [0, 1, 2, 1] },
-  type:      { frames: 2, speed: 0.3 },
-  wait:      { frames: 2, speed: 0.5 },
-  break_anim:{ frames: 2, speed: 1.0 }
-};
-
-export class ProceduralSprite {
-  /**
-   * 캐릭터 1프레임 렌더링
-   * @param {CanvasRenderingContext2D} ctx
-   * @param {string} agentId
-   * @param {string} state - idle|walk|type|wait|break_anim
-   * @param {string} direction - down|up|right|left
-   * @param {number} frame - 현재 애니메이션 프레임 인덱스
-   * @param {number} x - 캔버스 X 좌표 (캐릭터 중앙 하단)
-   * @param {number} y - 캔버스 Y 좌표 (캐릭터 중앙 하단)
-   * @param {number} scale - 렌더링 스케일
-   */
-  static draw(ctx, agentId, state, direction, frame, x, y, scale) {
-    const colors = AGENT_COLORS[agentId] || AGENT_COLORS.stock;
-    const px = scale; // 1 pixel = scale 크기
-    const w = 16 * px;
-    const h = 32 * px;
-    const bx = x - w / 2; // 좌상단 기준
-    const by = y - h;
-
-    ctx.save();
-
-    // 좌우 반전 (left = right 플립)
-    if (direction === 'left') {
-      ctx.translate(x, 0);
-      ctx.scale(-1, 1);
-      ctx.translate(-x, 0);
-    }
-
-    // 그림자
-    ctx.fillStyle = 'rgba(0,0,0,0.2)';
-    ctx.beginPath();
-    ctx.ellipse(x, y, w * 0.35, px * 2, 0, 0, Math.PI * 2);
-    ctx.fill();
-
-    // 상태별 오프셋
-    let bodyOffsetY = 0;
-    let legSpread = 0;
-    let armAngle = 0;
-
-    if (state === 'walk') {
-      const walkFrame = ANIM_CONFIG.walk.cycle[frame % 4];
-      legSpread = (walkFrame - 1) * px * 2;
-      bodyOffsetY = walkFrame === 1 ? -px : 0;
-    } else if (state === 'type') {
-      armAngle = frame % 2 === 0 ? 1 : -1;
-      bodyOffsetY = frame % 2 === 0 ? 0 : -px * 0.5;
-    } else if (state === 'wait') {
-      bodyOffsetY = Math.sin(frame * Math.PI) * px;
-    } else if (state === 'idle') {
-      bodyOffsetY = frame % 2 === 0 ? 0 : -px * 0.5;
-    } else if (state === 'break_anim') {
-      bodyOffsetY = frame % 2 === 0 ? 0 : px * 0.5; // 졸기
-    }
-
-    const by2 = by + bodyOffsetY;
-
-    // 다리
-    ctx.fillStyle = '#2a2a3e';
-    // 왼쪽 다리
-    ctx.fillRect(bx + px * 4 - legSpread, by2 + px * 24, px * 3, px * 8);
-    // 오른쪽 다리
-    ctx.fillRect(bx + px * 9 + legSpread, by2 + px * 24, px * 3, px * 8);
-    // 신발
-    ctx.fillStyle = '#333';
-    ctx.fillRect(bx + px * 3 - legSpread, by2 + px * 30, px * 5, px * 2);
-    ctx.fillRect(bx + px * 8 + legSpread, by2 + px * 30, px * 5, px * 2);
-
-    // 몸통
-    ctx.fillStyle = colors.body;
-    ctx.fillRect(bx + px * 3, by2 + px * 12, px * 10, px * 13);
-
-    // 팔
-    if (state === 'type') {
-      // 타이핑: 팔 앞으로 뻗음
-      ctx.fillStyle = colors.body;
-      ctx.fillRect(bx + px * 1, by2 + px * 13, px * 3, px * 8 + armAngle * px);
-      ctx.fillRect(bx + px * 12, by2 + px * 13, px * 3, px * 8 - armAngle * px);
-      // 손
-      ctx.fillStyle = '#ffcc99';
-      ctx.fillRect(bx + px * 1, by2 + px * 20 + armAngle * px, px * 3, px * 3);
-      ctx.fillRect(bx + px * 12, by2 + px * 20 - armAngle * px, px * 3, px * 3);
-    } else {
-      // 기본 팔
-      ctx.fillStyle = colors.body;
-      ctx.fillRect(bx + px * 1, by2 + px * 13, px * 3, px * 10);
-      ctx.fillRect(bx + px * 12, by2 + px * 13, px * 3, px * 10);
-      // 손
-      ctx.fillStyle = '#ffcc99';
-      ctx.fillRect(bx + px * 1, by2 + px * 22, px * 3, px * 3);
-      ctx.fillRect(bx + px * 12, by2 + px * 22, px * 3, px * 3);
-    }
-
-    // 머리
-    ctx.fillStyle = '#ffcc99'; // 피부색
-    ctx.fillRect(bx + px * 4, by2 + px * 2, px * 8, px * 10);
-
-    // 머리카락
-    ctx.fillStyle = colors.hair;
-    ctx.fillRect(bx + px * 3, by2 + px * 1, px * 10, px * 4);
-    if (direction === 'down' || direction === 'left' || direction === 'right') {
-      // 앞머리
-      ctx.fillRect(bx + px * 4, by2 + px * 3, px * 2, px * 2);
-    }
-
-    // 눈
-    if (direction !== 'up') {
-      ctx.fillStyle = '#222';
-      if (state === 'break_anim' && frame % 2 === 1) {
-        // 졸기: 눈 감음
-        ctx.fillRect(bx + px * 5, by2 + px * 6, px * 2, px);
-        ctx.fillRect(bx + px * 9, by2 + px * 6, px * 2, px);
-      } else {
-        ctx.fillRect(bx + px * 5, by2 + px * 5, px * 2, px * 2);
-        ctx.fillRect(bx + px * 9, by2 + px * 5, px * 2, px * 2);
-      }
-    }
-
-    // break 소품: 커피잔
-    if (state === 'break_anim') {
-      ctx.fillStyle = '#ffffff';
-      ctx.fillRect(bx + px * 14, by2 + px * 16, px * 3, px * 4);
-      ctx.fillStyle = '#8B4513';
-      ctx.fillRect(bx + px * 14.5, by2 + px * 16.5, px * 2, px * 2);
-    }
-
-    ctx.restore();
-  }
-
-  static getAnimConfig(state) {
-    const mapped = state === 'working' ? 'type'
-      : state === 'waiting' ? 'wait'
-      : state === 'reporting' ? 'type'
-      : state === 'break' ? 'break_anim'
-      : state === 'walk' ? 'walk'
-      : 'idle';
-    return { ...(ANIM_CONFIG[mapped] || ANIM_CONFIG.idle), mapped };
-  }
-}

src/pages/agent-office/canvas/SpriteLoader.js

@@ -1,77 +0,0 @@
-// src/pages/agent-office/canvas/SpriteLoader.js
-
-import { ProceduralSprite } from './ProceduralSprite.js';
-
-/**
- * 스프라이트 로더 — PNG 스프라이트시트가 있으면 사용, 없으면 프로시저럴 폴백
- *
- * 스프라이트시트 규격 (Phase 2):
- * - 프레임 크기: 16×32px
- * - 행: 방향 (0=down, 1=up, 2=right)
- * - 열: 상태별 프레임 (idle 2 | walk 4 | type 2 | wait 2 | break 2 = 12열)
- */
-export class SpriteLoader {
-  constructor() {
-    this.sprites = new Map(); // agentId → { image: Image, loaded: boolean }
-  }
-
-  /** PNG 스프라이트시트 로드 시도 */
-  async tryLoad(agentId, url) {
-    return new Promise((resolve) => {
-      const img = new Image();
-      img.onload = () => {
-        this.sprites.set(agentId, { image: img, loaded: true });
-        resolve(true);
-      };
-      img.onerror = () => {
-        resolve(false); // 폴백 사용
-      };
-      img.src = url;
-    });
-  }
-
-  hasSprite(agentId) {
-    return this.sprites.has(agentId) && this.sprites.get(agentId).loaded;
-  }
-
-  /**
-   * 에이전트 1프레임 그리기 (스프라이트 또는 프로시저럴)
-   */
-  draw(ctx, agentId, state, direction, frame, x, y, scale) {
-    if (this.hasSprite(agentId)) {
-      this._drawFromSheet(ctx, agentId, state, direction, frame, x, y, scale);
-    } else {
-      ProceduralSprite.draw(ctx, agentId, state, direction, frame, x, y, scale);
-    }
-  }
-
-  _drawFromSheet(ctx, agentId, state, direction, frame, x, y, scale) {
-    const { image } = this.sprites.get(agentId);
-    const frameW = 16;
-    const frameH = 32;
-
-    // 방향 → 행
-    const dirRow = direction === 'up' ? 1 : direction === 'right' || direction === 'left' ? 2 : 0;
-
-    // 상태 → 열 오프셋
-    const stateOffsets = { idle: 0, walk: 2, type: 6, wait: 8, break_anim: 10 };
-    const mappedState = state === 'working' ? 'type' : state === 'waiting' ? 'wait'
-      : state === 'reporting' ? 'type' : state === 'break' ? 'break_anim'
-      : state === 'walk' ? 'walk' : 'idle';
-    const colOffset = stateOffsets[mappedState] || 0;
-
-    const srcX = (colOffset + frame) * frameW;
-    const srcY = dirRow * frameH;
-    const destW = frameW * scale;
-    const destH = frameH * scale;
-
-    ctx.save();
-    if (direction === 'left') {
-      ctx.translate(x, 0);
-      ctx.scale(-1, 1);
-      ctx.translate(-x, 0);
-    }
-    ctx.drawImage(image, srcX, srcY, frameW, frameH, x - destW / 2, y - destH, destW, destH);
-    ctx.restore();
-  }
-}

src/pages/agent-office/canvas/TileMap.js

@@ -1,80 +0,0 @@
-// src/pages/agent-office/canvas/TileMap.js
-
-/**
- * 타일맵 렌더러 — 바닥, 벽, 그리드를 테마 팔레트로 렌더링
- * 가구는 FurnitureRenderer가 별도 처리
- */
-export class TileMap {
-  constructor(mapData) {
-    this.cols = mapData.cols;
-    this.rows = mapData.rows;
-    this.tileSize = mapData.tileSize;
-    this.floor = mapData.floor;
-    this.tileTypes = mapData.tileTypes;
-  }
-
-  /**
-   * 바닥 + 벽 렌더링
-   * @param {CanvasRenderingContext2D} ctx
-   * @param {object} theme - themes.js 에서 가져온 테마 객체
-   * @param {number} scale - 줌 레벨
-   * @param {number} offsetX - 패닝 X 오프셋
-   * @param {number} offsetY - 패닝 Y 오프셋
-   */
-  render(ctx, theme, scale, offsetX, offsetY) {
-    const ts = this.tileSize * scale;
-
-    for (let r = 0; r < this.rows; r++) {
-      for (let c = 0; c < this.cols; c++) {
-        const tileType = this.floor[r][c];
-        const x = c * ts + offsetX;
-        const y = r * ts + offsetY;
-
-        // 화면 밖이면 스킵 (CSS 공간 기준 — DPR 변환 적용된 좌표계)
-        if (x + ts < 0 || y + ts < 0 || x > ctx.canvas.clientWidth || y > ctx.canvas.clientHeight) continue;
-
-        if (tileType === 0) {
-          // 벽
-          ctx.fillStyle = theme.wall.color;
-          ctx.fillRect(x, y, ts, ts);
-          // 벽 하단 경계선
-          ctx.fillStyle = theme.wall.border;
-          ctx.fillRect(x, y + ts - scale, ts, scale);
-        } else {
-          // 바닥
-          const isBreak = this.tileTypes[String(tileType)] === 'floor_break';
-          ctx.fillStyle = isBreak ? theme.floor.color2 : theme.floor.color1;
-          ctx.fillRect(x, y, ts, ts);
-
-          // 체커보드 패턴
-          if ((r + c) % 2 === 0) {
-            ctx.fillStyle = theme.floor.grid;
-            ctx.fillRect(x, y, ts, ts);
-          }
-
-          // 그리드 선
-          ctx.strokeStyle = theme.floor.grid;
-          ctx.lineWidth = scale * 0.5;
-          ctx.strokeRect(x, y, ts, ts);
-        }
-      }
-    }
-  }
-
-  /** 화면 좌표 → 타일 좌표 변환 */
-  screenToTile(screenX, screenY, scale, offsetX, offsetY) {
-    const ts = this.tileSize * scale;
-    const col = Math.floor((screenX - offsetX) / ts);
-    const row = Math.floor((screenY - offsetY) / ts);
-    return { col, row };
-  }
-
-  /** 타일 좌표 → 화면 좌표 (타일 중앙) */
-  tileToScreen(col, row, scale, offsetX, offsetY) {
-    const ts = this.tileSize * scale;
-    return {
-      x: col * ts + offsetX + ts / 2,
-      y: row * ts + offsetY + ts / 2
-    };
-  }
-}

src/pages/agent-office/canvas/themes.js

@@ -1,42 +0,0 @@
-// src/pages/agent-office/canvas/themes.js
-
-export const THEMES = {
-  modern: {
-    name: 'Modern',
-    wall:      { color: '#1a1a2e', border: '#333', accent: '#8b5cf6' },
-    floor:     { color1: '#2a2a3e', color2: '#323248', grid: 'rgba(255,255,255,0.03)' },
-    furniture: { desk: '#3a3a5a', chair: '#4c1d95', monitor: '#5555aa', monitorScreen: '#1a3a5a', shelf: '#2a2a4e', table: '#3a3a5a', sofa: '#2a2a4e', coffee: '#3a3a2a' },
-    decor:     { plant: '#22c55e', pot: '#4a3a2a', lamp: '#fbbf24', ledStrip: '#8b5cf6' },
-    lighting:  { ambient: 'rgba(139,92,246,0.05)', glow: 'rgba(139,92,246,0.15)' },
-    text:      { primary: '#ffffff', secondary: '#aaaaaa', label: '#888888' },
-    ui:        { panelBg: '#111111', headerBg: '#1a1a2e', border: '#333333', accent: '#8b5cf6' }
-  },
-  retro: {
-    name: 'Retro',
-    wall:      { color: '#2a1a0a', border: '#6a4a2a', accent: '#cc8844' },
-    floor:     { color1: '#4a3a1a', color2: '#3a2a10', grid: 'rgba(255,255,255,0.02)' },
-    furniture: { desk: '#6a4a1a', chair: '#8a5a2a', monitor: '#555555', monitorScreen: '#1a3a1a', shelf: '#5a3a1a', table: '#5a4a2a', sofa: '#5a3a2a', coffee: '#4a3a1a' },
-    decor:     { plant: '#44aa44', pot: '#6a4a2a', lamp: '#ffcc66', brick: '#8a5a2a' },
-    lighting:  { ambient: 'rgba(255,200,100,0.05)', glow: 'rgba(255,200,100,0.2)' },
-    text:      { primary: '#ffe0b0', secondary: '#aa8866', label: '#887766' },
-    ui:        { panelBg: '#1a1008', headerBg: '#2a1a0a', border: '#4a3a2a', accent: '#cc8844' }
-  },
-  minimal: {
-    name: 'Minimal',
-    wall:      { color: '#fafafa', border: '#dddddd', accent: '#3b82f6' },
-    floor:     { color1: '#e8e8e8', color2: '#f0f0f0', grid: 'rgba(0,0,0,0.04)' },
-    furniture: { desk: '#ffffff', chair: '#e0e0e0', monitor: '#333333', monitorScreen: '#e0e8f0', shelf: '#f5f5f5', table: '#ffffff', sofa: '#e8e8e8', coffee: '#f0f0f0' },
-    decor:     { plant: '#86efac', pot: '#ffffff', lamp: '#fbbf24', window: '#e0f0ff' },
-    lighting:  { ambient: 'rgba(59,130,246,0.03)', glow: 'rgba(255,255,255,0.1)' },
-    text:      { primary: '#1a1a1a', secondary: '#666666', label: '#999999' },
-    ui:        { panelBg: '#ffffff', headerBg: '#fafafa', border: '#e0e0e0', accent: '#3b82f6' }
-  }
-};
-
-export function getTheme(name) {
-  return THEMES[name] || THEMES.modern;
-}
-
-export function getThemeNames() {
-  return Object.entries(THEMES).map(([key, val]) => ({ key, name: val.name }));
-}

src/pages/agent-office/components/AgentCard.jsx

@@ -0,0 +1,30 @@
+// src/pages/agent-office/components/AgentCard.jsx
+import { AGENT_META, STATE_COLORS, DEFAULT_STATE_COLOR } from '../constants.js';
+
+export default function AgentCard({ agentId, agentState, notificationCount = 0, active = false, onClick }) {
+  const meta = AGENT_META[agentId];
+  if (!meta) return null;
+
+  const state = agentState?.state || 'idle';
+  const stateInfo = STATE_COLORS[state] || DEFAULT_STATE_COLOR;
+  const dotClass = `ao-card-dot ${state}${stateInfo.pulse ? ' pulse' : ''}`;
+  const badgeText = notificationCount > 9 ? '9+' : String(notificationCount);
+
+  return (
+    <button
+      type="button"
+      className={`ao-card${active ? ' active' : ''}`}
+      onClick={onClick}
+      style={{ '--card-accent': meta.color }}
+    >
+      <span className={dotClass} title={state} />
+      {notificationCount > 0 && (
+        <span className="ao-card-badge">{badgeText}</span>
+      )}
+      <div className="ao-card-image">
+        <img src={meta.image} alt={meta.displayName} />
+      </div>
+      <div className="ao-card-name">{meta.displayName}</div>
+    </button>
+  );
+}

src/pages/agent-office/components/AgentCard.test.jsx

@@ -0,0 +1,76 @@
+// src/pages/agent-office/components/AgentCard.test.jsx
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import AgentCard from './AgentCard.jsx';
+
+describe('AgentCard', () => {
+  it('에이전트의 displayName을 표시', () => {
+    render(<AgentCard agentId="stock" agentState={{ state: 'idle' }} notificationCount={0} onClick={() => {}} />);
+    expect(screen.getByText('주식 트레이더')).toBeInTheDocument();
+  });
+
+  it('working 상태일 때 dot에 working 클래스 부여', () => {
+    const { container } = render(
+      <AgentCard agentId="stock" agentState={{ state: 'working' }} notificationCount={0} onClick={() => {}} />
+    );
+    const dot = container.querySelector('.ao-card-dot');
+    expect(dot).toHaveClass('working');
+  });
+
+  it('working 상태에서는 pulse 클래스도 부여', () => {
+    const { container } = render(
+      <AgentCard agentId="stock" agentState={{ state: 'working' }} notificationCount={0} onClick={() => {}} />
+    );
+    const dot = container.querySelector('.ao-card-dot');
+    expect(dot).toHaveClass('pulse');
+  });
+
+  it('idle 상태에는 pulse 클래스 부여하지 않음', () => {
+    const { container } = render(
+      <AgentCard agentId="stock" agentState={{ state: 'idle' }} notificationCount={0} onClick={() => {}} />
+    );
+    const dot = container.querySelector('.ao-card-dot');
+    expect(dot).not.toHaveClass('pulse');
+  });
+
+  it('agentState 없으면 idle로 fallback', () => {
+    const { container } = render(
+      <AgentCard agentId="stock" agentState={undefined} notificationCount={0} onClick={() => {}} />
+    );
+    const dot = container.querySelector('.ao-card-dot');
+    expect(dot).toHaveClass('idle');
+  });
+
+  it('notificationCount > 0이면 뱃지 표시', () => {
+    render(<AgentCard agentId="stock" agentState={{ state: 'idle' }} notificationCount={3} onClick={() => {}} />);
+    expect(screen.getByText('3')).toBeInTheDocument();
+  });
+
+  it('notificationCount === 0이면 뱃지 없음', () => {
+    const { container } = render(
+      <AgentCard agentId="stock" agentState={{ state: 'idle' }} notificationCount={0} onClick={() => {}} />
+    );
+    expect(container.querySelector('.ao-card-badge')).toBeNull();
+  });
+
+  it('notificationCount > 9이면 9+ 표시', () => {
+    render(<AgentCard agentId="stock" agentState={{ state: 'idle' }} notificationCount={15} onClick={() => {}} />);
+    expect(screen.getByText('9+')).toBeInTheDocument();
+  });
+
+  it('클릭 시 onClick 호출', () => {
+    const onClick = vi.fn();
+    const { container } = render(
+      <AgentCard agentId="stock" agentState={{ state: 'idle' }} notificationCount={0} onClick={onClick} />
+    );
+    fireEvent.click(container.querySelector('.ao-card'));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('active prop 시 카드에 active 클래스 부여', () => {
+    const { container } = render(
+      <AgentCard agentId="stock" agentState={{ state: 'idle' }} notificationCount={0} active onClick={() => {}} />
+    );
+    expect(container.querySelector('.ao-card')).toHaveClass('active');
+  });
+});

src/pages/agent-office/components/AgentGrid.jsx

@@ -0,0 +1,33 @@
+// src/pages/agent-office/components/AgentGrid.jsx
+import { GRID_SLOTS } from '../constants.js';
+import AgentCard from './AgentCard.jsx';
+import PlaceholderCard from './PlaceholderCard.jsx';
+
+export default function AgentGrid({ agents, notifications, selectedAgent, onSelectAgent, onSelectPlaceholder }) {
+  return (
+    <div className="ao-grid">
+      {GRID_SLOTS.map((slot, idx) => {
+        if (slot.agentId === null) {
+          const placeholderKey = `placeholder-${idx}`;
+          return (
+            <PlaceholderCard
+              key={placeholderKey}
+              active={selectedAgent === placeholderKey}
+              onClick={() => onSelectPlaceholder(placeholderKey)}
+            />
+          );
+        }
+        return (
+          <AgentCard
+            key={slot.agentId}
+            agentId={slot.agentId}
+            agentState={agents[slot.agentId]}
+            notificationCount={notifications[slot.agentId] || 0}
+            active={selectedAgent === slot.agentId}
+            onClick={() => onSelectAgent(slot.agentId)}
+          />
+        );
+      })}
+    </div>
+  );
+}

src/pages/agent-office/components/CommandTab.jsx

@@ -5,7 +5,7 @@ import { sendAgentCommand, approveAgentTask } from '../../../api';
 const QUICK_ACTIONS = {
   stock:      [{ action: 'fetch_news', label: 'Fetch News' }, { action: 'test_telegram', label: 'Test Telegram' }],
   music:      [{ action: 'credits', label: 'Check Credits' }],
-  blog:       [{ action: 'list_trend_keywords', label: 'List Keywords' }],
+  insta:      [{ action: 'extract', label: 'Extract News' }, { action: 'collect_trends', label: 'Collect Trends' }],
   realestate: [{ action: 'dashboard', label: 'Dashboard' }],
   lotto:      [{ action: 'status', label: 'Status' }, { action: 'curate_now', label: 'Curate Now' }]
 };
@@ -13,7 +13,7 @@ const QUICK_ACTIONS = {
 const PARAM_ACTIONS = {
   stock:      { action: 'add_alert', label: 'Add Alert', placeholder: '{"symbol":"005930","target_price":70000,"direction":"above"}' },
   music:      { action: 'compose', label: 'Compose', placeholder: 'jazzy lo-fi piano beat' },
-  blog:       { action: 'research', label: 'Research', placeholder: 'keyword to research' },
+  insta:      { action: 'render', label: 'Render Slate', placeholder: 'keyword_id (예: 42)' },
   realestate: { action: 'fetch_matches', label: 'Fetch Matches', placeholder: '' },
   lotto:      null
 };
@@ -46,6 +46,8 @@ export default function CommandTab({ agentId, agentState, pendingTask, onCommand
         params = { prompt: paramInput };
       } else if (paramAction.action === 'research') {
         params = { keyword: paramInput };
+      } else if (paramAction.action === 'render') {
+        params = { keyword_id: parseInt(paramInput, 10) };
       } else {
         try { params = JSON.parse(paramInput); } catch { params = { value: paramInput }; }
       }
@@ -87,7 +89,7 @@ export default function CommandTab({ agentId, agentState, pendingTask, onCommand
   return (
     <div className="ao-command-tab">
       {/* 승인 대기 UI */}
-      {agentState === 'waiting' && pendingTask && (
+      {agentState === 'waiting_approval' && pendingTask && (
         <div className="ao-approval-card">
           <div className="ao-approval-title">Awaiting Approval</div>
           <div className="ao-approval-desc">{pendingTask.task_type}: {pendingTask.detail || JSON.stringify(pendingTask.input_data)}</div>

src/pages/agent-office/components/CommandTab.test.jsx

@@ -0,0 +1,51 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import CommandTab from './CommandTab.jsx';
+
+vi.mock('../../../api', () => ({
+  sendAgentCommand: vi.fn(),
+  approveAgentTask: vi.fn(),
+}));
+
+describe('CommandTab approval card', () => {
+  const samplePendingTask = {
+    id: 'task-123',
+    task_type: 'lotto_briefing',
+    input_data: { draw_no: 1234 },
+  };
+
+  it('agentState가 waiting_approval이고 pendingTask가 있으면 승인 카드를 표시', () => {
+    render(
+      <CommandTab
+        agentId="lotto"
+        agentState="waiting_approval"
+        pendingTask={samplePendingTask}
+      />
+    );
+    expect(screen.getByText('Awaiting Approval')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Approve' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Reject' })).toBeInTheDocument();
+  });
+
+  it('agentState가 working이면 승인 카드를 표시하지 않음', () => {
+    render(
+      <CommandTab
+        agentId="lotto"
+        agentState="working"
+        pendingTask={samplePendingTask}
+      />
+    );
+    expect(screen.queryByText('Awaiting Approval')).toBeNull();
+  });
+
+  it('pendingTask가 null이면 waiting_approval이어도 승인 카드를 표시하지 않음', () => {
+    render(
+      <CommandTab
+        agentId="lotto"
+        agentState="waiting_approval"
+        pendingTask={null}
+      />
+    );
+    expect(screen.queryByText('Awaiting Approval')).toBeNull();
+  });
+});

src/pages/agent-office/components/EmptyDetailPanel.jsx

@@ -0,0 +1,41 @@
+// src/pages/agent-office/components/EmptyDetailPanel.jsx
+import { PLACEHOLDER_IMAGE } from '../constants.js';
+
+export default function EmptyDetailPanel({ variant = 'initial', onClose }) {
+  if (variant === 'placeholder') {
+    return (
+      <div className="ao-sidepanel">
+        <div className="ao-sidepanel-header">
+          <div className="ao-sidepanel-agent">
+            <div className="ao-sidepanel-icon">
+              <img src={PLACEHOLDER_IMAGE} alt="준비 중" />
+            </div>
+            <div className="ao-sidepanel-info">
+              <div className="ao-sidepanel-name">준비 중</div>
+              <div className="ao-sidepanel-state">● 미고용 슬롯</div>
+            </div>
+          </div>
+          <button className="ao-sidepanel-close" onClick={onClose}>×</button>
+        </div>
+        <div className="ao-sidepanel-content">
+          <p className="ao-empty">
+            이 자리는 아직 비어 있어요.<br />
+            준비 중인 에이전트입니다.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  // variant === 'initial'
+  return (
+    <div className="ao-sidepanel ao-sidepanel-initial">
+      <div className="ao-sidepanel-content">
+        <p className="ao-empty">
+          왼쪽 그리드에서<br />
+          에이전트를 선택하세요.
+        </p>
+      </div>
+    </div>
+  );
+}

src/pages/agent-office/components/LogTab.jsx

@@ -15,7 +15,7 @@ export default function LogTab({ agentId, refreshTrigger }) {
   useEffect(() => {
     let cancelled = false;
     getAgentLogs(agentId, 50).then(data => {
-      if (!cancelled) setLogs(data || []);
+      if (!cancelled) setLogs(Array.isArray(data) ? data : (data?.logs || []));
     });
     return () => { cancelled = true; };
   }, [agentId, refreshTrigger]);

src/pages/agent-office/components/PlaceholderCard.jsx

@@ -0,0 +1,17 @@
+// src/pages/agent-office/components/PlaceholderCard.jsx
+import { PLACEHOLDER_IMAGE, PLACEHOLDER_LABEL } from '../constants.js';
+
+export default function PlaceholderCard({ active = false, onClick }) {
+  return (
+    <button
+      type="button"
+      className={`ao-card placeholder${active ? ' active' : ''}`}
+      onClick={onClick}
+    >
+      <div className="ao-card-image">
+        <img src={PLACEHOLDER_IMAGE} alt={PLACEHOLDER_LABEL} />
+      </div>
+      <div className="ao-card-name">{PLACEHOLDER_LABEL}</div>
+    </button>
+  );
+}

src/pages/agent-office/components/SidePanel.jsx

@@ -1,22 +1,16 @@
 // src/pages/agent-office/components/SidePanel.jsx
 import { useState } from 'react';
+import { AGENT_META } from '../constants.js';
 import CommandTab from './CommandTab.jsx';
 import TaskTab from './TaskTab.jsx';
 import TokenTab from './TokenTab.jsx';
 import LogTab from './LogTab.jsx';
 
-const AGENT_META = {
-  stock:      { displayName: '주식 트레이더', emoji: '📈', color: '#4488cc' },
-  music:      { displayName: '음악 프로듀서', emoji: '🎵', color: '#44aa88' },
-  blog:       { displayName: '블로그 마케터', emoji: '✍️', color: '#d97706' },
-  realestate: { displayName: '청약 애널리스트', emoji: '🏢', color: '#c026d3' },
-  lotto:      { displayName: '로또 큐레이터', emoji: '🎱', color: '#ef4444' }
-};
-
 const TABS = ['Commands', 'Tasks', 'Tokens', 'Logs'];
 
 export default function SidePanel({ agentId, agentState, pendingTask, onClose, refreshTrigger }) {
   const [activeTab, setActiveTab] = useState('Commands');
+  const [expanded, setExpanded] = useState(false);
   const meta = AGENT_META[agentId];
   if (!meta) return null;
 
@@ -25,22 +19,30 @@ export default function SidePanel({ agentId, agentState, pendingTask, onClose, r
     : agentState?.state || 'unknown';
 
   return (
-    <div className="ao-sidepanel">
-      {/* Header */}
+    <div className={`ao-sidepanel${expanded ? ' expanded' : ''}`}>
       <div className="ao-sidepanel-header">
         <div className="ao-sidepanel-agent">
-          <div className="ao-sidepanel-icon" style={{ background: meta.color }}>
-            {meta.emoji}
+          <div className="ao-sidepanel-icon" style={{ borderColor: meta.color }}>
+            <img src={meta.image} alt={meta.displayName} />
           </div>
           <div className="ao-sidepanel-info">
             <div className="ao-sidepanel-name">{meta.displayName}</div>
             <div className="ao-sidepanel-state">● {stateText}</div>
           </div>
         </div>
-        <button className="ao-sidepanel-close" onClick={onClose}>×</button>
+        <div className="ao-sidepanel-actions">
+          <button
+            className="ao-sidepanel-expand"
+            onClick={() => setExpanded(e => !e)}
+            aria-label={expanded ? '축소' : '전체 화면'}
+            title={expanded ? '축소' : '전체 화면'}
+          >
+            {expanded ? '⤡' : '⤢'}
+          </button>
+          <button className="ao-sidepanel-close" onClick={onClose}>×</button>
+        </div>
       </div>
 
-      {/* Tabs */}
       <div className="ao-sidepanel-tabs">
         {TABS.map(tab => (
           <button
@@ -53,7 +55,6 @@ export default function SidePanel({ agentId, agentState, pendingTask, onClose, r
         ))}
       </div>
 
-      {/* Tab Content */}
       <div className="ao-sidepanel-content">
         {activeTab === 'Commands' && (
           <CommandTab agentId={agentId} agentState={agentState?.state} pendingTask={pendingTask} />

src/pages/agent-office/components/TaskTab.jsx

@@ -11,6 +11,22 @@ const STATUS_STYLE = {
   rejected:  { bg: '#7f1d1d', fg: '#fca5a5' }
 };
 
+// result_data는 백엔드에서 dict 또는 string 둘 다 올 수 있다.
+// React child로 직접 못 그리는 객체는 stringify, string은 parse 시도 후 pretty,
+// 둘 다 안 되면 원본 문자열을 그대로 표시.
+function formatResultData(rd) {
+  if (rd == null) return '';
+  if (typeof rd === 'object') {
+    try { return JSON.stringify(rd, null, 2); }
+    catch { return String(rd); }
+  }
+  if (typeof rd === 'string') {
+    try { return JSON.stringify(JSON.parse(rd), null, 2); }
+    catch { return rd; }
+  }
+  return String(rd);
+}
+
 function formatTime(ts) {
   if (!ts) return '';
   const d = new Date(ts);
@@ -27,7 +43,7 @@ export default function TaskTab({ agentId, refreshTrigger }) {
   useEffect(() => {
     let cancelled = false;
     getAgentTasks(agentId, 20).then(data => {
-      if (!cancelled) setTasks(data || []);
+      if (!cancelled) setTasks(Array.isArray(data) ? data : (data?.tasks || []));
     });
     return () => { cancelled = true; };
   }, [agentId, refreshTrigger]);
@@ -46,10 +62,7 @@ export default function TaskTab({ agentId, refreshTrigger }) {
             </div>
             {expanded === task.id && task.result_data && (
               <pre className="ao-task-result">
-                {(() => {
-                  try { return JSON.stringify(JSON.parse(task.result_data), null, 2); }
-                  catch { return task.result_data; }
-                })()}
+                {formatResultData(task.result_data)}
               </pre>
             )}
           </div>

src/pages/agent-office/components/TaskTab.test.jsx

@@ -0,0 +1,87 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import TaskTab from './TaskTab.jsx';
+
+const mockGetAgentTasks = vi.fn();
+vi.mock('../../../api', () => ({
+  getAgentTasks: (...args) => mockGetAgentTasks(...args),
+}));
+
+describe('TaskTab response shape handling', () => {
+  it('백엔드가 {tasks: [...]} 객체로 wrapping해서 응답해도 .map 깨지지 않음', async () => {
+    mockGetAgentTasks.mockResolvedValueOnce({
+      tasks: [
+        { id: 't1', task_type: 'compose', status: 'succeeded', created_at: '2026-05-18T08:00:00Z' },
+        { id: 't2', task_type: 'fetch_news', status: 'failed', created_at: '2026-05-18T08:05:00Z' },
+      ],
+    });
+    render(<TaskTab agentId="music" refreshTrigger={0} />);
+    await waitFor(() => expect(screen.getByText('compose')).toBeInTheDocument());
+    expect(screen.getByText('fetch_news')).toBeInTheDocument();
+  });
+
+  it('백엔드가 bare array를 반환해도 동작 (backward compat)', async () => {
+    mockGetAgentTasks.mockResolvedValueOnce([
+      { id: 't9', task_type: 'compose', status: 'succeeded', created_at: '2026-05-18T08:00:00Z' },
+    ]);
+    render(<TaskTab agentId="music" refreshTrigger={0} />);
+    await waitFor(() => expect(screen.getByText('compose')).toBeInTheDocument());
+  });
+
+  it('응답이 falsy/empty이면 No tasks yet 표시', async () => {
+    mockGetAgentTasks.mockResolvedValueOnce({ tasks: [] });
+    render(<TaskTab agentId="music" refreshTrigger={0} />);
+    await waitFor(() => expect(screen.getByText('No tasks yet')).toBeInTheDocument());
+  });
+
+  it('task 클릭 → result_data가 객체일 때도 stringify되어 안전하게 렌더', async () => {
+    mockGetAgentTasks.mockResolvedValueOnce({
+      tasks: [{
+        id: 't_compose',
+        task_type: 'compose',
+        status: 'succeeded',
+        created_at: '2026-05-18T08:00:00Z',
+        result_data: { music_task_id: 'abc-123', tracks: [] },
+      }],
+    });
+    render(<TaskTab agentId="music" refreshTrigger={0} />);
+    const row = await screen.findByText('compose');
+    fireEvent.click(row.closest('.ao-task-item'));
+    const pre = await screen.findByText(/music_task_id/);
+    expect(pre.textContent).toContain('"music_task_id": "abc-123"');
+    expect(pre.textContent).toContain('"tracks": []');
+  });
+
+  it('task 클릭 → result_data가 JSON 문자열일 때 parse 후 pretty 렌더', async () => {
+    mockGetAgentTasks.mockResolvedValueOnce({
+      tasks: [{
+        id: 't_str',
+        task_type: 'compose',
+        status: 'succeeded',
+        created_at: '2026-05-18T08:00:00Z',
+        result_data: '{"foo":"bar"}',
+      }],
+    });
+    render(<TaskTab agentId="music" refreshTrigger={0} />);
+    const row = await screen.findByText('compose');
+    fireEvent.click(row.closest('.ao-task-item'));
+    const pre = await screen.findByText(/foo/);
+    expect(pre.textContent).toContain('"foo": "bar"');
+  });
+
+  it('task 클릭 → result_data가 plain string이면 그대로 표시 (parse 실패 fallback)', async () => {
+    mockGetAgentTasks.mockResolvedValueOnce({
+      tasks: [{
+        id: 't_plain',
+        task_type: 'fetch_news',
+        status: 'succeeded',
+        created_at: '2026-05-18T08:00:00Z',
+        result_data: 'Just a log line',
+      }],
+    });
+    render(<TaskTab agentId="music" refreshTrigger={0} />);
+    const row = await screen.findByText('fetch_news');
+    fireEvent.click(row.closest('.ao-task-item'));
+    expect(await screen.findByText('Just a log line')).toBeInTheDocument();
+  });
+});

src/pages/agent-office/components/TopBar.jsx

@@ -1,33 +1,21 @@
 // src/pages/agent-office/components/TopBar.jsx
-import { getThemeNames } from '../canvas/themes.js';
-
-export default function TopBar({ connected, theme, onThemeChange, zoom, onZoomChange }) {
-  const themes = getThemeNames();
-
+export default function TopBar({ connected, reconnectAttempt = 0 }) {
+  let statusText;
+  if (connected) {
+    statusText = 'Connected';
+  } else if (reconnectAttempt === 0) {
+    statusText = 'Connecting…';
+  } else {
+    statusText = `Disconnected · 재연결 시도 #${reconnectAttempt}`;
+  }
   return (
     <div className="ao-topbar">
       <div className="ao-topbar-left">
         <span className="ao-topbar-title">Agent Office</span>
         <span className={`ao-topbar-status ${connected ? 'connected' : 'disconnected'}`}>
-          ● {connected ? 'Connected' : 'Disconnected'}
+          ● {statusText}
         </span>
       </div>
-      <div className="ao-topbar-right">
-        <select
-          className="ao-topbar-select"
-          value={theme}
-          onChange={(e) => onThemeChange(e.target.value)}
-        >
-          {themes.map(t => (
-            <option key={t.key} value={t.key}>{t.name}</option>
-          ))}
-        </select>
-        <div className="ao-topbar-zoom">
-          <button onClick={() => onZoomChange(Math.max(1, zoom - 0.5))} disabled={zoom <= 1}>-</button>
-          <span>{zoom}x</span>
-          <button onClick={() => onZoomChange(Math.min(4, zoom + 0.5))} disabled={zoom >= 4}>+</button>
-        </div>
-      </div>
     </div>
   );
 }

src/pages/agent-office/constants.js

@@ -0,0 +1,43 @@
+// src/pages/agent-office/constants.js
+import stockImg from './assets/agent_stock.webp';
+import musicImg from './assets/agent_music.webp';
+import instaImg from './assets/agent_insta.webp';
+import realestateImg from './assets/agent_realestate.webp';
+import lottoImg from './assets/agent_lotto.webp';
+import undeterminedImg from './assets/agent_undetermined.webp';
+
+export const AGENT_META = {
+  stock:      { displayName: '주식 트레이더',   color: '#4488cc', image: stockImg },
+  music:      { displayName: '음악 프로듀서',   color: '#44aa88', image: musicImg },
+  insta:      { displayName: '인스타 큐레이터', color: '#d97706', image: instaImg },
+  realestate: { displayName: '청약 애널리스트', color: '#c026d3', image: realestateImg },
+  lotto:      { displayName: '로또 큐레이터',   color: '#ef4444', image: lottoImg },
+};
+
+// 3x3 슬롯 (좌→우, 위→아래). 처음 5칸은 active, 나머지 4칸은 placeholder.
+export const GRID_SLOTS = [
+  { agentId: 'stock' },
+  { agentId: 'music' },
+  { agentId: 'insta' },
+  { agentId: 'realestate' },
+  { agentId: 'lotto' },
+  { agentId: null },
+  { agentId: null },
+  { agentId: null },
+  { agentId: null },
+];
+
+export const ACTIVE_AGENT_IDS = GRID_SLOTS.filter(s => s.agentId !== null).map(s => s.agentId);
+
+export const PLACEHOLDER_IMAGE = undeterminedImg;
+export const PLACEHOLDER_LABEL = '준비 중';
+
+// 상태 → dot 색상 매핑 (AgentCard에서 공유)
+export const STATE_COLORS = {
+  idle:             { color: '#6b7280', pulse: false },
+  working:          { color: '#22c55e', pulse: true  },
+  error:            { color: '#ef4444', pulse: false },
+  waiting_approval: { color: '#f59e0b', pulse: true  },
+};
+
+export const DEFAULT_STATE_COLOR = STATE_COLORS.idle;

src/pages/agent-office/constants.test.js

@@ -0,0 +1,35 @@
+// src/pages/agent-office/constants.test.js
+import { describe, it, expect } from 'vitest';
+import { AGENT_META, GRID_SLOTS, ACTIVE_AGENT_IDS } from './constants.js';
+
+describe('agent-office constants', () => {
+  it('5명의 active 에이전트가 정의됨', () => {
+    expect(ACTIVE_AGENT_IDS).toEqual(['stock', 'music', 'insta', 'realestate', 'lotto']);
+  });
+
+  it('각 active 에이전트에 displayName/color/image 메타가 있음', () => {
+    for (const id of ACTIVE_AGENT_IDS) {
+      expect(AGENT_META[id]).toBeDefined();
+      expect(AGENT_META[id].displayName).toBeTruthy();
+      expect(AGENT_META[id].color).toMatch(/^#/);
+      expect(AGENT_META[id].image).toBeTruthy();
+    }
+  });
+
+  it('blog 메타는 존재하지 않음 (insta로 대체됨)', () => {
+    expect(AGENT_META.blog).toBeUndefined();
+  });
+
+  it('GRID_SLOTS는 9칸, 처음 5칸은 active 에이전트', () => {
+    expect(GRID_SLOTS).toHaveLength(9);
+    expect(GRID_SLOTS.slice(0, 5).map(s => s.agentId)).toEqual(
+      ['stock', 'music', 'insta', 'realestate', 'lotto']
+    );
+  });
+
+  it('GRID_SLOTS의 마지막 4칸은 placeholder (agentId=null)', () => {
+    for (const slot of GRID_SLOTS.slice(5)) {
+      expect(slot.agentId).toBeNull();
+    }
+  });
+});

src/pages/agent-office/hooks/useAgentManager.js

@@ -1,24 +1,34 @@
 // src/pages/agent-office/hooks/useAgentManager.js
 import { useState, useEffect, useRef, useCallback } from 'react';
 
-const WS_RECONNECT_DELAY = 3000;
+// Exponential backoff with cap. 1s → 2s → 4s → 8s → 16s → 30s (cap)
+const WS_BACKOFF_BASE_MS = 1000;
+const WS_BACKOFF_CAP_MS = 30000;
+const WS_BACKOFF_MAX_EXP = 5;
 
 export function useAgentManager() {
   const [agents, setAgents] = useState({});           // { agentId: { state, detail, task_id } }
   const [pendingTasks, setPendingTasks] = useState([]); // [{id, agent_id, task_type, input_data}]
   const [notifications, setNotifications] = useState({}); // { agentId: count }
   const [connected, setConnected] = useState(false);
+  const [reconnectAttempt, setReconnectAttempt] = useState(0);
   const [refreshTrigger, setRefreshTrigger] = useState(0); // 탭 데이터 리프레시용
 
   const wsRef = useRef(null);
   const reconnectRef = useRef(null);
+  const connectRef = useRef(null);
+  const attemptRef = useRef(0);
 
   const connect = useCallback(() => {
     const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
     const ws = new WebSocket(`${protocol}://${window.location.host}/api/agent-office/ws`);
     wsRef.current = ws;
 
-    ws.onopen = () => setConnected(true);
+    ws.onopen = () => {
+      setConnected(true);
+      attemptRef.current = 0;
+      setReconnectAttempt(0);
+    };
 
     ws.onmessage = (e) => {
       const msg = JSON.parse(e.data);
@@ -68,12 +78,23 @@ export function useAgentManager() {
 
     ws.onclose = () => {
       setConnected(false);
-      reconnectRef.current = setTimeout(connect, WS_RECONNECT_DELAY);
+      const exp = Math.min(attemptRef.current, WS_BACKOFF_MAX_EXP);
+      const delay = Math.min(WS_BACKOFF_BASE_MS * 2 ** exp, WS_BACKOFF_CAP_MS);
+      attemptRef.current += 1;
+      setReconnectAttempt(attemptRef.current);
+      reconnectRef.current = setTimeout(() => connectRef.current?.(), delay);
     };
 
-    ws.onerror = () => ws.close();
+    // onerror fires before onclose; swallow so the browser doesn't print an
+    // unhandled-error pair for every retry. onclose still runs and schedules
+    // the next attempt.
+    ws.onerror = () => {};
   }, []);
 
+  useEffect(() => {
+    connectRef.current = connect;
+  }, [connect]);
+
   useEffect(() => {
     connect();
     return () => {
@@ -103,6 +124,7 @@ export function useAgentManager() {
     pendingTasks,
     notifications,
     connected,
+    reconnectAttempt,
     refreshTrigger,
     sendCommand,
     sendApproval,

src/pages/agent-office/hooks/useOfficeCanvas.js

@@ -1,64 +0,0 @@
-// src/pages/agent-office/hooks/useOfficeCanvas.js
-import { useRef, useEffect, useCallback } from 'react';
-import { OfficeRenderer } from '../canvas/OfficeRenderer.js';
-
-export function useOfficeCanvas() {
-  const canvasRef = useRef(null);
-  const rendererRef = useRef(null);
-
-  useEffect(() => {
-    if (!canvasRef.current) return;
-
-    const renderer = new OfficeRenderer(canvasRef.current);
-    rendererRef.current = renderer;
-    renderer.start();
-
-    const handleResize = () => renderer.resize();
-    window.addEventListener('resize', handleResize);
-
-    return () => {
-      window.removeEventListener('resize', handleResize);
-      renderer.destroy();
-      rendererRef.current = null;
-    };
-  }, []);
-
-  const updateAgentState = useCallback((agentId, state, detail) => {
-    rendererRef.current?.updateAgentState(agentId, state, detail);
-  }, []);
-
-  const setAgentNotification = useCallback((agentId, count) => {
-    rendererRef.current?.setAgentNotification(agentId, count);
-  }, []);
-
-  const setTheme = useCallback((themeName) => {
-    rendererRef.current?.setTheme(themeName);
-  }, []);
-
-  const setZoom = useCallback((level) => {
-    rendererRef.current?.setZoom(level);
-  }, []);
-
-  const hitTest = useCallback((clientX, clientY) => {
-    return rendererRef.current?.hitTest(clientX, clientY) || { type: 'empty' };
-  }, []);
-
-  const getZoom = useCallback(() => {
-    return rendererRef.current?.zoom || 2;
-  }, []);
-
-  const wasDragging = useCallback(() => {
-    return rendererRef.current?.wasDragging?.() || false;
-  }, []);
-
-  return {
-    canvasRef,
-    updateAgentState,
-    setAgentNotification,
-    setTheme,
-    setZoom,
-    hitTest,
-    getZoom,
-    wasDragging
-  };
-}

src/pages/insta/InstaCards.css

@@ -1,5 +1,8 @@
 /* ── InstaCards ──────────────────────────────────────────────────────────── */
-.ic { max-width: 1100px; margin: 0 auto; padding: 24px 16px 80px; }
+.ic { max-width: 1100px; margin: 0 auto; padding: 16px 12px 80px; }
+@media (min-width: 768px) {
+  .ic { padding: 24px 16px 80px; }
+}
 
 /* 헤더 */
 .ic-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
@@ -24,10 +27,12 @@
 .ic-spinner { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: ic-spin .6s linear infinite; display: inline-block; }
 @keyframes ic-spin { to { transform: rotate(360deg); } }
 
-/* 레이아웃: 모바일 1컬럼, 데스크탑 2컬럼 */
-.ic-layout { display: grid; grid-template-columns: 1fr; gap: 20px; }
+/* 레이아웃: 모바일 1컬럼, 데스크탑 2컬럼.
+   minmax(0, 1fr)로 자식 overflow가 부모를 밀어내지 않도록 함 */
+.ic-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
+.ic-layout > * { min-width: 0; }
 @media (min-width: 768px) {
-  .ic-layout { grid-template-columns: 320px 1fr; }
+  .ic-layout { grid-template-columns: 320px minmax(0, 1fr); }
 }
 
 /* 섹션 카드 */
@@ -54,8 +59,27 @@
 .ic-keyword-row__meta { font-size: 0.72rem; color: rgba(255,255,255,.35); white-space: nowrap; }
 .ic-keyword-row__score { font-size: 0.75rem; font-weight: 700; color: #ec4899; min-width: 36px; text-align: right; }
 
-/* 슬레이트 그리드 */
-.ic-slates-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
+/* 키워드 페이저 (10개씩, 이전/다음) */
+.ic-keywords__pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; }
+.ic-pager-btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 36px; height: 36px; border-radius: 99px;
+  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04);
+  color: rgba(255,255,255,.7); font-size: 1.1rem; cursor: pointer; transition: all .15s;
+}
+.ic-pager-btn:hover:not(:disabled) { background: rgba(236,72,153,.18); border-color: #ec4899; color: #ec4899; }
+.ic-pager-btn:disabled { opacity: .3; cursor: not-allowed; }
+.ic-pager-info { font-size: 0.8rem; font-weight: 600; color: rgba(255,255,255,.55); min-width: 48px; text-align: center; }
+
+/* 슬레이트 그리드 — 모바일 2칸 강제, 데스크탑 auto-fill */
+.ic-slates-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+@media (min-width: 640px) {
+  .ic-slates-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
+}
 .ic-slate-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); border-radius: 10px; overflow: hidden; cursor: pointer; transition: border-color .15s; }
 .ic-slate-card:hover { border-color: rgba(236,72,153,.4); }
 .ic-slate-card--active { border-color: #ec4899; }
@@ -73,14 +97,90 @@
 .ic-status-badge--sent { background: rgba(16,185,129,.15); color: #10b981; }
 .ic-status-badge--failed { background: rgba(239,68,68,.12); color: #ef4444; }
 
-/* 슬레이트 상세 패널 */
-.ic-detail { margin-top: 20px; padding: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; }
+/* 슬레이트 상세 패널 — min-width: 0으로 자식 overflow가 부모 밀지 않게 */
+.ic-detail {
+  margin-top: 20px; padding: 16px;
+  background: rgba(255,255,255,.04);
+  border: 1px solid rgba(255,255,255,.06); border-radius: 12px;
+  min-width: 0; max-width: 100%;
+}
 .ic-detail__header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
-.ic-detail__title { font-size: 1rem; font-weight: 700; color: var(--text-primary, #e4e4e7); flex: 1; }
+.ic-detail__title { font-size: 1rem; font-weight: 700; color: var(--text-primary, #e4e4e7); flex: 1; min-width: 0; }
 .ic-detail__actions { display: flex; gap: 8px; }
 
-.ic-pages-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 14px; scroll-snap-type: x mandatory; }
-.ic-page-img { width: 120px; flex-shrink: 0; aspect-ratio: 4/5; border-radius: 6px; object-fit: cover; scroll-snap-align: start; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); }
+/* ── pages strip wrapper (chevron + fade + indicator 캐러셀) ── */
+.ic-pages-wrap {
+  position: relative;
+  margin-bottom: 14px;
+  min-width: 0;
+}
+.ic-pages-strip {
+  display: flex;
+  gap: 8px;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  padding: 4px 48px 12px;
+  -webkit-overflow-scrolling: touch;
+  /* 양옆 fade로 "더 있다" affordance */
+  mask-image: linear-gradient(to right,
+    transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
+  -webkit-mask-image: linear-gradient(to right,
+    transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
+}
+.ic-pages-strip::-webkit-scrollbar { height: 6px; }
+.ic-pages-strip::-webkit-scrollbar-thumb { background: rgba(236,72,153,.4); border-radius: 3px; }
+.ic-pages-strip::-webkit-scrollbar-track { background: transparent; }
+
+.ic-page-img {
+  width: clamp(140px, 42vw, 220px);
+  flex-shrink: 0;
+  aspect-ratio: 4/5;
+  border-radius: 8px;
+  object-fit: cover;
+  scroll-snap-align: center;
+  border: 2px solid rgba(255,255,255,.08);
+  background: rgba(255,255,255,.04);
+  cursor: pointer;
+  transition: transform .15s, border-color .15s;
+}
+.ic-page-img.is-active {
+  border-color: #ec4899;
+  transform: scale(1.03);
+}
+
+.ic-pages-nav {
+  position: absolute;
+  top: calc(50% - 6px);
+  transform: translateY(-50%);
+  width: 40px; height: 40px;
+  border-radius: 50%; border: 0;
+  background: rgba(0,0,0,.65); color: #fff;
+  font-size: 24px; font-weight: 700; line-height: 1;
+  cursor: pointer; z-index: 2;
+  display: flex; align-items: center; justify-content: center;
+  backdrop-filter: blur(4px);
+  transition: opacity .15s, background .15s;
+}
+.ic-pages-nav:hover:not(:disabled) { background: rgba(236,72,153,.9); }
+.ic-pages-nav:disabled { opacity: .2; cursor: not-allowed; }
+.ic-pages-nav--prev { left: 0; }
+.ic-pages-nav--next { right: 0; }
+
+.ic-pages-indicator {
+  display: inline-flex; align-items: baseline; gap: 4px;
+  margin: 4px auto 0;
+  padding: 4px 12px;
+  background: rgba(255,255,255,.06);
+  border-radius: 99px;
+  font-size: 0.78rem;
+  color: rgba(255,255,255,.7);
+  font-variant-numeric: tabular-nums;
+}
+.ic-pages-indicator-row { display: flex; justify-content: center; }
+.ic-pages-indicator__current { color: #ec4899; font-weight: 700; }
+.ic-pages-indicator__sep { opacity: 0.5; }
+.ic-pages-indicator__total { opacity: 0.7; }
 
 .ic-caption-box { background: rgba(255,255,255,.03); border-radius: 8px; padding: 12px; margin-bottom: 10px; }
 .ic-caption-box__label { font-size: 0.7rem; font-weight: 700; color: rgba(255,255,255,.4); text-transform: uppercase; margin-bottom: 6px; }
@@ -167,3 +267,39 @@
 }
 .ic-impact__cat { font-weight: 600; text-transform: capitalize; color: rgba(255,255,255,.6); font-size: 0.82rem; }
 .ic-impact__count { color: #ec4899; font-weight: 700; font-size: 0.82rem; }
+
+/* ── slate creation progress banner (양 탭 공통) ── */
+.ic-slate-progress {
+  margin: 8px 0 16px;
+  padding: 12px 16px;
+  border-radius: 8px;
+  font-size: 0.88rem;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+  line-height: 1.5;
+}
+.ic-slate-progress--starting,
+.ic-slate-progress--processing {
+  background: rgba(245, 158, 11, 0.12);
+  color: #fbbf24;
+  border-left: 4px solid #f59e0b;
+}
+.ic-slate-progress--succeeded {
+  background: rgba(16, 185, 129, 0.12);
+  color: #34d399;
+  border-left: 4px solid #10b981;
+  cursor: pointer;
+}
+.ic-slate-progress--failed {
+  background: rgba(239, 68, 68, 0.12);
+  color: #f87171;
+  border-left: 4px solid #ef4444;
+  cursor: pointer;
+}
+.ic-slate-progress__hint {
+  opacity: 0.7;
+  font-size: 0.78rem;
+  margin-left: 6px;
+}

src/pages/insta/InstaCards.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback, useRef } from 'react';
+import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
 import PullToRefresh from '../../components/PullToRefresh';
 import {
   getInstaStatus,
@@ -181,7 +181,7 @@ function ExternalTrendsPanel({ onCreateSlate }) {
   const load = useCallback(async () => {
     const [n, g] = await Promise.all([
       getInstaTrends({ source: 'naver_popular', days: 2 }),
-      getInstaTrends({ source: 'google_trends', days: 2 }),
+      getInstaTrends({ source: 'youtube_trending', days: 2 }),
     ]);
     setNaver(n.items || []);
     setGoogle(g.items || []);
@@ -254,7 +254,7 @@ function ExternalTrendsPanel({ onCreateSlate }) {
           ))}
         </div>
         <div className="ic-trends__col">
-          <h4>🌐 Google Trends</h4>
+          <h4>📺 YouTube 인기</h4>
           {google.length === 0 && <p className="ic-empty">없음</p>}
           {google.map(renderRow)}
         </div>
@@ -300,6 +300,10 @@ function PreferenceImpactPanel() {
 export default function InstaCards() {
   const [status, setStatus] = useState(null);
   const [selectedSlateId, setSelectedSlateId] = useState(null);
+  /* ── 카드 생성 progress (Trends 탭 클릭 + Cards 탭 양쪽 모두 사용) ──
+   * null = idle
+   * { keyword, status: 'starting'|'processing'|'succeeded'|'failed', message?, slate_id?, error? } */
+  const [slateProgress, setSlateProgress] = useState(null);
 
   /* ── 탭 상태 (URL 동기화) ── */
   const [activeTab, setActiveTab] = useState(() => {
@@ -323,13 +327,51 @@ export default function InstaCards() {
     loadStatus();
   }, [loadStatus]);
 
-  /* ── handleCreateSlate: 키워드 → 슬레이트 생성 (Trends 탭에서도 공유) ── */
+  /* ── handleCreateSlate: 키워드 → 카피 + 이미지 추론 → 자동 미리보기 ──
+   * 1. createInstaSlate 호출 → task_id
+   * 2. getInstaTask로 폴링 (3초 간격, 최대 8분 = Claude 카피 + Playwright 10장 렌더)
+   * 3. 완료 시 Cards 탭으로 자동 전환 + 슬레이트 선택 → SlateDetail이 카피·이미지 미리보기 */
   const handleCreateSlate = useCallback(async ({ keyword, category, keyword_id } = {}) => {
+    if (!keyword || !category) {
+      alert('keyword + category 필수');
+      return;
+    }
+    setSlateProgress({ keyword, status: 'starting', message: '카드 생성 시작...' });
+    // 상단 progress 배너가 보이도록 스크롤 (Trends/Cards 어느 탭의 어느 위치에서 눌렀든)
+    if (typeof window !== 'undefined') {
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
     try {
-      await createInstaSlate({ keyword, category, keyword_id });
-      setSelectedSlateId(null);
+      const { task_id } = await createInstaSlate({ keyword, category, keyword_id });
+      let st = null;
+      // 최대 8분 (3초 × 160) 폴링
+      for (let i = 0; i < 160; i++) {
+        st = await getInstaTask(task_id);
+        setSlateProgress({
+          keyword,
+          status: st.status,
+          message: st.message || `진행률 ${st.progress}%`,
+        });
+        if (st.status === 'succeeded' || st.status === 'failed') break;
+        await new Promise(r => setTimeout(r, 3000));
+      }
+      if (st && st.status === 'succeeded' && st.result_id) {
+        // 완료 — Cards 탭으로 자동 이동해서 SlateDetail 보여주기
+        setSlateProgress({
+          keyword, status: 'succeeded', message: '완료', slate_id: st.result_id,
+        });
+        setSelectedSlateId(st.result_id);
+        switchTab('cards');
+        // 3초 후 progress 배너 자동 dismiss
+        setTimeout(() => setSlateProgress(null), 3000);
+      } else {
+        setSlateProgress({
+          keyword, status: 'failed',
+          error: (st && st.error) || '시간 초과 또는 알 수 없는 오류',
+        });
+      }
     } catch (e) {
-      alert('카드 생성 실패: ' + e.message);
+      setSlateProgress({ keyword, status: 'failed', error: e.message });
     }
   }, []);
 
@@ -347,6 +389,28 @@ export default function InstaCards() {
         >📈 Trends</button>
       </div>
 
+      {/* ── 카드 생성 progress 배너 (양 탭 공통) ── */}
+      {slateProgress && (
+        <div
+          className={`ic-slate-progress ic-slate-progress--${slateProgress.status}`}
+          onClick={() => slateProgress.status !== 'processing' && slateProgress.status !== 'starting' && setSlateProgress(null)}
+        >
+          {slateProgress.status === 'starting' && '⏳'}
+          {slateProgress.status === 'processing' && '🎨'}
+          {slateProgress.status === 'succeeded' && '✅'}
+          {slateProgress.status === 'failed' && '⚠️'}
+          {' '}
+          <strong>{slateProgress.keyword}</strong>
+          {' — '}
+          {slateProgress.status === 'failed'
+            ? `실패: ${slateProgress.error}`
+            : slateProgress.message}
+          {(slateProgress.status === 'starting' || slateProgress.status === 'processing') && (
+            <span className="ic-slate-progress__hint"> · Claude로 10페이지 카피 추론 + Playwright로 카드 10장 생성 중 (3~7분)</span>
+          )}
+        </div>
+      )}
+
       {/* ── Cards 탭 (기존 5-패널) ── */}
       {activeTab === 'cards' && (
         <>
@@ -372,7 +436,7 @@ export default function InstaCards() {
                 <div>
                   <TriggerPanel />
                   <div style={{ height: 16 }} />
-                  <KeywordsPanel onCreateSlate={() => setSelectedSlateId(null)} />
+                  <KeywordsPanel onCreateSlate={handleCreateSlate} />
                 </div>
 
                 {/* 오른쪽: 슬레이트 목록 + 상세 */}
@@ -457,15 +521,13 @@ function TriggerPanel() {
 
 /* ══════════════════════ 키워드 목록 ══════════════════════════════════════ */
 const CATEGORIES = ['전체', 'economy', 'psychology', 'celebrity'];
+const KEYWORDS_PER_PAGE = 10;
 
 function KeywordsPanel({ onCreateSlate }) {
   const [category, setCategory] = useState('전체');
   const [keywords, setKeywords] = useState([]);
   const [creating, setCreating] = useState(null); // keyword_id being created
-  const slatePoll = usePollTask((t) => {
-    if (t.status === 'succeeded') onCreateSlate?.();
-    setCreating(null);
-  });
+  const [page, setPage] = useState(0);
 
   const load = useCallback(() => {
     const cat = category === '전체' ? undefined : category;
@@ -473,19 +535,35 @@ function KeywordsPanel({ onCreateSlate }) {
   }, [category]);
 
   useEffect(() => { load(); }, [load]);
+  useEffect(() => { setPage(0); }, [category]); // 카테고리 변경 시 첫 페이지로
 
+  // 동일 keyword 중복 제거(최고 score 1개만 유지) + score 내림차순
+  const deduped = useMemo(() => {
+    const best = new Map();
+    for (const kw of keywords) {
+      const name = (kw.keyword || '').trim();
+      if (!name) continue;
+      const prev = best.get(name);
+      if (!prev || (kw.score ?? 0) > (prev.score ?? 0)) best.set(name, kw);
+    }
+    return [...best.values()].sort((a, b) => (b.score ?? 0) - (a.score ?? 0));
+  }, [keywords]);
+
+  const totalPages = Math.max(1, Math.ceil(deduped.length / KEYWORDS_PER_PAGE));
+  const safePage = Math.min(page, totalPages - 1);
+  const pageItems = deduped.slice(safePage * KEYWORDS_PER_PAGE, safePage * KEYWORDS_PER_PAGE + KEYWORDS_PER_PAGE);
+
+  // 부모(InstaCards)의 handleCreateSlate에 위임 — progress 배너 + 스크롤 + 자동 미리보기 공통화
   async function handleCreate(kw) {
     if (creating) return;
     setCreating(kw.id);
     try {
-      const res = await createInstaSlate({
+      await onCreateSlate?.({
         keyword: kw.keyword,
         category: kw.category,
         keyword_id: kw.id,
       });
-      slatePoll.start(res.task_id);
-    } catch (e) {
-      alert('카드 생성 실패: ' + e.message);
+    } finally {
       setCreating(null);
     }
   }
@@ -507,29 +585,49 @@ function KeywordsPanel({ onCreateSlate }) {
         ))}
       </div>
 
-      {slatePoll.task && <TaskStatusBox task={slatePoll.task} />}
+      {/* progress 표시는 상단 ic-slate-progress 배너에서 일괄 처리 */}
 
-      {keywords.length === 0 ? (
+      {deduped.length === 0 ? (
         <div className="ic-empty">키워드가 없습니다. 키워드 추출을 실행하세요.</div>
       ) : (
-        <div className="ic-keywords">
-          {keywords.map((kw) => (
-            <div key={kw.id} className="ic-keyword-row">
-              <span className="ic-keyword-row__kw">{kw.keyword}</span>
-              <span className="ic-keyword-row__meta">
-                {kw.category} · {kw.articles_count ?? 0}건
-              </span>
-              <span className="ic-keyword-row__score">{kw.score?.toFixed(1) ?? '-'}</span>
+        <>
+          <div className="ic-keywords">
+            {pageItems.map((kw) => (
+              <div key={kw.id} className="ic-keyword-row">
+                <span className="ic-keyword-row__kw">{kw.keyword}</span>
+                <span className="ic-keyword-row__meta">
+                  {kw.category} · {kw.articles_count ?? 0}건
+                </span>
+                <span className="ic-keyword-row__score">{kw.score?.toFixed(1) ?? '-'}</span>
+                <button
+                  className="ic-btn ic-btn--primary ic-btn--sm"
+                  onClick={() => handleCreate(kw)}
+                  disabled={!!creating}
+                >
+                  {creating === kw.id ? <span className="ic-spinner" /> : '🎴'}
+                </button>
+              </div>
+            ))}
+          </div>
+
+          {totalPages > 1 && (
+            <div className="ic-keywords__pager">
               <button
-                className="ic-btn ic-btn--primary ic-btn--sm"
-                onClick={() => handleCreate(kw)}
-                disabled={!!creating}
-              >
-                {creating === kw.id ? <span className="ic-spinner" /> : '🎴'}
-              </button>
+                className="ic-pager-btn"
+                onClick={() => setPage((p) => Math.max(0, p - 1))}
+                disabled={safePage === 0}
+                aria-label="이전 키워드"
+              >←</button>
+              <span className="ic-pager-info">{safePage + 1} / {totalPages}</span>
+              <button
+                className="ic-pager-btn"
+                onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))}
+                disabled={safePage >= totalPages - 1}
+                aria-label="다음 키워드"
+              >→</button>
             </div>
-          ))}
-        </div>
+          )}
+        </>
       )}
     </div>
   );
@@ -630,6 +728,91 @@ function SlatesPanel({ selectedId, onSelect }) {
   );
 }
 
+/* ══════════════════════ 페이지 스트립 (chevron + indicator) ═══════════ */
+function PagesStrip({ slateId, pageCount }) {
+  const stripRef = useRef(null);
+  const [activePage, setActivePage] = useState(1);
+
+  const scrollToPage = useCallback((pageNo) => {
+    const strip = stripRef.current;
+    if (!strip) return;
+    const next = Math.max(1, Math.min(pageCount, pageNo));
+    const child = strip.children[next - 1];
+    if (child) {
+      child.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
+      setActivePage(next);
+    }
+  }, [pageCount]);
+
+  // 스크롤/드래그 시 가운데 카드 감지
+  const onScroll = useCallback(() => {
+    const strip = stripRef.current;
+    if (!strip) return;
+    const rect = strip.getBoundingClientRect();
+    const centerX = rect.left + rect.width / 2;
+    let best = 1, bestDist = Infinity;
+    Array.from(strip.children).forEach((child, i) => {
+      const cRect = child.getBoundingClientRect();
+      const cCenter = cRect.left + cRect.width / 2;
+      const dist = Math.abs(cCenter - centerX);
+      if (dist < bestDist) { bestDist = dist; best = i + 1; }
+    });
+    if (best !== activePage) setActivePage(best);
+  }, [activePage]);
+
+  // 키보드 ←/→
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+      if (e.key === 'ArrowLeft') { scrollToPage(activePage - 1); e.preventDefault(); }
+      else if (e.key === 'ArrowRight') { scrollToPage(activePage + 1); e.preventDefault(); }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [activePage, scrollToPage]);
+
+  return (
+    <div className="ic-pages-wrap">
+      <button
+        className="ic-pages-nav ic-pages-nav--prev"
+        onClick={() => scrollToPage(activePage - 1)}
+        disabled={activePage <= 1}
+        aria-label="이전 페이지"
+        type="button"
+      >‹</button>
+
+      <div className="ic-pages-strip" ref={stripRef} onScroll={onScroll}>
+        {Array.from({ length: pageCount }, (_, i) => i + 1).map((page) => (
+          <img
+            key={page}
+            className={`ic-page-img ${activePage === page ? 'is-active' : ''}`}
+            src={getInstaAssetUrl(slateId, page)}
+            alt={`Page ${page}`}
+            loading="lazy"
+            onClick={() => scrollToPage(page)}
+          />
+        ))}
+      </div>
+
+      <button
+        className="ic-pages-nav ic-pages-nav--next"
+        onClick={() => scrollToPage(activePage + 1)}
+        disabled={activePage >= pageCount}
+        aria-label="다음 페이지"
+        type="button"
+      >›</button>
+
+      <div className="ic-pages-indicator-row">
+        <span className="ic-pages-indicator">
+          <span className="ic-pages-indicator__current">{activePage}</span>
+          <span className="ic-pages-indicator__sep">/</span>
+          <span className="ic-pages-indicator__total">{pageCount}</span>
+        </span>
+      </div>
+    </div>
+  );
+}
+
 /* ══════════════════════ 슬레이트 상세 ══════════════════════════════════ */
 function SlateDetail({ slate, onDelete, onRender }) {
   const pages = slate.assets || [];
@@ -653,19 +836,9 @@ function SlateDetail({ slate, onDelete, onRender }) {
         </div>
       </div>
 
-      {/* 페이지 이미지 스트립 */}
+      {/* 페이지 이미지 스트립 (캐러셀: chevron + indicator + ←/→ 키보드) */}
       {(slate.status === 'rendered' || slate.status === 'sent') ? (
-        <div className="ic-pages-strip">
-          {Array.from({ length: pageCount }, (_, i) => i + 1).map((page) => (
-            <img
-              key={page}
-              className="ic-page-img"
-              src={getInstaAssetUrl(slate.id, page)}
-              alt={`Page ${page}`}
-              loading="lazy"
-            />
-          ))}
-        </div>
+        <PagesStrip slateId={slate.id} pageCount={pageCount} />
       ) : (
         <div className="ic-empty" style={{ padding: '20px 0' }}>
           {slate.status === 'failed' ? '렌더 실패 — 재렌더를 시도하세요.' : '렌더링 전입니다.'}
@@ -694,11 +867,66 @@ function SlateDetail({ slate, onDelete, onRender }) {
         </div>
       )}
 
-      {/* 커버 카피 / 바디 카피 */}
-      {slate.cover_copy && (
+      {/* 커버 카피 (1/10) */}
+      {slate.cover_copy && typeof slate.cover_copy === 'object' && (
         <div className="ic-caption-box">
-          <div className="ic-caption-box__label">커버 카피</div>
-          <div className="ic-caption-text">{slate.cover_copy}</div>
+          <div className="ic-caption-box__label">🎯 커버 (1/10)</div>
+          <div className="ic-caption-text">
+            <strong>{slate.cover_copy.headline}</strong>
+            {slate.cover_copy.body && (
+              <div style={{ marginTop: 6, opacity: 0.85, whiteSpace: 'pre-wrap' }}>
+                {slate.cover_copy.body}
+              </div>
+            )}
+            {slate.cover_copy.accent_color && (
+              <div style={{ marginTop: 6, fontSize: '0.72rem', opacity: 0.5 }}>
+                accent: <code>{slate.cover_copy.accent_color}</code>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* 본문 카피 8장 (2~9/10) */}
+      {Array.isArray(slate.body_copies) && slate.body_copies.length > 0 && (
+        <div className="ic-caption-box">
+          <div className="ic-caption-box__label">📝 본문 8장 (2~9/10)</div>
+          {slate.body_copies.map((b, i) => (
+            <div
+              key={i}
+              style={{
+                borderTop: i > 0 ? '1px solid rgba(255,255,255,0.06)' : 'none',
+                padding: '10px 0',
+              }}
+            >
+              <strong>{i + 2}. {b?.headline || ''}</strong>
+              {b?.body && (
+                <div style={{ marginTop: 4, opacity: 0.85, whiteSpace: 'pre-wrap' }}>
+                  {b.body}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* CTA 카피 (10/10) */}
+      {slate.cta_copy && typeof slate.cta_copy === 'object' && (
+        <div className="ic-caption-box">
+          <div className="ic-caption-box__label">📣 마무리 (10/10)</div>
+          <div className="ic-caption-text">
+            <strong>{slate.cta_copy.headline}</strong>
+            {slate.cta_copy.body && (
+              <div style={{ marginTop: 6, opacity: 0.85, whiteSpace: 'pre-wrap' }}>
+                {slate.cta_copy.body}
+              </div>
+            )}
+            {slate.cta_copy.cta && (
+              <div style={{ marginTop: 8, color: '#ec4899', fontWeight: 700 }}>
+                CTA: {slate.cta_copy.cta}
+              </div>
+            )}
+          </div>
         </div>
       )}
     </div>

src/pages/lotto/Evolver.css

@@ -0,0 +1,194 @@
+/* Evolver tab — dark theme matching Lotto.css patterns */
+
+.lotto-evolver { display: flex; flex-direction: column; gap: 16px; }
+.lotto-evolver-muted { color: #94a3b8; }
+
+.lotto-evolver-intro {
+    display: flex; justify-content: space-between; align-items: center;
+    gap: 12px; flex-wrap: wrap;
+}
+.lotto-evolver-sub { margin: 0; color: #94a3b8; font-size: 0.9rem; flex: 1; }
+.lotto-evolver-refresh {
+    padding: 6px 12px;
+    background: rgba(255,255,255,0.06);
+    border: 1px solid rgba(255,255,255,0.1);
+    border-radius: 6px;
+    color: #cbd5e1;
+    cursor: pointer;
+    font-size: 0.85rem;
+}
+.lotto-evolver-refresh:hover { background: rgba(255,255,255,0.1); }
+
+/* Generic card */
+.evolver-card {
+    background: rgba(255,255,255,0.04);
+    border: 1px solid rgba(255,255,255,0.08);
+    border-radius: 12px;
+    padding: 18px 20px;
+    color: #e2e8f0;
+}
+.evolver-card h2 {
+    margin: 0 0 12px;
+    font-size: 1rem;
+    font-weight: 600;
+    color: #f1f5f9;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 8px;
+}
+.evolver-card .badge {
+    background: rgba(52,211,153,0.15);
+    color: #34d399;
+    padding: 2px 10px;
+    border-radius: 4px;
+    font-size: 0.7rem;
+    font-weight: 500;
+}
+.evolver-card.empty .muted, .evolver-card .muted { color: #64748b; }
+
+.lotto-evolver-empty h3 { margin: 0 0 6px; color: #f1f5f9; }
+.lotto-evolver-empty p { color: #94a3b8; margin: 0 0 12px; }
+
+/* WinnerCard */
+.winner-card .winner-meta {
+    display: flex; gap: 16px; flex-wrap: wrap;
+    color: #94a3b8; font-size: 0.85rem; margin-bottom: 14px;
+}
+.winner-card .winner-meta strong { color: #f1f5f9; font-weight: 600; }
+.winner-card .winner-chart { background: rgba(0,0,0,0.15); border-radius: 8px; padding: 8px; }
+
+/* TrialsGrid */
+.trials-grid .grid {
+    display: grid; grid-template-columns: repeat(6, 1fr);
+    gap: 8px; height: 140px; align-items: end;
+}
+.trial-cell {
+    border: 1px solid rgba(255,255,255,0.06);
+    background: rgba(255,255,255,0.03);
+    border-radius: 6px;
+    padding: 8px 4px;
+    display: flex; flex-direction: column;
+    align-items: center; justify-content: end;
+    cursor: pointer;
+    height: 100%;
+    color: #cbd5e1;
+    transition: background 0.15s;
+}
+.trial-cell:hover { background: rgba(255,255,255,0.06); }
+.trial-cell.winner { background: rgba(52,211,153,0.12); border-color: rgba(52,211,153,0.3); }
+.trial-cell .bar {
+    width: 80%;
+    background: #475569;
+    border-radius: 3px 3px 0 0;
+    min-height: 4px;
+}
+.trial-cell.winner .bar { background: #34d399; }
+.trial-cell .label { font-size: 0.85rem; margin-top: 6px; color: #e2e8f0; }
+.trial-cell .max-correct { font-size: 0.7rem; color: #94a3b8; }
+.trial-detail {
+    margin-top: 14px; padding: 12px;
+    background: rgba(0,0,0,0.15);
+    border-radius: 6px;
+    color: #cbd5e1;
+    font-size: 0.85rem;
+}
+.trial-detail h3 { margin: 0 0 8px; font-size: 0.9rem; color: #f1f5f9; }
+.trial-detail ul { margin: 8px 0 0; padding-left: 18px; }
+.trial-detail li { margin-bottom: 4px; }
+
+/* BaseDiff */
+.base-diff .diff-grid {
+    display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
+}
+.metric-card {
+    padding: 12px 8px;
+    background: rgba(255,255,255,0.03);
+    border: 1px solid rgba(255,255,255,0.06);
+    border-radius: 8px;
+    text-align: center;
+    color: #cbd5e1;
+}
+.metric-card .metric-name {
+    color: #94a3b8;
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+.metric-card .metric-values { margin: 6px 0; font-size: 0.8rem; }
+.metric-card .metric-values strong { color: #f1f5f9; }
+.metric-card .metric-diff { font-weight: 600; font-size: 0.8rem; }
+.metric-card.up .metric-diff, .metric-card.up-big .metric-diff { color: #34d399; }
+.metric-card.down .metric-diff, .metric-card.down-big .metric-diff { color: #f87171; }
+.metric-card.eq .metric-diff { color: #64748b; }
+
+/* BaseHistory chart container */
+.base-history { background: rgba(255,255,255,0.04); }
+
+/* ActivityCard — scrollable */
+.activity-card .activity-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    max-height: 420px;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+}
+.activity-card .activity-list::-webkit-scrollbar { width: 6px; }
+.activity-card .activity-list::-webkit-scrollbar-thumb {
+    background: rgba(255,255,255,0.15); border-radius: 3px;
+}
+.activity-item {
+    display: grid;
+    grid-template-columns: 24px 1fr auto;
+    gap: 10px;
+    padding: 10px 4px;
+    border-bottom: 1px solid rgba(255,255,255,0.05);
+    color: #cbd5e1;
+    font-size: 0.85rem;
+}
+.activity-item:last-child { border-bottom: none; }
+.activity-item .icon { font-size: 1rem; text-align: center; }
+.activity-item .body .line { color: #e2e8f0; }
+.activity-item .body strong { color: #f1f5f9; }
+.activity-item .ts {
+    color: #64748b;
+    font-size: 0.75rem;
+    white-space: nowrap;
+    align-self: center;
+}
+.activity-item .status.ok { color: #34d399; }
+.activity-item .status.err { color: #f87171; }
+.activity-item .status.pending { color: #fbbf24; }
+.activity-item .detail { color: #94a3b8; font-size: 0.78rem; margin-top: 2px; }
+
+/* EvolverActions */
+.actions-card .action-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
+.actions-card button {
+    padding: 8px 14px;
+    background: rgba(52,211,153,0.15);
+    color: #34d399;
+    border: 1px solid rgba(52,211,153,0.3);
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 0.85rem;
+}
+.actions-card button:hover:not(:disabled) { background: rgba(52,211,153,0.25); }
+.actions-card button:disabled { opacity: 0.5; cursor: wait; }
+.action-output {
+    background: rgba(0,0,0,0.3);
+    color: #94a3b8;
+    padding: 12px;
+    border-radius: 6px;
+    margin-top: 12px;
+    max-height: 200px;
+    overflow: auto;
+    font-size: 0.75rem;
+}
+
+@media (max-width: 640px) {
+    .trials-grid .grid { grid-template-columns: repeat(3, 1fr); height: auto; }
+    .base-diff .diff-grid { grid-template-columns: repeat(3, 1fr); }
+    .lotto-evolver-intro { flex-direction: column; align-items: stretch; }
+    .activity-card .activity-list { max-height: 360px; }
+}

src/pages/lotto/Evolver.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import Lotto from './Lotto';
+
+// /lotto/evolver URL → Lotto 페이지가 useLocation으로 활성 탭 자동 선택
+export default function Evolver() {
+    return <Lotto />;
+}

src/pages/lotto/Functions.jsx

@@ -2,6 +2,7 @@ import { useCallback, useState } from 'react';
 import BriefingTab from './tabs/BriefingTab';
 import AnalysisTab from './tabs/AnalysisTab';
 import PurchaseTab from './tabs/PurchaseTab';
+import EvolverTab from './tabs/EvolverTab';
 import { useIsMobile } from '../../hooks/useIsMobile';
 import SwipeableView from '../../components/SwipeableView';
 
@@ -9,10 +10,19 @@ const TABS = [
     { id: 'briefing', label: '🗓 이번 주 브리핑' },
     { id: 'analysis', label: '📚 자료실 / Deep Dive' },
     { id: 'purchase', label: '💰 구매·성과' },
+    { id: 'evolver',  label: '🧬 자율 학습' },
 ];
 
-export default function Functions() {
-    const [tab, setTab] = useState('briefing');
+function renderTab(id) {
+    if (id === 'briefing') return <BriefingTab />;
+    if (id === 'analysis') return <AnalysisTab />;
+    if (id === 'purchase') return <PurchaseTab />;
+    if (id === 'evolver')  return <EvolverTab />;
+    return null;
+}
+
+export default function Functions({ initialTab = 'briefing' }) {
+    const [tab, setTab] = useState(initialTab);
     const isMobile = useIsMobile();
 
     const tabIndex = TABS.findIndex(t => t.id === tab);
@@ -28,7 +38,7 @@ export default function Functions() {
                     tabs={TABS.map(t => ({
                         key: t.id,
                         label: t.label,
-                        content: t.id === 'briefing' ? <BriefingTab /> : t.id === 'analysis' ? <AnalysisTab /> : <PurchaseTab />,
+                        content: renderTab(t.id),
                     }))}
                     activeIndex={tabIndex}
                     onTabChange={handleTabChange}
@@ -45,9 +55,7 @@ export default function Functions() {
                         ))}
                     </nav>
                     <div className="lotto-tab-body">
-                        {tab === 'briefing' && <BriefingTab />}
-                        {tab === 'analysis' && <AnalysisTab />}
-                        {tab === 'purchase' && <PurchaseTab />}
+                        {renderTab(tab)}
                     </div>
                 </>
             )}

src/pages/lotto/Lotto.jsx

@@ -1,8 +1,12 @@
 import React from 'react';
+import { useLocation } from 'react-router-dom';
 import Functions from './Functions';
 import './Lotto.css';
 
 const Lotto = () => {
+    const location = useLocation();
+    const initialTab = location.pathname.endsWith('/evolver') ? 'evolver' : 'briefing';
+
     return (
         <div className="lotto">
             <header className="lotto-header">
@@ -15,16 +19,17 @@ const Lotto = () => {
                     </p>
                 </div>
                 <div className="lotto-card">
-                    <p className="lotto-card__title">시뮬레이션 추천 시스템</p>
+                    <p className="lotto-card__title">자율 학습 시뮬레이션</p>
                     <ul>
-                        <li>하루 6회 몬테카를로 시뮬레이션 자동 실행</li>
-                        <li>20,000개 후보를 5가지 통계 기법으로 스코어링</li>
-                        <li>핫·콜드·오버듀 번호 통계 분석 제공</li>
+                        <li>매주 6가지 가중치 시도 → 토요일 회고로 best base 학습</li>
+                        <li>능동 시그널 모니터링 (Sim·Drift·Confidence z-score) + 텔레그램 알림</li>
+                        <li>4시간마다 몬테카를로 20,000 후보 × 5종 점수 가중 평가</li>
+                        <li>AI 큐레이터 + 핫·콜드·오버듀 통계 분석</li>
                     </ul>
                 </div>
             </header>
 
-            <Functions />
+            <Functions initialTab={initialTab} />
         </div>
     );
 };

src/pages/lotto/evolver/BaseDiff.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+const METRIC_NAMES = ['freq', 'finger', 'gap', 'cooccur', 'divers'];
+
+function diffMarker(diff) {
+    if (Math.abs(diff) < 0.005) return { mark: '=', cls: 'eq' };
+    if (diff > 0) return diff < 0.05 ? { mark: '↑', cls: 'up' } : { mark: '↑↑', cls: 'up-big' };
+    return diff > -0.05 ? { mark: '↓', cls: 'down' } : { mark: '↓↓', cls: 'down-big' };
+}
+
+export default function BaseDiff({ previousBase, newBase, updateReason }) {
+    if (!previousBase || !newBase) {
+        return (
+            <div className="evolver-card base-diff empty">
+                <h2>다음주 base 변경</h2>
+                <p className="muted">아직 base 변경 이력 없음.</p>
+            </div>
+        );
+    }
+    return (
+        <div className="evolver-card base-diff">
+            <h2>다음주 base 변경 {updateReason && <span className="badge">{updateReason}</span>}</h2>
+            <div className="diff-grid">
+                {METRIC_NAMES.map((name, i) => {
+                    const prev = previousBase[i] || 0;
+                    const next = newBase[i] || 0;
+                    const diff = next - prev;
+                    const { mark, cls } = diffMarker(diff);
+                    return (
+                        <div key={name} className={`metric-card ${cls}`}>
+                            <div className="metric-name">{name}</div>
+                            <div className="metric-values">
+                                {prev.toFixed(2)} → <strong>{next.toFixed(2)}</strong>
+                            </div>
+                            <div className="metric-diff">
+                                {mark} {diff >= 0 ? '+' : ''}{(diff * 100).toFixed(0)}%p
+                            </div>
+                        </div>
+                    );
+                })}
+            </div>
+        </div>
+    );
+}

src/pages/lotto/evolver/BaseHistory.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import {
+    LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer,
+} from 'recharts';
+
+const METRIC_NAMES = ['freq', 'finger', 'gap', 'cooccur', 'divers'];
+const COLORS = ['#34d399', '#60a5fa', '#fbbf24', '#f43f5e', '#c084fc'];
+
+export default function BaseHistory({ history }) {
+    if (!history || history.length === 0) {
+        return (
+            <div className="evolver-card base-history empty">
+                <h2>12주 Base 변화</h2>
+                <p className="muted">학습 이력이 부족합니다.</p>
+            </div>
+        );
+    }
+
+    const data = history
+        .slice()
+        .reverse()
+        .map(h => {
+            const w = h.weight || [0, 0, 0, 0, 0];
+            return {
+                date: (h.effective_from || '').slice(5),
+                freq: w[0], finger: w[1], gap: w[2], cooccur: w[3], divers: w[4],
+                reason: h.update_reason,
+            };
+        });
+
+    return (
+        <div className="evolver-card base-history">
+            <h2>Base 변화 (최근 {history.length}주)</h2>
+            <ResponsiveContainer width="100%" height={280}>
+                <LineChart data={data}>
+                    <CartesianGrid strokeDasharray="3 3" />
+                    <XAxis dataKey="date" />
+                    <YAxis domain={[0, 0.5]} />
+                    <Tooltip />
+                    <Legend />
+                    {METRIC_NAMES.map((name, i) => (
+                        <Line key={name} type="monotone" dataKey={name} stroke={COLORS[i]} dot />
+                    ))}
+                </LineChart>
+            </ResponsiveContainer>
+        </div>
+    );
+}

src/pages/lotto/evolver/EvolverActions.jsx

@@ -0,0 +1,37 @@
+import React, { useState } from 'react';
+import { triggerEvolverGenerate, triggerEvolverEvaluate } from '../../../api';
+
+export default function EvolverActions({ onChange }) {
+    const [busy, setBusy] = useState(null);
+    const [out, setOut] = useState(null);
+
+    async function run(kind) {
+        setBusy(kind);
+        setOut(null);
+        try {
+            const fn = kind === 'generate' ? triggerEvolverGenerate : triggerEvolverEvaluate;
+            const res = await fn();
+            setOut(res);
+            onChange && onChange();
+        } catch (e) {
+            setOut({ error: String(e) });
+        } finally {
+            setBusy(null);
+        }
+    }
+
+    return (
+        <div className="evolver-card actions-card">
+            <h2>수동 트리거 (dev)</h2>
+            <div className="action-buttons">
+                <button disabled={!!busy} onClick={() => run('generate')}>
+                    {busy === 'generate' ? '생성 중...' : 'generate-now (월요일 후보 생성)'}
+                </button>
+                <button disabled={!!busy} onClick={() => run('evaluate')}>
+                    {busy === 'evaluate' ? '평가 중...' : 'evaluate-now (회고 + base 갱신)'}
+                </button>
+            </div>
+            {out && <pre className="action-output">{JSON.stringify(out, null, 2)}</pre>}
+        </div>
+    );
+}

src/pages/lotto/evolver/LottoActivityTimeline.jsx

@@ -0,0 +1,91 @@
+import React from 'react';
+
+const ICONS = {
+    curate_weekly: '📋',
+    signal_check: '🔍',
+    daily_digest: '📊',
+    weekly_evolution_report: '🧬',
+    evolver_generate: '🌱',
+    evolver_apply: '🎲',
+};
+
+const STATUS_CLS = {
+    succeeded: 'ok',
+    failed: 'err',
+    working: 'pending',
+    pending: 'pending',
+};
+
+function formatTaskDetail(t) {
+    const r = t.result_data || {};
+    switch (t.task_type) {
+        case 'signal_check': return `${r.source} → ${r.overall_fire} (${r.n_results} results)`;
+        case 'daily_digest': return `평가 ${r.evaluated} / 발화 ${r.fired}`;
+        case 'weekly_evolution_report': return `draw=${r.draw_no} reason=${r.update_reason}`;
+        case 'evolver_apply': return `${r.n_picks}세트 추출`;
+        case 'evolver_generate': return `${r.trials_count} trials 생성`;
+        case 'curate_weekly': return `draw=${r.draw_no || '?'} conf=${r.confidence || '?'}`;
+        default: return '';
+    }
+}
+
+function renderItem(item) {
+    const ts = (item.ts || '').replace('T', ' ').slice(0, 19);
+    if (item.kind === 'task') {
+        const t = item.payload;
+        const icon = ICONS[t.task_type] || '⚙️';
+        const cls = STATUS_CLS[t.status] || '';
+        const detail = formatTaskDetail(t);
+        return (
+            <li key={`task-${t.id}`} className={`activity-item task ${cls}`}>
+                <span className="icon">{icon}</span>
+                <div className="body">
+                    <div className="line"><strong>{t.task_type}</strong> · <span className={`status ${cls}`}>{t.status}</span></div>
+                    {detail && <div className="detail">{detail}</div>}
+                </div>
+                <span className="ts">{ts}</span>
+            </li>
+        );
+    }
+    if (item.kind === 'log') {
+        const l = item.payload;
+        return (
+            <li key={`log-${l.id}`} className={`activity-item log level-${l.level}`}>
+                <span className="icon">{l.level === 'error' ? '❌' : l.level === 'warning' ? '⚠️' : '·'}</span>
+                <div className="body"><div className="line">{l.message}</div></div>
+                <span className="ts">{ts}</span>
+            </li>
+        );
+    }
+    if (item.kind === 'evolver') {
+        const e = item.payload;
+        return (
+            <li key={`evolver-${e.id}`} className="activity-item evolver">
+                <span className="icon">⚖️</span>
+                <div className="body">
+                    <div className="line"><strong>weight_evolver_eval</strong> (lotto-lab)</div>
+                    <div className="detail">reason={e.update_reason} winner_max={e.winner_max_correct}</div>
+                </div>
+                <span className="ts">{ts}</span>
+            </li>
+        );
+    }
+    return null;
+}
+
+export default function LottoActivityTimeline({ activity = [], days = 7 }) {
+    if (!activity || activity.length === 0) {
+        return (
+            <div className="evolver-card activity-card empty">
+                <h2>최근 활동</h2>
+                <p className="muted">지난 {days}일 활동 없음.</p>
+            </div>
+        );
+    }
+    return (
+        <div className="evolver-card activity-card">
+            <h2>최근 {days}일 에이전트 활동 ({activity.length})</h2>
+            <ul className="activity-list">{activity.map(renderItem)}</ul>
+        </div>
+    );
+}

src/pages/lotto/evolver/TrialsGrid.jsx

@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+
+const DAY_NAMES = ['월', '화', '수', '목', '금', '토'];
+
+export default function TrialsGrid({ trials, perDay, winnerTrialId }) {
+    const [expanded, setExpanded] = useState(null);
+
+    const byDow = {};
+    for (const t of trials || []) byDow[t.day_of_week] = t;
+
+    const perDayByDow = {};
+    for (const d of perDay || []) perDayByDow[d.day_of_week] = d;
+
+    const maxScore = Math.max(...(perDay || []).map(d => d.avg_score || 0), 0.001);
+
+    return (
+        <div className="evolver-card trials-grid">
+            <h2>이번주 6일 Trials</h2>
+            <div className="grid">
+                {DAY_NAMES.map((name, dow) => {
+                    const trial = byDow[dow];
+                    const day = perDayByDow[dow];
+                    const isWinner = trial && trial.id === winnerTrialId;
+                    const heightPct = day ? (day.avg_score / maxScore) * 100 : 0;
+                    return (
+                        <button
+                            key={dow}
+                            type="button"
+                            className={`trial-cell ${isWinner ? 'winner' : ''} ${expanded === dow ? 'expanded' : ''}`}
+                            onClick={() => setExpanded(expanded === dow ? null : dow)}
+                        >
+                            <div className="bar" style={{ height: `${heightPct}%` }} />
+                            <span className="label">{name}{isWinner && '⭐'}</span>
+                            {day && <span className="max-correct">max={day.max_correct}</span>}
+                        </button>
+                    );
+                })}
+            </div>
+            {expanded !== null && byDow[expanded] && (
+                <div className="trial-detail">
+                    <h3>{DAY_NAMES[expanded]}요일 상세</h3>
+                    <p>W = [{(byDow[expanded].weight || []).map(w => w.toFixed(2)).join(', ')}]</p>
+                    <ul>
+                        {(byDow[expanded].picks || []).map(p => (
+                            <li key={p.id}>
+                                {(p.numbers || []).join(', ')} —
+                                score {(p.meta_score || 0).toFixed(3)}
+                                {p.correct != null && ` · 적중 ${p.correct}개`}
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+            )}
+        </div>
+    );
+}

src/pages/lotto/evolver/WinnerCard.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import {
+    RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis,
+    Radar, ResponsiveContainer, Legend,
+} from 'recharts';
+
+const DAY_NAMES = ['월', '화', '수', '목', '금', '토'];
+const METRIC_NAMES = ['freq', 'finger', 'gap', 'cooccur', 'divers'];
+
+export default function WinnerCard({ winner, previousBase, updateReason, drawNo }) {
+    if (!winner) {
+        return (
+            <div className="evolver-card winner-card empty">
+                <h2>🏆 Winner</h2>
+                <p className="muted">아직 회고 결과가 없습니다.</p>
+            </div>
+        );
+    }
+
+    const dayName = DAY_NAMES[winner.day_of_week] || '?';
+    const W = winner.weight || [];
+    const prev = previousBase || [0.2, 0.2, 0.2, 0.2, 0.2];
+
+    const data = METRIC_NAMES.map((name, i) => ({
+        metric: name,
+        winner: W[i] || 0,
+        previous: prev[i] || 0,
+    }));
+
+    return (
+        <div className="evolver-card winner-card">
+            <header>
+                <h2>🏆 Winner: {dayName}요일</h2>
+                {updateReason && <span className="badge">{updateReason}</span>}
+            </header>
+            <div className="winner-meta">
+                <span>최고 적중 <strong>{winner.max_correct}개</strong></span>
+                <span>평균 점수 <strong>{(winner.avg_score || 0).toFixed(2)}</strong></span>
+                <span>{winner.n_picks}/5 picks</span>
+                {drawNo && <span>{drawNo}회차</span>}
+            </div>
+            <div className="winner-chart">
+                <ResponsiveContainer width="100%" height={300}>
+                    <RadarChart data={data}>
+                        <PolarGrid />
+                        <PolarAngleAxis dataKey="metric" />
+                        <PolarRadiusAxis angle={90} domain={[0, 0.5]} />
+                        <Radar name="이번주 winner" dataKey="winner" stroke="#34d399" fill="#34d399" fillOpacity={0.4} />
+                        <Radar name="이전 base" dataKey="previous" stroke="#999" fill="#999" fillOpacity={0.1} />
+                        <Legend />
+                    </RadarChart>
+                </ResponsiveContainer>
+            </div>
+        </div>
+    );
+}

src/pages/lotto/evolver/useEvolverApi.js

@@ -0,0 +1,60 @@
+import { useEffect, useState, useCallback } from 'react';
+import {
+    fetchEvolverStatus,
+    fetchEvolverHistory,
+    fetchLottoTasks,
+    fetchLottoLogs,
+} from '../../../api';
+
+
+function mergeActivityStream({ logs, tasks, evolverEvents }) {
+    const stream = [];
+    for (const l of logs.items || []) {
+        stream.push({ ts: l.created_at, kind: 'log', payload: l });
+    }
+    for (const t of tasks.items || tasks.tasks || []) {
+        stream.push({ ts: t.created_at, kind: 'task', payload: t });
+    }
+    for (const e of evolverEvents) {
+        stream.push({ ts: e.created_at, kind: 'evolver', payload: e });
+    }
+    stream.sort((a, b) => (b.ts || '').localeCompare(a.ts || ''));
+    return stream;
+}
+
+
+export function useEvolverApi({ days = 7, weeks = 12 } = {}) {
+    const [status, setStatus] = useState(null);
+    const [history, setHistory] = useState({ items: [] });
+    const [activity, setActivity] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+
+    const refetch = useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const [s, h, t, l] = await Promise.all([
+                fetchEvolverStatus(),
+                fetchEvolverHistory(weeks),
+                fetchLottoTasks({ days }),
+                fetchLottoLogs({ days }),
+            ]);
+            setStatus(s);
+            setHistory(h);
+            setActivity(mergeActivityStream({
+                logs: l,
+                tasks: t,
+                evolverEvents: h.items || [],
+            }));
+        } catch (e) {
+            setError(e);
+        } finally {
+            setLoading(false);
+        }
+    }, [days, weeks]);
+
+    useEffect(() => { refetch(); }, [refetch]);
+
+    return { status, history, activity, loading, error, refetch };
+}

src/pages/lotto/tabs/EvolverTab.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import '../Evolver.css';
+import { useEvolverApi } from '../evolver/useEvolverApi';
+import WinnerCard from '../evolver/WinnerCard';
+import TrialsGrid from '../evolver/TrialsGrid';
+import BaseDiff from '../evolver/BaseDiff';
+import BaseHistory from '../evolver/BaseHistory';
+import LottoActivityTimeline from '../evolver/LottoActivityTimeline';
+import EvolverActions from '../evolver/EvolverActions';
+
+export default function EvolverTab() {
+    const { status, history, activity, loading, error, refetch } = useEvolverApi({ days: 7, weeks: 12 });
+
+    if (loading) return <div className="lotto-evolver"><p className="lotto-evolver-muted">로딩 중...</p></div>;
+    if (error) return <div className="lotto-evolver"><p className="lotto-evolver-muted">에러: {String(error)}</p></div>;
+
+    const latestBase = (history.items || [])[0];
+    const previousBase = (history.items || [])[1]?.weight || status?.current_base || [0.2, 0.2, 0.2, 0.2, 0.2];
+    const newBase = latestBase?.weight || status?.current_base;
+
+    const trials = status?.trials || [];
+    const winnerTrialId = latestBase?.source_trial_id;
+    const winnerTrial = trials.find(t => t.id === winnerTrialId);
+    const winnerInfo = winnerTrial ? {
+        day_of_week: winnerTrial.day_of_week,
+        weight: winnerTrial.weight,
+        avg_score: latestBase?.winner_score,
+        max_correct: latestBase?.winner_max_correct,
+        n_picks: (winnerTrial.picks || []).length,
+    } : null;
+
+    const perDay = trials.map(t => ({
+        day_of_week: t.day_of_week,
+        trial_id: t.id,
+        avg_score: (t.picks || []).reduce((s, p) => s + (p.meta_score || 0), 0) / Math.max(1, (t.picks || []).length),
+        max_correct: Math.max(0, ...(t.picks || []).map(p => p.correct || 0)),
+    }));
+
+    const hasBase = (history.items || []).length > 0;
+
+    return (
+        <div className="lotto-evolver">
+            <div className="lotto-evolver-intro">
+                <p className="lotto-evolver-sub">
+                    매주 6가지 가중치를 시도해서 best 조합을 다음주 base로 학습합니다.
+                    {status?.latest_draw && ` 마지막 회차: ${status.latest_draw}회.`}
+                </p>
+                <button className="lotto-evolver-refresh" onClick={refetch}>↻ 새로고침</button>
+            </div>
+
+            {!hasBase ? (
+                <div className="evolver-card lotto-evolver-empty">
+                    <h3>아직 학습 시작 전</h3>
+                    <p>다음 월요일 09:00에 자동 시작 또는 수동 트리거 사용.</p>
+                    <EvolverActions onChange={refetch} />
+                </div>
+            ) : (
+                <>
+                    <WinnerCard
+                        winner={winnerInfo}
+                        previousBase={previousBase}
+                        updateReason={latestBase?.update_reason}
+                        drawNo={status?.latest_draw}
+                    />
+                    <TrialsGrid trials={trials} perDay={perDay} winnerTrialId={winnerTrialId} />
+                    <BaseDiff
+                        previousBase={previousBase}
+                        newBase={newBase}
+                        updateReason={latestBase?.update_reason}
+                    />
+                    <BaseHistory history={history.items || []} />
+                    <LottoActivityTimeline activity={activity} days={7} />
+                    <EvolverActions onChange={refetch} />
+                </>
+            )}
+        </div>
+    );
+}

src/pages/stock/StockTrade.jsx

@@ -6,7 +6,7 @@ import SwipeableView from '../../components/SwipeableView';
 import {
     formatNumber, formatPercent,
     toNumeric, profitColorClass,
-    TAB_PORTFOLIO, TAB_AI, TAB_REPORT, TAB_ADVISOR,
+    TAB_PORTFOLIO, TAB_REPORT, TAB_ADVISOR,
 } from './stockUtils';
 
 /* ── hooks ──────────────────────────────────────────────────────── */
@@ -15,13 +15,11 @@ import useSellHistory from './hooks/useSellHistory';
 import useAiCoach from './hooks/useAiCoach';
 import useAssetHistory from './hooks/useAssetHistory';
 import useMarketContext from './hooks/useMarketContext';
-import useAiBalance from './hooks/useAiBalance';
 import useReportData from './hooks/useReportData';
 import useAdvisor from './hooks/useAdvisor';
 
 /* ── tab components ─────────────────────────────────────────────── */
 import PortfolioTab from './components/PortfolioTab';
-import AiTradeTab from './components/AiTradeTab';
 import ReportTab from './components/ReportTab';
 import AdvisorTab from './components/AdvisorTab';
 import SellHistoryDrawer from './components/SellHistoryDrawer';
@@ -32,8 +30,8 @@ const StockTrade = () => {
     const [activeTab, setActiveTab] = React.useState(TAB_REPORT);
     const isMobile = useIsMobile();
 
-    const TAB_ORDER = [TAB_PORTFOLIO, TAB_AI, TAB_REPORT, TAB_ADVISOR];
-    const tabLabels = ['포트폴리오', 'AI 트레이드', '리포트', '어드바이저'];
+    const TAB_ORDER = [TAB_PORTFOLIO, TAB_REPORT, TAB_ADVISOR];
+    const tabLabels = ['포트폴리오', '리포트', '어드바이저'];
     const tabIndex = TAB_ORDER.indexOf(activeTab);
     const handleTabChange = useCallback((idx) => setActiveTab(TAB_ORDER[idx]), []); // eslint-disable-line react-hooks/exhaustive-deps
 
@@ -49,7 +47,6 @@ const StockTrade = () => {
         totalAssets: pf.totalAssets,
         marketCtx,
     });
-    const aib = useAiBalance();
     const report = useReportData({
         portfolioHoldings: pf.portfolioHoldings,
         portfolioSummary: pf.portfolioSummary,
@@ -97,12 +94,10 @@ const StockTrade = () => {
         if (activeTab === TAB_PORTFOLIO && !pf.portfolioLoaded) {
             pf.loadPortfolio();
             sell.loadSellHistory();
-        } else if (activeTab === TAB_AI && !aib.balanceLoaded) {
-            aib.loadBalance();
         } else if ((activeTab === TAB_REPORT || activeTab === TAB_ADVISOR) && !pf.portfolioLoaded) {
             pf.loadPortfolio();
         }
-    }, [activeTab, pf.portfolioLoaded, aib.balanceLoaded]); // eslint-disable-line react-hooks/exhaustive-deps
+    }, [activeTab, pf.portfolioLoaded]); // eslint-disable-line react-hooks/exhaustive-deps
 
     useEffect(() => {
         if (activeTab === TAB_PORTFOLIO) asset.loadAssetHistory(asset.assetHistoryDays);
@@ -135,42 +130,29 @@ const StockTrade = () => {
                     </div>
                 </div>
                 <div className="stock-card">
-                    <p className="stock-card__title">
-                        {activeTab === TAB_AI ? 'AI 투자 요약' : '쟁승토리 계좌 요약'}
-                    </p>
-                    {activeTab === TAB_PORTFOLIO || activeTab === TAB_REPORT ? (
-                        <div className="stock-status">
-                            <div><span>총 매입</span><strong>{formatNumber(pf.portfolioSummary.total_buy)}</strong></div>
-                            <div><span>총 평가</span><strong>{formatNumber(pf.portfolioSummary.total_eval)}</strong></div>
-                            <div>
-                                <span>총 손익</span>
-                                <strong className={`stock-profit ${profitColorClass(toNumeric(pf.portfolioSummary.total_profit))}`}>
-                                    {formatNumber(pf.portfolioSummary.total_profit)}
-                                    {pf.portfolioSummary.total_profit_rate != null && (
-                                        <small style={{ marginLeft: 4, fontSize: 11 }}>
-                                            ({formatPercent(pf.portfolioSummary.total_profit_rate)})
-                                        </small>
-                                    )}
-                                </strong>
-                            </div>
-                            <div><span>보유 종목</span><strong>{pf.portfolioHoldings.length}</strong></div>
-                            {pf.totalCash != null && (
-                                <div><span>예수금 합계</span><strong style={{ color: '#93c5fd' }}>{formatNumber(pf.totalCash)}원</strong></div>
-                            )}
-                            {pf.totalAssets != null && (
-                                <div><span>총 자산</span><strong style={{ fontWeight: 700 }}>{formatNumber(pf.totalAssets)}원</strong></div>
-                            )}
+                    <p className="stock-card__title">쟁승토리 계좌 요약</p>
+                    <div className="stock-status">
+                        <div><span>총 매입</span><strong>{formatNumber(pf.portfolioSummary.total_buy)}</strong></div>
+                        <div><span>총 평가</span><strong>{formatNumber(pf.portfolioSummary.total_eval)}</strong></div>
+                        <div>
+                            <span>총 손익</span>
+                            <strong className={`stock-profit ${profitColorClass(toNumeric(pf.portfolioSummary.total_profit))}`}>
+                                {formatNumber(pf.portfolioSummary.total_profit)}
+                                {pf.portfolioSummary.total_profit_rate != null && (
+                                    <small style={{ marginLeft: 4, fontSize: 11 }}>
+                                        ({formatPercent(pf.portfolioSummary.total_profit_rate)})
+                                    </small>
+                                )}
+                            </strong>
                         </div>
-                    ) : (
-                        <div className="stock-status">
-                            <div><span>총 평가금액</span><strong>{formatNumber(aib.totalEval)}</strong></div>
-                            <div><span>예수금</span><strong>{formatNumber(aib.deposit)}</strong></div>
-                            <div><span>보유 종목</span><strong>{aib.holdings.length}</strong></div>
-                        </div>
-                    )}
-                    {activeTab === TAB_AI && aib.summary.note ? (
-                        <p className="stock-status__note">{aib.summary.note}</p>
-                    ) : null}
+                        <div><span>보유 종목</span><strong>{pf.portfolioHoldings.length}</strong></div>
+                        {pf.totalCash != null && (
+                            <div><span>예수금 합계</span><strong style={{ color: '#93c5fd' }}>{formatNumber(pf.totalCash)}원</strong></div>
+                        )}
+                        {pf.totalAssets != null && (
+                            <div><span>총 자산</span><strong style={{ fontWeight: 700 }}>{formatNumber(pf.totalAssets)}원</strong></div>
+                        )}
+                    </div>
                 </div>
             </header>
 
@@ -182,11 +164,9 @@ const StockTrade = () => {
                         label: tabLabels[i],
                         content: tabId === TAB_PORTFOLIO
                             ? <PortfolioTab pf={pf} asset={asset} handleSell={handleSell} handleSaveSnapshot={handleSaveSnapshot} />
-                            : tabId === TAB_AI
-                                ? <AiTradeTab aib={aib} />
-                                : tabId === TAB_REPORT
-                                    ? <ReportTab pf={pf} report={report} ai={ai} marketCtx={marketCtx} />
-                                    : <AdvisorTab pf={pf} advisor={advisor} />,
+                            : tabId === TAB_REPORT
+                                ? <ReportTab pf={pf} report={report} ai={ai} marketCtx={marketCtx} />
+                                : <AdvisorTab pf={pf} advisor={advisor} />,
                     }))}
                     activeIndex={tabIndex}
                     onTabChange={handleTabChange}
@@ -196,7 +176,6 @@ const StockTrade = () => {
                     <div className="stock-main-tabs">
                         {[
                             { id: TAB_PORTFOLIO, icon: '💼', label: '쟁승토리 계좌', badge: pf.portfolioHoldings.length || null },
-                            { id: TAB_AI, icon: '🤖', label: 'AI 투자', sub: '모의투자' },
                             { id: TAB_REPORT, icon: '📊', label: '리포트', sub: '분석·AI코치' },
                             { id: TAB_ADVISOR, icon: '🧠', label: 'AI 어드바이저', sub: 'Gemini Pro', className: 'stock-main-tab--advisor' },
                         ].map(({ id, icon, label, sub, badge, className: cls }) => (
@@ -217,7 +196,6 @@ const StockTrade = () => {
                     {activeTab === TAB_PORTFOLIO && (
                         <PortfolioTab pf={pf} asset={asset} handleSell={handleSell} handleSaveSnapshot={handleSaveSnapshot} />
                     )}
-                    {activeTab === TAB_AI && <AiTradeTab aib={aib} />}
                     {activeTab === TAB_REPORT && <ReportTab pf={pf} report={report} ai={ai} marketCtx={marketCtx} />}
                     {activeTab === TAB_ADVISOR && <AdvisorTab pf={pf} advisor={advisor} />}
                 </>

src/pages/stock/components/AiTradeTab.jsx

@@ -1,220 +0,0 @@
-import React from 'react';
-import {
-    formatNumber, formatPercent,
-    getQty, getBuyPrice, getCurrentPrice, getProfitRate, getProfitLoss,
-    toNumeric, profitColorClass,
-} from '../stockUtils';
-
-const AiTradeTab = ({ aib }) => (
-    <>
-        {aib.balanceError ? <p className="stock-error">{aib.balanceError}</p> : null}
-
-        {/* AI Balance section */}
-        <section className="stock-panel stock-panel--wide">
-            <div className="stock-panel__head">
-                <div>
-                    <p className="stock-panel__eyebrow">AI 모의투자</p>
-                    <h3>보유 현황</h3>
-                    <p className="stock-panel__sub">
-                        AI가 운용 중인 모의투자 계좌의 잔고와 보유 종목을 확인합니다.
-                    </p>
-                </div>
-                <div className="stock-panel__actions">
-                    {aib.balanceLoading ? (
-                        <span className="stock-chip">조회 중</span>
-                    ) : null}
-                    <button
-                        className="button ghost small"
-                        onClick={aib.loadBalance}
-                        disabled={aib.balanceLoading}
-                    >
-                        새로고침
-                    </button>
-                </div>
-            </div>
-            <div className="stock-balance">
-                <div className="stock-balance__summary">
-                    {[
-                        { label: '총 평가', value: aib.totalEval },
-                        { label: '예수금', value: aib.deposit },
-                    ].map((item) => (
-                        <div key={item.label} className="stock-balance__card">
-                            <span>{item.label}</span>
-                            <strong>{formatNumber(item.value)}</strong>
-                        </div>
-                    ))}
-                </div>
-                {aib.holdings.length ? (
-                    <div className="stock-holdings">
-                        {aib.holdings.map((item, idx) => {
-                            const profitLoss = getProfitLoss(item);
-                            const profitLossNumeric = toNumeric(profitLoss);
-                            const profitClass = profitColorClass(profitLossNumeric);
-                            const profitRate = getProfitRate(item);
-                            const profitRateNumeric = toNumeric(profitRate);
-                            const profitRateClass = profitColorClass(profitRateNumeric);
-                            return (
-                                <div
-                                    key={item.code ?? `${item.name}-${idx}`}
-                                    className="stock-holdings__item"
-                                >
-                                    <div>
-                                        <p className="stock-holdings__name">
-                                            {item.name ?? item.code ?? 'N/A'}
-                                        </p>
-                                        <span className="stock-holdings__code">
-                                            {item.code ?? ''}
-                                        </span>
-                                    </div>
-                                    <div className="stock-holdings__metric">
-                                        <span>수량</span>
-                                        <strong>{formatNumber(getQty(item))}</strong>
-                                    </div>
-                                    <div className="stock-holdings__metric">
-                                        <span>매입가</span>
-                                        <strong>{formatNumber(getBuyPrice(item))}</strong>
-                                    </div>
-                                    <div className="stock-holdings__metric">
-                                        <span>현재가</span>
-                                        <strong>{formatNumber(getCurrentPrice(item))}</strong>
-                                    </div>
-                                    <div className="stock-holdings__metric">
-                                        <span>평가금액</span>
-                                        <strong>
-                                            {getCurrentPrice(item) != null && getQty(item) != null
-                                                ? formatNumber(toNumeric(getCurrentPrice(item)) * toNumeric(getQty(item)))
-                                                : '-'}
-                                        </strong>
-                                    </div>
-                                    <div className="stock-holdings__metric">
-                                        <span>수익률</span>
-                                        <strong className={`stock-profit ${profitRateClass}`}>
-                                            {formatPercent(profitRate)}
-                                        </strong>
-                                    </div>
-                                    <div className="stock-holdings__metric">
-                                        <span>평가손익</span>
-                                        <strong className={`stock-profit ${profitClass}`}>
-                                            {formatNumber(profitLoss)}
-                                        </strong>
-                                    </div>
-                                </div>
-                            );
-                        })}
-                    </div>
-                ) : (
-                    <p className="stock-empty">보유 종목이 없습니다.</p>
-                )}
-            </div>
-        </section>
-
-        {/* Manual order section */}
-        <section className="stock-panel stock-panel--wide">
-            <div className="stock-panel__head">
-                <div>
-                    <p className="stock-panel__eyebrow">수동 주문</p>
-                    <h3>직접 매수/매도</h3>
-                    <p className="stock-panel__sub">
-                        종목명 또는 종목코드를 입력하고 매수/매도 주문을 요청합니다.
-                    </p>
-                </div>
-            </div>
-            <form className="stock-order" onSubmit={aib.submitManualOrder}>
-                <label>
-                    종목명/코드
-                    <input
-                        type="text"
-                        value={aib.manualForm.code}
-                        onChange={(e) =>
-                            aib.setManualForm((prev) => ({ ...prev, code: e.target.value }))
-                        }
-                        placeholder="005930 또는 삼성전자"
-                        required
-                    />
-                </label>
-                <label>
-                    매수/매도
-                    <select
-                        value={aib.manualForm.type}
-                        onChange={(e) =>
-                            aib.setManualForm((prev) => ({ ...prev, type: e.target.value }))
-                        }
-                    >
-                        <option value="buy">매수</option>
-                        <option value="sell">매도</option>
-                    </select>
-                </label>
-                <label>
-                    수량
-                    <input
-                        type="number"
-                        min={1}
-                        step={1}
-                        value={aib.manualForm.qty}
-                        onChange={(e) =>
-                            aib.setManualForm((prev) => ({ ...prev, qty: Number(e.target.value) }))
-                        }
-                        required
-                    />
-                </label>
-                <label>
-                    금액(원)
-                    <input
-                        type="number"
-                        min={0}
-                        step={1}
-                        value={aib.manualForm.price}
-                        onChange={(e) =>
-                            aib.setManualForm((prev) => ({ ...prev, price: Number(e.target.value) }))
-                        }
-                    />
-                </label>
-                <button
-                    className="button primary"
-                    type="submit"
-                    disabled={aib.manualLoading}
-                >
-                    {aib.manualLoading ? '요청 중...' : '주문 요청'}
-                </button>
-                {aib.manualError ? (
-                    <p className="stock-error">{aib.manualError}</p>
-                ) : null}
-                {aib.manualResult ? (
-                    <div className="stock-result">
-                        <p className="stock-result__title">요청 결과</p>
-                        <pre>
-                            {typeof aib.manualResult === 'string'
-                                ? aib.manualResult
-                                : JSON.stringify(aib.manualResult, null, 2)}
-                        </pre>
-                    </div>
-                ) : null}
-            </form>
-        </section>
-
-        {/* KIS modal */}
-        {aib.kisModal ? (
-            <div className="stock-modal" role="dialog" aria-modal="true">
-                <div
-                    className="stock-modal__backdrop"
-                    onClick={() => aib.setKisModal('')}
-                />
-                <div className="stock-modal__card">
-                    <div className="stock-modal__head">
-                        <h4>주문 결과</h4>
-                        <button
-                            type="button"
-                            className="button ghost small"
-                            onClick={() => aib.setKisModal('')}
-                        >
-                            닫기
-                        </button>
-                    </div>
-                    <pre>{aib.kisModal}</pre>
-                </div>
-            </div>
-        ) : null}
-    </>
-);
-
-export default AiTradeTab;

src/pages/stock/hooks/useAiBalance.js

@@ -1,84 +0,0 @@
-import { useState, useCallback, useMemo } from 'react';
-import { getTradeBalance, createTradeOrder } from '../../../api';
-import { getQty, getBuyPrice, getCurrentPrice, getProfitRate, getProfitLoss } from '../stockUtils';
-
-export default function useAiBalance() {
-    const [balance, setBalance] = useState(null);
-    const [balanceLoading, setBalanceLoading] = useState(false);
-    const [balanceError, setBalanceError] = useState('');
-    const [balanceLoaded, setBalanceLoaded] = useState(false);
-
-    const [manualForm, setManualForm] = useState({
-        code: '',
-        qty: 1,
-        price: 0,
-        type: 'buy',
-    });
-    const [manualLoading, setManualLoading] = useState(false);
-    const [manualError, setManualError] = useState('');
-    const [manualResult, setManualResult] = useState(null);
-    const [kisModal, setKisModal] = useState('');
-
-    const loadBalance = useCallback(async () => {
-        setBalanceLoading(true);
-        setBalanceError('');
-        try {
-            const data = await getTradeBalance();
-            setBalance(data);
-            setBalanceLoaded(true);
-        } catch (err) {
-            setBalanceError(err?.message ?? String(err));
-        } finally {
-            setBalanceLoading(false);
-        }
-    }, []);
-
-    const submitManualOrder = async (event) => {
-        event.preventDefault();
-        setManualLoading(true);
-        setManualError('');
-        setManualResult(null);
-        try {
-            const payload = {
-                ticker: manualForm.code.trim(),
-                action: manualForm.type === 'sell' ? 'SELL' : 'BUY',
-                quantity: Number(manualForm.qty),
-                price: Number(manualForm.price),
-            };
-            const result = await createTradeOrder(payload);
-            setManualResult(result ?? { ok: true });
-            if (result?.kis_result !== undefined) {
-                const message =
-                    typeof result.kis_result === 'string'
-                        ? result.kis_result
-                        : JSON.stringify(result.kis_result, null, 2);
-                setKisModal(message);
-            }
-            await loadBalance();
-        } catch (err) {
-            setManualError(err?.message ?? String(err));
-        } finally {
-            setManualLoading(false);
-        }
-    };
-
-    /* derived */
-    const holdings = useMemo(() => {
-        if (!balance) return [];
-        if (Array.isArray(balance.holdings)) return balance.holdings;
-        if (Array.isArray(balance.positions)) return balance.positions;
-        if (Array.isArray(balance.items)) return balance.items;
-        return [];
-    }, [balance]);
-
-    const summary = balance?.summary ?? {};
-    const totalEval = summary.total_eval ?? balance?.total_eval ?? balance?.total_value;
-    const deposit = summary.deposit ?? balance?.deposit ?? balance?.available_cash;
-
-    return {
-        balance, balanceLoading, balanceError, balanceLoaded, loadBalance,
-        holdings, summary, totalEval, deposit,
-        manualForm, setManualForm, manualLoading, manualError, manualResult,
-        kisModal, setKisModal, submitManualOrder,
-    };
-}

src/pages/stock/hooks/usePortfolio.js

@@ -3,7 +3,7 @@ import {
     getPortfolio, addPortfolio, updatePortfolio, deletePortfolio,
     upsertCash, deleteCash,
 } from '../../../api';
-import { emptyPortfolioForm } from '../stockUtils';
+import { emptyPortfolioForm, computeBrokerSummary } from '../stockUtils';
 
 export default function usePortfolio() {
     const [portfolio, setPortfolio] = useState(null);
@@ -38,7 +38,12 @@ export default function usePortfolio() {
 
     /* derived */
     const portfolioHoldings = portfolio?.holdings ?? [];
-    const portfolioSummary = portfolio?.summary ?? {};
+    // 총 매입은 "각 종목 매입가의 단순 합(수량 미곱산)"으로 표시 (박재오 정의).
+    // 백엔드 summary.total_buy(매입가×수량)는 무시하고 프론트에서 재계산해
+    // 요약카드·증권사별·AI 프롬프트가 모두 같은 값을 쓰도록 통일.
+    const portfolioSummary = portfolioHoldings.length
+        ? { ...(portfolio?.summary ?? {}), total_buy: computeBrokerSummary(portfolioHoldings).totalBuy }
+        : (portfolio?.summary ?? {});
     const cashList = portfolio?.cash ?? [];
     const totalCash = portfolioSummary.total_cash ?? null;
     const totalAssets = portfolioSummary.total_assets ?? null;
@@ -69,23 +74,7 @@ export default function usePortfolio() {
         return map;
     }, [brokerGroups]);
 
-    const getBrokerSummary = (items) => {
-        // totalBuy: 요약 표시용 (매입가 purchase_price 기준)
-        // totalCostBasis: 손익 계산용 (평균단가 avg_price 기준)
-        let totalBuy = 0, totalCostBasis = 0, totalEvalAmt = 0, hasNullPrice = false;
-        for (const item of items) {
-            const qty = item.quantity ?? 0;
-            const purchase = item.purchase_price ?? item.avg_price ?? 0;
-            // 총 매입 = 종목별 매입가의 단순 합 (수량 미곱산)
-            totalBuy += purchase;
-            totalCostBasis += (item.avg_price ?? 0) * qty;
-            if (item.eval_amount != null) totalEvalAmt += item.eval_amount;
-            else hasNullPrice = true;
-        }
-        const totalProfit = totalEvalAmt - totalCostBasis;
-        const totalProfitRate = totalCostBasis > 0 ? (totalProfit / totalCostBasis) * 100 : 0;
-        return { totalBuy, totalEval: totalEvalAmt, totalProfit, totalProfitRate, hasNullPrice };
-    };
+    const getBrokerSummary = computeBrokerSummary;
 
     /* loaders */
     const loadPortfolio = useCallback(async () => {

src/pages/stock/stockUtils.js

@@ -125,9 +125,27 @@ export const emptySellForm = () => ({
     sold_at: toLocalDatetimeValue(new Date().toISOString()),
 });
 
+/* ── 증권사별 요약 집계 ──────────────────────────────────────────── */
+// totalBuy: 총 매입 = 각 종목 매입가(purchase_price)의 단순 합 (수량 미곱산, 박재오 정의).
+//           매입가 미설정 시 avg_price 폴백. 백엔드 total_buy(×수량)는 표시에 쓰지 않음.
+// totalCostBasis: 손익 계산용 매입원가 = SUM(avg_price × quantity) — 손익은 수량 곱산 유지.
+export const computeBrokerSummary = (items) => {
+    let totalBuy = 0, totalCostBasis = 0, totalEval = 0, hasNullPrice = false;
+    for (const item of items) {
+        const qty = item.quantity ?? 0;
+        const purchase = item.purchase_price ?? item.avg_price ?? 0;
+        totalBuy += purchase;
+        totalCostBasis += (item.avg_price ?? 0) * qty;
+        if (item.eval_amount != null) totalEval += item.eval_amount;
+        else hasNullPrice = true;
+    }
+    const totalProfit = totalEval - totalCostBasis;
+    const totalProfitRate = totalCostBasis > 0 ? (totalProfit / totalCostBasis) * 100 : 0;
+    return { totalBuy, totalEval, totalProfit, totalProfitRate, hasNullPrice };
+};
+
 /* ── TAB IDs ─────────────────────────────────────────────────────── */
 
 export const TAB_PORTFOLIO = 'portfolio';
-export const TAB_AI = 'ai';
 export const TAB_REPORT = 'report';
 export const TAB_ADVISOR = 'advisor';

src/pages/stock/stockUtils.test.js

@@ -0,0 +1,48 @@
+import { describe, it, expect } from 'vitest';
+import { computeBrokerSummary } from './stockUtils.js';
+
+describe('computeBrokerSummary - 총 매입(total_buy) 계산', () => {
+    it('총 매입 = 각 종목 매입가(purchase_price)의 단순 합 (수량 미곱산)', () => {
+        const items = [
+            { quantity: 100, avg_price: 72000, purchase_price: 70000, eval_amount: 7450000 },
+        ];
+        // 매입가 70000 (수량 곱하지 않음)
+        expect(computeBrokerSummary(items).totalBuy).toBe(70_000);
+    });
+
+    it('purchase_price 미설정 시 avg_price로 폴백 (단순 합)', () => {
+        const items = [
+            { quantity: 100, avg_price: 72000, purchase_price: null, eval_amount: 7450000 },
+        ];
+        // 매입가 미입력 → 평균단가 72000 폴백
+        expect(computeBrokerSummary(items).totalBuy).toBe(72_000);
+    });
+
+    it('여러 종목 합산: 각 매입가의 단순 합', () => {
+        const items = [
+            { quantity: 100, avg_price: 70000, purchase_price: 70000, eval_amount: 7500000 },
+            { quantity: 50, avg_price: 130000, purchase_price: 130000, eval_amount: 6800000 },
+        ];
+        // 70000 + 130000 = 200,000 (수량 미곱산)
+        expect(computeBrokerSummary(items).totalBuy).toBe(200_000);
+    });
+
+    it('손익 = 총 평가 - 매입원가(avg_price × qty) — 손익은 수량 곱산 유지', () => {
+        const items = [
+            { quantity: 10, avg_price: 100000, purchase_price: 90000, eval_amount: 1_200_000 },
+        ];
+        const s = computeBrokerSummary(items);
+        // cost_basis = 100000 × 10 = 1,000,000; profit = 1,200,000 - 1,000,000 = 200,000
+        expect(s.totalEval).toBe(1_200_000);
+        expect(s.totalProfit).toBe(200_000);
+        expect(s.totalProfitRate).toBeCloseTo(20, 5);
+        expect(s.hasNullPrice).toBe(false);
+    });
+
+    it('eval_amount가 null인 종목이 있으면 hasNullPrice=true', () => {
+        const items = [
+            { quantity: 10, avg_price: 100000, purchase_price: 100000, eval_amount: null },
+        ];
+        expect(computeBrokerSummary(items).hasNullPrice).toBe(true);
+    });
+});

src/routes.jsx

@@ -16,6 +16,7 @@ import {
 const Home = lazy(() => import('./pages/home/Home'));
 const Blog = lazy(() => import('./pages/blog/Blog'));
 const Lotto = lazy(() => import('./pages/lotto/Lotto'));
+const Evolver = lazy(() => import('./pages/lotto/Evolver'));
 const Travel = lazy(() => import('./pages/travel/Travel'));
 const Stock = lazy(() => import('./pages/stock/Stock'));
 const StockTrade = lazy(() => import('./pages/stock/StockTrade'));
@@ -153,6 +154,10 @@ export const appRoutes = [
         path: 'lotto',
         element: <Lotto />,
     },
+    {
+        path: 'lotto/evolver',
+        element: <Evolver />,
+    },
     {
         path: 'stock',
         element: <Stock />,