Function Home

frontend/dashboard/src/components/Home.tsx:91–299

({ stats }: Props)

}

export default function Home({ stats }: Props) {
  const { recent } = useLiveData();
  const turns = groupTurns(recent).slice(0, 8);

  const seenTurnsRef = useRef<Set<string>>(new Set());
  const initialPrimedRef = useRef(false);

  const newKeys = new Set<string>();
  if (initialPrimedRef.current) {
    for (const g of turns) {
      if (!seenTurnsRef.current.has(g.key)) newKeys.add(g.key);
    }
  }

  useEffect(() => {
    if (!initialPrimedRef.current) {
      if (turns.length > 0) {
        seenTurnsRef.current = new Set(turns.map((g) => g.key));
        initialPrimedRef.current = true;
      }
      return;
    }
    for (const g of turns) seenTurnsRef.current.add(g.key);
  }, [turns]);

  const totalRequests = stats?.total_requests ?? 0;
  const totalSaved = stats?.total_savings_absolute ?? 0;
  const savingsRatio = stats?.total_savings_ratio ?? 0;
  const baselineCost = stats?.total_baseline_cost ?? 0;

  const lowCount = stats?.by_tier?.SIMPLE?.count ?? 0;
  const midCount = stats?.by_tier?.MEDIUM?.count ?? 0;
  const highCount = stats?.by_tier?.COMPLEX?.count ?? 0;
  const totalTier = lowCount + midCount + highCount || 1;

  // ─── Empty state ───
  if (totalRequests === 0 && turns.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center min-h-[calc(100vh-64px)] animate-fadeIn">
        <div className="font-display text-[64px] text-n-display tracking-tight">0</div>
        <div className="label mt-4">REQUESTS ROUTED</div>
        <p className="mt-6 text-[14px] text-n-secondary max-w-sm text-center">
          Send a request through the proxy to see routing in action.
        </p>
        <div className="mt-8 bg-n-surface border border-n-border rounded-compact p-5 font-mono text-[12px] text-n-secondary leading-relaxed max-w-lg w-full">
          <span className="text-n-disabled">$</span> curl localhost:8403/v1/chat/completions \{"\n"}
          {"  "}-H "Content-Type: application/json" \{"\n"}
          {"  "}-d '{`{"model":"uncommon-route/auto","messages":[{"role":"user","content":"hello"}]}`}'
        </div>
      </div>
    );
  }

  return (
    <div className="flex flex-col min-h-[calc(100vh-64px)] pt-4 animate-fadeIn">
      {/* ─── ZONE A: Hero Savings ─── */}
      <div className="mb-10">
        <div className="label mb-2">TOTAL SAVED</div>