Adding possibility to select and view "trips" - as aggregations of drives and chargers.

Custom date picker.
Light/Dark support.

Author: Greg

.github/workflows/ci.yml

@@ -13,9 +13,18 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "22"
+          cache: npm
+          cache-dependency-path: src/web/package-lock.json
+      - run: npm ci
+        working-directory: src/web
+      - run: npm run build
+        working-directory: src/web
       - uses: actions/setup-go@v5
         with:
           go-version: "1.22"
           cache: true
       - run: go vet ./...
-      - run: go build ./...
+      - run: go build -o /dev/null ./src

.github/workflows/docker.yml

@@ -44,6 +44,7 @@ jobs:
         uses: docker/build-push-action@v6
         with:
           context: .
+          file: docker/Dockerfile
           platforms: linux/amd64,linux/arm64
           push: true
           tags: ${{ steps.meta.outputs.tags }}

.gitignore

@@ -3,3 +3,5 @@
 *.exe
 .env
 .DS_Store
+src/web/node_modules/
+src/web/dist/

CLAUDE.md

@@ -1,40 +1,56 @@
 # CLAUDE.md
 
-teslamate-dash: read-only, self-hosted dashboard for TeslaMate. Single Go binary, embedded web UI, one container.
+teslamate-dash: read-only, self-hosted dashboard for TeslaMate. Single Go binary, embedded React web UI, one container. The visual reference is `TeslaMate Dash.dc.html` (open in a browser); the UI matches it.
 
 ## Layout
 
-- `main.go` server + graceful shutdown, embeds `web/`.
-- `config.go` env config (reuses TeslaMate `DATABASE_*`, `TC_` overrides).
-- `model.go` types + the `Store` interface.
-- `db.go` read-only pgx pool and all SQL. The only file that talks to Postgres.
-- `demo.go` synthetic data so the binary runs with no DB.
-- `handlers.go` JSON API.
-- `web/` embedded static frontend (MapLibre + vanilla JS).
+All app code lives in `src/`; Docker packaging in `docker/` (`go.mod` stays at the root, so Go
+commands take `./src`).
+
+- `src/main.go` server + graceful shutdown, embeds `src/web/dist`.
+- `src/config.go` env config (reuses TeslaMate `DATABASE_*`, `TC_` overrides).
+- `src/model.go` types, the `Store` interface, Douglas-Peucker trace simplification.
+- `src/db.go` read-only pgx pool and all SQL. The only file that talks to Postgres.
+- `src/demo.go` synthetic data so the binary runs with no DB.
+- `src/handlers.go` JSON API: `/api/config`, `/api/cars`, `/api/summary`, `/api/activities`,
+  `/api/activities/{id}` (drive speed/SoC series, charge power-vs-SoC curve) — all behind a short TTL cache.
+- `src/web/` React + Vite + TypeScript frontend (MapLibre GL). `src/web/src/App.tsx` owns state; `src/web/src/components/` split by region (Header, KpiGrid, ActivityFeed, SelectionBar, MapView, DetailPanel, TripSummary).
+- `docker/Dockerfile` (+ its `.dockerignore`) — build with the repo root as context.
 
 ## Hard rules
 
 - **Read-only, always.** Never add INSERT/UPDATE/DELETE/DDL. Sessions are forced read-only in `openDB`;
   keep it that way and assume a read-only DB role.
-- **No telemetry, no outbound server calls.** The server must not phone home. The only external request
-  is the browser fetching basemap tiles from the configured style URL.
-- **Privacy first.** This is someone's home and movements. Do not log coordinates. Keep `TC_REDACT_HOME`
-  meaningful. Never commit real data; demo data only.
+- **No telemetry, no outbound server calls.** The server must not phone home. Browser-side external
+  requests are basemap tiles (configured style URL) and Google Fonts only.
+- **Privacy first.** This is someone's home and movements. Do not log coordinates. Never commit real
+  data; demo data only.
 - **Stay a companion.** Do not modify TeslaMate's schema or write to its tables. Ride alongside.
 
 ## Conventions
 
 - Add a new read path: extend the `Store` interface, implement in both `db.go` and `demo.go`, expose in
