docs: 로또 페이지 3탭 구조 + 브리핑 API 반영

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

CLAUDE.md

@@ -222,7 +222,32 @@ handleGenerate()
 
 ## Lotto 고도화 (`/lotto`)
 
-`src/pages/lotto/Functions.jsx`에 4개 신규 섹션 추가:
+`src/pages/lotto/Functions.jsx`는 3탭 구조 (`브리핑 / 분석·통계 / 구매·성과`)로 리팩토링되었습니다.
+
+| 탭 | 파일 | 설명 |
+|----|------|------|
+| 이번 주 브리핑 | `tabs/BriefingTab.jsx` | AI 큐레이터 브리핑 표시 (`components/briefing/` 하위 컴포넌트) |
+| 분석·통계 | `tabs/AnalysisTab.jsx` | 시뮬레이션 추천·통계·ReportPanel·수동 추천 |
+| 구매·성과 | `tabs/PurchaseTab.jsx` | 구매 내역 CRUD + 성과 통계 |
+
+### 브리핑 전용 컴포넌트 (`components/briefing/`)
+
+| 컴포넌트 | 설명 |
+|----------|------|
+| `BriefingTab.jsx` | 탭 루트, 브리핑 로드 + 트리거 |
+| `BriefingHeader.jsx` | 회차·생성일시 헤더 |
+| `BriefingSummary.jsx` | 내러티브 요약 표시 |
+| `PickSetCard.jsx` | 번호 세트 1장 카드 |
+| `BriefingEmpty.jsx` | 브리핑 없을 때 빈 상태 |
+| `CuratorUsageFooter.jsx` | 토큰·비용 집계 푸터 |
+
+### 신규 api.js 헬퍼
+
+- `getLatestBriefing()` — `GET /api/lotto/briefing/latest`
+- `getCuratorUsage(days)` — `GET /api/lotto/curator/usage?days=N`
+- `triggerLottoCurate()` — `POST /api/agent-office/command` (lotto_agent curate 명령)
+
+### 기존 섹션 (AnalysisTab 내)
 
 | 섹션 | API | 설명 |
 |------|-----|------|

src/api.js

@@ -588,3 +588,41 @@ export function deleteBrandLink(id) {
   return apiDelete(`/api/blog-marketing/links/${id}`);
 }
 
+// ── Agent Office ──────────────────────────────────
+export const getAgents         = ()           => apiGet('/api/agent-office/agents');
+export const getAgentDetail    = (id)         => apiGet(`/api/agent-office/agents/${id}`);
+export const updateAgentConfig = (id, body)   => apiPut(`/api/agent-office/agents/${id}`, body);
+export const getAgentTasks     = (id, limit=20) => apiGet(`/api/agent-office/agents/${id}/tasks?limit=${limit}`);
+export const getAgentLogs      = (id, limit=50) => apiGet(`/api/agent-office/agents/${id}/logs?limit=${limit}`);
+export const getPendingTasks   = ()           => apiGet('/api/agent-office/tasks/pending');
+export const sendAgentCommand  = (agent, action, params={}) => apiPost('/api/agent-office/command', { agent, action, params });
+export const approveAgentTask  = (agent, task_id, approved, feedback='') => apiPost('/api/agent-office/approve', { agent, task_id, approved, feedback });
+export const getAgentStates    = ()           => apiGet('/api/agent-office/states');
+export const getActivityFeed   = (limit=50, offset=0) => apiGet(`/api/agent-office/activity?limit=${limit}&offset=${offset}`);
+export const getAgentTokenUsage = (id, days=1) => apiGet(`/api/agent-office/agents/${id}/token-usage?days=${days}`);
+
+// --- Lotto Briefing ---
+
+export async function getLatestBriefing() {
+  const r = await fetch('/api/lotto/briefing/latest');
+  if (r.status === 404) return null;
+  if (!r.ok) throw new Error(`briefing fetch failed: ${r.status}`);
+  return r.json();
+}
+
+export async function getCuratorUsage(days = 30) {
+  const r = await fetch(`/api/lotto/curator/usage?days=${days}`);
+  if (!r.ok) throw new Error(`usage fetch failed: ${r.status}`);
+  return r.json();
+}
+
+export async function triggerLottoCurate() {
+  const r = await fetch('/api/agent-office/command', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ agent: 'lotto', action: 'curate_now', params: {} }),
+  });
+  if (!r.ok) throw new Error(`curate trigger failed: ${r.status}`);
+  return r.json();
+}
+

src/pages/agent-office/AgentOffice.css

