feat(fsr): add snapshot-scoped route geometry

Harden the Bergamo field-service routing demo around real road-network geometry and retained solver snapshots. The solver payload now keeps travel legs as the authoritative feasibility matrix while route polylines are served through a dedicated /jobs/{id}/routes endpoint keyed by snapshot revision. Geometry generation reports segment-level statuses so NoPath and SnapFailed legs can be represented as non-routed route segments instead of failing the whole route response.

Move OSM preparation to solve submission time and keep generated seed data lightweight. The demo is now standard-only, initial plans carry only identity travel legs, and solve creation prepares the full routing matrix before starting the retained job. Encoded polylines were removed from TravelLeg so the domain model no longer mixes solver facts with map rendering artifacts.

Update the frontend to treat route geometry as snapshot-scoped cache state. The app clears stale polylines whenever a newer snapshot renders, applies route fetches only when the response identity still matches the current plan, and leaves markers, route cards, timeline, and tables visible when geometry is missing or partially unavailable. The UI was split into smaller layout, route-state, map-rendering, and route-list modules to keep source files below the 300 LOC threshold.

Improve score analysis fidelity by giving each route constraint an explicit match counter. Match counts now describe the underlying visits, legs, lateness, capacity, territory, and workload matches instead of merely counting routes with non-zero scores, with regression coverage for the reported constraint analysis output.

Align the app on published support crates by using solverforge-ui 0.6.5 and solverforge-maps 2.1.4 from crates.io. README and solverforge.app.toml now describe the same published dependency surface, and root-level generated desktop bundle names are ignored so accidental Electron/Codex artifacts are not committed.

Verification performed: cargo fmt -- --check; cargo test; cargo clippy -- -D warnings; node --check static/*.js; stale version/path string scan; source/static 300 LOC guard. The configured pre-commit hooks also ran during git commit and passed.

.gitignore

@@ -1,3 +1,6 @@
 /target
 .osm_cache/
 **/*.rs.bk
+/app-session-*.js
+/comment-preload.js
+/main-*.js

Cargo.lock

@@ -1620,9 +1620,9 @@ dependencies = [
 
 [[package]]
 name = "solverforge-maps"
-version = "2.1.3"
+version = "2.1.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "939b91fd4706c75795ef82db3a569fa47868d72763c48e24e992c00df242dbe0"
+checksum = "e31f816d221238ba3ade93315e6a605486b53d9ec26527477d165b507ece6a88"
 dependencies = [
  "rayon",
  "reqwest",
@@ -1664,9 +1664,9 @@ dependencies = [
 
 [[package]]
 name = "solverforge-ui"
-version = "0.6.4"
+version = "0.6.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7fa4894a0295ef1b538d0c25cb5a8ca0a93a97936421df4ac169154cd3d2a533"
+checksum = "1c7fa2d78c84af9a1e264adcffc1bdf8cb4edab8d73a3543fb448d166c95596f"
 dependencies = [
  "axum",
  "include_dir",

Cargo.toml

@@ -11,8 +11,8 @@ path = "src/main.rs"
 
 [dependencies]
 solverforge = { version = "0.10.0", features = ["serde", "console", "verbose-logging"] }
-solverforge-ui = { version = "0.6.4" }
-solverforge-maps = { version = "2.1.3" }
+solverforge-ui = { version = "0.6.5" }
+solverforge-maps = { version = "2.1.4" }
 # Web server
 axum = "0.8.9"
 tokio = { version = "1.52.1", features = ["full"] }

README.md

@@ -6,11 +6,11 @@ A SolverForge constraint optimization project (scaffold: `neutral scaffold`).
 
 - CLI version used to scaffold this project: `2.0.2`
 - SolverForge runtime target for this scaffold: `solverforge 0.10.0`
-- SolverForge UI target for this scaffold: `solverforge-ui 0.6.4`
-- SolverForge maps target for this scaffold: `solverforge-maps 2.1.3`
+- SolverForge UI target for this scaffold: `solverforge-ui 0.6.5`
+- SolverForge maps target for this scaffold: `solverforge-maps 2.1.4`
 - Runtime dependency currently wired into `Cargo.toml`: `crates.io: solverforge 0.10.0`
-- Frontend UI dependency currently wired into `Cargo.toml`: `crates.io: solverforge-ui 0.6.4`
-- Maps dependency currently wired into `Cargo.toml`: `crates.io: solverforge-maps 2.1.3`
+- Frontend UI dependency currently wired into `Cargo.toml`: `crates.io: solverforge-ui 0.6.5`
+- Maps dependency currently wired into `Cargo.toml`: `crates.io: solverforge-maps 2.1.4`
 
 This project was scaffolded by `solverforge-cli`, and it currently targets `SolverForge crate target 0.10.0` through the configured crate dependency targets.
 

solverforge.app.toml

@@ -6,14 +6,13 @@ cli_version = "2.0.2"
 [runtime]
 target = "solverforge 0.10.0"
 runtime_source = "crates.io: solverforge 0.10.0"
-ui_source = "crates.io: solverforge-ui 0.6.4"
+ui_source = "crates.io: solverforge-ui 0.6.5"
+maps_source = "crates.io: solverforge-maps 2.1.4"
 
 [demo]
 default_size = "standard"
 available_sizes = [
-    "small",
     "standard",
-    "large",
 ]
 
 [solution]

src/api/mod.rs

@@ -1,4 +1,6 @@
 mod dto;
+mod route_dto;
+mod route_geometry;
 mod routes;
 mod sse;
 

src/api/route_dto.rs

@@ -0,0 +1,57 @@
+use serde::Serialize;
+
+#[derive(Debug, Clone, Serialize)]
+#[serde(rename_all = "camelCase")]
+pub struct JobRoutesDto {
+    pub id: String,
+    pub job_id: String,
+    pub snapshot_revision: u64,
+    pub routes: Vec<TechnicianRouteGeometryDto>,
+}
+
+#[derive(Debug, Clone, Serialize)]
+#[serde(rename_all = "camelCase")]
+pub struct TechnicianRouteGeometryDto {
+    pub route_id: String,
+    pub technician_id: String,
+    pub technician_name: String,
+    pub color: String,
+    pub segments: Vec<RouteSegmentDto>,
+}
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Serialize)]
+#[serde(rename_all = "SCREAMING_SNAKE_CASE")]
+pub enum RouteGeometryStatus {
+    Routed,
+    UnreachableLeg,
+    SnapFailed,
+    NoPath,
+}
+
+#[derive(Debug, Clone, Serialize)]
+#[serde(rename_all = "camelCase")]
+pub struct RouteSegmentDto {
+    pub route_id: String,
+    pub from_location_idx: usize,
+    pub to_location_idx: usize,
+    pub duration_seconds: i64,
+    pub distance_meters: i64,
+    pub reachable: bool,
+    pub geometry_status: RouteGeometryStatus,
+    pub encoded_polyline: String,
+}
+
+impl JobRoutesDto {
+    pub fn new(
+        job_id: usize,
+        snapshot_revision: u64,
+        routes: Vec<TechnicianRouteGeometryDto>,
+    ) -> Self {
+        Self {
+            id: job_id.to_string(),
+            job_id: job_id.to_string(),
+            snapshot_revision,
+            routes,
+        }
+    }
+}

src/api/route_geometry.rs

@@ -0,0 +1,273 @@
+use axum::http::StatusCode;
+
+use super::route_dto::{RouteGeometryStatus, RouteSegmentDto, TechnicianRouteGeometryDto};
+use crate::data::{load_network, DemoDataError};
+use crate::domain::{FieldServicePlan, TravelLeg};
+
+pub(super) fn status_from_routing_error(error: solverforge_maps::RoutingError) -> StatusCode {
+    eprintln!("Bergamo route geometry failed: {error}");
+    match error {
+        solverforge_maps::RoutingError::InvalidCoordinate { .. } => StatusCode::BAD_REQUEST,
+        solverforge_maps::RoutingError::Cancelled => StatusCode::REQUEST_TIMEOUT,
+        solverforge_maps::RoutingError::Network(_)
+        | solverforge_maps::RoutingError::Parse(_)
+        | solverforge_maps::RoutingError::Io(_)
+        | solverforge_maps::RoutingError::SnapFailed { .. }
+        | solverforge_maps::RoutingError::NoPath { .. } => StatusCode::BAD_GATEWAY,
+    }
+}
+
+pub(super) async fn build_route_geometry(
+    plan: &FieldServicePlan,
+) -> Result<Vec<TechnicianRouteGeometryDto>, solverforge_maps::RoutingError> {
+    let network = load_network().await.map_err(|error| match error {
+        DemoDataError::Routing(error) => error,
+    })?;
+    let mut routes = Vec::with_capacity(plan.technician_routes.len());
+
+    for route in &plan.technician_routes {
+        let mut segments = Vec::new();
+        let mut previous_location_idx = route.start_location_idx;
+        for &visit_idx in &route.visits {
+            let Some(visit) = plan.service_visits.get(visit_idx) else {
+                continue;
+            };
+            segments.push(build_route_segment(
+                plan,
+                &network,
+                &route.id,
+                previous_location_idx,
+                visit.location_idx,
+            )?);
+            previous_location_idx = visit.location_idx;
+        }
+        if !route.visits.is_empty() {
+            segments.push(build_route_segment(
+                plan,
+                &network,
+                &route.id,
+                previous_location_idx,
+                route.end_location_idx,
+            )?);
+        }
+
+        routes.push(TechnicianRouteGeometryDto {
+            route_id: route.id.clone(),
+            technician_id: route.technician_id.clone(),
+            technician_name: route.technician_name.clone(),
+            color: route.color.clone(),
+            segments,
+        });
+    }
+
+    Ok(routes)
+}
+
+fn build_route_segment(
+    plan: &FieldServicePlan,
+    network: &solverforge_maps::RoadNetwork,
+    route_id: &str,
+    from_location_idx: usize,
+    to_location_idx: usize,
+) -> Result<RouteSegmentDto, solverforge_maps::RoutingError> {
+    let travel_leg = find_travel_leg(plan, from_location_idx, to_location_idx);
+    if !travel_leg.is_some_and(|leg| leg.reachable) {
+        return Ok(non_routed_segment(
+            route_id,
+            from_location_idx,
+            to_location_idx,
+            travel_leg,
+            RouteGeometryStatus::UnreachableLeg,
+        ));
+    }
+
+    let from = plan.locations.get(from_location_idx).ok_or_else(|| {
+        solverforge_maps::RoutingError::Network("route source location missing".into())
+    })?;
+    let to = plan.locations.get(to_location_idx).ok_or_else(|| {
+        solverforge_maps::RoutingError::Network("route target location missing".into())
+    })?;
+
+    let route_result = network.route(
+        solverforge_maps::Coord::new(from.lat(), from.lng()),
+        solverforge_maps::Coord::new(to.lat(), to.lng()),
+    );
+    let route = match route_result {
+        Ok(route) => route.simplify(12.0),
+        Err(error) => {
+            if let Some(status) = recoverable_geometry_status(&error) {
+                return Ok(non_routed_segment(
+                    route_id,
+                    from_location_idx,
+                    to_location_idx,
+                    travel_leg,
+                    status,
+                ));
+            }
+            return Err(error);
+        }
+    };
+
+    Ok(RouteSegmentDto {
+        route_id: route_id.to_string(),
+        from_location_idx,
+        to_location_idx,
+        duration_seconds: route.duration_seconds,
+        distance_meters: route.distance_meters.round() as i64,
+        reachable: true,
+        geometry_status: RouteGeometryStatus::Routed,
+        encoded_polyline: solverforge_maps::encode_polyline(&route.geometry),
+    })
+}
+
+fn find_travel_leg(
+    plan: &FieldServicePlan,
+    from_location_idx: usize,
+    to_location_idx: usize,
+) -> Option<&TravelLeg> {
+    let width = plan.locations.len();
+    plan.travel_legs
+        .get(from_location_idx.checked_mul(width)? + to_location_idx)
+        .filter(|leg| {
+            leg.from_location_idx == from_location_idx && leg.to_location_idx == to_location_idx
+        })
+        .or_else(|| {
+            plan.travel_legs.iter().find(|leg| {
+                leg.from_location_idx == from_location_idx && leg.to_location_idx == to_location_idx
+            })
+        })
+}
+
+fn non_routed_segment(
+    route_id: &str,
+    from_location_idx: usize,
+    to_location_idx: usize,
+    travel_leg: Option<&TravelLeg>,
+    geometry_status: RouteGeometryStatus,
+) -> RouteSegmentDto {
+    RouteSegmentDto {
+        route_id: route_id.to_string(),
+        from_location_idx,
+        to_location_idx,
+        duration_seconds: travel_leg.map_or(0, |leg| leg.duration_seconds),
+        distance_meters: travel_leg.map_or(0, |leg| leg.distance_meters),
+        reachable: false,
+        geometry_status,
+        encoded_polyline: String::new(),
+    }
+}
+
+fn recoverable_geometry_status(
+    error: &solverforge_maps::RoutingError,
+) -> Option<RouteGeometryStatus> {
+    match error {
+        solverforge_maps::RoutingError::SnapFailed { .. } => Some(RouteGeometryStatus::SnapFailed),
+        solverforge_maps::RoutingError::NoPath { .. } => Some(RouteGeometryStatus::NoPath),
+        _ => None,
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use crate::domain::{FieldServicePlan, Location, TravelLegInit};
+
+    #[test]
+    fn finds_dense_or_sparse_travel_leg() {
+        let plan = test_plan(vec![TravelLeg::new(TravelLegInit {
+            id: "leg-01-02".to_string(),
+            name: "leg-01-02".to_string(),
+            from_location_idx: 1,
+            to_location_idx: 2,
+            duration_seconds: 42,
+            distance_meters: 1000,
+            reachable: true,
+        })]);
+
+        let leg = find_travel_leg(&plan, 1, 2).expect("travel leg");
+
+        assert_eq!(leg.duration_seconds, 42);
+    }
+
+    #[test]
+    fn non_routed_segment_preserves_known_metrics() {
+        let plan = test_plan(vec![TravelLeg::new(TravelLegInit {
+            id: "leg-00-01".to_string(),
+            name: "leg-00-01".to_string(),
+            from_location_idx: 0,
+            to_location_idx: 1,
+            duration_seconds: 90,
+            distance_meters: 1200,
+            reachable: false,
+        })]);
+
+        let segment = non_routed_segment(
+            "route-00",
+            0,
+            1,
+            find_travel_leg(&plan, 0, 1),
+            RouteGeometryStatus::UnreachableLeg,
+        );
+
+        assert!(!segment.reachable);
+        assert_eq!(segment.geometry_status, RouteGeometryStatus::UnreachableLeg);
+        assert_eq!(segment.duration_seconds, 90);
+        assert!(segment.encoded_polyline.is_empty());
+    }
+
+    #[test]
+    fn only_snap_and_no_path_are_recoverable_segment_failures() {
+        let from = solverforge_maps::Coord::new(45.0, 9.0);
+        let to = solverforge_maps::Coord::new(46.0, 10.0);
+
+        assert_eq!(
+            recoverable_geometry_status(&solverforge_maps::RoutingError::NoPath { from, to }),
+            Some(RouteGeometryStatus::NoPath)
+        );
+        assert_eq!(
+            recoverable_geometry_status(&solverforge_maps::RoutingError::SnapFailed {
+                coord: from,
+                nearest_distance_m: None,
+            }),
+            Some(RouteGeometryStatus::SnapFailed)
+        );
+        assert_eq!(
+            recoverable_geometry_status(&solverforge_maps::RoutingError::Network("down".into())),
+            None
+        );
+    }
+
+    fn test_plan(travel_legs: Vec<TravelLeg>) -> FieldServicePlan {
+        FieldServicePlan::new(
+            vec![
+                Location::new(
+                    "loc-0",
+                    "loc-0",
+                    "A".into(),
+                    45_000_000,
+                    9_000_000,
+                    "x".into(),
+                ),
+                Location::new(
+                    "loc-1",
+                    "loc-1",
+                    "B".into(),
+                    45_001_000,
+                    9_001_000,
+                    "x".into(),
+                ),
+                Location::new(
+                    "loc-2",
+                    "loc-2",
+                    "C".into(),
+                    45_002_000,
+                    9_002_000,
+                    "x".into(),
+                ),
+            ],
+            Vec::new(),
+            travel_legs,
+            Vec::new(),
+        )
+    }
+}

src/api/routes.rs

@@ -8,8 +8,10 @@ use serde::{Deserialize, Serialize};
 use std::sync::Arc;
 
 use super::dto::{analysis_response, JobAnalysisDto, JobSnapshotDto, JobSummaryDto, PlanDto};
+use super::route_dto::JobRoutesDto;
+use super::route_geometry::{build_route_geometry, status_from_routing_error};
 use super::sse;
-use crate::data::{generate, DemoData, DemoDataError};
+use crate::data::{generate, prepare_routing, DemoData, DemoDataError};
 use crate::solver::SolverService;
 
 /// Shared application state.
@@ -43,6 +45,7 @@ pub fn router(state: Arc<AppState>) -> Router {
         .route("/jobs/{id}/status", get(get_job_status))
         .route("/jobs/{id}/snapshot", get(get_snapshot))
         .route("/jobs/{id}/analysis", get(analyze_by_id))
+        .route("/jobs/{id}/routes", get(get_routes))
         .route("/jobs/{id}/pause", post(pause_job))
         .route("/jobs/{id}/resume", post(resume_job))
         .route("/jobs/{id}/cancel", post(cancel_job))
@@ -108,7 +111,10 @@ async fn create_job(
     State(state): State<Arc<AppState>>,
     Json(dto): Json<PlanDto>,
 ) -> Result<Json<CreateJobResponse>, StatusCode> {
-    let plan = dto.to_domain().map_err(|_| StatusCode::BAD_REQUEST)?;
+    let mut plan = dto.to_domain().map_err(|_| StatusCode::BAD_REQUEST)?;
+    prepare_routing(&mut plan)
+        .await
+        .map_err(status_from_demo_data_error)?;
     let id = state
         .solver
         .start_job(plan)
@@ -168,6 +174,26 @@ async fn analyze_by_id(
     )))
 }
 
+async fn get_routes(
+    State(state): State<Arc<AppState>>,
+    Path(id): Path<String>,
+    Query(query): Query<SnapshotQuery>,
+) -> Result<Json<JobRoutesDto>, StatusCode> {
+    let job_id = parse_job_id(&id)?;
+    let snapshot = state
+        .solver
+        .get_snapshot(&id, query.snapshot_revision)
+        .map_err(status_from_solver_error)?;
+    let routes = build_route_geometry(&snapshot.solution)
+        .await
+        .map_err(status_from_routing_error)?;
+    Ok(Json(JobRoutesDto::new(
+        job_id,
+        snapshot.snapshot_revision,
+        routes,
+    )))
+}
+
 async fn pause_job(
     State(state): State<Arc<AppState>>,
     Path(id): Path<String>,

src/constraints/balance_workload.rs

@@ -1,4 +1,6 @@
-use crate::constraints::route_metrics::{balance_workload_score, RouteConstraint};
+use crate::constraints::route_metrics::{
+    balance_workload_match_count, balance_workload_score, RouteConstraint,
+};
 use crate::domain::FieldServicePlan;
 use solverforge::prelude::*;
 use solverforge::IncrementalConstraint;
@@ -10,5 +12,6 @@ pub fn constraint() -> impl IncrementalConstraint<FieldServicePlan, HardSoftScor
         false,
         HardSoftScore::of(0, 1),
         balance_workload_score,
+        balance_workload_match_count,
     )
 }

src/constraints/minimize_travel.rs

@@ -1,4 +1,6 @@
-use crate::constraints::route_metrics::{minimize_travel_score, RouteConstraint};
+use crate::constraints::route_metrics::{
+    minimize_travel_match_count, minimize_travel_score, RouteConstraint,
+};
 use crate::domain::FieldServicePlan;
 use solverforge::prelude::*;
 use solverforge::IncrementalConstraint;
@@ -10,5 +12,6 @@ pub fn constraint() -> impl IncrementalConstraint<FieldServicePlan, HardSoftScor
         false,
         HardSoftScore::of(0, 1),
         minimize_travel_score,
+        minimize_travel_match_count,
     )
 }

