Function Overview

studio/src/pages/Overview.tsx:20–178

()

} from '../lib/utils';

export function Overview() {
  const { data: overview, isLoading, refetch, isFetching } = useOverview('24h');
  const { data: events } = useRecentEvents(10);

  return (
    <div className="flex flex-col h-full">
      <Header
        title="Overview"
        subtitle="系统概览和关键指标"
        isRefreshing={isFetching}
        onRefresh={() => refetch()}
        lastUpdated={overview ? new Date(overview.updated_at) : undefined}
      />

      <div className="flex-1 overflow-auto p-6">
        {isLoading ? (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            {[...Array(4)].map((_, i) => (
              <div
                key={i}
                className="card h-32 animate-pulse-slow bg-[var(--color-surface)]"
              />
            ))}
          </div>
        ) : overview ? (
          <div className="space-y-6">
            {/* Stat Cards */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
              <StatCard
                title="活跃 Agents"
                value={overview.active_agents}
                icon={Users}
                color="primary"
              />
              <StatCard
                title="活跃会话"
                value={overview.active_sessions}
                icon={Activity}
                color="accent"
              />
              <StatCard
                title="总请求数"
                value={formatNumber(overview.total_requests)}
                icon={Zap}
                color="success"
              />
              <StatCard
                title="错误率"
                value={formatPercent(overview.error_rate)}
                icon={AlertTriangle}
                color={overview.error_rate > 0.05 ? 'error' : 'success'}
              />
            </div>

            {/* Token & Cost Summary */}
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
              <div className="card">
                <h3 className="text-sm font-medium text-[var(--color-text-muted)] mb-4">