/**
 * DetailPanel — 右侧详情面板
 *
 * 布局策略：TraceViewer flex:1 撑满，TokenUsage/AgentMonitor flexShrink:0 固定。
 */

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, display: 'flex', flexDirection: 'column', overflow: 'hidden', minHeight: 0 }}>
        <TraceViewer />
        <TokenUsage />
        <AgentMonitor />
      </Box>
    </Box>
  );
}
