74 lines
2.5 KiB
JavaScript
74 lines
2.5 KiB
JavaScript
// src/pages/agent-office/components/SidePanel.jsx
|
||
import { useState } from 'react';
|
||
import CommandTab from './CommandTab.jsx';
|
||
import TaskTab from './TaskTab.jsx';
|
||
import TokenTab from './TokenTab.jsx';
|
||
import LogTab from './LogTab.jsx';
|
||
|
||
const AGENT_META = {
|
||
stock: { displayName: '주식 트레이더', emoji: '📈', color: '#4488cc' },
|
||
music: { displayName: '음악 프로듀서', emoji: '🎵', color: '#44aa88' },
|
||
blog: { displayName: '블로그 마케터', emoji: '✍️', color: '#d97706' },
|
||
realestate: { displayName: '청약 애널리스트', emoji: '🏢', color: '#c026d3' },
|
||
lotto: { displayName: '로또 큐레이터', emoji: '🎱', color: '#ef4444' }
|
||
};
|
||
|
||
const TABS = ['Commands', 'Tasks', 'Tokens', 'Logs'];
|
||
|
||
export default function SidePanel({ agentId, agentState, pendingTask, onClose, refreshTrigger }) {
|
||
const [activeTab, setActiveTab] = useState('Commands');
|
||
const meta = AGENT_META[agentId];
|
||
if (!meta) return null;
|
||
|
||
const stateText = agentState?.detail
|
||
? `${agentState.state} - ${agentState.detail}`
|
||
: agentState?.state || 'unknown';
|
||
|
||
return (
|
||
<div className="ao-sidepanel">
|
||
{/* Header */}
|
||
<div className="ao-sidepanel-header">
|
||
<div className="ao-sidepanel-agent">
|
||
<div className="ao-sidepanel-icon" style={{ background: meta.color }}>
|
||
{meta.emoji}
|
||
</div>
|
||
<div className="ao-sidepanel-info">
|
||
<div className="ao-sidepanel-name">{meta.displayName}</div>
|
||
<div className="ao-sidepanel-state">● {stateText}</div>
|
||
</div>
|
||
</div>
|
||
<button className="ao-sidepanel-close" onClick={onClose}>×</button>
|
||
</div>
|
||
|
||
{/* Tabs */}
|
||
<div className="ao-sidepanel-tabs">
|
||
{TABS.map(tab => (
|
||
<button
|
||
key={tab}
|
||
className={`ao-sidepanel-tab ${activeTab === tab ? 'active' : ''}`}
|
||
onClick={() => setActiveTab(tab)}
|
||
>
|
||
{tab}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
{/* Tab Content */}
|
||
<div className="ao-sidepanel-content">
|
||
{activeTab === 'Commands' && (
|
||
<CommandTab agentId={agentId} agentState={agentState?.state} pendingTask={pendingTask} />
|
||
)}
|
||
{activeTab === 'Tasks' && (
|
||
<TaskTab agentId={agentId} refreshTrigger={refreshTrigger} />
|
||
)}
|
||
{activeTab === 'Tokens' && (
|
||
<TokenTab agentId={agentId} />
|
||
)}
|
||
{activeTab === 'Logs' && (
|
||
<LogTab agentId={agentId} refreshTrigger={refreshTrigger} />
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|