Frontend Mock Data Migration Plan - V5.0

Date: December 3, 2025 Status: 30% Complete (Foundation laid, 70% remaining) Estimated Effort: 20-40 hours total

📊 CURRENT STATE

What's Done ✅

• ✅ Boss Agent v5.0 deployed and operational
• ✅ Frontend deployed (revision 00068-sst)
• ✅ .env.production with Boss Agent v5.0 URLs
• ✅ cellFetch API client foundation
• ✅ Basic hooks (useBOSS, useCells, useOrchestration, useNervousSystem)
• ✅ API modules (orchestration.ts, moa.ts, moe.ts)

What's Missing 🔴

• ❌ ~110 components using mock data
• ❌ Missing hooks (useMetrics, useEvents, useConnectionHealth, useStrategies)
• ❌ Missing API modules (metrics.ts, events.ts, strategies.ts)
• ❌ Build warnings for missing exports

🎯 MIGRATION STRATEGY

Phase 1: Critical Hooks & APIs (Week 1) - HIGH PRIORITY

Create Missing Hook Files: 1. hooks/api/useMetrics.ts - Dashboard metrics 2. hooks/api/useConnectionHealth.ts - Cell health monitoring 3. hooks/api/useEvents.ts - Event streaming 4. hooks/api/useStrategies.ts - Strategy management

Create Missing API Modules: 1. lib/api/metrics.ts - Metrics API 2. lib/api/events.ts - Events API with SSE 3. lib/api/strategies.ts - Strategies API

Estimated Time: 8-12 hours

Phase 2: High-Traffic Components (Week 2) - HIGH PRIORITY

Priority 1: Dashboard Components (Users see these first)

Priority 2: Boss Agent Components

Estimated Time: 12-16 hours

Phase 3: Workflow & Visualization (Week 3) - MEDIUM PRIORITY

Workflow Components:

KG & Visualization:

Estimated Time: 8-12 hours

Phase 4: Admin & Config Pages (Week 4) - LOW PRIORITY

System Management:

Monitoring & Events:

Estimated Time: 6-8 hours

🛠️ IMPLEMENTATION TEMPLATE

Step-by-Step for Each Component

Example: Migrating Dashboard.tsx

Before (Mock):

function Dashboard() {
  const [metrics, setMetrics] = useState({
    spend: 125000,
    revenue: 450000,
    roas: 3.6,
  });

  useEffect(() => {
    const interval = setInterval(() => {
      setMetrics(prev => ({
        ...prev,
        spend: prev.spend + Math.random() * 100,
      }));
    }, 5000);
    return () => clearInterval(interval);
  }, []);

  return <div>Spend: ${metrics.spend}</div>;
}

After (Real API):

import { useRealTimeMetrics } from '@/hooks/api';

function Dashboard() {
  const { data: metrics, isLoading, error } = useRealTimeMetrics();

  if (isLoading) return <DashboardSkeleton />;
  if (error) return <ErrorDisplay error={error} />;
  if (!metrics) return null;

  return <div>Spend: ${metrics.totalSpend}</div>;
}

Checklist per Component: 1. [ ] Identify mock data patterns (useState, setTimeout, Math.random) 2. [ ] Find appropriate hook from @/hooks/api 3. [ ] Replace useState with useQuery/useMutation 4. [ ] Add loading skeleton 5. [ ] Add error handling 6. [ ] Remove setTimeout/setInterval 7. [ ] Test with real backend 8. [ ] Verify data matches expected format

📋 DETAILED COMPONENT INVENTORY

Top 30 Mock Components (Prioritized)

P0 - Critical (Dashboard/Metrics): 1. Dashboard.tsx 2. KPIGrid.tsx 3. OmnichannelNeuralDashboard.tsx 4. AdvancedAnalyticsDashboard.tsx 5. CreativeDashboard.tsx

P0 - Critical (Boss Agent Chat): 6. BossAgentEnhanced.tsx 7. PersistentBossChat.tsx 8. BossAgent.tsx

P1 - High Priority (SRPVDAL/Orchestration): 9. BossAgentSRPVDAL.tsx 10. BossAgentIntegrated.tsx 11. BossAgentOrchestrator.tsx 12. BossAgentAutonomous.tsx 13. MIZOki30MOAMOEArchitecture.tsx

