reactjs

name: "reactjs" description: "React frontend with CopilotKit conversational agent for hot air balloon fleet management dashboard. USE FOR: react components, copilotkit hooks, useCopilotChat, useCopilotAction, fleet dashboard, balloon map, leaflet map, weather overlay, flight planner, telemetry display, component tests, react testing library. DO NOT USE FOR: Python simulator, MCP server tools, KQL queries, Fabric IQ ontology, Event Hubs producer, backend API endpoints."

Overview

The SkyNav React frontend provides a fleet management dashboard with real-time balloon tracking on a Leaflet map, CopilotKit conversational agent for natural language fleet queries, and weather overlay panels powered by MCP server tool responses.

Component Architecture

Dashboard Layout

┌─────────────────────────────────────────────┐
│  TopBar (fleet status summary, alerts)      │
├──────────────────────┬──────────────────────┤
│                      │  SidePanel           │
│  FleetMap            │  ├─ BalloonDetails   │
│  (Leaflet + markers) │  ├─ WeatherOverlay   │
│                      │  └─ FlightPlanner    │
├──────────────────────┴──────────────────────┤
│  CopilotChat (conversational agent panel)   │
└─────────────────────────────────────────────┘

Key Components

CopilotKit Patterns

Registering Actions

useCopilotAction({
  name: "planFlight",
  description: "Create a flight plan from origin to destination",
  parameters: [
    { name: "origin", type: "string", description: "Launch site name or coordinates" },
    { name: "destination", type: "string", description: "Landing site name or coordinates" },
    { name: "balloonId", type: "string", description: "Balloon to assign" },
  ],
  handler: async ({ origin, destination, balloonId }) => {
    // Calls MCP tools: geocode → get-weather → get-wind-profile → get-notams
    const plan = await createFlightPlan(origin, destination, balloonId);
    setActivePlan(plan);
    return `Flight plan created: ${plan.summary}`;
  },
});

Exposing State as Context

useCopilotReadable({
  description: "Currently selected balloon and its latest telemetry",
  value: selectedBalloon ? JSON.stringify(selectedBalloon) : "No balloon selected",
});

Real-Time Telemetry

• WebSocket connection to Eventhouse streaming endpoint
• Custom useTelemetryStream hook with reconnection and Zod validation
• State managed via useReducer with a Map<string, BalloonTelemetry> for O(1) updates
• Balloon markers update position smoothly using Leaflet's setLatLng

Map Integration

• react-leaflet with OpenStreetMap tiles (no API key needed)
• Custom BalloonMarker with status-based icons (green/gray/red)
• Polyline for flight path history from telemetry stream
• Circle overlays for restricted zones from NOTAM data
• useMap() for programmatic pan/zoom on balloon selection

Testing Approach

• React Testing Library for component behavior tests
• MSW for mocking MCP server responses and WebSocket messages
• @testing-library/user-event for realistic interaction simulation
• Co-located test files: Component.tsx → Component.test.tsx
• Test CopilotKit actions by verifying UI side effects, not hook internals

When NOT to Use

• Python IoT simulator code → use iot-telemetry skill
• MCP server tool implementation → use mcp skill
• KQL queries for Eventhouse → use mcp skill
• Fabric IQ ontology definitions → use mcp skill