-  `handlers.go`. Keep queries parameterised and bounded (LIMIT, date range).
-- Frontend stays dependency-light: MapLibre from CDN, no build step.
-- Brand accent is teal (`#0E9AA7`). Headings Poppins, body Inter. Avoid em dashes in UI copy.
+  `handlers.go`. Keep queries parameterised and bounded (LIMIT, date range), and pre-thin `positions`
+  rows in SQL before simplifying in Go.
+- Design tokens (from the `.dc.html` reference): bg `#111318`, panels `#15171d`, cards `#1c1f27`,
+  text `#e9eaee` / muted `#7d818c`, accent red `#e0223a`, drive blue `#4f6bc0`/`#7d9bf0`, charging
+  green `#3ecf8e`/`#2fbf82`. Fonts: Space Grotesk (UI), JetBrains Mono (numbers/metadata). Route lines
+  are speed-graded 30→150 km/h (`#a9c0dd` → `#4f6bc0` → `#1b2b74`) over a white casing.
+- Frontend styling is inline styles + one small global CSS, mirroring the reference. No component
+  library. Theme colors go through the CSS variables in `src/web/src/styles.css` (dark is default,
+  light via `data-theme` on `<html>`, toggled in the header and persisted to localStorage) — never
+  hardcode a themeable color in a component.
+- Charge classification: `supercharger` if any `charges.fast_charger_present`, else `home` when
+  `geofence_id` is set, else `destination`. Filters must drive both list and map.
 
 ## Build / run
 
 ```bash
-go mod tidy
-go run .                 # demo mode if no DATABASE_HOST
-docker build -t teslamate-dash . && docker run --rm -p 4001:4001 teslamate-dash
+(cd src/web && npm install && npm run build)   # required before go build (embeds src/web/dist)
+go run ./src                 # demo mode if no DATABASE_HOST
+cd src/web && npm run dev    # frontend dev server, proxies /api to :4001
+go vet ./... && go build -o /dev/null ./src    # what CI runs (after the npm build)
+docker build -f docker/Dockerfile -t teslamate-dash . && docker run --rm -p 4001:4001 teslamate-dash
 ```
 
 ## Publish (do this yourself; Claude will not push or take tokens)

README.md

@@ -16,32 +16,44 @@ ever written back to TeslaMate.
 
 ## Features
 
-- **Map-first.** Every drive is drawn from its GPS trace and **colored by speed** (a perceptual
-  light-to-deep blue ramp), so you can read where you go fast and where you crawl at a glance.
-- **Charging on the same map.** Sessions are **clustered by location within 50 m** into a single
-  marker that shows the session count, total energy, and AC/DC split. Click any cluster for details.
-- **Per-car.** Multi-car aware. Pick a vehicle by its TeslaMate name (or view all cars combined);
-  the whole dashboard filters to it.
-- **Any timeframe.** All time, last year, 90 days, or 30 days, with a loading indicator while data
-  refreshes.
-- **Headline stats.** Distance, drives, energy, and charging sessions for the current selection.
-- **Layer toggles.** Show drives, charging, or both (both by default).
-- **3D buildings & globe.** Buildings extrude as you zoom and tilt into a city; the world renders on a
-  globe projection.
-- **Light, fast UI.** MapLibre + vanilla JS, no build step, served straight from the binary.
+- **Map-first.** Every drive is drawn from its GPS trace and **colored by speed** (a light-to-deep
+  blue ramp with a white casing), so you can read where you go fast and where you crawl at a glance.
+- **Presentation mode.** Tick any drives and charges in the activity feed to **isolate them on the
+  map** — build the exact route you want to walk someone through, then Focus map to frame it.
+  Shift-click range-selects; **Share** serializes the selection into a URL you can send around.
+- **Detail panels.** Click any drive — in the feed, or its route on the map — for a stat grid,
+  state-of-charge bar, and a **speed + battery chart** over the trip. Click a charge (or its marker)
+  for the real **charging curve** (power vs. state of charge) with peak/avg/min power and range
+  added. Step through activities with ‹ › without leaving the panel.
+- **Trip summary.** Turn a selection into a route-planner-style itinerary: departure → drive legs →
+  charge stops (with SoC bars and energy) → arrival, plus drive/charge time totals.
+- **Activity feed.** Drives and charging sessions merged newest-first, with type filters
+  (All / Drives / Charging) and an eye toggle that hides home & destination charging from both the
+  list and the map.
+- **Charge classification.** Supercharger stops (DC fast charging), home charging (inside a named
+  geofence), and destination charging are told apart from the data, not hardcoded, and get distinct
+  markers.
+- **KPI cards.** Distance, drives, energy, and efficiency for the range — each with a delta against
+  the prior period of equal length and a sparkline of the trend.
+- **Any timeframe.** All time, last year, 90 days, 30 days, or a custom From/To range with quick
+  presets.
+- **Per-car.** Multi-car aware; pick a vehicle in the header and the whole dashboard filters to it.
+- **One binary.** React + MapLibre frontend built once and embedded; served straight from the Go
+  binary.
 
 ## Quick start (demo, no database)
 
 ```bash
-docker build -t teslamate-dash .
+docker build -f docker/Dockerfile -t teslamate-dash .
 docker run --rm -p 4001:4001 teslamate-dash
 # open http://localhost:4001  (DEMO mode with synthetic data)
 ```
 
