🎨 UI Components Guide

EdgePicks is built with modular, responsive UI components designed to visualize agent activity, user flows, and prediction results in real time. This guide provides a breakdown of core components and how they interact.

---

🧠 AgentNodeGraph.tsx

Purpose: Visualize the activity of each AI agent as a graph node with live status animations.

Features:

• Nodes pulse when status === "started"
• Dim on "errored" status
• Hidden until user initiates flow
• Fully animated using framer-motion

Snippet:

<motion.div
  animate={{
    scale: state === 'started' ? 1.1 : 1,
    opacity: state === 'errored' ? 0.4 : 1,
  }}
  transition={{ repeat: state === 'started' ? Infinity : 0, repeatType: 'reverse', duration: 0.8 }}
/>
📝 MatchupInputForm.tsx
Purpose: Allow users to enter home/away teams and the NFL week to trigger a prediction run.

Features:
Client-side validation

Streams live feedback from /api/run-agents

Persists sessionId for leaderboard grouping

Input Schema:
ts
Copy
Edit
{
  homeTeam: string;
  awayTeam: string;
  week: number;
}
📊 AgentStatusPanel.tsx
Purpose: Display live agent statuses, including scores, durations, and errors.

Features:
Status badges: ✅ completed, ❌ errored, ⏳ running

Inline retry button for failed agents

Updates in real-time via SSE

🏆 AgentLeaderboardPanel.tsx
Purpose: Rank agents based on average confidence, weighted scores, and prediction count within a session.

Features:
Hidden until flow starts

Session-aware grouping

Compact table layout

🧪 Testing
All components are validated via npm test and aligned with runFlow lifecycle expectations.

🧭 Design Principles
Minimalist: Avoid clutter; emphasize clarity

Reactive: Components reflect real-time backend state

Isolated: Each UI element is independently testable and injectable

📁 Component Directory
/components/AgentNodeGraph.tsx

/components/MatchupInputForm.tsx

/components/AgentStatusPanel.tsx

/components/AgentLeaderboardPanel.tsx