@@ -0,0 +1,388 @@
+.ao-page {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: #0d0d1a;
+  color: #e0e0e0;
+  font-family: 'Courier New', monospace;
+}
+
+.ao-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 20px;
+  background: #1a1a2e;
+  border-bottom: 1px solid #2a2a4a;
+  flex-shrink: 0;
+}
+
+.ao-title {
+  font-size: 1.2rem;
+  color: #8b5cf6;
+  margin: 0;
+  letter-spacing: 2px;
+}
+
+.ao-status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.8rem;
+  color: #888;
+}
+
+.ao-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+.ao-dot--on { background: #34d399; }
+.ao-dot--off { background: #f87171; }
+
+/* Dashboard */
+.ao-dashboard {
+  display: flex;
+  gap: 1px;
+  background: #2a2a4a;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* Agent Column */
+.ao-col {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: #0d0d1a;
+  min-width: 0;
+  overflow-y: auto;
+}
+
+.ao-col-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  border-top: 3px solid;
+  background: #1a1a2e;
+  flex-shrink: 0;
+}
+
+.ao-col-chevron {
+  display: none;
+  color: #666;
+  font-size: 0.8rem;
+  margin-left: 4px;
+}
+
+.ao-col-body {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.ao-col-name {
+  font-weight: bold;
+  font-size: 0.9rem;
+}
+
+.ao-col-state {
+  font-size: 0.7rem;
+  padding: 2px 8px;
+  border-radius: 8px;
+  text-transform: uppercase;
+  margin-left: auto;
+}
+.ao-col-state--idle { background: #333; color: #888; }
+.ao-col-state--working { background: #3730a3; color: #a5b4fc; }
+.ao-col-state--waiting { background: #92400e; color: #fbbf24; }
+.ao-col-state--reporting { background: #065f46; color: #34d399; }
+.ao-col-state--break { background: #4c1d95; color: #c4b5fd; }
+.ao-col-state--offline { background: #1f1f1f; color: #555; }
+
+.ao-col-tokens {
+  font-size: 0.7rem;
+  color: #8b5cf6;
+  background: rgba(139, 92, 246, 0.12);
+  padding: 2px 8px;
+  border-radius: 8px;
+  margin-left: 6px;
+  cursor: help;
+  font-family: 'Courier New', monospace;
+  white-space: nowrap;
+}
+
+.ao-col-badge {
+  background: #f43f5e;
+  color: #fff;
+  font-size: 0.65rem;
+  padding: 1px 5px;
+  border-radius: 6px;
+  font-weight: bold;
+}
+
+.ao-col-detail {
+  padding: 6px 12px;
+  font-size: 0.8rem;
+  color: #a78bfa;
+  background: rgba(139, 92, 246, 0.05);
+  border-bottom: 1px solid #2a2a4a;
+  flex-shrink: 0;
+}
+
+.ao-col-approval {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: rgba(251, 191, 36, 0.08);
+  border-bottom: 1px solid #2a2a4a;
+  font-size: 0.8rem;
+  color: #fbbf24;
+  flex-shrink: 0;
+}
+
+.ao-col-commands {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding: 8px 12px;
+  border-bottom: 1px solid #1a1a2e;
+  flex-shrink: 0;
+}
+
+.ao-col-input {
+  display: flex;
+  gap: 6px;
+  padding: 6px 12px;
+  border-bottom: 1px solid #1a1a2e;
+  flex-shrink: 0;
+}
+
+.ao-col-tasks {
+  flex: 1;
+  overflow-y: auto;
+  padding: 4px 0;
+}
+
+.ao-col-tasks-title {
+  padding: 4px 12px;
+  font-size: 0.7rem;
+  color: #555;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+.ao-col-empty {
+  padding: 12px;
+  text-align: center;
+  color: #444;
+  font-size: 0.8rem;
+}
+
+.ao-col-task {
+  padding: 6px 12px;
+  border-bottom: 1px solid rgba(255,255,255,0.03);
+}
+
+.ao-col-task-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.ao-col-task-type {
+  font-size: 0.8rem;
+  color: #ccc;
+}
+
+.ao-col-task-badge {
+  font-size: 0.65rem;
+  padding: 1px 6px;
+  border-radius: 4px;
+  color: #fff;
+}
+
+.ao-col-task-time {
+  font-size: 0.7rem;
+  color: #555;
+  margin-top: 2px;
+}
+
+.ao-col-task-detail {
+  margin-top: 4px;
+  font-size: 0.7rem;
+}
+.ao-col-task-detail summary {
+  cursor: pointer;
+  color: #8b5cf6;
+}
+.ao-col-task-detail pre {
+  color: #888;
+  white-space: pre-wrap;
+  margin: 4px 0 0;
+  max-height: 120px;
+  overflow-y: auto;
+}
+
+/* Command Column */
+.ao-cmd-form {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 8px 12px;
+  border-bottom: 1px solid #1a1a2e;
+  flex-shrink: 0;
+}
+
+.ao-cmd-row {
+  display: flex;
+  gap: 6px;
+}
+
+.ao-cmd-select {
+  flex: 1;
+  padding: 6px 8px;
+  background: #111;
+  border: 1px solid #333;
+  border-radius: 6px;
+  color: #e0e0e0;
+  font-size: 0.8rem;
+  font-family: inherit;
+}
+.ao-cmd-select:focus { border-color: #8b5cf6; outline: none; }
+
+.ao-cmd-send {
+  width: 100%;
+}
+
+/* Office Section */
+.ao-office-section {
+  height: 280px;
+  flex-shrink: 0;
+  border-top: 2px solid #2a2a4a;
+  position: relative;
+}
+
+.ao-canvas-container {
+  width: 100%;
+  height: 100%;
+}
+
+/* Shared */
+.ao-btn {
+  padding: 4px 12px;
+  border: none;
+  border-radius: 6px;
+  font-size: 0.8rem;
+  cursor: pointer;
+  font-family: inherit;
+}
+.ao-btn--approve { background: #065f46; color: #34d399; }
+.ao-btn--approve:hover { background: #047857; }
+.ao-btn--reject { background: #7f1d1d; color: #f87171; }
+.ao-btn--reject:hover { background: #991b1b; }
+.ao-btn--send { background: #4c1d95; color: #c4b5fd; }
+.ao-btn--send:hover { background: #5b21b6; }
+
+.ao-cmd-btn {
+  padding: 4px 10px;
+  border: 1px solid #333;
+  border-radius: 6px;
+  background: transparent;
+  color: #ccc;
+  font-size: 0.75rem;
+  cursor: pointer;
+  font-family: inherit;
+}
+.ao-cmd-btn:hover { border-color: #8b5cf6; background: rgba(139, 92, 246, 0.1); }
+
+.ao-chat-input {
+  flex: 1;
+  padding: 6px 10px;
+  background: #111;
+  border: 1px solid #333;
+  border-radius: 6px;
+  color: #e0e0e0;
+  font-size: 0.8rem;
+  font-family: inherit;
+  min-width: 0;
+}
+.ao-chat-input:focus { border-color: #8b5cf6; outline: none; }
+
+.ao-doc-tg-status {
+  font-size: 0.7rem;
+  margin-left: 4px;
+}
+
+/* Mobile: vertical stack + accordion */
+@media (max-width: 768px) {
+  .ao-page {
+    height: auto;
+    min-height: 100vh;
+  }
+
+  .ao-dashboard {
+    flex-direction: column;
+    gap: 1px;
+    overflow: visible;
+    flex: none;
+  }
+
+  .ao-col {
+    flex: none;
+    overflow: visible;
+  }
+
+  .ao-col-header {
+    cursor: pointer;
+    user-select: none;
+    padding: 12px 14px;
+  }
+
+  .ao-col-chevron {
+    display: inline;
+  }
+
+  .ao-col--collapsed .ao-col-body {
+    display: none;
+  }
+
+  .ao-col--attention {
+    box-shadow: inset 3px 0 0 #fbbf24;
+  }
+
+  .ao-col-tasks {
+    max-height: 260px;
+  }
+
+  .ao-office-section {
+    height: 140px;
+    order: -1;
+    border-top: none;
+    border-bottom: 2px solid #2a2a4a;
+  }
+
+  .ao-title {
+    font-size: 1rem;
+    letter-spacing: 1px;
+  }
+
+  .ao-header {
+    padding: 8px 12px;
+  }
+
+  .ao-col-commands {
+    gap: 6px;
+  }
+
+  .ao-cmd-btn,
+  .ao-btn {
+    padding: 6px 12px;
+    font-size: 0.8rem;
+  }
+}

src/pages/agent-office/AgentOffice.jsx

@@ -0,0 +1,84 @@
+import React, { useRef, useState, useCallback, useEffect } from 'react';
+import { useAgentManager } from './hooks/useAgentManager';
+import { useOfficeCanvas } from './hooks/useOfficeCanvas';
+import AgentColumn from './components/AgentColumn';
+import CommandColumn from './components/CommandColumn';
+import './AgentOffice.css';
+
+const AGENT_META = {
+  stock: { name: '주식 트레이더', color: '#4488cc' },
+  music: { name: '음악 프로듀서', color: '#44aa88' },
+  blog: { name: '블로그 마케터', color: '#d97706' },
+  realestate: { name: '청약 애널리스트', color: '#c026d3' },
+};
+
+const AGENT_IDS = ['stock', 'music', 'blog', 'realestate'];
+
+export function Component() {
+  const canvasContainerRef = useRef(null);
+
+  const { agents, pendingTasks, connected, notifications, sendCommand, sendApproval, clearNotifications } = useAgentManager();
+
+  const handleAgentClick = useCallback((agentId) => {
+    clearNotifications(agentId);
+  }, [clearNotifications]);
+
+  const handleCeoClick = useCallback(() => {}, []);
+
+  const { updateAgentState, setAgentNotification, setCeoDocBadge } = useOfficeCanvas(canvasContainerRef, handleAgentClick, handleCeoClick);
+
+  useEffect(() => {
+    for (const [id, info] of Object.entries(agents)) {
+      updateAgentState(id, info.state, info.detail);
+    }
+  }, [agents, updateAgentState]);
+
+  useEffect(() => {
+    for (const [id, count] of Object.entries(notifications)) {
+      setAgentNotification(id, count);
+    }
+    for (const id of Object.keys(agents)) {
+      if (!notifications[id]) setAgentNotification(id, 0);
+    }
+  }, [notifications, agents, setAgentNotification]);
+
+  useEffect(() => {
+    const total = Object.values(notifications).reduce((s, n) => s + n, 0);
+    setCeoDocBadge(total);
+  }, [notifications, setCeoDocBadge]);
+
+  return (
+    <div className="ao-page">
+      <div className="ao-header">
+        <h1 className="ao-title">Agent Office</h1>
+        <div className="ao-status">
+          <span className={`ao-dot ${connected ? 'ao-dot--on' : 'ao-dot--off'}`} />
+          {connected ? 'Connected' : 'Disconnected'}
+        </div>
+      </div>
+
+      <div className="ao-dashboard">
+        {AGENT_IDS.map(id => (
+          <AgentColumn
+            key={id}
+            agentId={id}
+            meta={AGENT_META[id]}
+            agentState={agents[id]}
+            notification={notifications[id] || 0}
+            onCommand={sendCommand}
+            onApproval={sendApproval}
+            onClearNotification={() => clearNotifications(id)}
+          />
+        ))}
+        <CommandColumn
+          agents={agents}
+          onCommand={sendCommand}
+        />
+      </div>
+
+      <div className="ao-office-section">
+        <div className="ao-canvas-container" ref={canvasContainerRef} />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,46 @@
+{
+  "tileSize": 32,
+  "cols": 20,
+  "rows": 14,
+  "layers": {
+    "floor": [
+      [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,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],
+      [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,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],
+      [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,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],
+      [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
+      [2,2,2,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
+      [2,2,2,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
+      [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,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
+    ]
+  },
+  "furniture": [
+    {"type": "desk", "x": 2, "y": 1, "label": "Stock"},
+    {"type": "desk", "x": 7, "y": 1, "label": "Music"},
+    {"type": "desk", "x": 12, "y": 1, "label": "Blog"},
+    {"type": "desk", "x": 17, "y": 1, "label": "Realestate"},
+    {"type": "table", "x": 8, "y": 6, "w": 4, "h": 2, "label": "회의 테이블"},
+    {"type": "sofa", "x": 1, "y": 10, "label": "휴게실"},
+    {"type": "coffee", "x": 3, "y": 10, "label": "☕"},
+    {"type": "desk", "x": 14, "y": 10, "w": 5, "h": 2, "label": "CEO"}
+  ],
+  "waypoints": {
+    "stock_desk": {"x": 2, "y": 2},
+    "music_desk": {"x": 7, "y": 2},
+    "blog_desk": {"x": 12, "y": 2},
+    "realestate_desk": {"x": 17, "y": 2},
+    "meeting_table": {"x": 9, "y": 7},
+    "break_room": {"x": 2, "y": 11},
+    "ceo_desk": {"x": 16, "y": 11}
+  },
+  "colors": {
+    "1": "#3a3a50",
+    "2": "#4a3a2a"
+  }
+}

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

@@ -0,0 +1,89 @@
+import { drawAgent, getAnimSpeed } from './SpriteSheet';
+
+export class AgentSprite {
+  constructor(agentId, waypoints) {
+    this.agentId = agentId;
+    this.waypoints = waypoints;
+    this.state = 'idle';
+    this.detail = '';
+    this.notificationCount = 0;
+
+    const deskKey = `${agentId}_desk`;
+    const desk = waypoints[deskKey] || { x: 5, y: 3 };
+    this.x = desk.x;
+    this.y = desk.y;
+    this.targetX = desk.x;
+    this.targetY = desk.y;
+    this.deskPos = { x: desk.x, y: desk.y };
+
+    this.frameIndex = 0;
+    this._lastFrameTime = 0;
+    this._moveSpeed = 0.05;
+  }
+
+  setNotification(count) {
+    this.notificationCount = count;
+  }
+
+  setState(newState, detail = '') {
+    this.state = newState;
+    this.detail = detail;
+    this.frameIndex = 0;
+  }
+
+  moveTo(target) {
+    const wp = this.waypoints[target];
+    if (wp) {
+      this.targetX = wp.x;
+      this.targetY = wp.y;
+    }
+  }
+
+  moveToDesk() {
+    this.targetX = this.deskPos.x;
+    this.targetY = this.deskPos.y;
+  }
+
+  update(now) {
+    const speed = getAnimSpeed(this.state);
+    if (now - this._lastFrameTime > speed) {
+      this.frameIndex++;
+      this._lastFrameTime = now;
+    }
+
+    const dx = this.targetX - this.x;
+    const dy = this.targetY - this.y;
+    const dist = Math.sqrt(dx * dx + dy * dy);
+
+    if (dist > 0.1) {
+      const step = Math.min(this._moveSpeed, dist);
+      this.x += (dx / dist) * step;
+      this.y += (dy / dist) * step;
+    } else {
+      this.x = this.targetX;
+      this.y = this.targetY;
+    }
+  }
+
+  draw(ctx, renderInfo) {
+    const { scale, offsetX, offsetY, tileSize } = renderInfo;
+    const canvasX = offsetX + this.x * tileSize * scale + (tileSize * scale) / 2;
+    const canvasY = offsetY + this.y * tileSize * scale + (tileSize * scale) / 2;
+
+    const isMoving = Math.abs(this.targetX - this.x) > 0.1 || Math.abs(this.targetY - this.y) > 0.1;
+    const drawState = isMoving ? 'walk' : this.state;
+
+    drawAgent(ctx, this.agentId, canvasX, canvasY, drawState, this.frameIndex, scale * 1.5);
+  }
+
+  hitTest(canvasX, canvasY, renderInfo) {
+    const { scale, offsetX, offsetY, tileSize } = renderInfo;
+    const cx = offsetX + this.x * tileSize * scale + (tileSize * scale) / 2;
+    const cy = offsetY + this.y * tileSize * scale + (tileSize * scale) / 2;
+    const hitW = 20 * scale;
+    const hitH = 30 * scale;
+
+    return canvasX >= cx - hitW && canvasX <= cx + hitW &&
+           canvasY >= cy - hitH && canvasY <= cy + hitH;
+  }
+}

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

@@ -0,0 +1,211 @@
+import { drawTileMap } from './TileMap';
+import { AgentSprite } from './AgentSprite';
+import { getCharLabel, drawNotificationBadge } from './SpriteSheet';
+
+const STATUS_ICONS = {
+  idle: null,
+  working: null,
+  waiting: '❗',
+  reporting: '📋',
+  break: '☕',
+};
+
+export class OfficeRenderer {
+  constructor(canvas, mapData) {
+    this.canvas = canvas;
+    this.ctx = canvas.getContext('2d');
+    this.mapData = mapData;
+    this.renderInfo = null;
+    this.agents = {};
+    this._animId = null;
+    this._onClick = null;
+    this._onCeoClick = null;
+    this._ceoDocBadge = 0;
+
+    const agentIds = ['stock', 'music', 'blog', 'realestate'];
+    for (const id of agentIds) {
+      this.agents[id] = new AgentSprite(id, mapData.waypoints);
+    }
+  }
+
+  start() {
+    this._loop = this._loop.bind(this);
+    this._animId = requestAnimationFrame(this._loop);
+  }
+
+  stop() {
+    if (this._animId) {
+      cancelAnimationFrame(this._animId);
+      this._animId = null;
+    }
+  }
+
+  resize(width, height) {
+    this.canvas.width = width;
+    this.canvas.height = height;
+  }
+
+  setOnClick(handler) {
+    this._onClick = handler;
+  }
+
+  handleClick(canvasX, canvasY) {
+    if (!this.renderInfo) return null;
+
+    for (const [id, sprite] of Object.entries(this.agents)) {
+      if (sprite.hitTest(canvasX, canvasY, this.renderInfo)) {
+        if (this._onClick) this._onClick(id);
+        return id;
+      }
+    }
+    // CEO desk click detection
+    const ceo = this.mapData.waypoints.ceo_desk;
+    if (ceo) {
+      const { scale, offsetX, offsetY, tileSize } = this.renderInfo;
+      const cx = offsetX + ceo.x * tileSize * scale;
+      const cy = offsetY + ceo.y * tileSize * scale;
+      const hitW = 5 * tileSize * scale;
+      const hitH = 2 * tileSize * scale;
+      if (canvasX >= cx - tileSize * scale && canvasY >= cy - tileSize * scale &&
+          canvasX <= cx + hitW && canvasY <= cy + hitH) {
+        if (this._onCeoClick) this._onCeoClick();
+        return 'ceo_desk';
+      }
+    }
+
+    return null;
+  }
+
+  updateAgentState(agentId, state, detail) {
+    const sprite = this.agents[agentId];
+    if (sprite) {
+      sprite.setState(state, detail);
+      if (state === 'idle' || state === 'working' || state === 'waiting') {
+        sprite.moveToDesk();
+      }
+    }
+  }
+
+  moveAgent(agentId, target) {
+    const sprite = this.agents[agentId];
+    if (sprite) {
+      sprite.moveTo(target);
+    }
+  }
+
+  setOnCeoClick(handler) {
+    this._onCeoClick = handler;
+  }
+
+  setCeoDocBadge(count) {
+    this._ceoDocBadge = count;
+  }
+
+  setAgentNotification(agentId, count) {
+    const sprite = this.agents[agentId];
+    if (sprite) sprite.setNotification(count);
+  }
+
+  _loop(timestamp) {
+    const { ctx, canvas, mapData } = this;
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.fillStyle = '#1a1a2e';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    this.renderInfo = drawTileMap(ctx, mapData, canvas.width, canvas.height);
+
+    const now = Date.now();
+    for (const sprite of Object.values(this.agents)) {
+      sprite.update(now);
+      sprite.draw(ctx, this.renderInfo);
+    }
+
+    for (const [id, sprite] of Object.entries(this.agents)) {
+      this._drawOverlay(ctx, sprite, id);
+    }
+
+    // CEO desk document icon
+    this._drawCeoDoc(ctx);
+
+    this._animId = requestAnimationFrame(this._loop);
+  }
+
+  _drawOverlay(ctx, sprite, agentId) {
+    if (!this.renderInfo) return;
+    const { scale, offsetX, offsetY, tileSize } = this.renderInfo;
+    const cx = offsetX + sprite.x * tileSize * scale + (tileSize * scale) / 2;
+    const cy = offsetY + sprite.y * tileSize * scale - 10 * scale;
+
+    const icon = STATUS_ICONS[sprite.state];
+    if (icon) {
+      ctx.font = `${14 * scale}px serif`;
+      ctx.textAlign = 'center';
+      ctx.fillText(icon, cx, cy - 15 * scale);
+    }
+
+    // Notification badge (separate from status icon)
+    if (sprite.notificationCount > 0) {
+      drawNotificationBadge(ctx, cx, cy - 15 * scale, sprite.notificationCount, scale * 1.5);
+    }
+
+    ctx.fillStyle = 'rgba(255,255,255,0.7)';
+    ctx.font = `${8 * scale}px monospace`;
+    ctx.textAlign = 'center';
+    ctx.fillText(getCharLabel(agentId), cx, cy + 30 * scale + 30);
+
+    if (sprite.detail && (sprite.state === 'working' || sprite.state === 'waiting')) {
+      const bubbleY = cy - 25 * scale;
+      ctx.fillStyle = 'rgba(0,0,0,0.7)';
+      const textW = ctx.measureText(sprite.detail).width;
+      ctx.fillRect(cx - textW / 2 - 6, bubbleY - 10, textW + 12, 16);
+      ctx.fillStyle = '#fff';
+      ctx.font = `${7 * scale}px monospace`;
+      ctx.fillText(sprite.detail, cx, bubbleY);
+    }
+  }
+
+  _drawCeoDoc(ctx) {
+    if (!this.renderInfo) return;
+    const ceo = this.mapData.waypoints.ceo_desk;
+    if (!ceo) return;
+
+    const { scale, offsetX, offsetY, tileSize } = this.renderInfo;
+    const dx = offsetX + (ceo.x - 1) * tileSize * scale;
+    const dy = offsetY + (ceo.y - 1) * tileSize * scale;
+    const docW = 12 * scale;
+    const docH = 16 * scale;
+
+    // Paper
+    ctx.fillStyle = '#e8e0d0';
+    ctx.fillRect(dx, dy, docW, docH);
+    // Lines on paper
+    ctx.fillStyle = '#bbb';
+    for (let i = 0; i < 4; i++) {
+      ctx.fillRect(dx + 2 * scale, dy + (3 + i * 3) * scale, 8 * scale, 1);
+    }
+    // Folded corner
+    ctx.fillStyle = '#d0c8b8';
+    ctx.beginPath();
+    ctx.moveTo(dx + docW - 3 * scale, dy);
+    ctx.lineTo(dx + docW, dy + 3 * scale);
+    ctx.lineTo(dx + docW - 3 * scale, dy + 3 * scale);
+    ctx.fill();
+
+    // Badge on document
+    if (this._ceoDocBadge > 0) {
+      const bx = dx + docW;
+      const by = dy;
+      const r = 4 * scale;
+      ctx.beginPath();
+      ctx.arc(bx, by, r, 0, Math.PI * 2);
+      ctx.fillStyle = '#f43f5e';
+      ctx.fill();
+      ctx.fillStyle = '#fff';
+      ctx.font = `bold ${5 * scale}px monospace`;
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(this._ceoDocBadge > 9 ? '9+' : String(this._ceoDocBadge), bx, by);
+    }
+  }
+}

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

@@ -0,0 +1,121 @@
+const PIXEL_CHARS = {
+  stock: { body: '#4488cc', accent: '#cc4444', label: '주식', hair: '#332222' },
+  music: { body: '#44aa88', accent: '#ffaa00', label: '음악', hair: '#443322' },
+  blog: { body: '#d97706', accent: '#fde68a', label: '블로그', hair: '#3b2a1a' },
+  realestate: { body: '#c026d3', accent: '#86efac', label: '청약', hair: '#2a2a3a' },
+  claude: { body: '#8855cc', accent: '#cc88ff', label: 'Claude', hair: '#554466' },
+};
+
+const ANIM_FRAMES = {
+  idle: { frames: 2, speed: 800 },
+  working: { frames: 4, speed: 200 },
+  waiting: { frames: 2, speed: 400 },
+  break: { frames: 2, speed: 1000 },
+  walk: { frames: 4, speed: 150 },
+};
+
+export function drawAgent(ctx, agentId, x, y, state, frameIndex, scale = 2) {
+  const char = PIXEL_CHARS[agentId] || PIXEL_CHARS.claude;
+  const s = scale;
+  const anim = ANIM_FRAMES[state] || ANIM_FRAMES.idle;
+  const frame = frameIndex % anim.frames;
+
+  ctx.save();
+  ctx.translate(x, y);
+
+  // Shadow
+  ctx.fillStyle = 'rgba(0,0,0,0.2)';
+  ctx.fillRect(-4 * s, 14 * s, 8 * s, 2 * s);
+
+  // Body
+  ctx.fillStyle = char.body;
+  ctx.fillRect(-3 * s, 2 * s, 6 * s, 8 * s);
+
+  // Head
+  ctx.fillStyle = '#ffcc99';
+  ctx.fillRect(-3 * s, -4 * s, 6 * s, 6 * s);
+
+  // Hair
+  ctx.fillStyle = char.hair;
+  ctx.fillRect(-3 * s, -5 * s, 6 * s, 2 * s);
+
+  // Eyes
+  ctx.fillStyle = '#222';
+  const eyeOffset = state === 'break' && frame === 1 ? 0 : 1;
+  ctx.fillRect(-2 * s, -1 * s, 1 * s, eyeOffset * s);
+  ctx.fillRect(1 * s, -1 * s, 1 * s, eyeOffset * s);
+
+  // Legs
+  ctx.fillStyle = '#335';
+  const legSpread = state === 'walk' ? (frame % 2 === 0 ? 1 : -1) : 0;
+  ctx.fillRect(-2 * s, 10 * s, 2 * s, 4 * s);
+  ctx.fillRect(0 + legSpread * s, 10 * s, 2 * s, 4 * s);
+
+  // Accent
+  ctx.fillStyle = char.accent;
+  if (agentId === 'stock') {
+    ctx.fillRect(0, 2 * s, 1 * s, 5 * s);
+  } else if (agentId === 'music') {
+    ctx.fillRect(-4 * s, -4 * s, 1 * s, 4 * s);
+    ctx.fillRect(3 * s, -4 * s, 1 * s, 4 * s);
+    ctx.fillRect(-4 * s, -5 * s, 8 * s, 1 * s);
+  } else if (agentId === 'blog') {
+    // 노트북 액센트 (무릎 위)
+    ctx.fillRect(-3 * s, 6 * s, 6 * s, 1 * s);
+    ctx.fillRect(-3 * s, 7 * s, 6 * s, 2 * s);
+  } else if (agentId === 'realestate') {
+    // 서류 가방 액센트 (손 옆)
+    ctx.fillRect(3 * s, 4 * s, 2 * s, 3 * s);
+    ctx.fillRect(3 * s, 3 * s, 2 * s, 1 * s);
+  } else if (agentId === 'claude') {
+    ctx.globalAlpha = 0.3 + 0.2 * Math.sin(Date.now() / 500);
+    ctx.fillRect(-4 * s, -6 * s, 8 * s, 1 * s);
+    ctx.globalAlpha = 1;
+  }
+
+  // Working: typing hands
+  if (state === 'working') {
+    ctx.fillStyle = '#ffcc99';
+    const handY = 6 * s + (frame % 2) * s;
+    ctx.fillRect(-4 * s, handY, 1 * s, 2 * s);
+    ctx.fillRect(3 * s, handY, 1 * s, 2 * s);
+  }
+
+  // Waiting wobble
+  if (state === 'waiting') {
+    const wobble = Math.sin(Date.now() / 200) * s;
+    ctx.translate(wobble, 0);
+  }
+
+  ctx.restore();
+}
+
+export function getAnimSpeed(state) {
+  return (ANIM_FRAMES[state] || ANIM_FRAMES.idle).speed;
+}
+
+export function getCharLabel(agentId) {
+  return (PIXEL_CHARS[agentId] || {}).label || agentId;
+}
+
+export function drawNotificationBadge(ctx, x, y, count, scale = 2) {
+  const s = scale;
+  const badgeX = x + 5 * s;
+  const badgeY = y - 8 * s;
+  const radius = 5 * s;
+
+  ctx.beginPath();
+  ctx.arc(badgeX, badgeY, radius, 0, Math.PI * 2);
+  ctx.fillStyle = '#f43f5e';
+  ctx.fill();
+
+  ctx.strokeStyle = '#fff';
+  ctx.lineWidth = 1;
+  ctx.stroke();
+
+  ctx.fillStyle = '#fff';
+  ctx.font = `bold ${7 * s}px monospace`;
+  ctx.textAlign = 'center';
+  ctx.textBaseline = 'middle';
+  ctx.fillText('!', badgeX, badgeY);
+}

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

@@ -0,0 +1,90 @@
+const WALL_COLOR = '#2a2a3a';
+const DESK_COLOR = '#6b5b3a';
+const DESK_TOP = '#8b7b5a';
+const TABLE_COLOR = '#5a4a2a';
+const SOFA_COLOR = '#884444';
+const MONITOR_COLOR = '#224466';
+const MONITOR_SCREEN = '#44aacc';
+
+export function drawTileMap(ctx, mapData, width, height) {
+  const { tileSize, cols, rows, layers, furniture, colors } = mapData;
+  const scaleX = width / (cols * tileSize);
+  const scaleY = height / (rows * tileSize);
+  const scale = Math.min(scaleX, scaleY);
+
+  const offsetX = (width - cols * tileSize * scale) / 2;
+  const offsetY = (height - rows * tileSize * scale) / 2;
+
+  ctx.save();
+  ctx.translate(offsetX, offsetY);
+  ctx.scale(scale, scale);
+
+  const floor = layers.floor;
+  for (let r = 0; r < rows; r++) {
+    for (let c = 0; c < cols; c++) {
+      const tile = floor[r][c];
+      ctx.fillStyle = colors[String(tile)] || '#3a3a50';
+      ctx.fillRect(c * tileSize, r * tileSize, tileSize, tileSize);
+      ctx.strokeStyle = 'rgba(255,255,255,0.03)';
+      ctx.strokeRect(c * tileSize, r * tileSize, tileSize, tileSize);
+    }
+  }
+
+  ctx.fillStyle = WALL_COLOR;
+  ctx.fillRect(0, 0, cols * tileSize, 4);
+
+  for (const f of furniture) {
+    const fx = f.x * tileSize;
+    const fy = f.y * tileSize;
+    const fw = (f.w || 2) * tileSize;
+    const fh = (f.h || 2) * tileSize;
+
+    if (f.type === 'desk') {
+      ctx.fillStyle = DESK_COLOR;
+      ctx.fillRect(fx, fy, fw, fh);
+      ctx.fillStyle = DESK_TOP;
+      ctx.fillRect(fx + 2, fy + 2, fw - 4, 6);
+      const mx = fx + fw / 2 - 8;
+      ctx.fillStyle = MONITOR_COLOR;
+      ctx.fillRect(mx, fy + 4, 16, 12);
+      ctx.fillStyle = MONITOR_SCREEN;
+      ctx.fillRect(mx + 2, fy + 6, 12, 8);
+      if (f.label) {
+        ctx.fillStyle = 'rgba(255,255,255,0.6)';
+        ctx.font = '8px monospace';
+        ctx.textAlign = 'center';
+        ctx.fillText(f.label, fx + fw / 2, fy + fh + 12);
+      }
+    } else if (f.type === 'table') {
+      ctx.fillStyle = TABLE_COLOR;
+      ctx.fillRect(fx, fy, fw, fh);
+      ctx.fillStyle = '#7a6a4a';
+      ctx.fillRect(fx + 4, fy + 4, fw - 8, fh - 8);
+    } else if (f.type === 'sofa') {
+      ctx.fillStyle = SOFA_COLOR;
+      ctx.fillRect(fx, fy, 48, 32);
+      ctx.fillStyle = '#aa5555';
+      ctx.fillRect(fx + 4, fy + 4, 40, 24);
+    } else if (f.type === 'coffee') {
+      ctx.fillStyle = '#664422';
+      ctx.fillRect(fx + 8, fy + 8, 16, 20);
+      ctx.fillStyle = '#886644';
+      ctx.fillRect(fx + 6, fy + 6, 20, 4);
+    }
+  }
+
+  ctx.restore();
+  return { scale, offsetX, offsetY, tileSize };
+}
+
+export function worldToTile(mapData, renderInfo, canvasX, canvasY) {
+  const { scale, offsetX, offsetY, tileSize } = renderInfo;
+  const wx = (canvasX - offsetX) / scale;
+  const wy = (canvasY - offsetY) / scale;
+  return { col: Math.floor(wx / tileSize), row: Math.floor(wy / tileSize), worldX: wx, worldY: wy };
+}
+
+export function tileToCanvas(mapData, renderInfo, col, row) {
+  const { scale, offsetX, offsetY, tileSize } = renderInfo;
+  return { x: offsetX + col * tileSize * scale + (tileSize * scale) / 2, y: offsetY + row * tileSize * scale + (tileSize * scale) / 2 };
+}

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

@@ -0,0 +1,203 @@
+import React, { useState, useEffect } from 'react';
+import { getAgentTasks, getAgentTokenUsage } from '../../../api';
+
+const STATUS_BADGE = {
+  pending: { label: '대기', bg: '#92400e' },
+  approved: { label: '승인됨', bg: '#1e40af' },
+  working: { label: '진행중', bg: '#3730a3' },
+  succeeded: { label: '완료', bg: '#065f46' },
+  failed: { label: '실패', bg: '#7f1d1d' },
+  rejected: { label: '거절됨', bg: '#9a3412' },
+};
+
+const AGENT_COMMANDS = {
+  stock: [
+    { action: 'fetch_news', label: '뉴스 수집', icon: '📰' },
+    { action: 'list_alerts', label: '알람 목록', icon: '🔔' },
+    { action: 'test_telegram', label: 'TG 테스트', icon: '📨' },
+  ],
+  music: [
+    { action: 'compose', label: '작곡 시작', icon: '🎵', needsInput: true },
+    { action: 'credits', label: '크레딧', icon: '💳' },
+  ],
+  blog: [
+    { action: 'research', label: '키워드 리서치', icon: '🔍', needsInput: true },
+    { action: 'list_trend_keywords', label: '트렌드 목록', icon: '📋' },
+  ],
+  realestate: [
+    { action: 'fetch_matches', label: '매칭 리포트', icon: '🏢' },
+    { action: 'dashboard', label: '대시보드', icon: '📊' },
+  ],
+};
+
+const AgentColumn = ({ agentId, meta, agentState, notification, onCommand, onApproval, onClearNotification }) => {
+  const [tasks, setTasks] = useState([]);
+  const [input, setInput] = useState('');
+  const [activeCommand, setActiveCommand] = useState(null);
+  const [tokenUsage, setTokenUsage] = useState(null);
+  const [expanded, setExpanded] = useState(false);
+
+  const state = agentState || { state: 'offline' };
+  const commands = AGENT_COMMANDS[agentId] || [];
+  const needsAttention = state.state === 'waiting' || notification > 0;
+  const isOpen = expanded || needsAttention;
+
+  useEffect(() => {
+    getAgentTasks(agentId, 10)
+      .then(d => setTasks(d.tasks || []))
+      .catch(() => setTasks([]));
+  }, [agentId]);
+
+  // Refresh tasks when state changes to idle (task likely completed)
+  useEffect(() => {
+    if (state.state === 'idle' && state.detail) {
+      getAgentTasks(agentId, 10)
+        .then(d => setTasks(d.tasks || []))
+        .catch(() => {});
+    }
+  }, [agentId, state.state, state.detail]);
+
+  // 오늘자 AI 토큰 사용량 폴링 (30초 간격 + 작업 완료 시 즉시 갱신)
+  useEffect(() => {
+    let cancelled = false;
+    const fetchUsage = () => {
+      getAgentTokenUsage(agentId, 1)
+        .then(d => { if (!cancelled) setTokenUsage(d); })
+        .catch(() => {});
+    };
+    fetchUsage();
+    const interval = setInterval(fetchUsage, 30000);
+    return () => {
+      cancelled = true;
+      clearInterval(interval);
+    };
+  }, [agentId, state.state, state.detail]);
+
+  const handleQuickAction = (cmd) => {
+    if (cmd.needsInput) {
+      setActiveCommand(cmd.action);
+    } else {
+      onCommand(agentId, cmd.action, {});
+    }
+    onClearNotification();
+  };
+
+  const handleSend = () => {
+    if (!input.trim() || !activeCommand) return;
+    const params = activeCommand === 'compose' ? { prompt: input }
+      : activeCommand === 'research' ? { keyword: input }
+      : { message: input };
+    onCommand(agentId, activeCommand, params);
+    setInput('');
+    setActiveCommand(null);
+  };
+
+  const formatTaskTime = (task) => {
+    const iso = task.completed_at || task.created_at;
+    if (!iso) return '';
+    const d = new Date(iso);
+    if (isNaN(d.getTime())) return '';
+    const now = new Date();
+    const pad = (n) => String(n).padStart(2, '0');
+    const hm = `${pad(d.getHours())}:${pad(d.getMinutes())}`;
+    const sameDay = d.toDateString() === now.toDateString();
+    const yesterday = new Date(now); yesterday.setDate(now.getDate() - 1);
+    const isYesterday = d.toDateString() === yesterday.toDateString();
+    if (sameDay) return `오늘 ${hm}`;
+    if (isYesterday) return `어제 ${hm}`;
+    return `${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${hm}`;
+  };
+
+  const handleHeaderClick = (e) => {
+    e.stopPropagation();
+    setExpanded(v => !v);
+    onClearNotification();
+  };
+
+  return (
+    <div className={`ao-col ${isOpen ? 'ao-col--open' : 'ao-col--collapsed'} ${needsAttention ? 'ao-col--attention' : ''}`} onClick={onClearNotification}>
+      <div className="ao-col-header" style={{ borderColor: meta.color }} onClick={handleHeaderClick}>
+        <span className="ao-col-name" style={{ color: meta.color }}>{meta.name}</span>
+        {tokenUsage && tokenUsage.total_tokens > 0 && (
+          <span
+            className="ao-col-tokens"
+            title={`오늘 ${tokenUsage.task_count}건 작업 · ${tokenUsage.total_tokens.toLocaleString()} 토큰`}
+          >
+            🧮 {tokenUsage.total_tokens.toLocaleString()}
+          </span>
+        )}
+        <span className={`ao-col-state ao-col-state--${state.state}`}>{state.state}</span>
+        {notification > 0 && <span className="ao-col-badge">{notification}</span>}
+        <span className="ao-col-chevron" aria-hidden="true">{isOpen ? '▾' : '▸'}</span>
+      </div>
+
+      <div className="ao-col-body">
+
+
+      {state.detail && (
+        <div className="ao-col-detail">{state.detail}</div>
+      )}
+
+      {state.state === 'waiting' && state.taskId && (
+        <div className="ao-col-approval">
+          <span>승인 대기</span>
+          <button className="ao-btn ao-btn--approve" onClick={() => onApproval(agentId, state.taskId, true)}>승인</button>
+          <button className="ao-btn ao-btn--reject" onClick={() => onApproval(agentId, state.taskId, false)}>거절</button>
+        </div>
+      )}
+
+      <div className="ao-col-commands">
+        {commands.map(cmd => (
+          <button key={cmd.action} className="ao-cmd-btn" onClick={() => handleQuickAction(cmd)}>
+            {cmd.icon} {cmd.label}
+          </button>
+        ))}
+      </div>
+
+      {activeCommand && (
+        <div className="ao-col-input">
+          <input
+            className="ao-chat-input"
+            value={input}
+            onChange={e => setInput(e.target.value)}
+            onKeyDown={e => e.key === 'Enter' && handleSend()}
+            placeholder="입력..."
+            autoFocus
+          />
+          <button className="ao-btn ao-btn--send" onClick={handleSend}>전송</button>
+        </div>
+      )}
+
+      <div className="ao-col-tasks">
+        <div className="ao-col-tasks-title">최근 작업</div>
+        {tasks.length === 0 && <div className="ao-col-empty">이력 없음</div>}
+        {tasks.map(task => {
+          const badge = STATUS_BADGE[task.status] || STATUS_BADGE.pending;
+          return (
+            <div key={task.id} className="ao-col-task">
+              <div className="ao-col-task-row">
+                <span className="ao-col-task-type">{task.task_type}</span>
+                <span className="ao-col-task-badge" style={{ background: badge.bg }}>{badge.label}</span>
+              </div>
+              <div className="ao-col-task-time">
+                {formatTaskTime(task)}
+                {task.result_data?.telegram_sent !== undefined && (
+                  <span className="ao-doc-tg-status">{task.result_data.telegram_sent ? ' TG OK' : ' TG Fail'}</span>
+                )}
+              </div>
+              {task.result_data && (
+                <details className="ao-col-task-detail">
+                  <summary>결과</summary>
+                  <pre>{JSON.stringify(task.result_data, null, 2)}</pre>
+                </details>
+              )}
+            </div>
+          );
+        })}
+      </div>
+      </div>
+    </div>
+  );
+};
+
+export default AgentColumn;

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

@@ -0,0 +1,125 @@
+import React, { useState } from 'react';
+
+const AGENT_COMMANDS = {
+  stock: [
+    { action: 'fetch_news', label: '뉴스 수집', icon: '📰' },
+    { action: 'list_alerts', label: '알람 목록', icon: '🔔' },
+    { action: 'test_telegram', label: '텔레그램 테스트', icon: '📨' },
+  ],
+  music: [
+    { action: 'compose', label: '작곡 시작', icon: '🎵', needsInput: true },
+    { action: 'credits', label: '크레딧 확인', icon: '💳' },
+  ],
+  blog: [
+    { action: 'research', label: '키워드 리서치', icon: '🔍', needsInput: true },
+    { action: 'list_trend_keywords', label: '트렌드 목록', icon: '📋' },
+  ],
+  realestate: [
+    { action: 'fetch_matches', label: '매칭 리포트', icon: '🏢' },
+    { action: 'dashboard', label: '대시보드', icon: '📊' },
+  ],
+};
+
+const AGENT_NAMES = {
+  stock: '주식 트레이더',
+  music: '음악 프로듀서',
+  blog: '블로그 마케터',
+  realestate: '청약 애널리스트',
+};
+
+const ChatPanel = ({ agentId, agentState, onCommand, onApproval, onClose }) => {
+  const [input, setInput] = useState('');
+  const [activeCommand, setActiveCommand] = useState(null);
+
+  const commands = AGENT_COMMANDS[agentId] || [];
+  const state = agentState || {};
+
+  const handleSend = () => {
+    if (!input.trim() || !activeCommand) return;
+    const params = activeCommand === 'compose' ? { prompt: input }
+      : activeCommand === 'research' ? { keyword: input }
+      : { message: input };
+    onCommand(agentId, activeCommand, params);
+    setInput('');
+    setActiveCommand(null);
+  };
+
+  const handleQuickAction = (cmd) => {
+    if (cmd.needsInput) {
+      setActiveCommand(cmd.action);
+    } else {
+      onCommand(agentId, cmd.action, {});
+    }
+  };
+
+  return (
+    <div className="ao-chat-panel">
+      <div className="ao-chat-header">
+        <span className="ao-chat-title">
+          {AGENT_NAMES[agentId] || agentId}
+        </span>
+        <span className={`ao-chat-state ao-chat-state--${state.state || 'idle'}`}>
+          {state.state || 'idle'}
+        </span>
+        <button className="ao-chat-close" onClick={onClose}>&times;</button>
+      </div>
+
+      {state.detail && (
+        <div className="ao-chat-detail">{state.detail}</div>
+      )}
+
+      {state.state === 'waiting' && state.taskId && (
+        <div className="ao-chat-approval">
+          <p>승인 대기 중인 작업이 있습니다</p>
+          <div className="ao-chat-approval-btns">
+            <button className="ao-btn ao-btn--approve"
+              onClick={() => onApproval(agentId, state.taskId, true)}>
+              ✅ 승인
+            </button>
+            <button className="ao-btn ao-btn--reject"
+              onClick={() => onApproval(agentId, state.taskId, false)}>
+              ❌ 거절
+            </button>
+          </div>
+        </div>
+      )}
+
+      <div className="ao-chat-commands">
+        {commands.map(cmd => (
+          <button key={cmd.action} className="ao-cmd-btn"
+            onClick={() => handleQuickAction(cmd)}>
+            <span>{cmd.icon}</span> {cmd.label}
+          </button>
+        ))}
+      </div>
+
+      {activeCommand && (
+        <div className="ao-chat-input-area">
+          <input
+            type="text"
+            className="ao-chat-input"
+            value={input}
+            onChange={e => setInput(e.target.value)}
+            onKeyDown={e => e.key === 'Enter' && handleSend()}
+            placeholder={
+              activeCommand === 'compose' ? '프롬프트 입력...'
+              : activeCommand === 'research' ? '키워드 입력...'
+              : '메시지 입력...'
+            }
+            autoFocus
+          />
+          <button className="ao-btn ao-btn--send" onClick={handleSend}>전송</button>
+        </div>
+      )}
+
+      {state.lastResult && (
+        <div className="ao-chat-result">
+          <h4>최근 결과</h4>
+          <pre>{JSON.stringify(state.lastResult, null, 2)}</pre>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ChatPanel;

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

@@ -0,0 +1,115 @@
+import React, { useState } from 'react';
+
+const TARGETS = [
+  { id: 'stock', name: '주식 트레이더' },
+  { id: 'music', name: '음악 프로듀서' },
+  { id: 'blog', name: '블로그 마케터' },
+  { id: 'realestate', name: '청약 애널리스트' },
+];
+
+const TARGET_ICONS = {
+  stock: '📈',
+  music: '🎵',
+  blog: '✍️',
+  realestate: '🏢',
+};
+
+const QUICK_COMMANDS = [
+  { target: 'stock', action: 'fetch_news', label: '뉴스 수집' },
+  { target: 'stock', action: 'test_telegram', label: 'TG 테스트' },
+  { target: 'music', action: 'credits', label: '크레딧 확인' },
+  { target: 'blog', action: 'list_trend_keywords', label: '트렌드 목록' },
+  { target: 'realestate', action: 'fetch_matches', label: '매칭 리포트' },
+  { target: 'realestate', action: 'dashboard', label: '청약 대시보드' },
+];
+
+const CommandColumn = ({ agents, onCommand }) => {
+  const [target, setTarget] = useState('stock');
+  const [action, setAction] = useState('');
+  const [params, setParams] = useState('');
+  const [history, setHistory] = useState([]);
+
+  const handleSend = () => {
+    if (!action.trim()) return;
+    let parsedParams = {};
+    if (params.trim()) {
+      try { parsedParams = JSON.parse(params); }
+      catch { parsedParams = { message: params }; }
+    }
+    onCommand(target, action, parsedParams);
+    setHistory(prev => [{
+      time: new Date().toLocaleTimeString(),
+      target,
+      action,
+      params: parsedParams,
+    }, ...prev].slice(0, 20));
+    setAction('');
+    setParams('');
+  };
+
+  const handleQuick = (cmd) => {
+    onCommand(cmd.target, cmd.action, {});
+    setHistory(prev => [{
+      time: new Date().toLocaleTimeString(),
+      target: cmd.target,
+      action: cmd.action,
+      params: {},
+    }, ...prev].slice(0, 20));
+  };
+
+  return (
+    <div className="ao-col ao-col--command">
+      <div className="ao-col-header" style={{ borderColor: '#8b5cf6' }}>
+        <span className="ao-col-name" style={{ color: '#8b5cf6' }}>CEO 명령</span>
+      </div>
+
+      <div className="ao-cmd-form">
+        <div className="ao-cmd-row">
+          <select className="ao-cmd-select" value={target} onChange={e => setTarget(e.target.value)}>
+            {TARGETS.map(t => (
+              <option key={t.id} value={t.id}>{t.name}</option>
+            ))}
+          </select>
+        </div>
+        <input
+          className="ao-chat-input"
+          value={action}
+          onChange={e => setAction(e.target.value)}
+          onKeyDown={e => e.key === 'Enter' && handleSend()}
+          placeholder="명령어 (fetch_news, compose...)"
+        />
+        <input
+          className="ao-chat-input"
+          value={params}
+          onChange={e => setParams(e.target.value)}
+          onKeyDown={e => e.key === 'Enter' && handleSend()}
+          placeholder="파라미터 (JSON 또는 텍스트)"
+        />
+        <button className="ao-btn ao-btn--send ao-cmd-send" onClick={handleSend}>전송</button>
+      </div>
+
+      <div className="ao-col-commands">
+        {QUICK_COMMANDS.map((cmd, i) => (
+          <button key={i} className="ao-cmd-btn" onClick={() => handleQuick(cmd)}>
+            {TARGET_ICONS[cmd.target] || '🤖'} {cmd.label}
+          </button>
+        ))}
+      </div>
+
+      <div className="ao-col-tasks">
+        <div className="ao-col-tasks-title">명령 이력</div>
+        {history.length === 0 && <div className="ao-col-empty">이력 없음</div>}
+        {history.map((h, i) => (
+          <div key={i} className="ao-col-task">
+            <div className="ao-col-task-row">
+              <span className="ao-col-task-type">{h.target}.{h.action}</span>
+              <span className="ao-col-task-time">{h.time}</span>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default CommandColumn;

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

@@ -0,0 +1,195 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { getActivityFeed, getAgentTasks, getAgentLogs } from '../../../api';
+
+const STATUS_BADGE = {
+  pending: { label: '대기', color: '#fbbf24' },
+  approved: { label: '승인됨', color: '#60a5fa' },
+  working: { label: '진행중', color: '#818cf8' },
+  succeeded: { label: '완료', color: '#34d399' },
+  failed: { label: '실패', color: '#f87171' },
+  rejected: { label: '거절됨', color: '#fb923c' },
+};
+
+const LOG_LEVEL_COLOR = {
+  info: '#60a5fa',
+  warning: '#fbbf24',
+  error: '#f87171',
+};
+
+const DocumentPanel = ({ onClose }) => {
+  const [tab, setTab] = useState('feed');
+  const [feed, setFeed] = useState([]);
+  const [feedLoading, setFeedLoading] = useState(false);
+
+  const [selectedAgent, setSelectedAgent] = useState('stock');
+  const [detailTab, setDetailTab] = useState('tasks');
+  const [tasks, setTasks] = useState([]);
+  const [logs, setLogs] = useState([]);
+  const [detailLoading, setDetailLoading] = useState(false);
+
+  const loadFeed = useCallback(() => {
+    setFeedLoading(true);
+    getActivityFeed(80)
+      .then(data => setFeed(data.items || []))
+      .catch(() => setFeed([]))
+      .finally(() => setFeedLoading(false));
+  }, []);
+
+  const loadDetail = useCallback(() => {
+    setDetailLoading(true);
+    Promise.all([
+      getAgentTasks(selectedAgent, 30).then(d => d.tasks || []).catch(() => []),
+      getAgentLogs(selectedAgent, 50).then(d => d.logs || []).catch(() => []),
+    ]).then(([t, l]) => {
+      setTasks(t);
+      setLogs(l);
+    }).finally(() => setDetailLoading(false));
+  }, [selectedAgent]);
+
+  useEffect(() => {
+    if (tab === 'feed') loadFeed();
+    else loadDetail();
+  }, [tab, loadFeed, loadDetail]);
+
+  const formatTime = (t) => t ? t.replace('T', ' ').slice(0, 19) : '';
+
+  return (
+    <div className="ao-doc-panel">
+      <div className="ao-doc-header">
+        <span className="ao-doc-title">CEO 보고서</span>
+        <button className="ao-chat-close" onClick={onClose}>&times;</button>
+      </div>
+
+      <div className="ao-doc-tabs">
+        <button
+          className={`ao-doc-tab ${tab === 'feed' ? 'ao-doc-tab--active' : ''}`}
+          onClick={() => setTab('feed')}
+        >활동 피드</button>
+        <button
+          className={`ao-doc-tab ${tab === 'detail' ? 'ao-doc-tab--active' : ''}`}
+          onClick={() => setTab('detail')}
+        >에이전트별</button>
+      </div>
+
+      {tab === 'feed' && (
+        <div className="ao-doc-feed">
+          <div className="ao-doc-feed-toolbar">
+            <button className="ao-cmd-btn" onClick={loadFeed}>새로고침</button>
+          </div>
+          {feedLoading && <p className="ao-history-empty">로딩 중...</p>}
+          {!feedLoading && feed.length === 0 && <p className="ao-history-empty">활동 없음</p>}
+          {feed.map((item, i) => (
+            <div key={i} className="ao-doc-feed-item">
+              <div className="ao-doc-feed-row">
+                <span className={`ao-doc-agent-tag ao-doc-agent-tag--${item.agent_id}`}>
+                  {item.agent_id}
+                </span>
+                {item.type === 'task' ? (
+                  <span className="ao-history-badge" style={{ background: (STATUS_BADGE[item.status] || STATUS_BADGE.pending).color }}>
+                    {(STATUS_BADGE[item.status] || STATUS_BADGE.pending).label}
+                  </span>
+                ) : (
+                  <span className="ao-doc-log-level" style={{ color: LOG_LEVEL_COLOR[item.level] || '#888' }}>
+                    [{item.level}]
+                  </span>
+                )}
+                {item.telegram_sent !== undefined && (
+                  <span className="ao-doc-tg-status">{item.telegram_sent ? 'TG OK' : 'TG Fail'}</span>
+                )}
+              </div>
+              <div className="ao-doc-feed-msg">{item.message}</div>
+              <div className="ao-doc-feed-time">
+                {formatTime(item.created_at)}
+                {item.duration_seconds != null && ` · ${item.duration_seconds}s`}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {tab === 'detail' && (
+        <div className="ao-doc-detail">
+          <div className="ao-doc-agent-select">
+            {[
+              { id: 'stock', name: '주식 트레이더' },
+              { id: 'music', name: '음악 프로듀서' },
+              { id: 'blog', name: '블로그 마케터' },
+              { id: 'realestate', name: '청약 애널리스트' },
+            ].map(a => (
+              <button key={a.id}
+                className={`ao-doc-tab ${selectedAgent === a.id ? 'ao-doc-tab--active' : ''}`}
+                onClick={() => setSelectedAgent(a.id)}
+              >{a.name}</button>
+            ))}
+          </div>
+          <div className="ao-doc-detail-tabs">
+            <button
+              className={`ao-doc-tab ${detailTab === 'tasks' ? 'ao-doc-tab--active' : ''}`}
+              onClick={() => setDetailTab('tasks')}
+            >작업 ({tasks.length})</button>
+            <button
+              className={`ao-doc-tab ${detailTab === 'logs' ? 'ao-doc-tab--active' : ''}`}
+              onClick={() => setDetailTab('logs')}
+            >로그 ({logs.length})</button>
+            <button className="ao-cmd-btn" onClick={loadDetail} style={{marginLeft:'auto'}}>새로고침</button>
+          </div>
+
+          {detailLoading && <p className="ao-history-empty">로딩 중...</p>}
+
+          {!detailLoading && detailTab === 'tasks' && (
+            <div className="ao-history-list">
+              {tasks.length === 0 && <p className="ao-history-empty">이력 없음</p>}
+              {tasks.map(task => {
+                const badge = STATUS_BADGE[task.status] || STATUS_BADGE.pending;
+                return (
+                  <div key={task.id} className="ao-history-item">
+                    <div className="ao-history-item-header">
+                      <span className="ao-history-type">{task.task_type}</span>
+                      <span className="ao-history-badge" style={{ background: badge.color }}>
+                        {badge.label}
+                      </span>
+                    </div>
+                    <div className="ao-history-time">
+                      {formatTime(task.created_at)}
+                      {task.completed_at && ` → ${formatTime(task.completed_at)}`}
+                    </div>
+                    {task.result_data && (
+                      <details className="ao-history-detail">
+                        <summary>
+                          결과 보기
+                          {task.result_data.telegram_sent !== undefined && (
+                            <span className="ao-doc-tg-status">
+                              {task.result_data.telegram_sent ? ' TG OK' : ' TG Fail'}
+                            </span>
+                          )}
+                        </summary>
+                        <pre>{JSON.stringify(task.result_data, null, 2)}</pre>
+                      </details>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          )}
+
+          {!detailLoading && detailTab === 'logs' && (
+            <div className="ao-history-list">
+              {logs.length === 0 && <p className="ao-history-empty">로그 없음</p>}
+              {logs.map(log => (
+                <div key={log.id} className="ao-doc-log-item">
+                  <span className="ao-doc-log-level" style={{ color: LOG_LEVEL_COLOR[log.level] || '#888' }}>
+                    [{log.level}]
+                  </span>
+                  <span className="ao-doc-log-msg">{log.message}</span>
+                  <span className="ao-doc-feed-time">{formatTime(log.created_at)}</span>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default DocumentPanel;

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

@@ -0,0 +1,103 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+
+export function useAgentManager() {
+  const [agents, setAgents] = useState({});
+  const [pendingTasks, setPendingTasks] = useState([]);
+  const [connected, setConnected] = useState(false);
+  const [notifications, setNotifications] = useState({});
+  const wsRef = useRef(null);
+  const reconnectTimer = useRef(null);
+
+  const connect = useCallback(() => {
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const wsUrl = `${protocol}//${window.location.host}/api/agent-office/ws`;
+
+    const ws = new WebSocket(wsUrl);
+    wsRef.current = ws;
+
+    ws.onopen = () => {
+      setConnected(true);
+      if (reconnectTimer.current) clearTimeout(reconnectTimer.current);
+    };
+
+    ws.onclose = () => {
+      setConnected(false);
+      reconnectTimer.current = setTimeout(connect, 3000);
+    };
+
+    ws.onerror = () => { ws.close(); };
+
+    ws.onmessage = (event) => {
+      const msg = JSON.parse(event.data);
+
+      switch (msg.type) {
+        case 'init': {
+          const agentMap = {};
+          for (const a of msg.agents) {
+            agentMap[a.agent_id] = { state: a.state, detail: a.detail };
+          }
+          setAgents(agentMap);
+          setPendingTasks(msg.pending || []);
+          break;
+        }
+        case 'agent_state':
+          setAgents(prev => ({
+            ...prev,
+            [msg.agent]: { state: msg.state, detail: msg.detail, taskId: msg.task_id },
+          }));
+          break;
+        case 'task_complete':
+          setAgents(prev => ({
+            ...prev,
+            [msg.agent]: { ...prev[msg.agent], lastResult: msg.result },
+          }));
+          setPendingTasks(prev => prev.filter(id => id !== msg.task_id));
+          break;
+        case 'command_result':
+          setAgents(prev => ({
+            ...prev,
+            [msg.agent]: { ...prev[msg.agent], lastCommand: msg.result },
+          }));
+          break;
+        case 'notification':
+          setNotifications(prev => ({
+            ...prev,
+            [msg.agent]: (prev[msg.agent] || 0) + 1,
+          }));
+          break;
+        default:
+          break;
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    connect();
+    return () => {
+      if (wsRef.current) wsRef.current.close();
+      if (reconnectTimer.current) clearTimeout(reconnectTimer.current);
+    };
+  }, [connect]);
+
+  const sendCommand = useCallback((agent, action, params = {}) => {
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      wsRef.current.send(JSON.stringify({ type: 'command', agent, action, params }));
+    }
+  }, []);
+
+  const sendApproval = useCallback((agent, taskId, approved) => {
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      wsRef.current.send(JSON.stringify({ type: 'approval', agent, task_id: taskId, approved }));
+    }
+  }, []);
+
+  const clearNotifications = useCallback((agentId) => {
+    setNotifications(prev => {
+      const next = { ...prev };
+      delete next[agentId];
+      return next;
+    });
+  }, []);
+
+  return { agents, pendingTasks, connected, notifications, sendCommand, sendApproval, clearNotifications };
+}

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

@@ -0,0 +1,74 @@
+import { useRef, useEffect, useCallback } from 'react';
+import { OfficeRenderer } from '../canvas/OfficeRenderer';
+import officeMap from '../assets/office-map.json';
+
+export function useOfficeCanvas(containerRef, onAgentClick, onCeoClick) {
+  const rendererRef = useRef(null);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    const canvas = document.createElement('canvas');
+    canvas.style.display = 'block';
+    canvas.style.width = '100%';
+    canvas.style.height = '100%';
+    canvas.style.imageRendering = 'pixelated';
+    containerRef.current.appendChild(canvas);
+
+    const renderer = new OfficeRenderer(canvas, officeMap);
+    rendererRef.current = renderer;
+
+    const resize = () => {
+      const rect = containerRef.current.getBoundingClientRect();
+      renderer.resize(rect.width, rect.height);
+    };
+
+    resize();
+    renderer.start();
+
+    renderer.setOnClick((agentId) => {
+      if (onAgentClick) onAgentClick(agentId);
+    });
+
+    renderer.setOnCeoClick(() => {
+      if (onCeoClick) onCeoClick();
+    });
+
+    const handleClick = (e) => {
+      const rect = canvas.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      renderer.handleClick(x, y);
+    };
+
+    canvas.addEventListener('click', handleClick);
+    window.addEventListener('resize', resize);
+
+    return () => {
+      renderer.stop();
+      canvas.removeEventListener('click', handleClick);
+      window.removeEventListener('resize', resize);
+      if (containerRef.current && canvas.parentNode === containerRef.current) {
+        containerRef.current.removeChild(canvas);
+      }
+    };
+  }, [containerRef, onAgentClick, onCeoClick]);
+
+  const updateAgentState = useCallback((agentId, state, detail) => {
+    rendererRef.current?.updateAgentState(agentId, state, detail);
+  }, []);
+
+  const moveAgent = useCallback((agentId, target) => {
+    rendererRef.current?.moveAgent(agentId, target);
+  }, []);
+
+  const setAgentNotification = useCallback((agentId, count) => {
+    rendererRef.current?.setAgentNotification(agentId, count);
+  }, []);
+
+  const setCeoDocBadge = useCallback((count) => {
+    rendererRef.current?.setCeoDocBadge(count);
+  }, []);
+
+  return { updateAgentState, moveAgent, setAgentNotification, setCeoDocBadge };
+}

src/pages/effect-lab/EffectLab.jsx

@@ -25,6 +25,17 @@ const LAB_ITEMS = [
         icon: '📅',
         status: 'live',
     },
+    {
+        id: 'agent-office',
+        path: '/agent-office',
+        title: 'Agent Office',
+        category: 'AI · 자동화',
+        desc: 'AI 에이전트들이 사무실에서 자동으로 작업하는 가상 오피스',
+        tags: ['Canvas 2D', 'WebSocket', 'AI Agent', 'Telegram'],
+        accent: '#8b5cf6',
+        icon: '🏢',
+        status: 'wip',
+    },
 ];
 
 const STATUS_LABEL = {

src/pages/lotto/Functions.jsx

@@ -1,460 +1,32 @@
-import React, { useMemo } from 'react';
+import { useState } from 'react';
-import {
+import BriefingTab from './tabs/BriefingTab';
-    fmtKST, Ball, NumberRow, copyNumbers,
+import AnalysisTab from './tabs/AnalysisTab';
-    buildMetricsFromFrequency, BEST_PICKS_DEFAULT_SHOW,
+import PurchaseTab from './tabs/PurchaseTab';
-} from './lottoUtils';
 
-/* ── hooks ──────────────────────────────────────────────────────── */
+const TABS = [
-import useLottoData from './hooks/useLottoData';
+    { id: 'briefing', label: '🗓 이번 주 브리핑' },
-import usePurchases from './hooks/usePurchases';
+    { id: 'analysis', label: '📊 분석·통계' },
-import useManualRecommend from './hooks/useManualRecommend';
+    { id: 'purchase', label: '💰 구매·성과' },
+];
 
-/* ── components ─────────────────────────────────────────────────── */
-import MetricBlock from './components/MetricBlock';
-import FrequencyChart from './components/FrequencyChart';
-import PerformanceBanner from './components/PerformanceBanner';
-import CombinedRecommendPanel from './components/CombinedRecommendPanel';
-import ReportPanel from './components/ReportPanel';
-import PersonalAnalysisPanel from './components/PersonalAnalysisPanel';
-import PurchasePanel from './components/PurchasePanel';
-
-/* ── component ──────────────────────────────────────────────────── */
 export default function Functions() {
-    const ld = useLottoData();
+    const [tab, setTab] = useState('briefing');
-    const pur = usePurchases();
-    const mr = useManualRecommend();
-
-    /* ── derived ────────────────────────────────────────────────── */
-    const overallMetrics = useMemo(() => buildMetricsFromFrequency(ld.stats?.frequency), [ld.stats]);
-    const visibleBestPicks = ld.bestPicksExpanded ? ld.bestPicks : ld.bestPicks.slice(0, BEST_PICKS_DEFAULT_SHOW);
-
-    /* ── merged error ───────────────────────────────────────────── */
-    const error = ld.error || mr.error;
-    const clearError = () => { ld.setError(''); mr.setError(''); };
-
-    /* ── render ──────────────────────────────────────────────────── */
     return (
         <div className="lotto-functions">
-            {error ? (
+            <nav className="lotto-tabs">
-                <div className="lotto-alert">
+                {TABS.map(t => (
-                    <div>
-                        <p className="lotto-alert__title">오류</p>
-                        <p className="lotto-alert__message">{error}</p>
-                    </div>
-                    <button className="button ghost small" onClick={clearError}>닫기</button>
-                </div>
-            ) : null}
-
-            {/* ── 신뢰도 배너 ── */}
-            <PerformanceBanner perf={ld.perfStats} />
-
-            {/* ── 종합 추론 번호 추천 ── */}
-            <CombinedRecommendPanel
-                combined={ld.combined}
-                history={ld.combinedHistory}
-                loading={ld.combinedLoading}
-                histLoading={ld.combinedHistLoading}
-                onRun={ld.runCombinedRecommend}
-                onCopy={copyNumbers}
-            />
-
-            {/* ── 최신 회차 + 시뮬레이션 추천 ── */}
-            <div className="lotto-grid">
-                {/* Latest Draw */}
-                <section className="lotto-panel">
-                    <div className="lotto-panel__head">
-                        <div>
-                            <p className="lotto-panel__eyebrow">Latest Draw</p>
-                            <h3>최신 회차</h3>
-                            <p className="lotto-panel__sub">최신 회차와 번호를 빠르게 확인할 수 있습니다.</p>
-                        </div>
-                        <div className="lotto-panel__actions">
-                            {ld.loading.latest ? <span className="lotto-chip">로딩 중</span> : null}
-                            <button className="button ghost small" onClick={ld.refreshLatest} disabled={ld.loading.latest}>
-                                새로고침
-                            </button>
-                        </div>
-                    </div>
-                    {ld.latest ? (
-                        <>
-                            <div className="lotto-meta">
-                                <div>
-                                    <p className="lotto-meta__title">{ld.latest.drawNo}회</p>
-                                    <p className="lotto-meta__date">{ld.latest.date}</p>
-                                </div>
-                                <button className="button small" onClick={() => copyNumbers(ld.latest.numbers)}>
-                                    번호 복사
-                                </button>
-                            </div>
-                            <NumberRow nums={ld.latest.numbers} />
-                            <p className="lotto-bonus">보너스 <strong>{ld.latest.bonus}</strong></p>
-                            {overallMetrics && (
-                                <MetricBlock title="당첨 통계 (전체 회차)" metrics={overallMetrics} />
-                            )}
-                        </>
-                    ) : (
-                        <p className="lotto-empty">최신 회차 데이터가 없습니다.</p>
-                    )}
-                </section>
-
-                {/* Simulation Picks */}
-                <section className="lotto-panel">
-                    <div className="lotto-panel__head">
-                        <div>
-                            <p className="lotto-panel__eyebrow">Simulation Picks</p>
-                            <h3>시뮬레이션 추천</h3>
-                            <p className="lotto-panel__sub">
-                                하루 6회 몬테카를로 시뮬레이션으로 선별된 최적 번호입니다.
-                            </p>
-                        </div>
-                        <div className="lotto-panel__actions">
-                            {ld.loading.bestPicks ? <span className="lotto-chip">로딩 중</span> : null}
-                            {ld.simulating ? <span className="lotto-chip lotto-chip--active">분석 중</span> : null}
-                            <button className="button ghost small" onClick={ld.refreshBestPicks}
-                                disabled={ld.loading.bestPicks || ld.simulating}>
-                                새로고침
-                            </button>
-                            <button className="button small" onClick={ld.onSimulate}
-                                disabled={ld.simulating || ld.loading.bestPicks}>
-                                {ld.simulating ? '실행 중...' : '지금 실행'}
-                            </button>
-                        </div>
-                    </div>
-
-                    {ld.simResult && (
-                        <div className="lotto-sim-result">
-                            <p>완료: {ld.simResult.total_generated?.toLocaleString()}개 후보 → 상위 {ld.simResult.best_n_saved}개 저장</p>
-                            <p>최고 점수 {((ld.simResult.best_score ?? 0) * 100).toFixed(1)}% / 평균 {((ld.simResult.avg_score ?? 0) * 100).toFixed(1)}%</p>
-                        </div>
-                    )}
-
-                    {ld.bestPicks.length === 0 ? (
-                        <p className="lotto-empty">
-                            {ld.loading.bestPicks ? '불러오는 중...' : "시뮬레이션 결과가 없습니다. '지금 실행'으로 시작하세요."}
-                        </p>
-                    ) : (
-                        <>
-                            <div className="lotto-picks">
-                                {visibleBestPicks.map((pick) => (
-                                    <div key={pick.id} className="lotto-pick">
-                                        <span className="lotto-pick__rank">#{pick.rank}</span>
-                                        <div className="lotto-pick__content">
-                                            <NumberRow nums={pick.numbers} />
-                                            <div className="lotto-pick__score">
-                                                <span className="lotto-pick__score-label">
-                                                    {((pick.score_total ?? 0) * 100).toFixed(1)}%
-                                                </span>
-                                                <div className="lotto-pick__bar">
-                                                    <span style={{ width: `${(pick.score_total ?? 0) * 100}%` }} />
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <button className="button ghost small" onClick={() => copyNumbers(pick.numbers)}>
-                                            복사
-                                        </button>
-                                    </div>
-                                ))}
-                            </div>
-                            {ld.bestPicks.length > BEST_PICKS_DEFAULT_SHOW && (
                     <button
-                                    className="button ghost small lotto-history-toggle"
+                        key={t.id}
-                                    onClick={() => ld.setBestPicksExpanded((p) => !p)}
+                        className={tab === t.id ? 'active' : ''}
-                                    aria-expanded={ld.bestPicksExpanded}
+                        onClick={() => setTab(t.id)}
-                                >
+                    >{t.label}</button>
-                                    {ld.bestPicksExpanded ? '접기' : `모두 보기 (${ld.bestPicks.length}개)`}
-                                    <span className={`lotto-history-toggle__icon ${ld.bestPicksExpanded ? 'is-open' : ''}`} aria-hidden>▼</span>
-                                </button>
-                            )}
-                            <p className="lotto-panel__sub">
-                                갱신: {fmtKST(ld.bestPicks[0]?.created_at) || '-'}
-                                {ld.bestPicks[0]?.based_on_draw ? ` · ${ld.bestPicks[0].based_on_draw}회 기준` : ''}
-                            </p>
-                        </>
-                    )}
-                </section>
-            </div>
-
-            {/* ── 이번 주 공략 리포트 ── */}
-            <ReportPanel
-                report={ld.report}
-                history={ld.reportHistory}
-                loading={ld.reportLoading}
-                onRefresh={ld.refreshReport}
-                onSelectDrw={ld.loadSpecificReport}
-            />
-
-            {/* ── 통계 분석 ── */}
-            <section className="lotto-panel lotto-panel--wide">
-                <div className="lotto-panel__head">
-                    <div>
-                        <p className="lotto-panel__eyebrow">Analysis</p>
-                        <h3>통계 분석</h3>
-                        <p className="lotto-panel__sub">빈도, Z-score, 갭 분석으로 번호를 분류합니다.</p>
-                    </div>
-                    <div className="lotto-panel__actions">
-                        {ld.loading.analysis ? <span className="lotto-chip">로딩 중</span> : null}
-                        <button className="button ghost small" onClick={ld.refreshAnalysis} disabled={ld.loading.analysis}>
-                            새로고침
-                        </button>
-                    </div>
-                </div>
-                {ld.analysis ? (
-                    <div className="lotto-analysis">
-                        <div className="lotto-analysis__row">
-                            <div className="lotto-analysis__group">
-                                <p className="lotto-analysis__label">🔥 핫 번호 <span>출현 빈도 상위 10</span></p>
-                                <div className="lotto-row">
-                                    {(ld.analysis.hot_numbers ?? []).map((n) => <Ball key={n} n={n} />)}
-                                </div>
-                            </div>
-                            <div className="lotto-analysis__group">
-                                <p className="lotto-analysis__label">🧊 콜드 번호 <span>출현 빈도 하위 10</span></p>
-                                <div className="lotto-row">
-                                    {(ld.analysis.cold_numbers ?? []).map((n) => <Ball key={n} n={n} />)}
-                                </div>
-                            </div>
-                            <div className="lotto-analysis__group">
-                                <p className="lotto-analysis__label">⏰ 오버듀 번호 <span>오래 안 나온 번호 (회차 수)</span></p>
-                                <div className="lotto-row">
-                                    {(ld.analysis.overdue_numbers ?? []).map((n) => {
-                                        const stat = (ld.analysis.number_stats ?? []).find((s) => s.number === n);
-                                        return (
-                                            <div key={n} className="lotto-overdue">
-                                                <Ball n={n} />
-                                                <span className="lotto-overdue__gap">{stat?.gap ?? '-'}회</span>
-                                            </div>
-                                        );
-                                    })}
-                                </div>
-                            </div>
-                        </div>
-                        <div className="lotto-analysis__stats">
-                            <span>역대 합계 평균 <strong>{ld.analysis.mean_sum}</strong></span>
-                            <span>표준편차 <strong>±{ld.analysis.std_sum}</strong></span>
-                            <span>분석 회차 <strong>{ld.analysis.total_draws?.toLocaleString()}</strong></span>
-                            <span>
-                                홀수 3:짝수 3 확률{' '}
-                                <strong>
-                                    {ld.analysis.odd_distribution?.['3'] ? `${ld.analysis.odd_distribution['3']}%` : '-'}
-                                </strong>
-                            </span>
-                        </div>
-                    </div>
-                ) : (
-                    <p className="lotto-empty">
-                        {ld.loading.analysis ? '불러오는 중...' : '통계 분석 데이터가 없습니다.'}
-                    </p>
-                )}
-            </section>
-
-            {/* ── 전체 번호 분포 ── */}
-            <section className="lotto-panel lotto-panel--wide">
-                <div className="lotto-panel__head">
-                    <div>
-                        <p className="lotto-panel__eyebrow">Distribution</p>
-                        <h3>전체 회차 번호 분포</h3>
-                        <p className="lotto-panel__sub">1~45번 번호가 등장한 횟수를 기준으로 분포를 표시합니다.</p>
-                    </div>
-                    <div className="lotto-panel__actions">
-                        {ld.statsLoading ? <span className="lotto-chip">로딩 중</span> : null}
-                        {ld.stats?.total_draws ? (
-                            <span className="lotto-chip">{ld.stats.total_draws}회차</span>
-                        ) : null}
-                        <button className="button ghost small" onClick={ld.refreshStats} disabled={ld.statsLoading}>
-                            새로고침
-                        </button>
-                    </div>
-                </div>
-                {ld.statsError ? <p className="lotto-empty">{ld.statsError}</p> : null}
-                {ld.stats ? (
-                    <FrequencyChart stats={ld.stats} />
-                ) : (
-                    <p className="lotto-empty">통계 데이터를 불러오지 못했습니다.</p>
-                )}
-            </section>
-
-            {/* ── 내 번호 패턴 ── */}
-            <PersonalAnalysisPanel data={ld.personalAnalysis} loading={ld.personalLoading} />
-
-            {/* ── 구매 기록 ── */}
-            <PurchasePanel
-                records={pur.purchases}
-                stats={pur.purchaseStats}
-                loading={pur.purchaseLoading}
-                formOpen={pur.purchaseFormOpen}
-                form={pur.purchaseForm}
-                formSaving={pur.purchaseFormSaving}
-                formError={pur.purchaseFormError}
-                editId={pur.purchaseEditId}
-                onFormOpen={pur.handlePurchaseFormOpen}
-                onFormClose={pur.handlePurchaseFormClose}
-                onFormChange={pur.handlePurchaseFormChange}
-                onFormSubmit={pur.handlePurchaseFormSubmit}
-                onEditStart={pur.handlePurchaseEditStart}
-                onDelete={pur.handlePurchaseDelete}
-            />
-
-            {/* ── 수동 추천 ── */}
-            <section className="lotto-panel">
-                <div className="lotto-panel__head">
-                    <div>
-                        <p className="lotto-panel__eyebrow">Manual Recommendation</p>
-                        <h3>수동 추천</h3>
-                        <p className="lotto-panel__sub">파라미터를 직접 조정해 번호를 추천받을 수 있습니다.</p>
-                    </div>
-                    <div className="lotto-panel__actions">
-                        {mr.loading.recommend ? <span className="lotto-chip">계산 중</span> : null}
-                    </div>
-                </div>
-
-                <div className="lotto-presets">
-                    {mr.presets.map((preset) => (
-                        <button key={preset.name} className="button ghost small"
-                            onClick={() => mr.setParams({
-                                recent_window: preset.recent_window,
-                                recent_weight: preset.recent_weight,
-                                avoid_recent_k: preset.avoid_recent_k,
-                            })}>
-                            {preset.name}
-                        </button>
                 ))}
+            </nav>
+            <div className="lotto-tab-body">
+                {tab === 'briefing' && <BriefingTab />}
+                {tab === 'analysis' && <AnalysisTab />}
+                {tab === 'purchase' && <PurchaseTab />}
             </div>
-
-                <div className="lotto-form">
-                    <label className="lotto-field">
-                        recent_window <span>최근 N회차 가중치 범위</span>
-                        <input type="number" min={20} max={1000} value={mr.params.recent_window}
-                            onChange={(e) => mr.setParams((s) => ({ ...s, recent_window: Number(e.target.value) }))} />
-                    </label>
-                    <label className="lotto-field">
-                        recent_weight <span>최근 회차 가중치</span>
-                        <input type="number" step="0.1" min={0.5} max={10} value={mr.params.recent_weight}
-                            onChange={(e) => mr.setParams((s) => ({ ...s, recent_weight: Number(e.target.value) }))} />
-                    </label>
-                    <label className="lotto-field">
-                        avoid_recent_k <span>최근 K회차 중복 회피</span>
-                        <input type="number" min={0} max={50} value={mr.params.avoid_recent_k}
-                            onChange={(e) => mr.setParams((s) => ({ ...s, avoid_recent_k: Number(e.target.value) }))} />
-                    </label>
-                </div>
-
-                <button className="button primary" onClick={mr.onRecommend} disabled={mr.loading.recommend}>
-                    추천 받기
-                </button>
-
-                {mr.result ? (
-                    <div className="lotto-result">
-                        <div className="lotto-result__meta">
-                            <div>
-                                <p className="lotto-result__id">추천 ID #{mr.result.id}</p>
-                                <p className="lotto-result__based">기준 회차 {mr.result.based_on_latest_draw ?? '-'}</p>
-                            </div>
-                            <button className="button small" onClick={() => copyNumbers(mr.result.numbers)}>
-                                번호 복사
-                            </button>
-                        </div>
-                        {mr.result.numbers && <NumberRow nums={mr.result.numbers} />}
-                        {mr.historyMetrics && (
-                            <div className="lotto-compare">
-                                <MetricBlock title="추천 통계 (히스토리)" metrics={mr.historyMetrics} />
-                            </div>
-                        )}
-                        {Array.isArray(mr.result.items) && mr.result.items.length ? (
-                            <details className="lotto-details">
-                                <summary>추천 후보 보기</summary>
-                                <div className="lotto-batch">
-                                    {mr.result.items.map((item, idx) => (
-                                        <div key={item.id ?? `candidate-${idx}`} className="lotto-batch__item">
-                                            <div className="lotto-batch__meta">
-                                                <div>
-                                                    <p className="lotto-batch__title">후보 #{item.id ?? idx + 1}</p>
-                                                    <p className="lotto-batch__sub">기준 회차 {item.based_on_draw ?? '-'}</p>
-                                                </div>
-                                                <button className="button ghost small" onClick={() => copyNumbers(item.numbers)}>
-                                                    복사
-                                                </button>
-                                            </div>
-                                            <NumberRow nums={item.numbers} />
-                                            {item.metrics && <MetricBlock title="후보 통계" metrics={item.metrics} />}
-                                        </div>
-                                    ))}
-                                </div>
-                            </details>
-                        ) : null}
-                        {mr.result.explain && (
-                            <details className="lotto-details">
-                                <summary>설명 보기</summary>
-                                <pre>{JSON.stringify(mr.result.explain, null, 2)}</pre>
-                            </details>
-                        )}
-                    </div>
-                ) : (
-                    <p className="lotto-empty">아직 추천 결과가 없습니다.</p>
-                )}
-            </section>
-
-            {/* ── 추천 히스토리 ── */}
-            <section className="lotto-panel">
-                <div className="lotto-panel__head">
-                    <div>
-                        <p className="lotto-panel__eyebrow">History</p>
-                        <h3>추천 히스토리</h3>
-                        <p className="lotto-panel__sub">수동 추천 결과를 모아서 확인할 수 있습니다.</p>
-                    </div>
-                    <div className="lotto-panel__actions">
-                        <span className="lotto-chip">{mr.history.length}건</span>
-                        {mr.history.length > 5 && (
-                            <button className="button ghost small lotto-history-toggle"
-                                onClick={() => mr.setHistoryExpanded((p) => !p)}
-                                aria-expanded={mr.historyExpanded}>
-                                {mr.historyExpanded ? '접기' : '더보기'}
-                                <span className={`lotto-history-toggle__icon ${mr.historyExpanded ? 'is-open' : ''}`} aria-hidden>▼</span>
-                            </button>
-                        )}
-                        <button className="button ghost small" onClick={mr.refreshHistory} disabled={mr.loading.history}>
-                            새로고침
-                        </button>
-                    </div>
-                </div>
-
-                {mr.loading.history ? <p className="lotto-empty">불러오는 중...</p> : null}
-                {mr.history.length === 0 ? (
-                    <p className="lotto-empty">저장된 히스토리가 없습니다.</p>
-                ) : (
-                    <div className="lotto-history">
-                        {mr.visibleHistory.map((item) => (
-                            <div key={item.id} className="lotto-history__item">
-                                <div className="lotto-history__meta">
-                                    <p>#{item.id}</p>
-                                    <p>{fmtKST(item.created_at)}</p>
-                                    <p>기준 회차 {item.based_on_draw ?? '-'}</p>
-                                </div>
-                                <div className="lotto-history__body">
-                                    <NumberRow nums={item.numbers} />
-                                    <p className="lotto-history__params">
-                                        window={item.params?.recent_window}, weight={item.params?.recent_weight},
-                                        avoid_k={item.params?.avoid_recent_k}
-                                    </p>
-                                </div>
-                                <div className="lotto-history__actions">
-                                    <button className="button ghost small" onClick={() => copyNumbers(item.numbers)}>
-                                        복사
-                                    </button>
-                                    <button className="button danger small" onClick={() => mr.onDelete(item.id)}>
-                                        삭제
-                                    </button>
-                                </div>
-                            </div>
-                        ))}
-                        <span ref={mr.historyEndRef} />
-                    </div>
-                )}
-            </section>
-
-            <footer className="lotto-foot">
-                backend: FastAPI / nginx proxy / DB: sqlite ·{' '}
-                <a className="lotto-foot__link" href="/lotto-api.md" download>API 스펙 다운로드</a>
-            </footer>
         </div>
     );
 }

src/pages/lotto/Lotto.css

@@ -1475,3 +1475,47 @@
         gap: 10px;
     }
 }
+
+/* ── Briefing UI ──────────────────────────────────────────────────────────── */
+.briefing-header { padding: 16px; border-radius: 12px; background: rgba(129,140,248,0.08); margin-bottom: 16px; }
+.briefing-header-row { display: flex; justify-content: space-between; align-items: center; }
+.briefing-meta { display: flex; gap: 12px; color: #94a3b8; font-size: 0.85rem; margin-top: 4px; flex-wrap: wrap; }
+.briefing-confidence strong { color: #e2e8f0; }
+.briefing-tokens { font-family: monospace; }
+.briefing-confidence-bar { height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; margin-top: 8px; overflow: hidden; }
+.briefing-confidence-bar > div { height: 100%; background: linear-gradient(90deg, #818cf8, #34d399); transition: width .3s; }
+.briefing-summary { padding: 12px 16px; background: rgba(0,0,0,0.2); border-radius: 10px; margin-bottom: 16px; }
+.briefing-summary h3 { margin: 0 0 8px; }
+.briefing-3lines { margin: 0; padding-left: 20px; }
+.briefing-hotcold { color: #fbbf24; margin-top: 8px; }
+.briefing-warning { color: #f87171; margin-top: 8px; }
+.pick-card { padding: 12px; border-radius: 10px; background: rgba(255,255,255,0.04); border-left: 3px solid #64748b; margin-bottom: 8px; }
+.pick-card--안정 { border-left-color: #34d399; }
+.pick-card--균형 { border-left-color: #fbbf24; }
+.pick-card--공격 { border-left-color: #f87171; }
+.pick-card-header { display: flex; justify-content: space-between; font-size: 0.85rem; color: #94a3b8; margin-bottom: 6px; }
+.pick-card-balls { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
+.ball { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: bold; color: #fff; }
+.ball--1 { background: #fbbf24; } .ball--2 { background: #60a5fa; } .ball--3 { background: #f87171; }
+.ball--4 { background: #94a3b8; } .ball--5 { background: #34d399; }
+.pick-card-reason { margin: 0; font-size: 0.85rem; color: #cbd5e1; }
+.briefing-empty { text-align: center; padding: 40px 20px; color: #94a3b8; }
+.briefing-empty button { margin-top: 12px; padding: 8px 20px; }
+.briefing-empty-hint { font-size: 0.85rem; }
+.briefing-error { color: #f87171; margin-top: 8px; }
+.curator-usage-footer { display: flex; gap: 12px; padding: 10px 14px; background: rgba(0,0,0,0.25); border-radius: 8px; font-size: 0.8rem; color: #94a3b8; margin-top: 24px; flex-wrap: wrap; font-family: monospace; }
+@media (max-width: 768px) {
+    .briefing-meta { font-size: 0.75rem; }
+    .briefing-tokens { width: 100%; }
+    .pick-card-balls { justify-content: center; }
+}
+
+/* ── Tab navigation ───────────────────────────────────────────────────────── */
+.lotto-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.1); }
+.lotto-tabs button { padding: 8px 16px; background: transparent; border: none; color: #94a3b8; cursor: pointer; border-bottom: 2px solid transparent; }
+.lotto-tabs button.active { color: #e2e8f0; border-bottom-color: #818cf8; }
+.lotto-tab-body { padding-top: 8px; }
+@media (max-width: 768px) {
+    .lotto-tabs { overflow-x: auto; }
+    .lotto-tabs button { white-space: nowrap; }
+}

src/pages/lotto/components/briefing/BriefingEmpty.jsx

@@ -0,0 +1,12 @@
+export default function BriefingEmpty({ regenerating, onRegenerate, error }) {
+    return (
+        <div className="briefing-empty">
+            <p>아직 이번 주 브리핑이 없습니다.</p>
+            <p className="briefing-empty-hint">매주 월요일 07:00에 자동 생성됩니다.</p>
+            <button onClick={onRegenerate} disabled={regenerating}>
+                {regenerating ? '⏳ 생성 중...' : '지금 생성'}
+            </button>
+            {error && <p className="briefing-error">⚠️ {error}</p>}
+        </div>
+    );
+}

src/pages/lotto/components/briefing/BriefingHeader.jsx

@@ -0,0 +1,28 @@
+import { estimateCost, fmtUsd, fmtTokens } from './pricing';
+
+export default function BriefingHeader({ briefing, regenerating, onRegenerate }) {
+    const cost = estimateCost(briefing);
+    const genDate = new Date(briefing.generated_at).toLocaleString('ko-KR');
+    return (
+        <div className="briefing-header">
+            <div className="briefing-header-row">
+                <h2>🗓 #{briefing.draw_no}회 브리핑</h2>
+                <button onClick={onRegenerate} disabled={regenerating}>
+                    {regenerating ? '⏳ 생성 중...' : '🔄 다시 생성'}
+                </button>
+            </div>
+            <div className="briefing-meta">
+                <span>{genDate}</span>
+                <span className="briefing-confidence">
+                    신뢰도 <strong>{briefing.confidence}</strong>/100
+                </span>
+                <span className="briefing-tokens">
+                    {fmtTokens(briefing.tokens_input)} in · {fmtTokens(briefing.tokens_output)} out · {fmtUsd(cost)}
+                </span>
+            </div>
+            <div className="briefing-confidence-bar">
+                <div style={{ width: `${briefing.confidence}%` }} />
+            </div>
+        </div>
+    );
+}

src/pages/lotto/components/briefing/BriefingSummary.jsx

@@ -0,0 +1,16 @@
+export default function BriefingSummary({ narrative }) {
+    return (
+        <div className="briefing-summary">
+            <h3>{narrative.headline}</h3>
+            <ul className="briefing-3lines">
+                {narrative.summary_3lines.map((line, i) => <li key={i}>{line}</li>)}
+            </ul>
+            {narrative.hot_cold_comment && (
+                <p className="briefing-hotcold">🔥❄️ {narrative.hot_cold_comment}</p>
+            )}
+            {narrative.warnings && (
+                <p className="briefing-warning">⚠️ {narrative.warnings}</p>
+            )}
+        </div>
+    );
+}

src/pages/lotto/components/briefing/CuratorUsageFooter.jsx

@@ -0,0 +1,17 @@
+import useCuratorUsage from '../../hooks/useCuratorUsage';
+import { estimateCost, fmtUsd, fmtTokens } from './pricing';
+
+export default function CuratorUsageFooter() {
+    const { usage } = useCuratorUsage(30);
+    if (!usage) return null;
+    const cost = estimateCost(usage);
+    return (
+        <div className="curator-usage-footer">
+            <span>최근 30일 큐레이터:</span>
+            <span>{usage.calls}회 호출</span>
+            <span>{fmtTokens(usage.tokens_input + usage.tokens_output)} tokens</span>
+            <span>{fmtUsd(cost)}</span>
+            <span>캐시 {(usage.cache_hit_rate * 100).toFixed(0)}%</span>
+        </div>
+    );
+}

src/pages/lotto/components/briefing/PickSetCard.jsx

@@ -0,0 +1,18 @@
+const RISK_BADGE = { '안정': '🟢', '균형': '🟡', '공격': '🔴' };
+
+export default function PickSetCard({ pick, index }) {
+    return (
+        <div className={`pick-card pick-card--${pick.risk_tag}`}>
+            <div className="pick-card-header">
+                <span className="pick-card-index">Set {index + 1}</span>
+                <span className="pick-card-risk">{RISK_BADGE[pick.risk_tag] || '⚪'} {pick.risk_tag}</span>
+            </div>
+            <div className="pick-card-balls">
+                {pick.numbers.map(n => (
+                    <span key={n} className={`ball ball--${Math.ceil(n / 10)}`}>{n}</span>
+                ))}
+            </div>
+            <p className="pick-card-reason">{pick.reason}</p>
+        </div>
+    );
+}

src/pages/lotto/components/briefing/pricing.js

@@ -0,0 +1,23 @@
+const IN_PER_M = 3.00;
+const OUT_PER_M = 15.00;
+const CACHE_READ_PER_M = 0.30;
+const CACHE_WRITE_PER_M = 3.75;
+
+export function estimateCost({ tokens_input = 0, tokens_output = 0, cache_read = 0, cache_write = 0 }) {
+    const usd =
+        (tokens_input / 1_000_000) * IN_PER_M +
+        (tokens_output / 1_000_000) * OUT_PER_M +
+        (cache_read / 1_000_000) * CACHE_READ_PER_M +
+        (cache_write / 1_000_000) * CACHE_WRITE_PER_M;
+    return usd;
+}
+
+export function fmtUsd(usd) {
+    if (usd < 0.01) return `$${usd.toFixed(4)}`;
+    return `$${usd.toFixed(3)}`;
+}
+
+export function fmtTokens(n) {
+    if (n >= 1000) return `${(n / 1000).toFixed(1)}K`;
+    return String(n);
+}

src/pages/lotto/hooks/useBriefing.js

@@ -0,0 +1,56 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { getLatestBriefing, triggerLottoCurate } from '../../../api';
+
+export default function useBriefing() {
+    const [briefing, setBriefing] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState('');
+    const [regenerating, setRegenerating] = useState(false);
+    const pollingRef = useRef(null);
+
+    const load = useCallback(async () => {
+        setLoading(true); setError('');
+        try {
+            const data = await getLatestBriefing();
+            setBriefing(data);
+        } catch (e) {
+            setError(e.message);
+        } finally {
+            setLoading(false);
+        }
+    }, []);
+
+    useEffect(() => { load(); }, [load]);
+
+    const regenerate = useCallback(async () => {
+        setRegenerating(true); setError('');
+        try {
+            const prevGen = briefing?.generated_at;
+            await triggerLottoCurate();
+            let attempts = 0;
+            pollingRef.current = setInterval(async () => {
+                attempts += 1;
+                try {
+                    const data = await getLatestBriefing();
+                    if (data && data.generated_at !== prevGen) {
+                        setBriefing(data);
+                        setRegenerating(false);
+                        clearInterval(pollingRef.current);
+                    }
+                } catch {}
+                if (attempts >= 40) {
+                    clearInterval(pollingRef.current);
+                    setRegenerating(false);
+                    setError('재생성 타임아웃 (2분)');
+                }
+            }, 3000);
+        } catch (e) {
+            setError(e.message);
+            setRegenerating(false);
+        }
+    }, [briefing?.generated_at]);
+
+    useEffect(() => () => { if (pollingRef.current) clearInterval(pollingRef.current); }, []);
+
+    return { briefing, loading, error, regenerating, reload: load, regenerate };
+}

src/pages/lotto/hooks/useCuratorUsage.js

@@ -0,0 +1,17 @@
+import { useState, useEffect } from 'react';
+import { getCuratorUsage } from '../../../api';
+
+export default function useCuratorUsage(days = 30) {
+    const [usage, setUsage] = useState(null);
+    const [error, setError] = useState('');
+
+    useEffect(() => {
+        let alive = true;
+        getCuratorUsage(days)
+            .then(d => { if (alive) setUsage(d); })
+            .catch(e => { if (alive) setError(e.message); });
+        return () => { alive = false; };
+    }, [days]);
+
+    return { usage, error };
+}

src/pages/lotto/tabs/AnalysisTab.jsx

@@ -0,0 +1,428 @@
+import React, { useMemo } from 'react';
+import {
+    fmtKST, Ball, NumberRow, copyNumbers,
+    buildMetricsFromFrequency, BEST_PICKS_DEFAULT_SHOW,
+} from '../lottoUtils';
+
+import useLottoData from '../hooks/useLottoData';
+import useManualRecommend from '../hooks/useManualRecommend';
+
+import MetricBlock from '../components/MetricBlock';
+import FrequencyChart from '../components/FrequencyChart';
+import PerformanceBanner from '../components/PerformanceBanner';
+import CombinedRecommendPanel from '../components/CombinedRecommendPanel';
+import ReportPanel from '../components/ReportPanel';
+import PersonalAnalysisPanel from '../components/PersonalAnalysisPanel';
+
+export default function AnalysisTab() {
+    const ld = useLottoData();
+    const mr = useManualRecommend();
+
+    const overallMetrics = useMemo(() => buildMetricsFromFrequency(ld.stats?.frequency), [ld.stats]);
+    const visibleBestPicks = ld.bestPicksExpanded ? ld.bestPicks : ld.bestPicks.slice(0, BEST_PICKS_DEFAULT_SHOW);
+
+    const error = ld.error || mr.error;
+    const clearError = () => { ld.setError(''); mr.setError(''); };
+
+    return (
+        <>
+            {error ? (
+                <div className="lotto-alert">
+                    <div>
+                        <p className="lotto-alert__title">오류</p>
+                        <p className="lotto-alert__message">{error}</p>
+                    </div>
+                    <button className="button ghost small" onClick={clearError}>닫기</button>
+                </div>
+            ) : null}
+
+            {/* 신뢰도 배너 */}
+            <PerformanceBanner perf={ld.perfStats} />
+
+            {/* 종합 추론 번호 추천 */}
+            <CombinedRecommendPanel
+                combined={ld.combined}
+                history={ld.combinedHistory}
+                loading={ld.combinedLoading}
+                histLoading={ld.combinedHistLoading}
+                onRun={ld.runCombinedRecommend}
+                onCopy={copyNumbers}
+            />
+
+            {/* 최신 회차 + 시뮬레이션 추천 */}
+            <div className="lotto-grid">
+                {/* Latest Draw */}
+                <section className="lotto-panel">
+                    <div className="lotto-panel__head">
+                        <div>
+                            <p className="lotto-panel__eyebrow">Latest Draw</p>
+                            <h3>최신 회차</h3>
+                            <p className="lotto-panel__sub">최신 회차와 번호를 빠르게 확인할 수 있습니다.</p>
+                        </div>
+                        <div className="lotto-panel__actions">
+                            {ld.loading.latest ? <span className="lotto-chip">로딩 중</span> : null}
+                            <button className="button ghost small" onClick={ld.refreshLatest} disabled={ld.loading.latest}>
+                                새로고침
+                            </button>
+                        </div>
+                    </div>
+                    {ld.latest ? (
+                        <>
+                            <div className="lotto-meta">
+                                <div>
+                                    <p className="lotto-meta__title">{ld.latest.drawNo}회</p>
+                                    <p className="lotto-meta__date">{ld.latest.date}</p>
+                                </div>
+                                <button className="button small" onClick={() => copyNumbers(ld.latest.numbers)}>
+                                    번호 복사
+                                </button>
+                            </div>
+                            <NumberRow nums={ld.latest.numbers} />
+                            <p className="lotto-bonus">보너스 <strong>{ld.latest.bonus}</strong></p>
+                            {overallMetrics && (
+                                <MetricBlock title="당첨 통계 (전체 회차)" metrics={overallMetrics} />
+                            )}
+                        </>
+                    ) : (
+                        <p className="lotto-empty">최신 회차 데이터가 없습니다.</p>
+                    )}
+                </section>
+
+                {/* Simulation Picks */}
+                <section className="lotto-panel">
+                    <div className="lotto-panel__head">
+                        <div>
+                            <p className="lotto-panel__eyebrow">Simulation Picks</p>
+                            <h3>시뮬레이션 추천</h3>
+                            <p className="lotto-panel__sub">
+                                하루 6회 몬테카를로 시뮬레이션으로 선별된 최적 번호입니다.
+                            </p>
+                        </div>
+                        <div className="lotto-panel__actions">
+                            {ld.loading.bestPicks ? <span className="lotto-chip">로딩 중</span> : null}
+                            {ld.simulating ? <span className="lotto-chip lotto-chip--active">분석 중</span> : null}
+                            <button className="button ghost small" onClick={ld.refreshBestPicks}
+                                disabled={ld.loading.bestPicks || ld.simulating}>
+                                새로고침
+                            </button>
+                            <button className="button small" onClick={ld.onSimulate}
+                                disabled={ld.simulating || ld.loading.bestPicks}>
+                                {ld.simulating ? '실행 중...' : '지금 실행'}
+                            </button>
+                        </div>
+                    </div>
+
+                    {ld.simResult && (
+                        <div className="lotto-sim-result">
+                            <p>완료: {ld.simResult.total_generated?.toLocaleString()}개 후보 → 상위 {ld.simResult.best_n_saved}개 저장</p>
+                            <p>최고 점수 {((ld.simResult.best_score ?? 0) * 100).toFixed(1)}% / 평균 {((ld.simResult.avg_score ?? 0) * 100).toFixed(1)}%</p>
+                        </div>
+                    )}
+
+                    {ld.bestPicks.length === 0 ? (
+                        <p className="lotto-empty">
+                            {ld.loading.bestPicks ? '불러오는 중...' : "시뮬레이션 결과가 없습니다. '지금 실행'으로 시작하세요."}
+                        </p>
+                    ) : (
+                        <>
+                            <div className="lotto-picks">
+                                {visibleBestPicks.map((pick) => (
+                                    <div key={pick.id} className="lotto-pick">
+                                        <span className="lotto-pick__rank">#{pick.rank}</span>
+                                        <div className="lotto-pick__content">
+                                            <NumberRow nums={pick.numbers} />
+                                            <div className="lotto-pick__score">
+                                                <span className="lotto-pick__score-label">
+                                                    {((pick.score_total ?? 0) * 100).toFixed(1)}%
+                                                </span>
+                                                <div className="lotto-pick__bar">
+                                                    <span style={{ width: `${(pick.score_total ?? 0) * 100}%` }} />
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <button className="button ghost small" onClick={() => copyNumbers(pick.numbers)}>
+                                            복사
+                                        </button>
+                                    </div>
+                                ))}
+                            </div>
+                            {ld.bestPicks.length > BEST_PICKS_DEFAULT_SHOW && (
+                                <button
+                                    className="button ghost small lotto-history-toggle"
+                                    onClick={() => ld.setBestPicksExpanded((p) => !p)}
+                                    aria-expanded={ld.bestPicksExpanded}
+                                >
+                                    {ld.bestPicksExpanded ? '접기' : `모두 보기 (${ld.bestPicks.length}개)`}
+                                    <span className={`lotto-history-toggle__icon ${ld.bestPicksExpanded ? 'is-open' : ''}`} aria-hidden>▼</span>
+                                </button>
+                            )}
+                            <p className="lotto-panel__sub">
+                                갱신: {fmtKST(ld.bestPicks[0]?.created_at) || '-'}
+                                {ld.bestPicks[0]?.based_on_draw ? ` · ${ld.bestPicks[0].based_on_draw}회 기준` : ''}
+                            </p>
+                        </>
+                    )}
+                </section>
+            </div>
+
+            {/* 이번 주 공략 리포트 */}
+            <ReportPanel
+                report={ld.report}
+                history={ld.reportHistory}
+                loading={ld.reportLoading}
+                onRefresh={ld.refreshReport}
+                onSelectDrw={ld.loadSpecificReport}
+            />
+
+            {/* 통계 분석 */}
+            <section className="lotto-panel lotto-panel--wide">
+                <div className="lotto-panel__head">
+                    <div>
+                        <p className="lotto-panel__eyebrow">Analysis</p>
+                        <h3>통계 분석</h3>
+                        <p className="lotto-panel__sub">빈도, Z-score, 갭 분석으로 번호를 분류합니다.</p>
+                    </div>
+                    <div className="lotto-panel__actions">
+                        {ld.loading.analysis ? <span className="lotto-chip">로딩 중</span> : null}
+                        <button className="button ghost small" onClick={ld.refreshAnalysis} disabled={ld.loading.analysis}>
+                            새로고침
+                        </button>
+                    </div>
+                </div>
+                {ld.analysis ? (
+                    <div className="lotto-analysis">
+                        <div className="lotto-analysis__row">
+                            <div className="lotto-analysis__group">
+                                <p className="lotto-analysis__label">🔥 핫 번호 <span>출현 빈도 상위 10</span></p>
+                                <div className="lotto-row">
+                                    {(ld.analysis.hot_numbers ?? []).map((n) => <Ball key={n} n={n} />)}
+                                </div>
+                            </div>
+                            <div className="lotto-analysis__group">
+                                <p className="lotto-analysis__label">🧊 콜드 번호 <span>출현 빈도 하위 10</span></p>
+                                <div className="lotto-row">
+                                    {(ld.analysis.cold_numbers ?? []).map((n) => <Ball key={n} n={n} />)}
+                                </div>
+                            </div>
+                            <div className="lotto-analysis__group">
+                                <p className="lotto-analysis__label">⏰ 오버듀 번호 <span>오래 안 나온 번호 (회차 수)</span></p>
+                                <div className="lotto-row">
+                                    {(ld.analysis.overdue_numbers ?? []).map((n) => {
+                                        const stat = (ld.analysis.number_stats ?? []).find((s) => s.number === n);
+                                        return (
+                                            <div key={n} className="lotto-overdue">
+                                                <Ball n={n} />
+                                                <span className="lotto-overdue__gap">{stat?.gap ?? '-'}회</span>
+                                            </div>
+                                        );
+                                    })}
+                                </div>
+                            </div>
+                        </div>
+                        <div className="lotto-analysis__stats">
+                            <span>역대 합계 평균 <strong>{ld.analysis.mean_sum}</strong></span>
+                            <span>표준편차 <strong>±{ld.analysis.std_sum}</strong></span>
+                            <span>분석 회차 <strong>{ld.analysis.total_draws?.toLocaleString()}</strong></span>
+                            <span>
+                                홀수 3:짝수 3 확률{' '}
+                                <strong>
+                                    {ld.analysis.odd_distribution?.['3'] ? `${ld.analysis.odd_distribution['3']}%` : '-'}
+                                </strong>
+                            </span>
+                        </div>
+                    </div>
+                ) : (
+                    <p className="lotto-empty">
+                        {ld.loading.analysis ? '불러오는 중...' : '통계 분석 데이터가 없습니다.'}
+                    </p>
+                )}
+            </section>
+
+            {/* 전체 번호 분포 */}
+            <section className="lotto-panel lotto-panel--wide">
+                <div className="lotto-panel__head">
+                    <div>
+                        <p className="lotto-panel__eyebrow">Distribution</p>
+                        <h3>전체 회차 번호 분포</h3>
+                        <p className="lotto-panel__sub">1~45번 번호가 등장한 횟수를 기준으로 분포를 표시합니다.</p>
+                    </div>
+                    <div className="lotto-panel__actions">
+                        {ld.statsLoading ? <span className="lotto-chip">로딩 중</span> : null}
+                        {ld.stats?.total_draws ? (
+                            <span className="lotto-chip">{ld.stats.total_draws}회차</span>
+                        ) : null}
+                        <button className="button ghost small" onClick={ld.refreshStats} disabled={ld.statsLoading}>
+                            새로고침
+                        </button>
+                    </div>
+                </div>
+                {ld.statsError ? <p className="lotto-empty">{ld.statsError}</p> : null}
+                {ld.stats ? (
+                    <FrequencyChart stats={ld.stats} />
+                ) : (
+                    <p className="lotto-empty">통계 데이터를 불러오지 못했습니다.</p>
+                )}
+            </section>
+
+            {/* 내 번호 패턴 */}
+            <PersonalAnalysisPanel data={ld.personalAnalysis} loading={ld.personalLoading} />
+
+            {/* 수동 추천 */}
+            <section className="lotto-panel">
+                <div className="lotto-panel__head">
+                    <div>
+                        <p className="lotto-panel__eyebrow">Manual Recommendation</p>
+                        <h3>수동 추천</h3>
+                        <p className="lotto-panel__sub">파라미터를 직접 조정해 번호를 추천받을 수 있습니다.</p>
+                    </div>
+                    <div className="lotto-panel__actions">
+                        {mr.loading.recommend ? <span className="lotto-chip">계산 중</span> : null}
+                    </div>
+                </div>
+
+                <div className="lotto-presets">
+                    {mr.presets.map((preset) => (
+                        <button key={preset.name} className="button ghost small"
+                            onClick={() => mr.setParams({
+                                recent_window: preset.recent_window,
+                                recent_weight: preset.recent_weight,
+                                avoid_recent_k: preset.avoid_recent_k,
+                            })}>
+                            {preset.name}
+                        </button>
+                    ))}
+                </div>
+
+                <div className="lotto-form">
+                    <label className="lotto-field">
+                        recent_window <span>최근 N회차 가중치 범위</span>
+                        <input type="number" min={20} max={1000} value={mr.params.recent_window}
+                            onChange={(e) => mr.setParams((s) => ({ ...s, recent_window: Number(e.target.value) }))} />
+                    </label>
+                    <label className="lotto-field">
+                        recent_weight <span>최근 회차 가중치</span>
+                        <input type="number" step="0.1" min={0.5} max={10} value={mr.params.recent_weight}
+                            onChange={(e) => mr.setParams((s) => ({ ...s, recent_weight: Number(e.target.value) }))} />
+                    </label>
+                    <label className="lotto-field">
+                        avoid_recent_k <span>최근 K회차 중복 회피</span>
+                        <input type="number" min={0} max={50} value={mr.params.avoid_recent_k}
+                            onChange={(e) => mr.setParams((s) => ({ ...s, avoid_recent_k: Number(e.target.value) }))} />
+                    </label>
+                </div>
+
+                <button className="button primary" onClick={mr.onRecommend} disabled={mr.loading.recommend}>
+                    추천 받기
+                </button>
+
+                {mr.result ? (
+                    <div className="lotto-result">
+                        <div className="lotto-result__meta">
+                            <div>
+                                <p className="lotto-result__id">추천 ID #{mr.result.id}</p>
+                                <p className="lotto-result__based">기준 회차 {mr.result.based_on_latest_draw ?? '-'}</p>
+                            </div>
+                            <button className="button small" onClick={() => copyNumbers(mr.result.numbers)}>
+                                번호 복사
+                            </button>
+                        </div>
+                        {mr.result.numbers && <NumberRow nums={mr.result.numbers} />}
+                        {mr.historyMetrics && (
+                            <div className="lotto-compare">
+                                <MetricBlock title="추천 통계 (히스토리)" metrics={mr.historyMetrics} />
+                            </div>
+                        )}
+                        {Array.isArray(mr.result.items) && mr.result.items.length ? (
+                            <details className="lotto-details">
+                                <summary>추천 후보 보기</summary>
+                                <div className="lotto-batch">
+                                    {mr.result.items.map((item, idx) => (
+                                        <div key={item.id ?? `candidate-${idx}`} className="lotto-batch__item">
+                                            <div className="lotto-batch__meta">
+                                                <div>
+                                                    <p className="lotto-batch__title">후보 #{item.id ?? idx + 1}</p>
+                                                    <p className="lotto-batch__sub">기준 회차 {item.based_on_draw ?? '-'}</p>
+                                                </div>
+                                                <button className="button ghost small" onClick={() => copyNumbers(item.numbers)}>
+                                                    복사
+                                                </button>
+                                            </div>
+                                            <NumberRow nums={item.numbers} />
+                                            {item.metrics && <MetricBlock title="후보 통계" metrics={item.metrics} />}
+                                        </div>
+                                    ))}
+                                </div>
+                            </details>
+                        ) : null}
+                        {mr.result.explain && (
+                            <details className="lotto-details">
+                                <summary>설명 보기</summary>
+                                <pre>{JSON.stringify(mr.result.explain, null, 2)}</pre>
+                            </details>
+                        )}
+                    </div>
+                ) : (
+                    <p className="lotto-empty">아직 추천 결과가 없습니다.</p>
+                )}
+            </section>
+
+            {/* 추천 히스토리 */}
+            <section className="lotto-panel">
+                <div className="lotto-panel__head">
+                    <div>
+                        <p className="lotto-panel__eyebrow">History</p>
+                        <h3>추천 히스토리</h3>
+                        <p className="lotto-panel__sub">수동 추천 결과를 모아서 확인할 수 있습니다.</p>
+                    </div>
+                    <div className="lotto-panel__actions">
+                        <span className="lotto-chip">{mr.history.length}건</span>
+                        {mr.history.length > 5 && (
+                            <button className="button ghost small lotto-history-toggle"
+                                onClick={() => mr.setHistoryExpanded((p) => !p)}
+                                aria-expanded={mr.historyExpanded}>
+                                {mr.historyExpanded ? '접기' : '더보기'}
+                                <span className={`lotto-history-toggle__icon ${mr.historyExpanded ? 'is-open' : ''}`} aria-hidden>▼</span>
+                            </button>
+                        )}
+                        <button className="button ghost small" onClick={mr.refreshHistory} disabled={mr.loading.history}>
+                            새로고침
+                        </button>
+                    </div>
+                </div>
+
+                {mr.loading.history ? <p className="lotto-empty">불러오는 중...</p> : null}
+                {mr.history.length === 0 ? (
+                    <p className="lotto-empty">저장된 히스토리가 없습니다.</p>
+                ) : (
+                    <div className="lotto-history">
+                        {mr.visibleHistory.map((item) => (
+                            <div key={item.id} className="lotto-history__item">
+                                <div className="lotto-history__meta">
+                                    <p>#{item.id}</p>
+                                    <p>{fmtKST(item.created_at)}</p>
+                                    <p>기준 회차 {item.based_on_draw ?? '-'}</p>
+                                </div>
+                                <div className="lotto-history__body">
+                                    <NumberRow nums={item.numbers} />
+                                    <p className="lotto-history__params">
+                                        window={item.params?.recent_window}, weight={item.params?.recent_weight},
+                                        avoid_k={item.params?.avoid_recent_k}
+                                    </p>
+                                </div>
+                                <div className="lotto-history__actions">
+                                    <button className="button ghost small" onClick={() => copyNumbers(item.numbers)}>
+                                        복사
+                                    </button>
+                                    <button className="button danger small" onClick={() => mr.onDelete(item.id)}>
+                                        삭제
+                                    </button>
+                                </div>
+                            </div>
+                        ))}
+                        <span ref={mr.historyEndRef} />
+                    </div>
+                )}
+            </section>
+        </>
+    );
+}

src/pages/lotto/tabs/BriefingTab.jsx

@@ -0,0 +1,25 @@
+import useBriefing from '../hooks/useBriefing';
+import BriefingHeader from '../components/briefing/BriefingHeader';
+import BriefingSummary from '../components/briefing/BriefingSummary';
+import PickSetCard from '../components/briefing/PickSetCard';
+import BriefingEmpty from '../components/briefing/BriefingEmpty';
+import CuratorUsageFooter from '../components/briefing/CuratorUsageFooter';
+
+export default function BriefingTab() {
+    const { briefing, loading, error, regenerating, regenerate } = useBriefing();
+
+    if (loading) return <div className="briefing-empty"><p>로딩 중...</p></div>;
+    if (!briefing) return <BriefingEmpty regenerating={regenerating} onRegenerate={regenerate} error={error} />;
+
+    return (
+        <div className="briefing-tab">
+            <BriefingHeader briefing={briefing} regenerating={regenerating} onRegenerate={regenerate} />
+            <BriefingSummary narrative={briefing.narrative} />
+            <div className="briefing-picks">
+                <h3>이번 주 5세트</h3>
+                {briefing.picks.map((p, i) => <PickSetCard key={i} pick={p} index={i} />)}
+            </div>
+            <CuratorUsageFooter />
+        </div>
+    );
+}

src/pages/lotto/tabs/PurchaseTab.jsx

@@ -0,0 +1,25 @@
+import usePurchases from '../hooks/usePurchases';
+import PurchasePanel from '../components/PurchasePanel';
+
+export default function PurchaseTab() {
+    const pur = usePurchases();
+
+    return (
+        <PurchasePanel
+            records={pur.purchases}
+            stats={pur.purchaseStats}
+            loading={pur.purchaseLoading}
+            formOpen={pur.purchaseFormOpen}
+            form={pur.purchaseForm}
+            formSaving={pur.purchaseFormSaving}
+            formError={pur.purchaseFormError}
+            editId={pur.purchaseEditId}
+            onFormOpen={pur.handlePurchaseFormOpen}
+            onFormClose={pur.handlePurchaseFormClose}
+            onFormChange={pur.handlePurchaseFormChange}
+            onFormSubmit={pur.handlePurchaseFormSubmit}
+            onEditStart={pur.handlePurchaseEditStart}
+            onDelete={pur.handlePurchaseDelete}
+        />
+    );
+}

src/pages/stock/components/PortfolioTab.jsx

@@ -96,7 +96,7 @@ const PortfolioTab = ({ pf, asset, handleSell, handleSaveSnapshot }) => (
                         />
                     </label>
                     <label>
-                        평균 매입가 (원)
+                        평균단가 (원)
                         <input
                             type="number"
                             min={0}
@@ -108,6 +108,19 @@ const PortfolioTab = ({ pf, asset, handleSell, handleSaveSnapshot }) => (
                             required
                         />
                     </label>
+                    <label>
+                        매입가 (원)
+                        <input
+                            type="number"
+                            min={0}
+                            step={1}
+                            value={pf.addForm.purchase_price}
+                            onChange={(e) =>
+                                pf.setAddForm((p) => ({ ...p, purchase_price: e.target.value }))
+                            }
+                            placeholder="미입력 시 평균단가로 자동 설정"
+                        />
+                    </label>
                     <button
                         className="button primary"
                         type="submit"
@@ -386,7 +399,8 @@ const PortfolioTab = ({ pf, asset, handleSell, handleSaveSnapshot }) => (
                             </p>
                             <h3>{broker} 보유 현황</h3>
                             <p className="stock-panel__sub">
-                                {items.length}종목 · 평가{' '}
+                                {items.length}종목 · 총 매입{' '}
+                                {formatNumber(bSummary.totalBuy)} · 평가{' '}
                                 {formatNumber(bSummary.totalEval)} · 손익{' '}
                                 <span className={`stock-profit ${profitColorClass(bSummary.totalProfit)}`}>
                                     {formatNumber(bSummary.totalProfit)} (
@@ -435,7 +449,7 @@ const PortfolioTab = ({ pf, asset, handleSell, handleSaveSnapshot }) => (
                                                     />
                                                 </label>
                                                 <label>
-                                                    평균매입가
+                                                    평균단가
                                                     <input
                                                         type="number"
                                                         min={0}
@@ -448,6 +462,20 @@ const PortfolioTab = ({ pf, asset, handleSell, handleSaveSnapshot }) => (
                                                         }
                                                     />
                                                 </label>
+                                                <label>
+                                                    매입가
+                                                    <input
+                                                        type="number"
+                                                        min={0}
+                                                        value={pf.editForm.purchase_price ?? ''}
+                                                        onChange={(e) =>
+                                                            pf.setEditForm((p) => ({
+                                                                ...p,
+                                                                purchase_price: Number(e.target.value),
+                                                            }))
+                                                        }
+                                                    />
+                                                </label>
                                             </div>
                                             <div className="pf-edit-actions">
                                                 <button
@@ -480,9 +508,13 @@ const PortfolioTab = ({ pf, asset, handleSell, handleSaveSnapshot }) => (
                                                 <strong>{formatNumber(item.quantity)}</strong>
                                             </div>
                                             <div className="stock-holdings__metric">
-                                                <span>매입가</span>
+                                                <span>평균단가</span>
                                                 <strong>{formatNumber(item.avg_price)}</strong>
                                             </div>
+                                            <div className="stock-holdings__metric">
+                                                <span>매입가</span>
+                                                <strong>{formatNumber(item.purchase_price ?? item.avg_price)}</strong>
+                                            </div>
                                             <div className="stock-holdings__metric">
                                                 <span>현재가</span>
                                                 <strong className={item.current_price == null ? 'pf-null-price' : ''}>

src/pages/stock/hooks/usePortfolio.js

@@ -70,14 +70,20 @@ export default function usePortfolio() {
     }, [brokerGroups]);
 
     const getBrokerSummary = (items) => {
-        let totalBuy = 0, totalEvalAmt = 0, hasNullPrice = false;
+        // totalBuy: 요약 표시용 (매입가 purchase_price 기준)
+        // totalCostBasis: 손익 계산용 (평균단가 avg_price 기준)
+        let totalBuy = 0, totalCostBasis = 0, totalEvalAmt = 0, hasNullPrice = false;
         for (const item of items) {
-            totalBuy += (item.avg_price ?? 0) * (item.quantity ?? 0);
+            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 - totalBuy;
+        const totalProfit = totalEvalAmt - totalCostBasis;
-        const totalProfitRate = totalBuy > 0 ? (totalProfit / totalBuy) * 100 : 0;
+        const totalProfitRate = totalCostBasis > 0 ? (totalProfit / totalCostBasis) * 100 : 0;
         return { totalBuy, totalEval: totalEvalAmt, totalProfit, totalProfitRate, hasNullPrice };
     };
 
@@ -108,6 +114,9 @@ export default function usePortfolio() {
                 name: addForm.name.trim(),
                 quantity: Number(addForm.quantity),
                 avg_price: Number(addForm.avg_price),
+                purchase_price: addForm.purchase_price === '' || addForm.purchase_price == null
+                    ? Number(addForm.avg_price)
+                    : Number(addForm.purchase_price),
             });
             setAddForm({ ...emptyPortfolioForm });
             setAddFormOpen(false);
@@ -121,7 +130,13 @@ export default function usePortfolio() {
 
     const handleEditStart = (item) => {
         setEditingId(item.id);
-        const data = { quantity: item.quantity, avg_price: item.avg_price, broker: item.broker, name: item.name };
+        const data = {
+            quantity: item.quantity,
+            avg_price: item.avg_price,
+            purchase_price: item.purchase_price ?? item.avg_price,
+            broker: item.broker,
+            name: item.name,
+        };
         setEditForm(data);
         editOrigRef.current = { ...data };
     };

src/pages/stock/stockUtils.js

@@ -95,6 +95,7 @@ export const emptyPortfolioForm = {
     name: '',
     quantity: '',
     avg_price: '',
+    purchase_price: '',
 };
 
 /* ── empty sell-history form ─────────────────────────────────────── */

src/pages/subscription/Subscription.jsx

@@ -636,6 +636,19 @@ function AnnouncementsTab() {
         }
     };
 
+    const handleDeleteClosed = async () => {
+        if (!confirm('종료된(완료) 청약 공고를 모두 삭제할까요?')) return;
+        try {
+            const res = await apiDelete('/api/realestate/announcements/closed');
+            alert(`${res.deleted || 0}건 삭제되었습니다.`);
+            setPage(1);
+            load();
+        } catch (e) {
+            console.error('Delete closed error:', e);
+            alert('삭제 실패');
+        }
+    };
+
     const handleBookmark = async (id) => {
         try {
             const updated = await apiPatch(`/api/realestate/announcements/${id}/bookmark`);
@@ -680,6 +693,14 @@ function AnnouncementsTab() {
                         onChange={(e) => { setRegionFilter(e.target.value); setPage(1); }}
                         style={{ width: 160, padding: '6px 12px', fontSize: 12 }}
                     />
+                    <button
+                        className="sub-filter-btn"
+                        onClick={handleDeleteClosed}
+                        style={{ fontSize: 12, color: '#f87171' }}
+                        title="status='완료' 공고 일괄 삭제"
+                    >
+                        🗑 종료 청약 삭제
+                    </button>
                 </div>
             </div>
 

src/routes.jsx

@@ -117,6 +117,15 @@ export const navLinks = [
         icon: <IconTodo />,
         accent: '#f472b6',
     },
+    {
+        id: 'agent-office',
+        label: 'Agent Office',
+        path: '/agent-office',
+        subtitle: 'AI LAB',
+        description: 'AI 에이전트 사무실',
+        icon: <span style={{fontSize:'1.2em'}}>🏢</span>,
+        accent: '#8b5cf6',
+    },
 ];
 
 export const appRoutes = [
@@ -172,4 +181,8 @@ export const appRoutes = [
         path: 'todo',
         element: <Todo />,
     },
+    {
+        path: 'agent-office',
+        lazy: () => import('./pages/agent-office/AgentOffice'),
+    },
 ];