From 226e368347530c9d6b8774032502ea68a4ed1e55 Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Sat, 11 Apr 2026 08:59:19 +0900
Subject: [PATCH] feat(agent-office): ChatPanel with commands/approval +
 TaskHistory panel

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../agent-office/components/ChatPanel.jsx     | 109 ++++++++++++++++++
 .../agent-office/components/TaskHistory.jsx   |  61 ++++++++++
 2 files changed, 170 insertions(+)
 create mode 100644 src/pages/agent-office/components/ChatPanel.jsx
 create mode 100644 src/pages/agent-office/components/TaskHistory.jsx

diff --git a/src/pages/agent-office/components/ChatPanel.jsx b/src/pages/agent-office/components/ChatPanel.jsx
new file mode 100644
index 0000000..6555d33
--- /dev/null
+++ b/src/pages/agent-office/components/ChatPanel.jsx
@@ -0,0 +1,109 @@
+import React, { useState } from 'react';
+
+const AGENT_COMMANDS = {
+  stock: [
+    { action: 'fetch_news', label: '뉴스 수집', icon: '📰' },
+    { action: 'list_alerts', label: '알람 목록', icon: '🔔' },
+  ],
+  music: [
+    { action: 'compose', label: '작곡 시작', icon: '🎵', needsInput: true },
+    { action: 'credits', label: '크레딧 확인', icon: '💳' },
+  ],
+  claude: [
+    { action: 'instruct', label: '지시하기', icon: '💬', needsInput: true },
+  ],
+};
+
+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 }
+      : { 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">
+          {agentId === 'stock' ? '주식 트레이더' :
+           agentId === 'music' ? '음악 프로듀서' : 'Claude AI'}
+        </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' ? '프롬프트 입력...' : '메시지 입력...'}
+            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;
diff --git a/src/pages/agent-office/components/TaskHistory.jsx b/src/pages/agent-office/components/TaskHistory.jsx
new file mode 100644
index 0000000..7e8a7aa
--- /dev/null
+++ b/src/pages/agent-office/components/TaskHistory.jsx
@@ -0,0 +1,61 @@
+import React, { useState, useEffect } from 'react';
+import { getAgentTasks } 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' },
+};
+
+const TaskHistory = ({ agentId, onClose }) => {
+  const [tasks, setTasks] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!agentId) return;
+    setLoading(true);
+    getAgentTasks(agentId, 30)
+      .then(data => setTasks(data.tasks || []))
+      .catch(() => setTasks([]))
+      .finally(() => setLoading(false));
+  }, [agentId]);
+
+  return (
+    <div className="ao-history-panel">
+      <div className="ao-history-header">
+        <span>작업 이력 — {agentId}</span>
+        <button className="ao-chat-close" onClick={onClose}>&times;</button>
+      </div>
+      <div className="ao-history-list">
+        {loading && <p className="ao-history-empty">로딩 중...</p>}
+        {!loading && 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">
+                {task.created_at?.replace('T', ' ').slice(0, 19)}
+              </div>
+              {task.result_data && (
+                <details className="ao-history-detail">
+                  <summary>결과 보기</summary>
+                  <pre>{JSON.stringify(task.result_data, null, 2)}</pre>
+                </details>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default TaskHistory;