The session page at /session just got a major upgrade. Instead of just a progress ring and sparklines, you now get three real-time metrics that matter: elapsed time, estimated time remaining, and cost accrued so far.

When you start a charging session — whether through the verification flow with NFC tap and photo upload, or by connecting to a live telemetry WebSocket — a timer begins tracking your elapsed time. The display updates every second in a clean HH:MM:SS format.

Estimated remaining time is calculated from your charging rate. As the WebSocket or demo telemetry pushes progress updates, the system tracks how quickly the State of Charge (SoC) is increasing and projects when you'll hit 100%. This estimate updates dynamically as your charging rate changes.

Cost accrued is now front and center in the new Session Time card. At 0.25 VSC per kWh, the running total updates with every telemetry frame. Combined with the existing pricing transparency card, you always know exactly what you're paying, in real time.

We also fixed a display bug: the "Delivered" stat was labeled "Hours" when it should have been "kWh". The value represented kilowatt-hours delivered, not hours of charging time. The unit is now correctly displayed as kWh.

Under the hood, the timer and rate-tracking logic lives entirely in the Svelte 5 runes reactive system — $state for mutable values, $derived for derived paths, and a clean onMount/onDestroy lifecycle. The demo fallback (when no WebSocket is available) also uses the same timer infrastructure, so the experience is identical whether you're connected to a live charger or testing the interface.

This is part of our ongoing investment in making the charging experience transparent and informative. Next on the roadmap: push notifications for session events, idle fee counters, and a session history timeline.