-Or with Go (1.22+):
+Or with Go (1.22+) and Node (20+):
 
 ```bash
-go run .          # demo mode when no DATABASE_HOST/TC_DSN is set
+(cd src/web && npm install && npm run build)   # build the embedded UI first
+go run ./src      # demo mode when no DATABASE_HOST/TC_DSN is set
 ```
 
 ### Published image
@@ -74,7 +86,9 @@ Or add it to your existing TeslaMate `docker-compose.yml` as another service:
 
 ```yaml
   dash:
-    build: ./teslamate-dash   # or image: ghcr.io/youruser/teslamate-dash
+    build:                    # or image: ghcr.io/youruser/teslamate-dash
+      context: ./teslamate-dash
+      dockerfile: docker/Dockerfile
     environment:
       - DATABASE_HOST=database
       - DATABASE_USER=teslamate_ro
@@ -219,8 +233,6 @@ All configuration is via environment variables. `TC_`-prefixed names override th
 | `TC_UNITS` | `km` | `km` or `mi` |
 | `TC_TITLE` | `TeslaMate Dash` | Header title |
 | `TC_MAP_STYLE_URL` | OpenFreeMap Positron | MapLibre style URL. Point at your own tiles for full privacy. |
-| `TC_DOWNSAMPLE` | `4` | Keep every Nth GPS point when drawing routes (higher is lighter) |
-| `TC_REDACT_HOME` | `true` | Reserved flag for hiding the home area in shareable views. Parsed and exposed on `/api/config`, but not yet enforced, so it currently has no visible effect. |
 | `TC_DEMO` | auto | Force synthetic data on or off |
 
 ## Privacy
@@ -236,28 +248,42 @@ This data is your home address, geofences, and full movement history. The app is
 
 ## How it works
 
-A single Go binary embeds the web UI and talks to Postgres over a read-only `pgx` pool. The frontend is
-MapLibre GL plus a little vanilla JS, with no build step.
+A single Go binary embeds the built web UI and talks to Postgres over a read-only `pgx` pool. The
+frontend is React + TypeScript (Vite) with MapLibre GL; position traces are simplified server-side
+(Douglas-Peucker) so map payloads stay small even for six-hour drives.
 
 | File | Role |
 |---|---|
-| `main.go` | HTTP server, graceful shutdown, embeds `web/` |
-| `config.go` | Environment configuration |
-| `model.go` | Types and the `Store` interface |
-| `db.go` | Read-only pgx pool and all SQL (the only file that touches Postgres) |
-| `demo.go` | Synthetic data so it runs with no database |
-| `handlers.go` | JSON API |
-| `web/` | Embedded MapLibre + vanilla JS frontend |
+| `src/main.go` | HTTP server, graceful shutdown, embeds `src/web/dist` |
+| `src/config.go` | Environment configuration |
+| `src/model.go` | Types, the `Store` interface, trace simplification |
+| `src/db.go` | Read-only pgx pool and all SQL (the only file that touches Postgres) |
+| `src/demo.go` | Synthetic data so it runs with no database |
+| `src/handlers.go` | JSON API (`/api/config`, `/api/cars`, `/api/summary`, `/api/activities`, `/api/activities/{id}`) |
+| `src/web/` | React + Vite + TypeScript frontend, built to `src/web/dist` |
+| `docker/` | Dockerfile and its dockerignore |
 
 ## Development
 
 ```bash
+(cd src/web && npm install && npm run build)   # required once before go build/run
 go mod tidy
-go run .                 # demo mode if no DATABASE_HOST
+go run ./src             # demo mode if no DATABASE_HOST
 # point at a database:
-DATABASE_HOST=localhost DATABASE_PASS=secret go run .
+DATABASE_HOST=localhost DATABASE_PASS=secret go run ./src
 ```
 
+For frontend work, run the API and the Vite dev server side by side; Vite proxies `/api` to `:4001`:
+
+```bash
+go run ./src                 # terminal 1
+cd src/web && npm run dev    # terminal 2, open the printed URL
+```
+
+The Docker image always builds with the **repo root as context** (`docker build -f docker/Dockerfile .`);
+the frontend is built inside the image, so no local `npm` run is needed for container builds. BuildKit
+(the default builder since Docker 23) automatically applies `docker/Dockerfile.dockerignore`.
+
 Tested against the TeslaMate schema tables `drives`, `positions`, `charging_processes`, `charges`,
 `addresses`, `geofences`, `cars`. The app checks these exist on startup and fails with a clear message
 if your TeslaMate version differs.