P1 - High Priority (System Components): 14. boss-system-components/SystemDashboard.tsx 15. boss-system-components/CellOrchestrator.tsx 16. modern/SRPVDALStatusBar.tsx

P2 - Medium Priority (Workflows): 17. VisualWorkflowBuilder.tsx 18. workflows/VisualWorkflowBuilder.tsx 19. app/workflows/[workflow]/page.tsx

P2 - Medium Priority (KG/Visualization): 20. KGCompositionDashboard.tsx 21. kg/KGMetricsDisplay.tsx 22. NeuralBrainVisualization.tsx 23. NeuralBrainFallback.tsx 24. visualizations/MizOkiVisualizations.tsx 25. visualizations/WASMAnalytics.tsx

P3 - Low Priority (Admin/Config): 26. app/agents/config/page.tsx 27. app/a2a-monitor/page.tsx 28. boss-agent-components/ExecutionMonitor.tsx 29. boss-agent-components/CompositionVisualizer.tsx 30. kernel/ChartCard.tsx

🔧 REQUIRED HOOKS TO CREATE

Metrics Hooks (hooks/api/useMetrics.ts)

- useRealTimeMetrics()
- useChannelMetrics(channelId)
- useHistoricalMetrics(params)
- usePacing()
- useAttribution()

Events Hooks (hooks/api/useEvents.ts)

- useRecentEvents(limit)
- useEventStats()
- useAcknowledgeEvent()
- useEventStream(options) // SSE

Strategies Hooks (hooks/api/useStrategies.ts)

- useStrategies()
- useStrategy(id)
- useStrategyExplanation(id)
- useCreateStrategy()
- useUpdateStrategy()
- useDeleteStrategy()
- useExecuteStrategy()
- useGenerateStrategies()

Connection Health (hooks/api/useConnectionHealth.ts)

- useConnectionHealth()
- useCellHealth(cellId)

📈 PROGRESS TRACKING

Completion Metrics

Overall Integration: ~30% Complete

⏱️ TIME ESTIMATES

Total Estimated: 38-54 hours

🚀 QUICK WIN OPPORTUNITIES

Implement these first for maximum impact:

1. useRealTimeMetrics() → Fixes Dashboard.tsx, KPIGrid.tsx (2 hours)
2. useChat() integration → Fixes BossAgentEnhanced.tsx, PersistentBossChat.tsx (3 hours)
3. useConnectionHealth() → Fixes connection indicators across app (2 hours)
4. useEventStream() → Enables real-time updates (3 hours)

Total Quick Wins: ~10 hours, fixes most visible issues

📝 IMPLEMENTATION GUIDE

For each component: 1. Search for mock patterns: grep -n "Math.random\|setTimeout" ComponentName.tsx 2. Identify data needs: What API endpoint provides this data? 3. Find/create appropriate hook 4. Replace useState + useEffect with useQuery 5. Add for loading state 6. Add for error state 7. Test with Boss Agent v5.0 backend 8. Verify no CORS errors 9. Check Network tab for correct endpoint calls 10. Commit with clear message

🎯 SUCCESS CRITERIA

Migration is complete when: - ✅ Zero Math.random() in components (for data) - ✅ Zero setTimeout(() => setData(...)) patterns - ✅ Zero setInterval for fake real-time updates - ✅ All components use React Query hooks - ✅ Network tab shows calls to *.run.app endpoints - ✅ No build warnings for missing hooks - ✅ Connection health shows real cell status - ✅ All metrics come from Boss Agent v5.0 or cell APIs

📚 REFERENCES

• Prompt 5: Complete frontend implementation guide
• Frontend Implementation Guide V5: docs/FRONTEND_IMPLEMENTATION_GUIDE_V5.md
• Boss Agent v5.0 API: 58 endpoints documented in README_V5.md
• cellFetch Client: lib/api/client.ts
• Example Hooks: hooks/api/useBOSS.ts (reference implementation)

Next Session: Start with Phase 1 (Missing Hooks/APIs) - 8-12 hours work