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

Component	Purpose	Key Hooks
FleetMap	Leaflet map with balloon markers and flight paths	useMap, useTelemetryStream
BalloonDetails	Selected balloon info panel	useCopilotReadable
WeatherOverlay	Weather data from MCP tools	useCopilotAction
FlightPlanner	Natural language flight commands	useCopilotAction
CopilotChat	Conversational agent panel	useCopilotChat
AlertBanner	Real-time flight alerts	useTelemetryStream

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