82 lines
2.4 KiB
JavaScript
82 lines
2.4 KiB
JavaScript
// src/pages/agent-office/AgentOffice.jsx
|
|
import { useState, useCallback } from 'react';
|
|
import { useAgentManager } from './hooks/useAgentManager.js';
|
|
import { AGENT_META } from './constants.js';
|
|
import TopBar from './components/TopBar.jsx';
|
|
import AgentGrid from './components/AgentGrid.jsx';
|
|
import SidePanel from './components/SidePanel.jsx';
|
|
import EmptyDetailPanel from './components/EmptyDetailPanel.jsx';
|
|
import ActivityTimeline from './components/ActivityTimeline.jsx';
|
|
import './AgentOffice.css';
|
|
|
|
export default function AgentOffice() {
|
|
const {
|
|
agents, pendingTasks, notifications, connected, reconnectAttempt,
|
|
refreshTrigger, clearNotifications
|
|
} = useAgentManager();
|
|
|
|
// selectedAgent: null | active agent id | "placeholder-N"
|
|
const [selectedAgent, setSelectedAgent] = useState(null);
|
|
|
|
const handleSelectAgent = useCallback((agentId) => {
|
|
setSelectedAgent(agentId);
|
|
clearNotifications(agentId);
|
|
}, [clearNotifications]);
|
|
|
|
const handleSelectPlaceholder = useCallback((placeholderKey) => {
|
|
setSelectedAgent(placeholderKey);
|
|
}, []);
|
|
|
|
const handleClose = useCallback(() => {
|
|
setSelectedAgent(null);
|
|
}, []);
|
|
|
|
const pendingTask = selectedAgent && AGENT_META[selectedAgent]
|
|
? pendingTasks.find(t => t.agent_id === selectedAgent)
|
|
: null;
|
|
|
|
let rightPanel;
|
|
if (selectedAgent === null) {
|
|
rightPanel = (
|
|
<ActivityTimeline
|
|
refreshTrigger={refreshTrigger}
|
|
onSelectAgent={handleSelectAgent}
|
|
/>
|
|
);
|
|
} else if (selectedAgent.startsWith('placeholder-')) {
|
|
rightPanel = <EmptyDetailPanel variant="placeholder" onClose={handleClose} />;
|
|
} else {
|
|
rightPanel = (
|
|
<SidePanel
|
|
agentId={selectedAgent}
|
|
agentState={agents[selectedAgent]}
|
|
pendingTask={pendingTask}
|
|
onClose={handleClose}
|
|
refreshTrigger={refreshTrigger}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="ao-root">
|
|
<TopBar connected={connected} reconnectAttempt={reconnectAttempt} />
|
|
<div className="ao-main">
|
|
<div className="ao-grid-wrap">
|
|
<AgentGrid
|
|
agents={agents}
|
|
notifications={notifications}
|
|
selectedAgent={selectedAgent}
|
|
onSelectAgent={handleSelectAgent}
|
|
onSelectPlaceholder={handleSelectPlaceholder}
|
|
/>
|
|
</div>
|
|
{rightPanel}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function Component() {
|
|
return <AgentOffice />;
|
|
}
|