chore(agent-office): remove legacy dashboard components replaced by v2 UI

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

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

@@ -1,121 +0,0 @@
-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/components/AgentColumn.jsx

@@ -1,203 +0,0 @@
-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

@@ -1,125 +0,0 @@
-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

@@ -1,115 +0,0 @@
-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

@@ -1,195 +0,0 @@
-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;