jolly-ambulance

As a user, I want to see the main Dashboard page implemented based on the existing JSX design (Dashboard v4). The page should include: an interactive Leaflet.js map with realistic OpenStreetMap/Mapbox tiles showing user (blue marker), ambulance (red animated marker), and hospital (green marker); a 'Book Ambulance' button; a Normal/Smart AI Mode toggle; a side panel for status updates, ETA, and agent activity logs; a progress bar; and a 'Time Saved' indicator. Follows the user flow: View Map → Book Ambulance → Toggle Mode → Watch Simulation → View ETA Updates → Track Progress.

As an admin, I want the Settings page implemented based on the existing JSX design (Settings v2). The page should allow configuration of simulation parameters: ambulance speed, traffic density, hospital locations, and enable/disable the 3-Level Intelligent Traffic Clearance System. Follows the admin user flow: Dashboard: View Overview → Settings: Configure Parameters → Set Ambulance Speed / Set Traffic Density.

As a user, I want the map to use realistic map tiles (OpenStreetMap or Mapbox) via Leaflet.js so the simulation looks visually immersive. Integrate Leaflet.js into the Dashboard, configure realistic tile layers, render user (blue), ambulance (red animated), and hospital (green) markers, and draw polyline routes between them. Ensure smooth map interactions and mobile responsiveness.

As a user, I want the Dispatch Agent to simulate finding and assigning the nearest ambulance when 'Book Ambulance' is clicked. The agent should: generate a random ambulance starting location, log 'Dispatch Agent: Selected nearest ambulance' to the UI agent activity panel and console, and update shared simulation state with assignment details.

As a user, I want the Route Optimization Agent to calculate and animate the best polyline route (Ambulance → User → Hospital) on the Leaflet map. In Smart AI Mode it should use a faster/optimized path. The agent should dynamically adjust routes, log decisions to the Agent Activity Panel, and coordinate with ETA and Traffic Control agents via shared state.

As a user, I want the Traffic Control Agent to simulate the 3-Level Intelligent Traffic Clearance System in Smart AI Mode. Each traffic signal is represented as {id, position: {lat, lng}, state, priority}. Every second in the simulation loop: Level 1 (≤1000m) → mark READY, show yellow/blinking marker, log 'Level 1: Preparing signal ahead'; Level 2 (≤500m) → PREPARE_GREEN, slight speed boost, log 'Level 2: Clearing traffic ahead'; Level 3 (≤50m) → force GREEN, stop cross traffic, max speed, log 'Level 3: Full clearance activated'. In Normal Mode signals remain unchanged. Map markers update to red/yellow/green with L1/L2/L3 labels. Log format: 'Signal {id} → Level {n} activated ({distance}m)'. Coordinate with Route Optimization and ETA agents.

As a user, I want the ETA Prediction Agent to continuously calculate and display ETA1 (ambulance to user) and ETA2 (user to hospital) in real time. It should update based on current ambulance speed, active traffic clearance level, and mode (Normal vs Smart AI). ETAs should be shown dynamically in the dashboard side panel and update every simulation tick.

As a user, I want the Hospital Coordination Agent to simulate notifying the hospital before ambulance arrival. When the ambulance is within a threshold distance of the hospital, display 'Hospital Ready' in the status panel and log the notification in the Agent Activity Panel. Coordinate timing with the Simulation and ETA agents.

As a user, I want the Simulation Agent to drive the ambulance marker animation along the polyline route on the Leaflet map. It should update marker position every tick, trigger status transitions ('Ambulance Dispatched' → 'Ambulance Arriving' → 'Reached User' → 'Heading to Hospital' → 'Reached Hospital'), update the progress bar (% completed), and coordinate speed changes from the Traffic Control Agent. Smooth animations and micro-interactions should be included.

As a user, I want to see a 'Time Saved' indicator that dynamically updates to show how much time Smart AI Mode saved compared to Normal Mode during and after simulation. This should integrate with the ETA Prediction Agent and Simulation Agent outputs, and display prominently on the Dashboard per the design.

As a user, I want a live Agent Activity Panel on the Dashboard side panel that displays real-time logs from all agents (Dispatch, Route Optimization, Traffic Control, ETA, Hospital Coordination, Simulation). Logs should include level triggers, signal IDs, distances, and all agent decision messages. The panel should auto-scroll and be visually distinct per the Dashboard v4 design.

As a user, I want a prominent toggle on the Dashboard to switch between Normal Mode and Smart AI Mode. In Normal Mode the ambulance moves slower, signals remain unchanged, and no clearance is applied. In Smart AI Mode the 3-level traffic clearance activates, ambulance speed increases dynamically, and the Time Saved indicator updates. The toggle should provide immediate visual feedback on the map and side panel.

As an admin, I want to monitor the performance of each agent in real-time from the Dashboard overview. The view should display per-agent status, recent decisions, and activity metrics. Follows the admin flow: Dashboard: View Overview → Dashboard: Monitor Agents → Dashboard: View Agent Logs.

As a user, I want the entire application (Dashboard, Settings) to be fully responsive and functional on both desktop and mobile devices. Ensure map, panels, buttons, toggles, and log panels adapt correctly to various screen sizes as per the NFRs.