/**
 * DetailPanel — 右侧详情面板
 *
 * 始终显示，包含 TraceViewer、TokenUsage、AgentMonitor。
 */

import { Box } from '@mui/material';
import { TraceViewer } from '@renderer/components/trace/TraceViewer';
import { TokenUsage } from '@renderer/components/trace/TokenUsage';
import { AgentMonitor } from '@renderer/components/layout/AgentMonitor';
import { LAYOUT } from '@renderer/lib/constants';

export function DetailPanel(): React.JSX.Element {
  return (
    <Box component="aside" sx={{ flexShrink: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden', bgcolor: 'background.paper', borderLeft: 1, borderColor: 'divider', width: LAYOUT.DETAIL_WIDTH }}>
      <Box sx={{ p: 1.5, flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
        <TraceViewer />
        <TokenUsage />
        <AgentMonitor />
      </Box>
    </Box>
  );
}
