# Agencio Predict - Frontend Components Specification ## Page Structure ``` /predict → Main terminal / dashboard /predict/event/:slug → Single event deep-dive /predict/campaigns → Marketing prediction interface /predict/campaigns/:id → Campaign prediction detail /predict/trust → Trust & compliance dashboard /predict/calibration → Calibration / accuracy report ``` ## Component Hierarchy ``` PredictLayout ├── PredictNav (tab navigation between sections) ├── PredictTerminal (/predict) │ ├── EventFilters │ │ ├── CategoryFilter │ │ ├── ProbabilityRange │ │ ├── TrustFilter │ │ └── SearchBar │ ├── EventGrid │ │ └── PredictionCard (repeated) │ │ ├── ProbabilityGauge │ │ ├── SentimentBadge │ │ ├── TrustBadge │ │ ├── DivergenceIndicator │ │ └── MiniSparkline │ ├── TrendingEvents (sidebar) │ └── CalibrationBanner (rolling accuracy) │ ├── EventDetail (/predict/event/:slug) │ ├── EventHeader │ │ ├── ProbabilityDisplay (large) │ │ ├── ConfidenceLevel │ │ └── ResolutionCountdown │ ├── TrendChart (main chart) │ │ ├── ProbabilityLine │ │ ├── SentimentOverlay (toggle) │ │ ├── VolumeBar (bottom) │ │ └── EventMarkers (annotations) │ ├── WhyItMoved (explanation panel) │ │ ├── ExplanationCard (repeated) │ │ │ ├── Headline │ │ │ ├── FactorList │ │ │ └── ContributingSignals │ │ └── ExplanationTimeline │ ├── SignalFeed │ │ ├── SignalItem (repeated) │ │ │ ├── SourceIcon │ │ │ ├── SignalValue │ │ │ └── Timestamp │ │ └── SignalSourceFilter │ ├── TrustPanel │ │ ├── TrustScoreGauge │ │ ├── TrustBreakdown (radar chart) │ │ └── FlagList │ └── RelatedEvents │ ├── CampaignPredictor (/predict/campaigns) │ ├── CampaignForm │ │ ├── CampaignDetails │ │ ├── AudienceSelector (links to Persona Engine) │ │ ├── PlatformPicker │ │ └── VariantBuilder │ │ ├── VariantInput (A) │ │ ├── VariantInput (B) │ │ └── AddVariantButton │ ├── PredictionResults │ │ ├── VariantComparison │ │ │ ├── VariantScoreCard (per variant) │ │ │ │ ├── SuccessProbability │ │ │ │ ├── EngagementPrediction │ │ │ │ ├── ConversionPrediction │ │ │ │ └── ScoringFactorsRadar │ │ │ └── RecommendedBadge │ │ ├── ExplanationPanel │ │ └── FactorsBreakdown │ └── CampaignHistory │ └── PastCampaignCard (repeated) │ ├── TrustDashboard (/predict/trust) │ ├── TrustOverview │ │ ├── GlobalTrustScore │ │ ├── ManipulationHeatmap │ │ └── AlertCount │ ├── FlaggedEvents │ │ └── FlaggedEventRow (repeated) │ ├── ManipulationLog │ │ └── FlagDetail (repeated) │ └── AuditTrail │ └── CalibrationReport (/predict/calibration) ├── OverallScore ├── CalibrationChart (predicted vs actual) ├── AccuracyByCategory ├── BrierScoreTrend └── RecentResolutions ``` ## Key Component Specs ### PredictionCard The primary unit of the terminal grid. ``` ┌─────────────────────────────────────────┐ │ 🏷️ Geopolitics ⚖️ 0.58│ │ │ │ Iran escalation leads to oil > $100? │ │ │ │ ┌──────────────────────────────────┐ │ │ │ 72% ▁▂▃▅▇█ │ │ │ │ probability (sparkline) │ │ │ └──────────────────────────────────┘ │ │ │ │ Sentiment: 0.41 │ Divergence: HIGH │ │ Confidence: MED │ Volatility: 0.34 │ │ │ │ Updated 5 min ago │ └─────────────────────────────────────────┘ ``` **Props:** ```typescript interface PredictionCardProps { event: { id: string; title: string; slug: string; category: { name: string; slug: string }; current_probability: number; sentiment_score: number; confidence: 'LOW' | 'MEDIUM' | 'HIGH' | 'VERY_HIGH'; divergence: 'NONE' | 'LOW' | 'MEDIUM' | 'HIGH' | 'EXTREME'; trust_score: number; volatility: number; updated_at: string; }; sparklineData: number[]; // last 24 probability snapshots onClick: (slug: string) => void; } ``` ### TrendChart Main probability chart on event detail page. ``` ┌──────────────────────────────────────────────────────────┐ │ Probability Over Time [1D] [7D] [30D]│ │ │ │ 100%│ │ │ │ ╭─╮ │ │ 80%│ ╭────╯ ╰── │ │ │ ╭──╮ ╭───╯ │ │ 60%│ ╭────╯ ╰────╮ ╯ │ │ │ ╭───╯ ╰──╯ │ │ 40%│╯ │ │ │ 📰 Reuters 🐦 X spike 📰 Pentagon │ │ 20%│ report detected response │ │ │ │ │ 0%├────┬────┬────┬────┬────┬────┬────┬────┬──── │ │ Mar18 Mar19 Mar20 Mar21 Mar22 Mar23 Mar24 │ │ │ │ Vol ▁▂▁▃▅▇▃▂▁▁▂▅█▃▂▁▁▃▅▇████▅▃▂ │ └──────────────────────────────────────────────────────────┘ ``` **Features:** - Probability line with gradient fill - Sentiment overlay (toggleable, different color) - Volume bars at bottom - Event markers (annotations for significant moments) - Time range selectors (1D, 7D, 30D, 90D, ALL) - Hover tooltip with snapshot details - Zoom/pan support **Tech:** Recharts or Tremor (already in Agencio stack if applicable) ### WhyItMoved AI-generated explanation panel. ``` ┌──────────────────────────────────────────────────────────┐ │ Why It Moved │ │ │ │ ┌────────────────────────────────────────────────────┐ │ │ │ 📈 +27% in 2 hours Mar 24, 10:35│ │ │ │ │ │ │ │ Iran odds spike after Reuters missile report │ │ │ │ │ │ │ │ Market probability jumped from 0.45 to 0.72 after │ │ │ │ Reuters cited anonymous Pentagon sources on new │ │ │ │ missile activity. Social sentiment cautious (0.41), │ │ │ │ creating HIGH divergence. │ │ │ │ │ │ │ │ Factors: │ │ │ │ ↑ HIGH Reuters report on missile activity │ │ │ │ ↓ MED Social sentiment remains cautious │ │ │ │ ↓ MED Historical: similar spikes revert 60% │ │ │ └────────────────────────────────────────────────────┘ │ │ │ │ ┌────────────────────────────────────────────────────┐ │ │ │ 📉 -8% over 3 days Mar 21, 14:00│ │ │ │ ... │ │ │ └────────────────────────────────────────────────────┘ │ └──────────────────────────────────────────────────────────┘ ``` ### VariantComparison Side-by-side A/B variant scoring for marketing predictions. ``` ┌──────────────────────────────────────────────────────────┐ │ Variant Comparison ⭐ B Recommended │ │ │ │ ┌─────────────────────┐ ┌─────────────────────┐ │ │ │ Variant A │ │ Variant B ⭐ │ │ │ │ │ │ │ │ │ │ Success: 63% │ │ Success: 81% │ │ │ │ Engagement: 4.5% │ │ Engagement: 6.7% │ │ │ │ Conversion: 1.2% │ │ Conversion: 1.8% │ │ │ │ │ │ │ │ │ │ ┌──────────────┐ │ │ ┌──────────────┐ │ │ │ │ │ Radar chart │ │ │ │ Radar chart │ │ │ │ │ │ (5 factors) │ │ │ │ (5 factors) │ │ │ │ │ └──────────────┘ │ │ └──────────────┘ │ │ │ │ │ │ │ │ │ │ Hook: "These sold │ │ Hook: "The shoes │ │ │ │ out in 3 min..." │ │ your fav creator" │ │ │ └─────────────────────┘ └─────────────────────┘ │ │ │ │ Why B wins: Creator social proof aligns with Gen Z │ │ trust patterns. Scarcity hooks showing fatigue in │ │ sneaker vertical (-23% effectiveness YoY). │ └──────────────────────────────────────────────────────────┘ ``` ### TrustScoreGauge Visual representation of trust scoring. ``` ┌──────────────────────────┐ │ Trust Score: 0.58 │ │ │ │ ╭────────────╮ │ │ ╱ ⚠️ MEDIUM ╲ │ │ ╱ ▓▓▓▓▓▓░░░░ ╲ │ │ ──────────────────── │ │ 0.0 1.0 │ │ │ │ Manipulation Risk: HIGH │ │ Active Flags: 3 │ │ │ │ ┌─ Breakdown ─────────┐ │ │ │ Market: ▓▓░░ 45% │ │ │ │ Sentiment: ▓▓▓░ 72% │ │ │ │ Diversity: ▓▓▓░ 65% │ │ │ │ Volume: ▓▓░░ 38% │ │ │ │ Timing: ▓▓░░ 52% │ │ │ └─────────────────────┘ │ └──────────────────────────┘ ``` ## Shared Components | Component | Description | Used In | |-----------|-------------|---------| | ProbabilityGauge | Circular/arc gauge showing 0-100% | Cards, Detail, Campaigns | | SentimentBadge | Colored badge (-1 to +1) | Cards, Detail | | TrustBadge | Trust score with color coding | Cards, Detail, Trust | | DivergenceIndicator | Visual indicator of signal divergence | Cards, Detail | | MiniSparkline | Tiny inline probability chart | Cards, Lists | | FactorList | Vertical list of impact factors | Explanations, Campaigns | | TimeAgo | Relative timestamp display | Throughout | | SourceIcon | Icon for data source (Polymarket, X, etc.) | Signals, Trust | | ConfidenceBadge | LOW/MED/HIGH/VERY_HIGH badge | Cards, Detail | | RadarChart | 5-axis radar for scoring factors | Campaigns, Trust | ## Color System ``` Probability: 0-30% → Red (#EF4444) 30-50% → Orange (#F97316) 50-70% → Yellow (#EAB308) 70-90% → Green (#22C55E) 90-100% → Emerald (#10B981) Trust Score: 0-0.3 → Red (CRITICAL) 0.3-0.5 → Orange (HIGH risk) 0.5-0.7 → Yellow (MEDIUM) 0.7-1.0 → Green (LOW risk) Sentiment: -1 to -0.3 → Red (negative) -0.3 to 0.3 → Gray (neutral) 0.3 to 1.0 → Green (positive) Divergence: NONE → Gray LOW → Blue MEDIUM → Yellow HIGH → Orange EXTREME → Red (pulsing) ``` ## Responsive Breakpoints | Breakpoint | Layout | |-----------|--------| | Mobile (<640px) | Single column, cards stack vertically, simplified charts | | Tablet (640-1024px) | 2-column grid, side panel collapses | | Desktop (1024-1440px) | 3-column grid with sidebar | | Terminal (1440px+) | Full Bloomberg-style layout, 4 panels | ## State Management ```typescript // Zustand store structure interface PredictStore { // Events events: PredictionEvent[]; activeEvent: PredictionEvent | null; filters: EventFilters; // Realtime subscriptions: Map; // Marketing activeCampaign: CampaignPrediction | null; campaignHistory: CampaignPrediction[]; // Calibration calibrationReport: CalibrationReport | null; // Actions fetchEvents: (filters: EventFilters) => Promise; subscribeToEvent: (eventId: string) => void; predictCampaign: (input: CampaignInput) => Promise; } ```