src/constraints/priority_slack.rs

@@ -1,4 +1,6 @@
-use crate::constraints::route_metrics::{priority_slack_score, RouteConstraint};
+use crate::constraints::route_metrics::{
+    priority_slack_match_count, priority_slack_score, RouteConstraint,
+};
 use crate::domain::FieldServicePlan;
 use solverforge::prelude::*;
 use solverforge::IncrementalConstraint;
@@ -10,5 +12,6 @@ pub fn constraint() -> impl IncrementalConstraint<FieldServicePlan, HardSoftScor
         false,
         HardSoftScore::of(0, 1),
         priority_slack_score,
+        priority_slack_match_count,
     )
 }

src/constraints/reachable_legs.rs

@@ -1,4 +1,4 @@
-use crate::constraints::route_metrics::{reachable_score, RouteConstraint};
+use crate::constraints::route_metrics::{reachable_match_count, reachable_score, RouteConstraint};
 use crate::domain::FieldServicePlan;
 use solverforge::prelude::*;
 use solverforge::IncrementalConstraint;
@@ -10,5 +10,6 @@ pub fn constraint() -> impl IncrementalConstraint<FieldServicePlan, HardSoftScor
         true,
         HardSoftScore::of(1, 0),
         reachable_score,
+        reachable_match_count,
     )
 }

src/constraints/required_parts.rs

@@ -1,4 +1,6 @@
-use crate::constraints::route_metrics::{required_parts_score, RouteConstraint};
+use crate::constraints::route_metrics::{
+    required_parts_match_count, required_parts_score, RouteConstraint,
+};
 use crate::domain::FieldServicePlan;
 use solverforge::prelude::*;
 use solverforge::IncrementalConstraint;
@@ -10,5 +12,6 @@ pub fn constraint() -> impl IncrementalConstraint<FieldServicePlan, HardSoftScor
         true,
         HardSoftScore::of(1, 0),
         required_parts_score,
+        required_parts_match_count,
     )
 }

src/constraints/required_skills.rs

@@ -1,4 +1,6 @@
-use crate::constraints::route_metrics::{required_skills_score, RouteConstraint};
+use crate::constraints::route_metrics::{
+    required_skills_match_count, required_skills_score, RouteConstraint,
+};
 use crate::domain::FieldServicePlan;
 use solverforge::prelude::*;
 use solverforge::IncrementalConstraint;
@@ -10,5 +12,6 @@ pub fn constraint() -> impl IncrementalConstraint<FieldServicePlan, HardSoftScor
         true,
         HardSoftScore::of(1, 0),
         required_skills_score,
+        required_skills_match_count,
     )
 }

src/constraints/route_constraint.rs

@@ -7,6 +7,7 @@ pub struct RouteConstraint {
     hard: bool,
     weight: HardSoftScore,
     scorer: fn(&FieldServicePlan, &TechnicianRoute) -> HardSoftScore,
+    match_counter: fn(&FieldServicePlan, &TechnicianRoute) -> usize,
 }
 
 impl RouteConstraint {
@@ -15,12 +16,14 @@ impl RouteConstraint {
         hard: bool,
         weight: HardSoftScore,
         scorer: fn(&FieldServicePlan, &TechnicianRoute) -> HardSoftScore,
+        match_counter: fn(&FieldServicePlan, &TechnicianRoute) -> usize,
     ) -> Self {
         Self {
             name,
             hard,
             weight,
             scorer,
+            match_counter,
         }
     }
 
@@ -46,8 +49,8 @@ impl IncrementalConstraint<FieldServicePlan, HardSoftScore> for RouteConstraint
         solution
             .technician_routes
             .iter()
-            .filter(|route| (self.scorer)(solution, route) != HardSoftScore::ZERO)
-            .count()
+            .map(|route| (self.match_counter)(solution, route))
+            .sum()
     }
 
     fn initialize(&mut self, solution: &FieldServicePlan) -> HardSoftScore {

src/constraints/route_metrics.rs

@@ -6,9 +6,12 @@ pub use super::route_constraint::RouteConstraint;
 #[derive(Debug, Clone, Default, PartialEq, Eq)]
 pub struct RouteStats {
     pub invalid_visits: i64,
+    pub valid_visits: i64,
+    pub scored_travel_legs: i64,
     pub unreachable_legs: i64,
     pub missing_skill_visits: i64,
     pub missing_part_visits: i64,
+    pub late_visits: i64,
     pub late_minutes: i64,
     pub overtime_minutes: i64,
     pub travel_seconds: i64,
@@ -47,6 +50,7 @@ pub fn route_stats(plan: &FieldServicePlan, route: &TechnicianRoute) -> RouteSta
             stats.invalid_visits += 1;
             continue;
         };
+        stats.valid_visits += 1;
 
         apply_leg(
             plan,
@@ -61,6 +65,7 @@ pub fn route_stats(plan: &FieldServicePlan, route: &TechnicianRoute) -> RouteSta
             clock = visit.earliest_minute;
         }
         if clock > visit.latest_minute {
+            stats.late_visits += 1;
             stats.late_minutes += i64::from(clock - visit.latest_minute);
         }
 
@@ -106,22 +111,43 @@ pub fn reachable_score(plan: &FieldServicePlan, route: &TechnicianRoute) -> Hard
     HardSoftScore::of(-(stats.invalid_visits + stats.unreachable_legs), 0)
 }
 
