Implements the layout-shell phase of the Direction B redesign from the
Anthropic Design handoff bundle.
Visual layer:
- Geist font + new --gd-* CSS token palette (panel/border/text scales,
green/amber/blue/purple accents alongside the red).
- Top bar with brand chip, origin/destination inputs, chat composer
with chip-based refinements, vehicle selector chip, Export/Share.
- Body split: map-left flex-1, stops rail 540px right (replaces the
prior chat-sidebar + bottom-timeline layout).
- Stops rail: trip summary header (stops · days · km · drive · charge),
sticky day headers with date label + per-day km/drive/charge totals,
icon-led stop cards with colored type-icon tile (charge/sleep/hotel/
attraction/cafe/viewpoint colour-coded), combo pill, description,
charge/arrive meta inline.
- Leg row between cards (km · drive time), still computed from real
OSRM routes.
- Click stop to expand: 4-stat grid (Charge/Arrive/Leave/Cost),
amenity chip cloud, alternative-swap list (preserving the existing
delta swap mechanic), Customise/Remove actions.
- Map ↔ rail bridge: clicking a card flies the map to that pin,
hovering either highlights the other. Pins are custom Leaflet
divIcons coloured per stop type with active/hover scaling.
- Empty state + quick-prompt buttons in the rail.
Not in Phase 1 (deferred):
- Variant strip (Fastest/Scenic/Cheapest) — needs backend prompt work.
- While-here food/do/see tabs — needs backend nearby[] data.
- Customise / Add-detour / GPX modals.
- Vehicle selector trim panel (still a native select for now).
- Drag-to-reorder, in-trip/compare/shared screens.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Timeline now shows the driving distance and duration between every
consecutive pair of stops, taken from real OSRM road routes (not Grok
estimates). Top stat bar and per-day headers also use the live totals
so they update immediately as the itinerary changes.
Grok now returns 1-3 alternative picks for each Supercharger and
hotel stop, each with deltaKm/deltaMin vs the chosen pick and a short
reason explaining the trade-off. The Swap (n) button on each card
expands an inline list of alternatives; clicking one swaps the stop
in place. The previously-chosen stop is kept in the alternatives
list with inverted deltas so the user can swap back. The map +
polylines + stat bar all recompute automatically.
Other tweaks:
- haversine fallback when OSRM is unreachable so legs still show
approximate metrics in offline / degraded mode.
- Leg geometry storage moves from raw polyline[] to typed Leg[] with
per-leg distance/duration/fromId/toId.
- Stop schema gains alternatives[]; client normalization filters out
alternatives missing lat/lng.
- Day cards widened (340 → 360px); timeline pane grew 280 → 340px
with vertical scroll so swap panels don't clip.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Add tsconfig.json (server) + client/tsconfig.{json,app.json,node.json}
so typecheck and tsc -b actually work.
- Fix npm test to run Playwright (was running vitest on Playwright specs);
typecheck now covers both server and client.
- Mount routes before app.listen, add error handler, mount optional
@tonycodes/auth-express middleware when AUTH_SECRET is set.
- Add /api/trips (GET/POST/PATCH/DELETE) backed by an in-memory store
that gracefully degrades when DATABASE_URL is unset.
- Add prisma/seed.ts skeleton and server/types/express.d.ts for req.auth.
- Rewrite Grok prompt for combo-aware planning: charge+eat,
stay+destination-charging, eat+viewpoint, etc., with amenities,
cuisine, priceLevel, duration, day titles and trip highlights.
- Extend Stop schema + normalization to preserve all enrichment fields.
- New StopCard component renders combo pill, description, meta row
(charge / stop / battery / cuisine / £-level) and amenity icons;
map popups show the same enriched detail; timeline gains day titles
and a HIGHLIGHTS sidebar.
- Fix server TS errors (vehicle accepted as string | {name,rangeKm},
JSON parse results typed).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Proactive Grok integration (xAI API + local CLI fallback)
- Real road routing via OSRM (no more bird's-eye lines)
- Heavy structured logging for fast iteration
- Strong sanitization + geocoding + ErrorBoundary (no black screens)
- Playwright E2E tests (API diagnostic + full UI flow)
- scripts/dev.sh for one-command startup
- Clean .env.example + documentation
This is a stable checkpoint before further prompt/UI refinement.
tony