Function Explainer

frontend/dashboard/src/components/Explainer.tsx:26–317

()

};

export default function Explainer() {
  const { recent: liveRecent } = useLiveData();
  const completedCount = useMemo(
    () => liveRecent.filter((r) => r.state === "completed").length,
    [liveRecent],
  );
  const [recent, setRecent] = useState<TraceRecord[]>([]);
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const [selected, setSelected] = useState<TraceRecord | null>(null);
  const [loadingDetail, setLoadingDetail] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    let cancelled = false;
    const load = async () => {
      const payload = await fetchTraces(30);
      if (cancelled) return;
      if (!payload) {
        setError("[ERROR: TRACE ENDPOINT UNREACHABLE]");
        setRecent([]);
        return;
      }
      setError(null);
      setRecent(payload.items);
      setSelectedId((current) => {
        if (current && payload.items.some((item) => item.request_id === current)) return current;
        return payload.items[0]?.request_id ?? null;
      });
    };
    load();
    return () => {
      cancelled = true;
    };
  }, [completedCount]);

  useEffect(() => {
    let cancelled = false;
    if (!selectedId) {
      setSelected(null);
      return;
    }

    setLoadingDetail(true);
    fetchTraceDetail(selectedId)
      .then((detail) => {
        if (cancelled) return;
        setSelected(detail);
      })
      .catch(() => {
        if (cancelled) return;
        setSelected(null);
      })
      .finally(() => {
        if (!cancelled) setLoadingDetail(false);
      });

    return () => {
      cancelled = true;