+pub fn reachable_match_count(plan: &FieldServicePlan, route: &TechnicianRoute) -> usize {
+    let stats = route_stats(plan, route);
+    count_matches(stats.invalid_visits + stats.unreachable_legs)
+}
+
 pub fn required_skills_score(plan: &FieldServicePlan, route: &TechnicianRoute) -> HardSoftScore {
     HardSoftScore::of(-route_stats(plan, route).missing_skill_visits, 0)
 }
 
+pub fn required_skills_match_count(plan: &FieldServicePlan, route: &TechnicianRoute) -> usize {
+    count_matches(route_stats(plan, route).missing_skill_visits)
+}
+
 pub fn required_parts_score(plan: &FieldServicePlan, route: &TechnicianRoute) -> HardSoftScore {
     HardSoftScore::of(-route_stats(plan, route).missing_part_visits, 0)
 }
 
+pub fn required_parts_match_count(plan: &FieldServicePlan, route: &TechnicianRoute) -> usize {
+    count_matches(route_stats(plan, route).missing_part_visits)
+}
+
 pub fn time_windows_score(plan: &FieldServicePlan, route: &TechnicianRoute) -> HardSoftScore {
     HardSoftScore::of(-route_stats(plan, route).late_minutes, 0)
 }
 
+pub fn time_windows_match_count(plan: &FieldServicePlan, route: &TechnicianRoute) -> usize {
+    count_matches(route_stats(plan, route).late_visits)
+}
+
 pub fn shift_capacity_score(plan: &FieldServicePlan, route: &TechnicianRoute) -> HardSoftScore {
     HardSoftScore::of(-route_stats(plan, route).overtime_minutes, 0)
 }
 
+pub fn shift_capacity_match_count(plan: &FieldServicePlan, route: &TechnicianRoute) -> usize {
+    usize::from(route_stats(plan, route).overtime_minutes > 0)
+}
+
 pub fn minimize_travel_score(plan: &FieldServicePlan, route: &TechnicianRoute) -> HardSoftScore {
     let stats = route_stats(plan, route);
     let travel_minutes = stats.travel_minutes();
@@ -129,19 +155,35 @@ pub fn minimize_travel_score(plan: &FieldServicePlan, route: &TechnicianRoute) -
     HardSoftScore::of(0, -(travel_minutes + travel_km))
 }
 
+pub fn minimize_travel_match_count(plan: &FieldServicePlan, route: &TechnicianRoute) -> usize {
+    count_matches(route_stats(plan, route).scored_travel_legs)
+}
+
 pub fn balance_workload_score(plan: &FieldServicePlan, route: &TechnicianRoute) -> HardSoftScore {
     let normalized = (route_stats(plan, route).route_minutes / 15).max(0);
     HardSoftScore::of(0, -(normalized * normalized))
 }
 
+pub fn balance_workload_match_count(plan: &FieldServicePlan, route: &TechnicianRoute) -> usize {
+    usize::from(route_stats(plan, route).route_minutes > 0)
+}
+
 pub fn territory_affinity_score(plan: &FieldServicePlan, route: &TechnicianRoute) -> HardSoftScore {
     HardSoftScore::of(0, route_stats(plan, route).territory_matches * 25)
 }
 
+pub fn territory_affinity_match_count(plan: &FieldServicePlan, route: &TechnicianRoute) -> usize {
+    count_matches(route_stats(plan, route).territory_matches)
+}
+
 pub fn priority_slack_score(plan: &FieldServicePlan, route: &TechnicianRoute) -> HardSoftScore {
     HardSoftScore::of(0, route_stats(plan, route).priority_slack)
 }
 
+pub fn priority_slack_match_count(plan: &FieldServicePlan, route: &TechnicianRoute) -> usize {
+    count_matches(route_stats(plan, route).valid_visits)
+}
+
 pub fn leg_for(
     plan: &FieldServicePlan,
     from_location_idx: usize,
@@ -182,6 +224,9 @@ fn apply_leg(
 
     stats.travel_seconds += leg.duration_seconds.max(0);
     stats.distance_meters += leg.distance_meters.max(0);
+    if leg.duration_seconds > 0 || leg.distance_meters > 0 {
+        stats.scored_travel_legs += 1;
+    }
     *clock = clock.saturating_add(div_ceil(leg.duration_seconds.max(0), 60) as i32);
 }
 
@@ -212,3 +257,7 @@ fn div_ceil(value: i64, divisor: i64) -> i64 {
         (value + divisor - 1) / divisor
     }
 }
+
+fn count_matches(value: i64) -> usize {
+    usize::try_from(value.max(0)).unwrap_or(usize::MAX)
+}

src/constraints/route_metrics_tests.rs

@@ -15,6 +15,8 @@ fn route_stats_accounts_for_travel_service_and_lateness() {
     assert_eq!(stats.late_minutes, 0);
     assert_eq!(stats.route_minutes, 125);
     assert_eq!(stats.overtime_minutes, 55);
+    assert_eq!(stats.valid_visits, 2);
+    assert_eq!(stats.scored_travel_legs, 3);
     assert_eq!(stats.missing_skill_visits, 0);
     assert_eq!(stats.missing_part_visits, 1);
 }
@@ -37,6 +39,26 @@ fn full_constraint_set_reports_expected_hard_penalties() {
     assert!(score.soft() < 0);
 }
 
+#[test]
+fn route_constraint_match_counts_describe_underlying_route_matches() {
+    let constraints = crate::constraints::create_constraints();
+    let results = constraints.evaluate_each(&sample_plan(vec![0, 1]));
+    let match_count = |name: &str| {
+        results
+            .iter()
+            .find(|result| result.name == name)
+            .map(|result| result.match_count)
+            .unwrap_or_else(|| panic!("missing constraint result for {name}"))
+    };
+
+    assert_eq!(match_count("Balance Workload"), 1);
+    assert_eq!(match_count("Minimize Travel"), 3);
+    assert_eq!(match_count("Priority Slack"), 2);
+    assert_eq!(match_count("Required Parts"), 1);
+    assert_eq!(match_count("Shift Capacity"), 1);
+    assert_eq!(match_count("Territory Affinity"), 2);
+}
+
 fn sample_plan(visits: Vec<usize>) -> FieldServicePlan {
     let locations = vec![
         Location::new(
@@ -124,7 +146,6 @@ fn row_major_legs(width: usize) -> Vec<TravelLeg> {
                     to_location_idx: to,
                     duration_seconds: if same { 0 } else { 600 },
                     distance_meters: if same { 0 } else { 2_000 },
-                    encoded_polyline: String::new(),
                     reachable: true,
                 })
             })

src/constraints/shift_capacity.rs

@@ -1,4 +1,6 @@
-use crate::constraints::route_metrics::{shift_capacity_score, RouteConstraint};
+use crate::constraints::route_metrics::{
+    shift_capacity_match_count, shift_capacity_score, RouteConstraint,
+};
 use crate::domain::FieldServicePlan;
 use solverforge::prelude::*;
 use solverforge::IncrementalConstraint;
@@ -10,5 +12,6 @@ pub fn constraint() -> impl IncrementalConstraint<FieldServicePlan, HardSoftScor
         true,
         HardSoftScore::of(1, 0),
         shift_capacity_score,
+        shift_capacity_match_count,
     )
 }

src/constraints/territory_affinity.rs

@@ -1,4 +1,6 @@
-use crate::constraints::route_metrics::{territory_affinity_score, RouteConstraint};
+use crate::constraints::route_metrics::{
+    territory_affinity_match_count, territory_affinity_score, RouteConstraint,
+};
 use crate::domain::FieldServicePlan;
 use solverforge::prelude::*;
 use solverforge::IncrementalConstraint;
@@ -10,5 +12,6 @@ pub fn constraint() -> impl IncrementalConstraint<FieldServicePlan, HardSoftScor
         false,
         HardSoftScore::of(0, 1),
         territory_affinity_score,
+        territory_affinity_match_count,
     )
 }

src/constraints/time_windows.rs

@@ -1,4 +1,6 @@
-use crate::constraints::route_metrics::{time_windows_score, RouteConstraint};
+use crate::constraints::route_metrics::{
+    time_windows_match_count, time_windows_score, RouteConstraint,
+};
 use crate::domain::FieldServicePlan;
 use solverforge::prelude::*;
 use solverforge::IncrementalConstraint;
@@ -10,5 +12,6 @@ pub fn constraint() -> impl IncrementalConstraint<FieldServicePlan, HardSoftScor
         true,
         HardSoftScore::of(1, 0),
         time_windows_score,
+        time_windows_match_count,
     )
 }

src/data/data_seed.rs

@@ -4,7 +4,7 @@ use std::str::FromStr;
 use std::time::Duration;
 
 use solverforge_maps::{
-    encode_polyline, BoundingBox, Coord, NetworkConfig, RoadNetwork, RoutingError, UNREACHABLE,
+    BoundingBox, Coord, NetworkConfig, NetworkRef, RoadNetwork, RoutingError, UNREACHABLE,
 };
 
 use super::bergamo_locations::{DEPOTS, SERVICE_LOCATIONS};
@@ -24,9 +24,7 @@ const BERGAMO_BBOX: BoundingBox = BoundingBox {
 
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
 pub enum DemoData {
-    Small,
     Standard,
-    Large,
 }
 
 #[derive(Debug)]
@@ -50,7 +48,7 @@ impl From<RoutingError> for DemoDataError {
     }
 }
 
