frontend/src/components/features/traces/TracesSection.tsx

// @ts-nocheck - Temporary fix for HF Spaces TypeScript resolution issues
import React, { useEffect, useCallback } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { FileText } from "lucide-react";
import { useAgentGraph } from "@/context/AgentGraphContext";
import { TraceItem } from "./TraceItem";
import { EmptyState } from "@/components/shared/EmptyState";
import { api } from "@/lib/api";

export function TracesSection() {
  const { state, actions } = useAgentGraph();
  const { traces, isLoading } = state;

  const loadTraces = useCallback(async () => {
    actions.setLoading(true);
    try {
      const tracesData = await api.traces.list();
      actions.setTraces(Array.isArray(tracesData) ? tracesData : []);
    } catch (error) {
      actions.setError(
        error instanceof Error ? error.message : "Failed to load traces"
      );
      actions.setTraces([]);
    } finally {
      actions.setLoading(false);
    }
  }, [actions]);

  useEffect(() => {
    loadTraces();
  }, [loadTraces]);

  // NOTE: Auto-refresh disabled to avoid 429 errors in HF Spaces
  // TracesView component handles auto-refresh to prevent duplicate requests
  // useEffect(() => {
  //   const interval = setInterval(() => {
  //     if (!isLoading) {
  //       loadTraces();
  //     }
  //   }, 60000); // 60 seconds (increased from 12s)

  //   return () => clearInterval(interval);
  // }, [loadTraces, isLoading]);

  const handleUploadTrace = () => {
    actions.setActiveView("upload");
  };

  return (
    <Card>
      <CardHeader className="pb-3">
        <div className="flex items-center justify-between">
          <CardTitle className="text-sm font-medium flex items-center gap-2">
            <FileText className="h-4 w-4" />
            Traces
            {!isLoading && traces.length > 0 && (
              <span className="text-xs bg-muted text-muted-foreground px-2 py-1 rounded-full">
                {traces.length}
              </span>
            )}
          </CardTitle>
        </div>
      </CardHeader>

      <CardContent className="space-y-2">
        {isLoading ? (
          <div className="space-y-3">
            {[...Array(3)].map((_, i) => (
              <div key={i} className="space-y-2">
                <Skeleton className="h-4 w-3/4" />
                <Skeleton className="h-3 w-1/2" />
              </div>
            ))}
          </div>
        ) : !Array.isArray(traces) || traces.length === 0 ? (
          <div className="py-6">
            <EmptyState
              icon={FileText}
              title="No traces yet"
              description="Upload your first trace to start analyzing AI agent behavior."
              action={{
                label: "Upload Trace",
                onClick: handleUploadTrace,
                variant: "outline",
              }}
            />
          </div>
        ) : (
          <div className="space-y-2">
            {traces.map((trace) => (
              <TraceItem key={trace.id} trace={trace} />
            ))}
          </div>
        )}
      </CardContent>
    </Card>
  );
}