-const AVAILABLE_DEMO_DATA: &[DemoData] = &[DemoData::Small, DemoData::Standard, DemoData::Large];
+const AVAILABLE_DEMO_DATA: &[DemoData] = &[DemoData::Standard];
 const DEFAULT_DEMO_DATA: DemoData = DemoData::Standard;
 
 pub fn default_demo_data() -> DemoData {
@@ -64,9 +62,7 @@ pub fn available_demo_data() -> &'static [DemoData] {
 impl DemoData {
     pub fn id(self) -> &'static str {
         match self {
-            DemoData::Small => "SMALL",
             DemoData::Standard => "STANDARD",
-            DemoData::Large => "LARGE",
         }
     }
 
@@ -80,17 +76,13 @@ impl DemoData {
 
     fn technician_count(self) -> usize {
         match self {
-            Self::Small => 2,
-            Self::Standard => 4,
-            Self::Large => 6,
+            Self::Standard => 6,
         }
     }
 
     fn visit_count(self) -> usize {
         match self {
-            Self::Small => 6,
-            Self::Standard => 14,
-            Self::Large => SERVICE_LOCATIONS.len() * 2,
+            Self::Standard => SERVICE_LOCATIONS.len() * 2,
         }
     }
 }
@@ -100,9 +92,7 @@ impl FromStr for DemoData {
 
     fn from_str(s: &str) -> Result<Self, Self::Err> {
         match s.to_ascii_uppercase().as_str() {
-            "SMALL" => Ok(DemoData::Small),
             "STANDARD" => Ok(DemoData::Standard),
-            "LARGE" => Ok(DemoData::Large),
             _ => Err(()),
         }
     }
@@ -110,13 +100,7 @@ impl FromStr for DemoData {
 
 pub async fn generate(demo: DemoData) -> Result<FieldServicePlan, DemoDataError> {
     let locations = build_locations(demo);
-    let coords = locations
-        .iter()
-        .map(|location| Coord::new(location.lat(), location.lng()))
-        .collect::<Vec<_>>();
-    let network = RoadNetwork::load_or_fetch(&BERGAMO_BBOX, &network_config(), None).await?;
-    let matrix = network.compute_matrix(&coords, None).await;
-    let travel_legs = build_travel_legs(&network, &matrix, &coords);
+    let travel_legs = build_seed_travel_legs(locations.len());
     let service_visits = build_service_visits(demo);
     let technician_routes = build_technician_routes(demo);
 
@@ -128,7 +112,25 @@ pub async fn generate(demo: DemoData) -> Result<FieldServicePlan, DemoDataError>
     ))
 }
 
-fn network_config() -> NetworkConfig {
+pub async fn prepare_routing(plan: &mut FieldServicePlan) -> Result<(), DemoDataError> {
+    let coords = plan
+        .locations
+        .iter()
+        .map(|location| Coord::new(location.lat(), location.lng()))
+        .collect::<Vec<_>>();
+    let network = load_network().await?;
+    let matrix = network.compute_matrix(&coords, None).await;
+    plan.travel_legs = build_travel_legs(&matrix, coords.len());
+    Ok(())
+}
+
+pub async fn load_network() -> Result<NetworkRef, DemoDataError> {
+    RoadNetwork::load_or_fetch(&BERGAMO_BBOX, &network_config(), None)
+        .await
+        .map_err(DemoDataError::from)
+}
+
+pub fn network_config() -> NetworkConfig {
     NetworkConfig::default()
         .cache_dir(PathBuf::from(".osm_cache/field-service-routing/bergamo"))
         .connect_timeout(Duration::from_secs(10))
@@ -198,37 +200,36 @@ fn build_technician_routes(demo: DemoData) -> Vec<TechnicianRoute> {
         .collect()
 }
 
-fn build_travel_legs(
-    network: &RoadNetwork,
-    matrix: &solverforge_maps::TravelTimeMatrix,
-    coords: &[Coord],
-) -> Vec<TravelLeg> {
-    let width = coords.len();
+fn build_seed_travel_legs(width: usize) -> Vec<TravelLeg> {
+    (0..width)
+        .map(|idx| {
+            TravelLeg::new(TravelLegInit {
+                id: format!("leg-{idx:02}-{idx:02}"),
+                name: format!("leg-{idx:02}-{idx:02}"),
+                from_location_idx: idx,
+                to_location_idx: idx,
+                duration_seconds: 0,
+                distance_meters: 0,
+                reachable: true,
+            })
+        })
+        .collect()
+}
+
+fn build_travel_legs(matrix: &solverforge_maps::TravelTimeMatrix, width: usize) -> Vec<TravelLeg> {
     let mut legs = Vec::with_capacity(width * width);
 
     for from in 0..width {
         for to in 0..width {
-            let (duration_seconds, distance_meters, encoded_polyline, reachable) = if from == to {
-                (0, 0, encode_polyline(&[coords[from]]), true)
+            let (duration_seconds, distance_meters, reachable) = if from == to {
+                (0, 0, true)
             } else {
                 let matrix_duration = matrix.get(from, to).unwrap_or(UNREACHABLE);
-                if matrix_duration == UNREACHABLE {
-                    (0, 0, String::new(), false)
+                let matrix_distance = matrix.distance_meters(from, to).unwrap_or(UNREACHABLE);
+                if matrix_duration == UNREACHABLE || matrix_distance == UNREACHABLE {
+                    (0, 0, false)
                 } else {
-                    match network.route(coords[from], coords[to]) {
-                        Ok(route) => {
-                            let duration_seconds = route.duration_seconds;
-                            let distance_meters = route.distance_meters.round() as i64;
-                            let simplified = route.simplify(12.0);
-                            (
-                                duration_seconds,
-                                distance_meters,
-                                encode_polyline(&simplified.geometry),
-                                true,
-                            )
-                        }
-                        Err(_) => (0, 0, String::new(), false),
-                    }
+                    (matrix_duration, matrix_distance, true)
                 }
             };
 
@@ -239,7 +240,6 @@ fn build_travel_legs(
                 to_location_idx: to,
                 duration_seconds,
                 distance_meters,
-                encoded_polyline,
                 reachable,
             }));
         }
@@ -261,4 +261,18 @@ mod tests {
             assert!(routes.iter().all(|route| route.visits.is_empty()));
         }
     }
+
+    #[tokio::test]
+    async fn generated_seed_plan_has_only_identity_travel_legs() {
+        let plan = generate(DemoData::Standard).await.unwrap();
+
+        assert_eq!(plan.travel_legs.len(), plan.locations.len());
+        assert!(plan.travel_legs.iter().enumerate().all(|(idx, leg)| {
+            leg.from_location_idx == idx
+                && leg.to_location_idx == idx
+                && leg.duration_seconds == 0
+                && leg.distance_meters == 0
+                && leg.reachable
+        }));
+    }
 }

src/data/mod.rs

@@ -4,4 +4,7 @@ mod bergamo_profiles;
 mod bergamo_technicians;
 mod data_seed;
 
-pub use data_seed::{available_demo_data, default_demo_data, generate, DemoData, DemoDataError};
+pub use data_seed::{
+    available_demo_data, default_demo_data, generate, load_network, prepare_routing, DemoData,
+    DemoDataError,
+};

src/domain/travel_leg.rs

@@ -12,7 +12,6 @@ pub struct TravelLeg {
     pub to_location_idx: usize,
     pub duration_seconds: i64,
     pub distance_meters: i64,
-    pub encoded_polyline: String,
     pub reachable: bool,
 }
 
@@ -24,7 +23,6 @@ pub struct TravelLegInit {
     pub to_location_idx: usize,
     pub duration_seconds: i64,
     pub distance_meters: i64,
-    pub encoded_polyline: String,
     pub reachable: bool,
 }
 
@@ -37,7 +35,6 @@ impl TravelLeg {
             to_location_idx: init.to_location_idx,
             duration_seconds: init.duration_seconds,
             distance_meters: init.distance_meters,
-            encoded_polyline: init.encoded_polyline,
             reachable: init.reachable,
         }
     }
@@ -56,7 +53,6 @@ mod tests {
             to_location_idx: Default::default(),
             duration_seconds: Default::default(),
             distance_meters: Default::default(),
-            encoded_polyline: "test".to_string(),
             reachable: false,
         });
         assert_eq!(fact.id, "test-id");
@@ -65,7 +61,6 @@ mod tests {
         let _ = &fact.to_location_idx;
         let _ = &fact.duration_seconds;
         let _ = &fact.distance_meters;
-        let _ = &fact.encoded_polyline;
         let _ = &fact.reachable;
     }
 }

static/app-dataset.js

@@ -1,4 +1,4 @@
-/* app-dataset.js - demo dataset picker for the Bergamo FSR demo */
+/* app-dataset.js - demo dataset loader for the Bergamo FSR demo */
 
 (function () {
   'use strict';
@@ -6,41 +6,11 @@
   var FSR = window.FSR = window.FSR || {};
 
   FSR.createDemoDataController = function (options) {
-    var SF = options.SF;
     var utils = options.utils;
-    var catalog = { defaultId: null, availableIds: [] };
-    var selectedId = null;
+    var selectedId = 'STANDARD';
+    var catalog = { defaultId: selectedId, availableIds: [selectedId] };
     var loading = false;
-    var externallyDisabled = false;
-
-    var select = SF.el('select', {
-      id: 'fsr-dataset-select',
-      'aria-label': 'Dataset',
-      style: {
-        minWidth: '160px',
-        padding: '8px 10px',
-        border: '1px solid #cbd5e1',
-        borderRadius: '6px',
-        background: '#ffffff',
-      },
-    });
-    var status = SF.el('span', { style: { color: '#64748b', fontSize: '13px' } }, 'Loading');
-    var el = SF.el('div', {
-      className: 'sf-content',
-      style: {
-        alignItems: 'center',
-        display: 'flex',
-        gap: '10px',
-        paddingBottom: '12px',
-      },
-    },
-      SF.el('label', { for: 'fsr-dataset-select', style: { fontWeight: '600' } }, 'Dataset'),
-      select,
-      status);
-
-    select.addEventListener('change', function () {
-      switchTo(select.value);
-    });
+    var el = document.createDocumentFragment();
 
     return {
       bootstrap: bootstrap,
@@ -49,85 +19,28 @@
       getSelectedId: function () { return selectedId; },
       isLoading: function () { return loading; },
       resolvePlan: resolvePlan,
-      setDisabled: setDisabled,
     };
 
     function bootstrap() {
-      setLoading(true, 'Loading');
-      return utils.fetchDemoCatalog()
-        .then(function (nextCatalog) {
-          catalog = nextCatalog;
-          selectedId = nextCatalog.defaultId;
-          renderOptions();
-          notifyCatalog();
-          return utils.fetchDemoPlan(selectedId);
-        })
+      setLoading(true);
+      notifyCatalog();
+      return utils.fetchDemoPlan(selectedId)
         .then(function (plan) { notifyPlan(plan); })
         .catch(function (err) { notifyError(err); })
-        .finally(function () { setLoading(false, selectedId ? displayLabel(selectedId) : 'Unavailable'); });
+        .finally(function () { setLoading(false); });
     }
 
     function resolvePlan() {
       var currentPlan = options.getCurrentPlan();
       if (currentPlan) return Promise.resolve(utils.clonePlan(currentPlan));
-      if (!selectedId) return Promise.reject(new Error('demo data catalog is unavailable'));
       return utils.fetchDemoPlan(selectedId);
     }
 
-    function switchTo(nextId) {
-      if (!nextId || nextId === selectedId) return;
-      if (loading || (options.canSwitch && !options.canSwitch())) {
-        setSelected(selectedId);
-        return;
-      }
-
-      var previousId = selectedId;
-      setLoading(true, 'Loading ' + displayLabel(nextId));
-      Promise.resolve(options.cleanupTerminalJob ? options.cleanupTerminalJob() : null)
-        .then(function () { return utils.fetchDemoPlan(nextId); })
-        .then(function (plan) {
-          selectedId = nextId;
-          setSelected(nextId);
-          notifyCatalog();
-          notifyPlan(plan);
-        })
-        .catch(function (err) {
-          setSelected(previousId);
-          notifyError(err);
-        })
-        .finally(function () { setLoading(false, selectedId ? displayLabel(selectedId) : 'Unavailable'); });
-    }
-
-    function renderOptions() {
-      select.innerHTML = '';
-      catalog.availableIds.forEach(function (id) {
-        select.appendChild(SF.el('option', { value: id }, displayLabel(id)));
-      });
-      setSelected(selectedId);
-    }
-
-    function setSelected(nextId) {
-      selectedId = nextId;
-      select.value = nextId || '';
-    }
-
-    function setLoading(nextLoading, nextStatus) {
+    function setLoading(nextLoading) {
       loading = nextLoading;
-      status.textContent = nextStatus || '';
-      applyDisabled();
       if (options.onLoadingChange) options.onLoadingChange(loading);
     }
 
-    function setDisabled(disabled) {
-      externallyDisabled = !!disabled;
-      applyDisabled();
-    }
-
-    function applyDisabled() {
-      select.disabled = loading || externallyDisabled || !catalog.availableIds.length;
-      select.setAttribute('aria-disabled', select.disabled ? 'true' : 'false');
-    }
-
     function notifyCatalog() {
       if (options.onCatalog) options.onCatalog(catalog, selectedId);
     }
@@ -139,10 +52,5 @@
     function notifyError(err) {
       if (options.onError) options.onError(err);
     }
-
-    function displayLabel(id) {
-      var value = String(id || '').toLowerCase();
-      return value.charAt(0).toUpperCase() + value.slice(1);
-    }
   };
 })();

static/app-layout.js

@@ -0,0 +1,105 @@
+/* app-layout.js - application shell construction for the Bergamo FSR demo */
+
+(function () {
+  'use strict';
+
+  var FSR = window.FSR = window.FSR || {};
+
+  FSR.createAppLayout = function (options) {
+    var SF = options.SF;
+    var app = options.app;
+    var panels = {
+      map: SF.el('div', { className: 'sf-content' }),
+      routes: SF.el('div', { className: 'sf-content', style: { display: 'none' } }),
+      data: SF.el('div', { className: 'sf-content', style: { display: 'none' } }),
+      api: SF.el('div', { className: 'sf-content', style: { display: 'none' } }),
+    };
+
+    var header = SF.createHeader({
+      logo: '/sf/img/ouroboros.svg',
+      title: options.config.title,
+      subtitle: options.config.subtitle,
+      tabs: [
+        { id: 'map', label: 'Map', icon: 'fa-map-location-dot', active: true },
+        { id: 'routes', label: 'Routes', icon: 'fa-list-ol' },
+        { id: 'data', label: 'Data', icon: 'fa-table' },
+        { id: 'api', label: 'REST API', icon: 'fa-book' },
+      ],
+      actions: {
+        onSolve: options.onSolve,
+        onPause: options.onPause,
+        onResume: options.onResume,
+        onCancel: options.onCancel,
+        onAnalyze: options.onAnalyze,
+      },
+      onTabChange: function (tab) {
+        Object.keys(panels).forEach(function (key) {
+          panels[key].style.display = key === tab ? '' : 'none';
+        });
+        if (tab === 'map' && options.onMapTabShown) options.onMapTabShown();
+      },
+    });
+
+    app.appendChild(header);
+    options.statusBar.bindHeader(header);
+    app.appendChild(options.statusBar.el);
+
+    var bootstrapNotice = SF.el('div', {
+      className: 'sf-content',
+      style: {
+        display: 'none',
+        padding: '12px 16px',
+        marginBottom: '12px',
+        border: '1px solid #dc2626',
+        borderRadius: '8px',
+        background: '#fef2f2',
+        color: '#991b1b',
+      },
+    });
+    app.appendChild(bootstrapNotice);
+
+    var summaryContainer = SF.el('div', { className: 'fsr-summary' });
+    var mapShell = SF.el('div', { className: 'fsr-map-shell' });
+    var routeListCard = SF.el('section', { className: 'sf-section fsr-routes-card' });
+    var routeCards = SF.el('div', { className: 'fsr-route-list' });
+    var mapCard = SF.el('section', { className: 'sf-section fsr-map-card' });
+    var mapContainer = SF.el('div', { id: 'fsr-map', className: 'sf-map-container fsr-map' });
+
+    routeListCard.appendChild(SF.el('h3', null, 'Routes'));
+    routeListCard.appendChild(routeCards);
+    mapCard.appendChild(SF.el('h3', null, 'Map'));
+    mapCard.appendChild(mapContainer);
+    mapShell.appendChild(routeListCard);
+    mapShell.appendChild(mapCard);
+    panels.map.appendChild(summaryContainer);
+    panels.map.appendChild(mapShell);
+
+    var timelineContainer = SF.el('div');
+    var tablesContainer = SF.el('div');
+    var apiGuideContainer = SF.el('div');
+    panels.routes.appendChild(timelineContainer);
+    panels.data.appendChild(tablesContainer);
+    panels.api.appendChild(apiGuideContainer);
+
+    app.appendChild(panels.map);
+    app.appendChild(panels.routes);
+    app.appendChild(panels.data);
+    app.appendChild(panels.api);
+    app.appendChild(SF.createFooter({
+      links: [
+        { label: 'SolverForge', url: 'https://www.solverforge.org' },
+        { label: 'Docs', url: 'https://www.solverforge.org/docs' },
+      ],
+    }));
+
+    return {
+      apiGuideContainer: apiGuideContainer,
+      bootstrapNotice: bootstrapNotice,
+      header: header,
+      routeCards: routeCards,
+      summaryContainer: summaryContainer,
+      tablesContainer: tablesContainer,
+      timelineContainer: timelineContainer,
+    };
+  };
+})();

static/app-render-map.js

@@ -0,0 +1,165 @@
+/* app-render-map.js - Leaflet map rendering for the Bergamo FSR demo */
+
+(function () {
+  'use strict';
+
+  var FSR = window.FSR = window.FSR || {};
+  var utils = FSR.utils;
+
+  FSR.createMapRenderer = function (options) {
+    return { renderMap: renderMap };
+
+    function renderMap(plan, routeGeometry) {
+      if (!options.routeMap) return;
+      options.routeMap.clearAll();
+
+      var locations = plan.locations || [];
+      var visits = plan.service_visits || [];
+      var routes = plan.technician_routes || [];
+      var assigned = utils.assignedVisitSet(routes);
+      var focusedRouteId = options.getFocusedRouteId ? options.getFocusedRouteId() : null;
+      var fitPoints = [];
+      var stopNumbers = [];
+      var routeGeometryById = geometryByRouteId(routeGeometry);
+
+      routes.forEach(function (route) {
+        var start = locations[route.start_location_idx];
+        if (!start) return;
+        fitPoints.push([utils.locationLat(start), utils.locationLng(start)]);
+        options.routeMap.addVehicleMarker({
+          lat: utils.locationLat(start),
+          lng: utils.locationLng(start),
+          color: route.color || '#2563eb',
+        });
+      });
+
+      visits.forEach(function (visit, idx) {
+        var location = locations[visit.location_idx];
+        if (!location) return;
+        fitPoints.push([utils.locationLat(location), utils.locationLng(location)]);
+        options.routeMap.addVisitMarker({
+          lat: utils.locationLat(location),
+          lng: utils.locationLng(location),
+          color: assigned[idx] ? assigned[idx].color : '#64748b',
+          icon: utils.iconForVisit(visit),
+          assigned: !!assigned[idx],
+        });
+      });
+
+      routes.forEach(function (route, routeIdx) {
+        var routeId = routeKey(route, routeIdx);
+        var style = routeStyle(route, routeId, focusedRouteId);
+        drawRouteGeometry(routeGeometryById[routeId], route.color, style);
+        (route.visits || []).forEach(function (visitIdx, sequenceIdx) {
+          var visit = visits[visitIdx];
+          if (!visit) return;
+          if (!focusedRouteId || focusedRouteId === routeId) {
+            stopNumbers.push({
+              location: locations[visit.location_idx],
+              number: sequenceIdx + 1,
+              color: route.color,
+            });
+          }
+        });
+      });
+
+      placeStopNumbers(stopNumbers);
+      fitMapToPoints(fitPoints);
+    }
+
+    function fitMapToPoints(points) {
+      if (!points.length || !options.routeMap) return;
+      if (options.routeMap.map && options.routeMap.map.invalidateSize) {
+        options.routeMap.map.invalidateSize();
+      }
+      if (window.L && options.routeMap.map && options.routeMap.map.fitBounds) {
+        options.routeMap.map.fitBounds(window.L.latLngBounds(points), {
+          maxZoom: 12,
+          padding: [70, 70],
+        });
+        return;
+      }
+      options.routeMap.fitBounds();
+    }
+
+    function placeStopNumbers(stops) {
+      var groups = {};
+      stops.forEach(function (stop) {
+        if (!stop.location) return;
+        var key = stopLocationKey(stop.location);
+        if (!groups[key]) groups[key] = [];
+        groups[key].push(stop);
+      });
+
+      Object.keys(groups).forEach(function (key) {
+        var group = groups[key];
+        group.forEach(function (stop, idx) {
+          addStopNumber(stop.location, stop.number, stop.color, stopOffset(idx, group.length));
+        });
+      });
+    }
+
+    function stopLocationKey(location) {
+      return [
+        utils.locationLat(location).toFixed(6),
+        utils.locationLng(location).toFixed(6),
+      ].join(',');
+    }
+
+    function stopOffset(index, count) {
+      if (count <= 1) return { x: 0, y: 0 };
+      var angle = (-Math.PI / 2) + ((Math.PI * 2 * index) / count);
+      var radius = count === 2 ? 14 : 18;
+      return { x: Math.cos(angle) * radius, y: Math.sin(angle) * radius };
+    }
+
+    function addStopNumber(location, number, color, offset) {
+      if (!location) return;
+      var marker = options.routeMap.addStopNumber({
+        lat: utils.locationLat(location),
+        lng: utils.locationLng(location),
+        number: number,
+        color: color || '#2563eb',
+      });
+      applyStopOffset(marker, offset || { x: 0, y: 0 });
+    }
+
+    function applyStopOffset(marker, offset) {
+      if (!marker || (!offset.x && !offset.y)) return;
+      var element = marker.getElement ? marker.getElement() : marker._icon;
+      var stop = element && element.querySelector ? element.querySelector('.sf-marker-stop') : null;
+      if (stop) stop.style.transform = 'translate(' + offset.x.toFixed(1) + 'px, ' + offset.y.toFixed(1) + 'px)';
+    }
+
+    function geometryByRouteId(routeGeometry) {
+      return ((routeGeometry && routeGeometry.routes) || []).reduce(function (index, route) {
+        index[String(route.routeId)] = route;
+        return index;
+      }, {});
+    }
+
+    function drawRouteGeometry(routeGeometry, color, style) {
+      if (!routeGeometry || !routeGeometry.segments) return;
+      routeGeometry.segments.forEach(function (segment) {
+        if (segment.geometryStatus !== 'ROUTED' || !segment.reachable || !segment.encodedPolyline) return;
+        options.routeMap.drawEncodedRoute({
+          encoded: segment.encodedPolyline,
+          color: color || '#2563eb',
+          opacity: style && style.opacity,
+          weight: style && style.weight,
+        });
+      });
+    }
+
+    function routeKey(route, idx) {
+      return String(route.id || route.technician_name || ('route-' + idx));
+    }
+
+    function routeStyle(route, routeId, focusedRouteId) {
+      if (!focusedRouteId) return { color: route.color || '#2563eb', opacity: 0.82, weight: 3 };
+      return focusedRouteId === routeId
+        ? { color: route.color || '#2563eb', opacity: 1, weight: 5 }
+        : { color: route.color || '#2563eb', opacity: 0.18, weight: 2 };
+    }
+  };
+})();

static/app-render-routes.js

@@ -0,0 +1,106 @@
+/* app-render-routes.js - route list rendering for the Bergamo FSR demo */
+
+(function () {
+  'use strict';
+
+  var FSR = window.FSR = window.FSR || {};
+  var utils = FSR.utils;
+
+  FSR.createRouteListRenderer = function (options) {
+    var SF = options.SF;
+    return { renderRouteCards: renderRouteCards };
+
+    function renderRouteCards(plan, routeGeometry) {
+      var routeGeometryById = geometryByRouteId(routeGeometry);
+      options.routeCards.innerHTML = '';
+      (plan.technician_routes || []).forEach(function (route, routeIdx) {
+        var stats = utils.routeStats(plan, route);
+        var routeId = routeKey(route, routeIdx);
+        var focusedRouteId = options.getFocusedRouteId ? options.getFocusedRouteId() : null;
+        var isFocused = focusedRouteId === routeId;
+        var card = SF.el('div', {
+          className: 'fsr-route-row' + (isFocused ? ' is-focused' : ''),
+          role: 'button',
+          tabIndex: 0,
+          dataset: { routeId: routeId },
+        });
+        card.addEventListener('click', function () { focusRoute(routeId); });
+        card.addEventListener('keydown', function (event) {
+          if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            focusRoute(routeId);
+          }
+        });
+
+        var top = SF.el('div', { className: 'fsr-route-row__top' });
+        top.appendChild(SF.el('strong', null, route.technician_name || route.id || ('Technician ' + (routeIdx + 1))));
+        top.appendChild(SF.el('span', { className: 'fsr-route-tag' }, String((route.visits || []).length) + ' stops'));
+        card.appendChild(top);
+
+        var meta = SF.el('div', { className: 'fsr-route-row__meta' });
+        meta.appendChild(SF.el('span', null, utils.formatDuration(stats.travelMinutes) + ' travel'));
+        meta.appendChild(SF.el('span', null, utils.formatDuration(stats.serviceMinutes) + ' service'));
+        meta.appendChild(SF.el('span', null, route.territory || 'no territory'));
+        if (stats.lateMinutes) meta.appendChild(SF.el('span', null, utils.formatDuration(stats.lateMinutes) + ' late'));
+        if (stats.overtimeMinutes) meta.appendChild(SF.el('span', null, utils.formatDuration(stats.overtimeMinutes) + ' overtime'));
+        if (stats.unreachable || stats.missingSkills || stats.missingParts) {
+          meta.appendChild(SF.el('span', null, String(stats.unreachable + stats.missingSkills + stats.missingParts) + ' hard issues'));
+        }
+        if (hasGeometryGaps(routeGeometryById[routeId])) meta.appendChild(SF.el('span', null, 'Geometry gaps'));
+        card.appendChild(meta);
+
+        var action = SF.createButton({
+          text: isFocused ? 'Show All' : 'Highlight',
+          variant: isFocused ? 'default' : 'ghost',
+        });
+        action.addEventListener('click', function (event) {
+          event.stopPropagation();
+          focusRoute(routeId);
+        });
+        card.appendChild(SF.el('div', { className: 'fsr-route-row__actions' }, action));
+        options.routeCards.appendChild(card);
+      });
+      renderUnassignedCard(plan);
+    }
+
+    function renderUnassignedCard(plan) {
+      var assigned = utils.assignedVisitSet(plan.technician_routes || []);
+      var rows = (plan.service_visits || []).reduce(function (items, visit, idx) {
+        if (assigned[idx]) return items;
+        items.push([
+          visit.customer || visit.name || visit.id,
+          utils.timeLabel(visit.earliest_minute) + '-' + utils.timeLabel(visit.latest_minute),
+          utils.formatDuration(visit.duration_minutes || 0),
+        ]);
+        return items;
+      }, []);
+      if (!rows.length) return;
+
+      var card = SF.el('div', { className: 'fsr-route-empty' });
+      card.appendChild(SF.el('strong', null, 'Unassigned visits'));
+      card.appendChild(SF.createTable({ columns: ['Visit', 'Window', 'Duration'], rows: rows }));
+      options.routeCards.appendChild(card);
+    }
+
+    function geometryByRouteId(routeGeometry) {
+      return ((routeGeometry && routeGeometry.routes) || []).reduce(function (index, route) {
+        index[String(route.routeId)] = route;
+        return index;
+      }, {});
+    }
+
+    function hasGeometryGaps(routeGeometry) {
+      return !!routeGeometry && (routeGeometry.segments || []).some(function (segment) {
+        return segment.geometryStatus !== 'ROUTED';
+      });
+    }
+
+    function focusRoute(routeId) {
+      if (options.onFocusRoute) options.onFocusRoute(routeId);
+    }
+
+    function routeKey(route, idx) {
+      return String(route.id || route.technician_name || ('route-' + idx));
+    }
+  };
+})();

static/app-render.js

@@ -1,4 +1,4 @@
-/* app-render.js — rendering layer for the Bergamo FSR demo */
+/* app-render.js - top-level rendering coordinator for the Bergamo FSR demo */
 
 (function () {
   'use strict';
@@ -9,18 +9,20 @@
   FSR.createRenderer = function (options) {
     var SF = options.SF;
     var routeTimeline = null;
+    var mapRenderer = FSR.createMapRenderer(options);
+    var routeListRenderer = FSR.createRouteListRenderer(options);
 
     return {
-      buildAnalysisHtml: buildAnalysisHtml,
+      buildAnalysisBody: buildAnalysisBody,
       destroy: destroy,
       renderAll: renderAll,
       renderApiGuide: renderApiGuide,
     };
 
-    function renderAll(plan) {
+    function renderAll(plan, routeGeometry) {
       renderSummary(plan);
-      renderMap(plan);
-      renderRouteCards(plan);
+      mapRenderer.renderMap(plan, routeGeometry);
+      routeListRenderer.renderRouteCards(plan, routeGeometry);
       renderTimeline(plan);
       renderTables(plan);
     }
@@ -53,106 +55,6 @@
       }));
     }
 
-    function renderMap(plan) {
-      if (!options.routeMap) return;
-      options.routeMap.clearAll();
-
-      var locations = plan.locations || [];
-      var visits = plan.service_visits || [];
-      var routes = plan.technician_routes || [];
-      var assigned = utils.assignedVisitSet(routes);
-
-      routes.forEach(function (route) {
-        var start = locations[route.start_location_idx];
-        if (!start) return;
-        options.routeMap.addVehicleMarker({
-          lat: utils.locationLat(start),
-          lng: utils.locationLng(start),
-          color: route.color || '#2563eb',
-        });
-      });
-
-      visits.forEach(function (visit, idx) {
-        var location = locations[visit.location_idx];
-        if (!location) return;
-        options.routeMap.addVisitMarker({
-          lat: utils.locationLat(location),
-          lng: utils.locationLng(location),
-          color: assigned[idx] ? assigned[idx].color : '#64748b',
-          icon: utils.iconForVisit(visit),
-          assigned: !!assigned[idx],
-        });
-      });
-
-      routes.forEach(function (route) {
-        var previous = route.start_location_idx;
-        (route.visits || []).forEach(function (visitIdx, sequenceIdx) {
-          var visit = visits[visitIdx];
-          if (!visit) return;
-          drawLeg(plan, previous, visit.location_idx, route.color);
-          addStopNumber(locations[visit.location_idx], sequenceIdx + 1, route.color);
-          previous = visit.location_idx;
-        });
-        drawLeg(plan, previous, route.end_location_idx, route.color);
-      });
-
-      options.routeMap.fitBounds();
-    }
-
-    function addStopNumber(location, number, color) {
-      if (!location) return;
-      options.routeMap.addStopNumber({
-        lat: utils.locationLat(location),
-        lng: utils.locationLng(location),
-        number: number,
-        color: color || '#2563eb',
-      });
-    }
-
-    function renderRouteCards(plan) {
-      options.routeCards.innerHTML = '';
-      renderUnassignedCard(plan);
-      (plan.technician_routes || []).forEach(function (route) {
-        var stats = utils.routeStats(plan, route);
-        var card = SF.el('div', {
-          className: 'sf-section',
-          style: { borderLeft: '4px solid ' + (route.color || '#2563eb'), padding: '12px', borderRadius: '8px' },
-        });
-        card.appendChild(SF.el('h3', { style: { margin: '0 0 8px' } }, route.technician_name || route.id));
-        card.appendChild(SF.createTable({
-          columns: ['Stops', 'Travel', 'Service'],
-          rows: [[String((route.visits || []).length), utils.formatDuration(stats.travelMinutes), utils.formatDuration(stats.serviceMinutes)]],
-        }));
-        card.appendChild(SF.createTable({
-          columns: ['Territory', 'Late', 'Overtime'],
-          rows: [[route.territory || '-', utils.formatDuration(stats.lateMinutes), utils.formatDuration(stats.overtimeMinutes)]],
-        }));
-        options.routeCards.appendChild(card);
-      });
-    }
-
-    function renderUnassignedCard(plan) {
-      var assigned = utils.assignedVisitSet(plan.technician_routes || []);
-      var rows = (plan.service_visits || []).reduce(function (items, visit, idx) {
-        if (assigned[idx]) return items;
-        items.push([
-          visit.customer || visit.name || visit.id,
-          utils.timeLabel(visit.earliest_minute) + '-' + utils.timeLabel(visit.latest_minute),
-          utils.formatDuration(visit.duration_minutes || 0),
-        ]);
-        return items;
-      }, []);
-      if (!rows.length) return;
-
-      var card = SF.el('div', {
-        className: 'sf-section',
-        style: { borderLeft: '4px solid #64748b', padding: '12px', borderRadius: '8px' },
-      });
-      card.appendChild(SF.el('h3', { style: { margin: '0 0 8px' } }, 'Unassigned visits'));
-      card.appendChild(SF.createTable({ columns: ['Visit', 'Window', 'Duration'], rows: rows }));
-      options.routeCards.appendChild(card);
-    }
-
     function renderTimeline(plan) {
       var timelineConfig = buildTimelineConfig(plan);
       options.timelineContainer.innerHTML = '';
@@ -226,7 +128,7 @@
       ['technician_routes', 'service_visits', 'locations'].forEach(function (key) {
         var rows = plan[key] || [];
         if (!rows.length) return;
-        var columns = Object.keys(rows[0]).filter(function (column) { return column !== 'score' && column !== 'encoded_polyline'; });
+        var columns = Object.keys(rows[0]).filter(function (column) { return column !== 'score'; });
         var values = rows.map(function (row) {
           return columns.map(function (column) {
             var value = row[column];
@@ -249,30 +151,36 @@
       options.apiGuideContainer.appendChild(SF.createApiGuide({
         endpoints: [
           { method: 'GET', path: '/demo-data', description: 'Discover demo datasets', curl: utils.buildCurl('GET', '/demo-data') },
-          { method: 'GET', path: '/demo-data/' + (demoId || '{id}'), description: 'Fetch Bergamo OSM-backed demo data', curl: utils.buildCurl('GET', '/demo-data/' + (demoId || 'STANDARD')) },
+          { method: 'GET', path: '/demo-data/' + (demoId || '{id}'), description: 'Fetch Bergamo seed data', curl: utils.buildCurl('GET', '/demo-data/' + (demoId || 'STANDARD')) },
           { method: 'POST', path: '/jobs', description: 'Create a retained solve job', curl: utils.buildCurl('POST', '/jobs', true) },
           { method: 'GET', path: '/jobs/{id}/events', description: 'Stream typed SolverForge lifecycle events', curl: utils.buildCurl('GET', '/jobs/{id}/events') },
           { method: 'GET', path: '/jobs/{id}/snapshot', description: 'Fetch latest route snapshot', curl: utils.buildCurl('GET', '/jobs/{id}/snapshot') },
+          { method: 'GET', path: '/jobs/{id}/routes?snapshot_revision={n}', description: 'Fetch encoded route geometry for a retained snapshot', curl: utils.buildCurl('GET', '/jobs/{id}/routes?snapshot_revision={n}') },
           { method: 'GET', path: '/jobs/{id}/analysis', description: 'Analyze the latest retained score', curl: utils.buildCurl('GET', '/jobs/{id}/analysis') },
         ],
       }));
     }
 
-    function drawLeg(plan, from, to, color) {
-      var leg = utils.legFor(plan, from, to);
-      if (!leg || !leg.reachable || !leg.encoded_polyline) return;
-      options.routeMap.drawEncodedRoute({ encoded: leg.encoded_polyline, color: color || '#2563eb' });
-    }
+    function buildAnalysisBody(analysis) {
+      var container = SF.el('div', { className: 'fsr-analysis-body' });
+      if (!analysis || !analysis.constraints) {
+        container.appendChild(SF.el('p', null, 'No analysis available.'));
+        return container;
+      }
 
-    function buildAnalysisHtml(analysis) {
-      if (!analysis || !analysis.constraints) return '<p>No analysis available.</p>';
-      var html = '<p><strong>Score:</strong> ' + SF.escHtml(analysis.score) + '</p>';
-      html += '<table class="sf-table"><thead><tr><th>Constraint</th><th>Weight</th><th>Score</th><th>Matches</th></tr></thead><tbody>';
-      analysis.constraints.forEach(function (constraint) {
-        html += '<tr><td>' + SF.escHtml(constraint.name) + '</td><td>' + SF.escHtml(constraint.weight) + '</td><td>' + SF.escHtml(constraint.score) + '</td><td>' + String(constraint.matchCount || 0) + '</td></tr>';
-      });
-      html += '</tbody></table>';
-      return html;
+      container.appendChild(SF.el('p', null, SF.el('strong', null, 'Score: '), String(analysis.score)));
+      container.appendChild(SF.createTable({
+        columns: ['Constraint', 'Weight', 'Score', 'Matches'],
+        rows: analysis.constraints.map(function (constraint) {
+          return [
+            constraint.name,
+            constraint.weight,
+            constraint.score,
+            String(constraint.matchCount || 0),
+          ];
+        }),
+      }));
+      return container;
     }
 
     function destroy() {

static/app-route-state.js

@@ -0,0 +1,101 @@
+/* app-route-state.js - snapshot-scoped route geometry loading */
+
+(function () {
+  'use strict';
+
+  var FSR = window.FSR = window.FSR || {};
+
+  FSR.createRouteGeometryController = function (options) {
+    var currentPlanIdentity = null;
+    var currentRouteIdentity = null;
+    var routeInFlightIdentity = null;
+    var latestRouteIdentity = null;
+    var routeRequestToken = 0;
+
+    return {
+      identityFrom: identityFrom,
+      invalidate: invalidate,
+      load: load,
+      setPlanIdentity: setPlanIdentity,
+    };
+
+    function invalidate() {
+      routeRequestToken += 1;
+      currentPlanIdentity = null;
+      currentRouteIdentity = null;
+      routeInFlightIdentity = null;
+      latestRouteIdentity = null;
+      if (options.onClearFocus) options.onClearFocus();
+      options.onRoutesChange(null);
+    }
+
+    function setPlanIdentity(identity) {
+      currentPlanIdentity = identity;
+      if (!identityEquals(currentRouteIdentity, identity)) {
+        currentRouteIdentity = null;
+        options.onRoutesChange(null);
+      }
+    }
+
+    function load(identity) {
+      if (!identity) return Promise.resolve();
+      latestRouteIdentity = identity;
+      if (routeInFlightIdentity || identityEquals(currentRouteIdentity, identity)) {
+        return Promise.resolve();
+      }
+      return fetchLatest();
+    }
+
+    function fetchLatest() {
+      var identity = latestRouteIdentity;
+      if (!identity || routeInFlightIdentity || identityEquals(currentRouteIdentity, identity)) {
+        return Promise.resolve();
+      }
+      var token = routeRequestToken;
+      routeInFlightIdentity = identity;
+      return options.utils.fetchJobRoutes(identity.jobId, identity.snapshotRevision)
+        .then(function (routes) {
+          if (!responseStillCurrent(token, identity)) return;
+          currentRouteIdentity = identity;
+          options.onRoutesChange(routes);
+        })
+        .catch(function (err) {
+          if (!responseStillCurrent(token, identity)) return;
+          currentRouteIdentity = null;
+          options.onRoutesChange(null);
+          console.error('Route geometry failed:', err);
+        })
+        .then(function () {
+          if (identityEquals(routeInFlightIdentity, identity)) routeInFlightIdentity = null;
+          if (
+            latestRouteIdentity
+            && !identityEquals(latestRouteIdentity, identity)
+            && responseStillCurrent(token, latestRouteIdentity)
+            && !identityEquals(currentRouteIdentity, latestRouteIdentity)
+          ) {
+            return fetchLatest();
+          }
+        });
+    }
+
+    function identityFrom(meta) {
+      var jobId = meta && meta.jobId != null ? meta.jobId : options.solver.getJobId();
+      var snapshotRevision = meta && meta.snapshotRevision != null
+        ? meta.snapshotRevision
+        : options.solver.getSnapshotRevision();
+      if (jobId == null || jobId === '' || snapshotRevision == null) return null;
+      return { jobId: String(jobId), snapshotRevision: String(snapshotRevision) };
+    }
+
+    function responseStillCurrent(token, identity) {
+      return token === routeRequestToken && identityEquals(currentPlanIdentity, identity);
+    }
+
+    function identityEquals(left, right) {
+      return !!left
+        && !!right
+        && left.jobId === right.jobId
+        && left.snapshotRevision === right.snapshotRevision;
+    }
+  };
+})();

static/app-utils.js

@@ -11,6 +11,7 @@
     clonePlan: clonePlan,
     fetchDemoCatalog: fetchDemoCatalog,
     fetchDemoPlan: fetchDemoPlan,
+    fetchJobRoutes: fetchJobRoutes,
     findHeaderButton: findHeaderButton,
     formatDuration: formatDuration,
     iconForVisit: iconForVisit,
@@ -47,6 +48,13 @@
     return requestJson('/demo-data/' + encodeURIComponent(demoId), 'demo data "' + demoId + '"');
   }
 
+  function fetchJobRoutes(jobId, snapshotRevision) {
+    return requestJson(
+      '/jobs/' + encodeURIComponent(jobId) + '/routes?snapshot_revision=' + encodeURIComponent(snapshotRevision),
+      'route geometry for job "' + jobId + '"'
+    );
+  }
+
   function requestJson(path, label) {
     return fetch(path).then(function (response) {
       if (!response.ok) throw new Error(label + ' returned HTTP ' + response.status);

static/app.css

@@ -0,0 +1,263 @@
+/* Bergamo FSR app shell and map layout */
+
+:root {
+  color-scheme: light;
+  --fsr-bg: #f6f8fb;
+  --fsr-surface: #ffffff;
+  --fsr-surface-muted: #f8fafc;
+  --fsr-text: #0f172a;
+  --fsr-text-muted: #475569;
+  --fsr-border: #d8e0ea;
+  --fsr-map-rail: #e7edf4;
+}
+
+html,
+body {
+  min-height: 100%;
+  margin: 0;
+  background: var(--fsr-bg);
+  color: var(--fsr-text);
+}
+
+body {
+  color-scheme: light;
+}
+
+#sf-app.fsr-app {
+  min-height: 100vh;
+  max-width: 100vw;
+  overflow-x: hidden;
+  background: var(--fsr-bg);
+  color: var(--fsr-text);
+  color-scheme: light;
+}
+
+.fsr-app,
+.fsr-app * {
+  box-sizing: border-box;
+}
+
+.fsr-app .sf-content {
+  width: 100%;
+  padding: 14px 24px;
+}
+
+.fsr-app .sf-section {
+  background: var(--fsr-surface);
+  border: 1px solid var(--fsr-border);
+  color: var(--fsr-text);
+}
+
+.fsr-app .sf-statusbar,
+.fsr-app .sf-footer {
+  background: var(--fsr-surface-muted);
+}
+
+.fsr-app .sf-table-container,
+.fsr-app .sf-table,
+.fsr-app .sf-modal,
+.fsr-app select,
+.fsr-app input,
+.fsr-app textarea,
+.fsr-app button {
+  color-scheme: light;
+}
+
+.fsr-app .sf-table-container,
+.fsr-app .sf-table {
+  background: var(--fsr-surface);
+}
+
+.fsr-app .sf-table th {
+  background: #f1f5f9;
+  color: #334155;
+}
+
+.fsr-app .sf-table td {
+  background: var(--fsr-surface);
+  color: var(--fsr-text);
+}
+
+.fsr-summary {
+  padding-bottom: 10px;
+}
+
+.fsr-map-shell {
+  display: grid;
+  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
+  gap: 16px;
+  align-items: stretch;
+  min-height: clamp(520px, 67vh, 760px);
+}
+
+.fsr-map {
+  flex: 1;
+  min-height: clamp(520px, 67vh, 760px);
+  overflow: hidden;
+  border-radius: 8px;
+  background: #dbe7d3;
+}
+
+.fsr-map-card,
+.fsr-routes-card {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+  padding: 16px;
+  border-radius: 8px;
+}
+
+.fsr-map-card h3,
+.fsr-routes-card h3 {
+  margin: 0 0 10px;
+}
+
+.fsr-route-list {
+  display: grid;
+  gap: 10px;
+  align-content: start;
+  max-height: clamp(520px, 67vh, 760px);
+  overflow: auto;
+}
+
+.fsr-route-row,
+.fsr-route-empty {
+  display: grid;
+  gap: 8px;
+  padding: 12px;
+  border: 1px solid rgba(15, 23, 42, 0.1);
+  border-radius: 8px;
+  background: #ffffff;
+}
+
+.fsr-route-row {
+  cursor: pointer;
+}
+
+.fsr-route-row.is-focused {
+  border-color: rgba(16, 185, 129, 0.58);
+  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.13);
+}
+
+.fsr-route-row:focus-visible {
+  outline: 3px solid rgba(16, 185, 129, 0.35);
+  outline-offset: 2px;
+}
+
+.fsr-route-row__top,
+.fsr-route-row__meta,
+.fsr-route-row__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.fsr-route-row__top {
+  justify-content: space-between;
+}
+
+.fsr-route-row__meta {
+  color: var(--fsr-text-muted);
+  font-size: 13px;
+  line-height: 1.35;
+}
+
+.fsr-route-tag {
+  border-radius: 999px;
+  background: #ecfdf5;
+  color: #047857;
+  font-size: 12px;
+  font-weight: 700;
+  padding: 3px 8px;
+  white-space: nowrap;
+}
+
+.fsr-route-row .sf-btn--ghost {
+  background: #f8fafc;
+  border: 1px solid rgba(15, 23, 42, 0.1);
+  color: var(--fsr-text);
+}
+
+.fsr-route-row .sf-btn--ghost:hover {
+  background: #eef2f7;
+}
+
+.fsr-route-empty {
+  color: var(--fsr-text);
+}
+
+.fsr-map .leaflet-container,
+.fsr-map .leaflet-pane,
+.fsr-map .leaflet-tile-pane {
+  background: #dbe7d3;
+}
+
+@media (max-width: 980px) {
+  .fsr-app .sf-content {
+    padding-inline: 14px;
+  }
+
+  .fsr-map-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .fsr-route-list {
+    max-height: none;
+  }
+}
+
+@media (max-width: 760px) {
+  .fsr-app .sf-header {
+    height: auto;
+    min-height: var(--sf-header-height);
+    flex-wrap: wrap;
+    gap: 8px 12px;
+    padding: 10px 14px;
+  }
+
+  .fsr-app .sf-header-brand {
+    flex: 1 1 calc(100% - 70px);
+    min-width: 0;
+  }
+
+  .fsr-app .sf-header-title,
+  .fsr-app .sf-header-subtitle {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .fsr-app .sf-header-nav {
+    order: 3;
+    flex: 1 1 100%;
+    margin-left: 0;
+    overflow-x: auto;
+    padding-bottom: 2px;
+  }
+
+  .fsr-app .sf-header-actions {
+    order: 4;
+    margin-left: 0;
+    overflow-x: auto;
+    padding-bottom: 2px;
+  }
+
+  .fsr-app .sf-statusbar {
+    overflow-x: auto;
+    padding-inline: 14px;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: light;
+  }
+
+  html,
+  body,
+  #sf-app.fsr-app {
+    background: var(--fsr-bg);
+    color: var(--fsr-text);
+  }
+}

static/app.js

@@ -1,4 +1,4 @@
-/* app.js — lifecycle bootstrap for the Bergamo field service routing demo */
+/* app.js - lifecycle bootstrap for the Bergamo field service routing demo */
 
 (async function () {
   'use strict';
@@ -11,71 +11,40 @@
   var config = await fetch('/sf-config.json').then(function (response) { return response.json(); });
   var uiModel = await fetch('/generated/ui-model.json').then(function (response) { return response.json(); });
   var app = document.getElementById('sf-app');
+  app.className = 'sf-app fsr-app';
+
   var backend = SF.createBackend({ baseUrl: '' });
   var statusBar = SF.createStatusBar({ constraints: uiModel.constraints || [] });
-
   var currentPlan = null;
+  var currentRoutes = null;
   var demoData = null;
   var bootstrapError = null;
   var lastAnalysis = null;
   var routeMap = null;
   var renderer = null;
+  var routeGeometry = null;
+  var focusedRouteId = null;
 
-  var panels = {
-    map: SF.el('div', { className: 'sf-content' }),
-    routes: SF.el('div', { className: 'sf-content', style: { display: 'none' } }),
-    data: SF.el('div', { className: 'sf-content', style: { display: 'none' } }),
-    api: SF.el('div', { className: 'sf-content', style: { display: 'none' } }),
-  };
-
-  var header = SF.createHeader({
-    logo: '/sf/img/ouroboros.svg',
-    title: config.title,
-    subtitle: config.subtitle,
-    tabs: [
-      { id: 'map', label: 'Map', icon: 'fa-map-location-dot', active: true },
-      { id: 'routes', label: 'Routes', icon: 'fa-list-ol' },
-      { id: 'data', label: 'Data', icon: 'fa-table' },
-      { id: 'api', label: 'REST API', icon: 'fa-book' },
-    ],
-    actions: {
-      onSolve: function () { loadAndSolve(); },
-      onPause: function () { pauseSolve(); },
-      onResume: function () { resumeSolve(); },
-      onCancel: function () { cancelSolve(); },
-      onAnalyze: function () { openAnalysis(); },
-    },
-    onTabChange: function (tab) {
-      Object.keys(panels).forEach(function (key) {
-        panels[key].style.display = key === tab ? '' : 'none';
-      });
-      if (tab === 'map' && routeMap) {
-        window.setTimeout(function () { routeMap.fitBounds(); }, 80);
-      }
+  var layout = window.FSR.createAppLayout({
+    SF: SF,
+    app: app,
+    config: config,
+    statusBar: statusBar,
+    onSolve: function () { loadAndSolve(); },
+    onPause: function () { pauseSolve(); },
+    onResume: function () { resumeSolve(); },
+    onCancel: function () { cancelSolve(); },
+    onAnalyze: function () { openAnalysis(); },
+    onMapTabShown: function () {
+      window.setTimeout(function () {
+        if (routeMap && routeMap.map && routeMap.map.invalidateSize) routeMap.map.invalidateSize();
+        renderCurrentPlan();
+      }, 80);
     },
   });
 
-  app.appendChild(header);
-  statusBar.bindHeader(header);
-  app.appendChild(statusBar.el);
-
-  var bootstrapNotice = SF.el('div', {
-    className: 'sf-content',
-    style: {
-      display: 'none',
-      padding: '12px 16px',
-      marginBottom: '12px',
-      border: '1px solid #dc2626',
-      borderRadius: '8px',
-      background: '#fef2f2',
-      color: '#991b1b',
-    },
-  });
-  app.appendChild(bootstrapNotice);
   demoData = window.FSR.createDemoDataController({
     SF: SF,
-    canSwitch: canSwitchDemoData,
-    cleanupTerminalJob: cleanupTerminalJob,
     getCurrentPlan: function () { return currentPlan; },
     onCatalog: function () { if (renderer) renderer.renderApiGuide(); },
     onError: reportBootstrapError,
@@ -83,62 +52,23 @@
     onPlan: handleDemoPlanLoaded,
     utils: utils,
   });
-  app.appendChild(demoData.el);
-
-  var summaryContainer = SF.el('div');
-  var mapShell = SF.el('div', {
-    className: 'sf-section',
-    style: {
-      display: 'grid',
-      gridTemplateColumns: 'minmax(360px, 1fr) 340px',
-      gap: '16px',
-      alignItems: 'stretch',
-    },
-  });
-  var mapContainer = SF.el('div', {
-    id: 'fsr-map',
-    className: 'sf-map-container',
-    style: { minHeight: '560px', borderRadius: '8px' },
-  });
-  var routeCards = SF.el('div', {
-    style: { display: 'grid', gap: '10px', alignContent: 'start', maxHeight: '560px', overflow: 'auto' },
-  });
-  mapShell.appendChild(mapContainer);
-  mapShell.appendChild(routeCards);
-  panels.map.appendChild(summaryContainer);
-  panels.map.appendChild(mapShell);
-
-  var timelineContainer = SF.el('div');
-  var tablesContainer = SF.el('div');
-  var apiGuideContainer = SF.el('div');
-  panels.routes.appendChild(timelineContainer);
-  panels.data.appendChild(tablesContainer);
-  panels.api.appendChild(apiGuideContainer);
-
-  app.appendChild(panels.map);
-  app.appendChild(panels.routes);
-  app.appendChild(panels.data);
-  app.appendChild(panels.api);
-  app.appendChild(SF.createFooter({
-    links: [
-      { label: 'SolverForge', url: 'https://www.solverforge.org' },
-      { label: 'Docs', url: 'https://www.solverforge.org/docs' },
-    ],
-  }));
+  app.insertBefore(demoData.el, layout.bootstrapNotice.nextSibling);
 
   routeMap = SF.map.create({ container: 'fsr-map', center: DEFAULT_CENTER, zoom: 13 });
   renderer = window.FSR.createRenderer({
     SF: SF,
-    apiGuideContainer: apiGuideContainer,
+    apiGuideContainer: layout.apiGuideContainer,
     dayEnd: DAY_END,
     dayStart: DAY_START,
+    getFocusedRouteId: function () { return focusedRouteId; },
     getDemoCatalog: function () { return demoData.getCatalog(); },
     getSelectedDemoId: function () { return demoData.getSelectedId(); },
-    routeCards: routeCards,
+    onFocusRoute: focusRoute,
+    routeCards: layout.routeCards,
     routeMap: routeMap,
-    summaryContainer: summaryContainer,
-    tablesContainer: tablesContainer,
-    timelineContainer: timelineContainer,
+    summaryContainer: layout.summaryContainer,
+    tablesContainer: layout.tablesContainer,
+    timelineContainer: layout.timelineContainer,
   });
 
   var analysisModal = SF.createModal({ title: 'Score Analysis', width: '760px' });
@@ -148,24 +78,24 @@
     onProgress: function (meta) { syncLifecycleMarkers(meta); },
     onPauseRequested: function (meta) { syncLifecycleMarkers(meta); },
     onSolution: function (snapshot, meta) {
-      renderSnapshot(snapshot);
+      renderSnapshot(snapshot, meta);
       syncLifecycleMarkers(meta);
     },
     onPaused: function (snapshot, meta) {
-      renderSnapshot(snapshot);
+      renderSnapshot(snapshot, meta);
       syncLifecycleMarkers(meta);
     },
     onResumed: function (meta) { syncLifecycleMarkers(meta); },
     onCancelled: function (snapshot, meta) {
-      renderSnapshot(snapshot);
+      renderSnapshot(snapshot, meta);
       syncLifecycleMarkers(meta);
     },
     onComplete: function (snapshot, meta) {
-      renderSnapshot(snapshot);
+      renderSnapshot(snapshot, meta);
       syncLifecycleMarkers(meta);
     },
     onFailure: function (message, meta, snapshot, analysis) {
-      renderSnapshot(snapshot);
+      renderSnapshot(snapshot, meta);
       if (analysis) lastAnalysis = analysis;
       console.error('Solver job failed:', message);
       syncLifecycleMarkers(meta);
@@ -180,6 +110,16 @@
     },
   });
 
+  routeGeometry = window.FSR.createRouteGeometryController({
+    solver: solver,
+    utils: utils,
+    onClearFocus: function () { focusedRouteId = null; },
+    onRoutesChange: function (routes) {
+      currentRoutes = routes;
+      renderCurrentPlan();
+    },
+  });
+
   renderer.renderApiGuide();
   updateSolveActionAvailability();
   demoData.bootstrap();
@@ -187,6 +127,7 @@
 
   function loadAndSolve() {
     if (solver.isRunning() || solver.getLifecycleState() === 'PAUSED' || !canSolve()) return;
+    routeGeometry.invalidate();
     cleanupTerminalJob()
       .then(function () { return demoData.resolvePlan(); })
       .then(function (data) { return solver.start(data); })
@@ -207,11 +148,12 @@
   }
 
   function openAnalysis() {
-    if (!solver.getJobId()) return;
+    var jobId = solver.getJobId();
+    if (jobId == null || jobId === '') return;
     solver.analyzeSnapshot()
       .then(function (analysis) {
         lastAnalysis = analysis;
-        analysisModal.setBody(renderer.buildAnalysisHtml(analysis));
+        analysisModal.setBody(renderer.buildAnalysisBody(analysis));
         analysisModal.open();
       })
       .catch(function (err) { console.error('Analysis failed:', err); });
@@ -219,7 +161,8 @@
 
   function cleanupTerminalJob() {
     var state = solver.getLifecycleState();
-    if (!solver.getJobId() || state === 'IDLE' || state === 'PAUSED' || solver.isRunning()) {
+    var jobId = solver.getJobId();
+    if (jobId == null || jobId === '' || state === 'IDLE' || state === 'PAUSED' || solver.isRunning()) {
       return Promise.resolve(null);
     }
     return solver.delete().then(function () {
@@ -228,12 +171,18 @@
     });
   }
 
-  function renderSnapshot(snapshot) {
-    if (snapshot && snapshot.solution) renderPlan(snapshot.solution);
+  function renderSnapshot(snapshot, meta) {
+    var identity = routeGeometry.identityFrom(meta);
+    if (snapshot && snapshot.solution) {
+      routeGeometry.setPlanIdentity(identity);
+      renderPlan(snapshot.solution);
+    }
+    routeGeometry.load(identity);
   }
 
   function handleDemoPlanLoaded(plan) {
     lastAnalysis = null;
+    routeGeometry.invalidate();
     clearBootstrapError();
     renderPlan(plan);
     renderer.renderApiGuide();
@@ -242,21 +191,37 @@
 
   function renderPlan(plan) {
     currentPlan = utils.clonePlan(plan);
-    renderer.renderAll(plan);
+    if (focusedRouteId && !hasRoute(currentPlan, focusedRouteId)) focusedRouteId = null;
+    renderCurrentPlan();
   }
 
-  function canSolve() {
-    return !bootstrapError && !!currentPlan && !demoData.isLoading();
+  function renderCurrentPlan() {
+    if (renderer && currentPlan) renderer.renderAll(currentPlan, currentRoutes);
   }
 
-  function canSwitchDemoData() {
-    return !solver.isRunning() && solver.getLifecycleState() !== 'PAUSED';
+  function focusRoute(routeId) {
+    focusedRouteId = focusedRouteId === routeId ? null : routeId;
+    renderCurrentPlan();
+  }
+
+  function hasRoute(plan, routeId) {
+    return (plan.technician_routes || []).some(function (route, idx) {
+      return routeKey(route, idx) === routeId;
+    });
+  }
+
+  function routeKey(route, idx) {
+    return String(route.id || route.technician_name || ('route-' + idx));
+  }
+
+  function canSolve() {
+    return !bootstrapError && !!currentPlan && !demoData.isLoading();
   }
 
   function reportBootstrapError(err) {
     bootstrapError = err && err.message ? err.message : String(err || 'unknown error');
-    bootstrapNotice.textContent = 'Demo data bootstrap failed: ' + bootstrapError;
-    bootstrapNotice.style.display = '';
+    layout.bootstrapNotice.textContent = 'Demo data bootstrap failed: ' + bootstrapError;
+    layout.bootstrapNotice.style.display = '';
     app.dataset.bootstrapError = 'true';
     updateSolveActionAvailability();
     console.error('Demo data bootstrap failed:', err);
@@ -264,13 +229,13 @@
 
   function clearBootstrapError() {
     bootstrapError = null;
-    bootstrapNotice.textContent = '';
-    bootstrapNotice.style.display = 'none';
+    layout.bootstrapNotice.textContent = '';
+    layout.bootstrapNotice.style.display = 'none';
     delete app.dataset.bootstrapError;
   }
 
   function updateSolveActionAvailability() {
-    var solveButton = utils.findHeaderButton(header, 'Solve');
+    var solveButton = utils.findHeaderButton(layout.header, 'Solve');
     if (!solveButton) return;
     var disabled = !canSolve();
     solveButton.disabled = disabled;
@@ -278,7 +243,6 @@
     solveButton.title = disabled
       ? (bootstrapError ? 'Bergamo road data could not be loaded.' : 'Loading Bergamo demo data...')
       : '';
-    if (demoData) demoData.setDisabled(!canSwitchDemoData());
   }
 
   function syncLifecycleMarkers(meta) {

static/index.html

@@ -4,20 +4,25 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>solverforge-fsr — SolverForge</title>
-  <link rel="stylesheet" href="/sf/sf.css">
+  <link rel="stylesheet" href="/sf/sf.css?v=fsr-local-ui">
   <link rel="stylesheet" href="/sf/vendor/fontawesome/css/fontawesome.min.css">
   <link rel="stylesheet" href="/sf/vendor/fontawesome/css/solid.min.css">
   <link rel="stylesheet" href="/sf/vendor/leaflet/leaflet.css">
   <link rel="stylesheet" href="/sf/modules/sf-map.css">
+  <link rel="stylesheet" href="/app.css?v=fsr-standard-only">
   <link rel="icon" href="/sf/img/ouroboros.svg" type="image/svg+xml">
 </head>
 <body>
-  <div id="sf-app"></div>
+  <div id="sf-app" class="sf-app fsr-app"></div>
   <script src="/sf/vendor/leaflet/leaflet.js"></script>
-  <script src="/sf/sf.js"></script>
+  <script src="/sf/sf.js?v=fsr-local-ui"></script>
   <script src="/sf/modules/sf-map.js"></script>
   <script src="/app-utils.js"></script>
   <script src="/app-dataset.js"></script>
+  <script src="/app-layout.js"></script>
+  <script src="/app-route-state.js"></script>
+  <script src="/app-render-map.js"></script>
+  <script src="/app-render-routes.js"></script>
   <script src="/app-render.js"></script>
   <script src="/app.js"></script>
 </body>