refactor(ui): split field service workspace scripts

Move the field-service workspace helpers and rendering logic out of the bootstrap script so the frontend stays under the 300-line file-size limit.

The index now loads dedicated utility and renderer modules before the application bootstrap. The rendered summary also accounts for unassigned visits when reporting hard issues, which keeps the UI truthful while demo plans start empty.

static/app-render.js

@@ -0,0 +1,281 @@
+/* app-render.js — rendering layer for the Bergamo FSR demo */
+
+(function () {
+  'use strict';
+
+  var FSR = window.FSR = window.FSR || {};
+  var utils = FSR.utils;
+
+  FSR.createRenderer = function (options) {
+    var SF = options.SF;
+    var routeTimeline = null;
+
+    return {
+      buildAnalysisHtml: buildAnalysisHtml,
+      destroy: destroy,
+      renderAll: renderAll,
+      renderApiGuide: renderApiGuide,
+    };
+
+    function renderAll(plan) {
+      renderSummary(plan);
+      renderMap(plan);
+      renderRouteCards(plan);
+      renderTimeline(plan);
+      renderTables(plan);
+    }
+
+    function renderSummary(plan) {
+      var routes = plan.technician_routes || [];
+      var visits = plan.service_visits || [];
+      var assigned = utils.assignedVisitSet(routes);
+      var assignedCount = Object.keys(assigned).length;
+      var routeMetrics = routes.map(function (route) { return utils.routeStats(plan, route); });
+      var travelMinutes = routeMetrics.reduce(function (sum, stats) { return sum + stats.travelMinutes; }, 0);
+      var serviceMinutes = routeMetrics.reduce(function (sum, stats) { return sum + stats.serviceMinutes; }, 0);
+      var routeIssues = routeMetrics.reduce(function (sum, stats) {
+        return sum + stats.unreachable + stats.missingSkills + stats.missingParts + stats.lateMinutes + stats.overtimeMinutes;
+      }, 0);
+
+      options.summaryContainer.innerHTML = '';
+      options.summaryContainer.appendChild(SF.createTable({
+        columns: ['Dataset', 'Visits', 'Assigned', 'Technicians', 'Travel', 'Service', 'Hard issues', 'Score'],
+        rows: [[
+          options.getDemoCatalog().defaultId || 'STANDARD',
+          String(visits.length),
+          String(assignedCount),
+          String(routes.length),
+          utils.formatDuration(travelMinutes),
+          utils.formatDuration(serviceMinutes),
+          String(routeIssues + Math.max(0, visits.length - assignedCount)),
+          String(plan.score || 'unsolved'),
+        ]],
+      }));
+    }
+
+    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 = '';
+      options.timelineContainer.appendChild(SF.el('div', { className: 'sf-section' }, SF.createTable({
+        columns: ['Route lanes', 'Window', 'Source'],
+        rows: [[String((plan.technician_routes || []).length), '08:00-18:00', 'Latest SolverForge solution payload']],
+      })));
+
+      if (!routeTimeline) routeTimeline = SF.rail.createTimeline(timelineConfig);
+      else routeTimeline.setModel(timelineConfig.model);
+      options.timelineContainer.appendChild(routeTimeline.el);
+    }
+
+    function buildTimelineConfig(plan) {
+      return {
+        label: 'Technician',
+        labelWidth: 280,
+        title: 'Bergamo Field Service Routes',
+        subtitle: 'Ordered service visits per technician',
+        model: {
+          axis: buildDayAxis(),
+          lanes: (plan.technician_routes || []).map(routeLane(plan)),
+        },
+      };
+    }
+
+    function routeLane(plan) {
+      return function (route, routeIdx) {
+        var items = utils.routeSchedule(plan, route).map(function (entry, entryIdx) {
+          return {
+            id: 'route-' + routeIdx + '-visit-' + entryIdx,
+            startMinute: entry.start,
+            endMinute: entry.end,
+            label: entry.visit.customer || entry.visit.name || entry.visit.id,
+            meta: utils.timeLabel(entry.start) + '-' + utils.timeLabel(entry.end),
+            tone: utils.toneForRoute(routeIdx),
+          };
+        });
+        var stats = utils.routeStats(plan, route);
+        return {
+          id: route.id || ('route-' + routeIdx),
+          label: route.technician_name || route.id || ('Technician ' + (routeIdx + 1)),
+          mode: 'detailed',
+          badges: utils.routeBadges(stats),
+          stats: [
+            { label: 'Stops', value: (route.visits || []).length },
+            { label: 'Travel', value: utils.formatDuration(stats.travelMinutes) },
+            { label: 'Service', value: utils.formatDuration(stats.serviceMinutes) },
+          ],
+          items: items,
+        };
+      };
+    }
+
+    function buildDayAxis() {
+      var ticks = [];
+      for (var minute = options.dayStart; minute <= options.dayEnd; minute += 60) {
+        ticks.push({ id: 'tick-' + minute, minute: minute, label: utils.timeLabel(minute) });
+      }
+      return {
+        startMinute: options.dayStart,
+        endMinute: options.dayEnd,
+        days: [{ id: 'bergamo-day', label: 'Service day', subLabel: '08:00-18:00', startMinute: options.dayStart, endMinute: options.dayEnd }],
+        ticks: ticks,
+        initialViewport: { startMinute: options.dayStart, endMinute: options.dayEnd },
+      };
+    }
+
+    function renderTables(plan) {
+      options.tablesContainer.innerHTML = '';
+      ['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 values = rows.map(function (row) {
+          return columns.map(function (column) {
+            var value = row[column];
+            if (value == null) return '-';
+            if (Array.isArray(value)) return value.join(', ');
+            return String(value);
+          });
+        });
+        var section = SF.el('div', { className: 'sf-section' });
+        section.appendChild(SF.el('h3', null, utils.title(key)));
+        section.appendChild(SF.createTable({ columns: columns, rows: values }));
+        options.tablesContainer.appendChild(section);
+      });
+    }
+
+    function renderApiGuide() {
+      var catalog = options.getDemoCatalog();
+      options.apiGuideContainer.innerHTML = '';
+      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/' + (catalog.defaultId || '{defaultId}'), description: 'Fetch Bergamo OSM-backed demo data', curl: utils.buildCurl('GET', '/demo-data/' + (catalog.defaultId || '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}/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 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;
+    }
+
+    function destroy() {
+      if (routeTimeline) routeTimeline.destroy();
+    }
+  };
+})();

static/app-utils.js

@@ -0,0 +1,225 @@
+/* app-utils.js — shared helpers for the Bergamo FSR demo */
+
+(function () {
+  'use strict';
+
+  var FSR = window.FSR = window.FSR || {};
+
+  FSR.utils = {
+    assignedVisitSet: assignedVisitSet,
+    buildCurl: buildCurl,
+    clonePlan: clonePlan,
+    fetchDemoCatalog: fetchDemoCatalog,
+    fetchDemoPlan: fetchDemoPlan,
+    findHeaderButton: findHeaderButton,
+    formatDuration: formatDuration,
+    iconForVisit: iconForVisit,
+    legFor: legFor,
+    locationLat: locationLat,
+    locationLng: locationLng,
+    maskContains: maskContains,
+    routeBadges: routeBadges,
+    routeSchedule: routeSchedule,
+    routeStats: routeStats,
+    timeLabel: timeLabel,
+    title: title,
+    toneForRoute: toneForRoute,
+  };
+
+  function buildCurl(method, path, json) {
+    var parts = ['curl'];
+    if (method && method !== 'GET') parts.push('-X', method);
+    if (json) parts.push('-H', '"Content-Type: application/json"', '-d', '@plan.json');
+    parts.push(window.location.origin + path);
+    return parts.join(' ');
+  }
+
+  function fetchDemoCatalog() {
+    return requestJson('/demo-data', 'demo data catalog').then(function (catalog) {
+      if (!catalog || typeof catalog.defaultId !== 'string' || !Array.isArray(catalog.availableIds)) {
+        throw new Error('demo data catalog is missing defaultId or availableIds');
+      }
+      return { defaultId: catalog.defaultId, availableIds: catalog.availableIds.slice() };
+    });
+  }
+
+  function fetchDemoPlan(demoId) {
+    return requestJson('/demo-data/' + encodeURIComponent(demoId), 'demo data "' + demoId + '"');
+  }
+
+  function requestJson(path, label) {
+    return fetch(path).then(function (response) {
+      if (!response.ok) throw new Error(label + ' returned HTTP ' + response.status);
+      return response.json();
+    });
+  }
+
+  function routeSchedule(plan, route) {
+    var visits = plan.service_visits || [];
+    var entries = [];
+    var clock = route.shift_start_minute;
+    var previous = route.start_location_idx;
+
+    (route.visits || []).forEach(function (visitIdx) {
+      var visit = visits[visitIdx];
+      if (!visit) return;
+      var leg = legFor(plan, previous, visit.location_idx);
+      clock += leg && leg.reachable ? Math.ceil((leg.duration_seconds || 0) / 60) : 0;
+      if (clock < visit.earliest_minute) clock = visit.earliest_minute;
+      var start = clock;
+      var end = start + Math.max(0, visit.duration_minutes || 0);
+      entries.push({ visit: visit, start: start, end: end });
+      clock = end;
+      previous = visit.location_idx;
+    });
+
+    return entries;
+  }
+
+  function routeStats(plan, route) {
+    var visits = plan.service_visits || [];
+    var travelMinutes = 0;
+    var serviceMinutes = 0;
+    var lateMinutes = 0;
+    var overtimeMinutes = 0;
+    var missingSkills = 0;
+    var missingParts = 0;
+    var unreachable = 0;
+    var clock = route.shift_start_minute;
+    var previous = route.start_location_idx;
+
+    (route.visits || []).forEach(function (visitIdx) {
+      var visit = visits[visitIdx];
+      if (!visit) {
+        unreachable += 1;
+        return;
+      }
+      var leg = legFor(plan, previous, visit.location_idx);
+      if (!leg || !leg.reachable) {
+        unreachable += 1;
+      } else {
+        var legMinutes = Math.ceil((leg.duration_seconds || 0) / 60);
+        travelMinutes += legMinutes;
+        clock += legMinutes;
+      }
+      if (clock < visit.earliest_minute) clock = visit.earliest_minute;
+      if (clock > visit.latest_minute) lateMinutes += clock - visit.latest_minute;
+      if (!maskContains(route.skill_mask, visit.required_skill_mask)) missingSkills += 1;
+      if (!maskContains(route.inventory_mask, visit.required_parts_mask)) missingParts += 1;
+      serviceMinutes += Math.max(0, visit.duration_minutes || 0);
+      clock += Math.max(0, visit.duration_minutes || 0);
+      previous = visit.location_idx;
+    });
+
+    var returnLeg = legFor(plan, previous, route.end_location_idx);
+    if (!returnLeg || !returnLeg.reachable) {
+      unreachable += 1;
+    } else {
+      var returnMinutes = Math.ceil((returnLeg.duration_seconds || 0) / 60);
+      travelMinutes += returnMinutes;
+      clock += returnMinutes;
+    }
+
+    var routeMinutes = Math.max(0, clock - route.shift_start_minute);
+    overtimeMinutes += Math.max(0, clock - route.shift_end_minute);
+    overtimeMinutes += Math.max(0, routeMinutes - route.max_route_minutes);
+
+    return {
+      travelMinutes: travelMinutes,
+      serviceMinutes: serviceMinutes,
+      lateMinutes: lateMinutes,
+      overtimeMinutes: overtimeMinutes,
+      missingSkills: missingSkills,
+      missingParts: missingParts,
+      unreachable: unreachable,
+    };
+  }
+
+  function legFor(plan, from, to) {
+    var width = (plan.locations || []).length;
+    var direct = (plan.travel_legs || [])[from * width + to];
+    if (direct && direct.from_location_idx === from && direct.to_location_idx === to) {
+      return direct;
+    }
+    return (plan.travel_legs || []).find(function (leg) {
+      return leg.from_location_idx === from && leg.to_location_idx === to;
+    });
+  }
+
+  function assignedVisitSet(routes) {
+    var assigned = {};
+    (routes || []).forEach(function (route) {
+      (route.visits || []).forEach(function (visitIdx) {
+        assigned[visitIdx] = route;
+      });
+    });
+    return assigned;
+  }
+
+  function locationLat(location) {
+    if (location.lat != null) return Number(location.lat);
+    return Number(location.lat_e6 || 0) / 1000000;
+  }
+
+  function locationLng(location) {
+    if (location.lng != null) return Number(location.lng);
+    return Number(location.lng_e6 || 0) / 1000000;
+  }
+
+  function routeBadges(stats) {
+    var badges = [];
+    if (stats.unreachable) badges.push('Routing');
+    if (stats.missingSkills) badges.push('Skills');
+    if (stats.missingParts) badges.push('Parts');
+    if (stats.lateMinutes) badges.push('Late');
+    if (stats.overtimeMinutes) badges.push('Overtime');
+    return badges.length ? badges : ['Feasible'];
+  }
+
+  function iconForVisit(visit) {
+    if ((visit.required_skill_mask & 8) === 8) return 'fa-elevator';
+    if ((visit.required_skill_mask & 4) === 4) return 'fa-faucet';
+    if ((visit.required_skill_mask & 2) === 2) return 'fa-bolt';
+    return 'fa-screwdriver-wrench';
+  }
+
+  function maskContains(available, required) {
+    return ((available || 0) & (required || 0)) === (required || 0);
+  }
+
+  function toneForRoute(index) {
+    return ['blue', 'emerald', 'amber', 'rose', 'violet', 'slate'][index % 6];
+  }
+
+  function formatDuration(minutes) {
+    var value = Math.max(0, Math.round(minutes || 0));
+    var h = Math.floor(value / 60);
+    var m = value % 60;
+    if (!h) return String(m) + 'm';
+    return String(h) + 'h ' + String(m).padStart(2, '0') + 'm';
+  }
+
+  function timeLabel(minute) {
+    var h = Math.floor(minute / 60);
+    var m = minute % 60;
+    return String(h).padStart(2, '0') + ':' + String(m).padStart(2, '0');
+  }
+
+  function findHeaderButton(header, label) {
+    var buttons = header.querySelectorAll('button');
+    for (var i = 0; i < buttons.length; i += 1) {
+      if ((buttons[i].textContent || '').trim() === label) return buttons[i];
+    }
+    return null;
+  }
+
+  function clonePlan(data) {
+    return JSON.parse(JSON.stringify(data));
+  }
+
+  function title(text) {
+    return String(text || '')
+      .replace(/_/g, ' ')
+      .replace(/\b\w/g, function (match) { return match.toUpperCase(); });
+  }
+})();

static/app.js

@@ -1,4 +1,4 @@
-/* app.js — Bergamo field service routing demo using SolverForge UI/maps */
+/* app.js — lifecycle bootstrap for the Bergamo field service routing demo */
 
 (async function () {
   'use strict';
@@ -6,6 +6,7 @@
   var DAY_START = 8 * 60;
   var DAY_END = 18 * 60;
   var DEFAULT_CENTER = [45.698, 9.677];
+  var utils = window.FSR.utils;
 
   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(); });
@@ -18,7 +19,7 @@
   var bootstrapError = null;
   var lastAnalysis = null;
   var routeMap = null;
-  var routeTimeline = null;
+  var renderer = null;
 
   var panels = {
     map: SF.el('div', { className: 'sf-content' }),
@@ -88,13 +89,7 @@
     style: { minHeight: '560px', borderRadius: '8px' },
   });
   var routeCards = SF.el('div', {
-    style: {
-      display: 'grid',
-      gap: '10px',
-      alignContent: 'start',
-      maxHeight: '560px',
-      overflow: 'auto',
-    },
+    style: { display: 'grid', gap: '10px', alignContent: 'start', maxHeight: '560px', overflow: 'auto' },
   });
   mapShell.appendChild(mapContainer);
   mapShell.appendChild(routeCards);
@@ -102,12 +97,10 @@
   panels.map.appendChild(mapShell);
 
   var timelineContainer = SF.el('div');
-  panels.routes.appendChild(timelineContainer);
-
   var tablesContainer = SF.el('div');
-  panels.data.appendChild(tablesContainer);
-
   var apiGuideContainer = SF.el('div');
+  panels.routes.appendChild(timelineContainer);
+  panels.data.appendChild(tablesContainer);
   panels.api.appendChild(apiGuideContainer);
 
   app.appendChild(panels.map);
@@ -122,51 +115,45 @@
   }));
 
   routeMap = SF.map.create({ container: 'fsr-map', center: DEFAULT_CENTER, zoom: 13 });
+  renderer = window.FSR.createRenderer({
+    SF: SF,
+    apiGuideContainer: apiGuideContainer,
+    dayEnd: DAY_END,
+    dayStart: DAY_START,
+    getDemoCatalog: function () { return demoCatalog; },
+    routeCards: routeCards,
+    routeMap: routeMap,
+    summaryContainer: summaryContainer,
+    tablesContainer: tablesContainer,
+    timelineContainer: timelineContainer,
+  });
 
   var analysisModal = SF.createModal({ title: 'Score Analysis', width: '760px' });
   var solver = SF.createSolver({
     backend: backend,
     statusBar: statusBar,
-    onProgress: function (meta) {
-      syncLifecycleMarkers(meta);
-    },
-    onPauseRequested: function (meta) {
-      syncLifecycleMarkers(meta);
-    },
+    onProgress: function (meta) { syncLifecycleMarkers(meta); },
+    onPauseRequested: function (meta) { syncLifecycleMarkers(meta); },
     onSolution: function (snapshot, meta) {
-      if (snapshot && snapshot.solution) {
-        renderAll(snapshot.solution);
-      }
+      renderSnapshot(snapshot);
       syncLifecycleMarkers(meta);
     },
     onPaused: function (snapshot, meta) {
-      if (snapshot && snapshot.solution) {
-        renderAll(snapshot.solution);
-      }
-      syncLifecycleMarkers(meta);
-    },
-    onResumed: function (meta) {
+      renderSnapshot(snapshot);
       syncLifecycleMarkers(meta);
     },
+    onResumed: function (meta) { syncLifecycleMarkers(meta); },
     onCancelled: function (snapshot, meta) {
-      if (snapshot && snapshot.solution) {
-        renderAll(snapshot.solution);
-      }
+      renderSnapshot(snapshot);
       syncLifecycleMarkers(meta);
     },
     onComplete: function (snapshot, meta) {
-      if (snapshot && snapshot.solution) {
-        renderAll(snapshot.solution);
-      }
+      renderSnapshot(snapshot);
       syncLifecycleMarkers(meta);
     },
     onFailure: function (message, meta, snapshot, analysis) {
-      if (snapshot && snapshot.solution) {
-        renderAll(snapshot.solution);
-      }
-      if (analysis) {
-        lastAnalysis = analysis;
-      }
+      renderSnapshot(snapshot);
+      if (analysis) lastAnalysis = analysis;
       console.error('Solver job failed:', message);
       syncLifecycleMarkers(meta);
     },
@@ -180,15 +167,10 @@
     },
   });
 
-  renderApiGuide();
+  renderer.renderApiGuide();
   updateSolveActionAvailability();
   bootstrapDemoData();
-
-  window.addEventListener('beforeunload', function () {
-    if (routeTimeline) {
-      routeTimeline.destroy();
-    }
-  });
+  window.addEventListener('beforeunload', function () { renderer.destroy(); });
 
   function loadAndSolve() {
     if (solver.isRunning() || solver.getLifecycleState() === 'PAUSED' || !canSolve()) return;
@@ -200,21 +182,15 @@
   }
 
   function pauseSolve() {
-    solver.pause()
-      .then(function () { syncLifecycleMarkers(); })
-      .catch(function (err) { console.error('Pause failed:', err); });
+    solver.pause().then(function () { syncLifecycleMarkers(); }).catch(function (err) { console.error('Pause failed:', err); });
   }
 
   function resumeSolve() {
-    solver.resume()
-      .then(function () { syncLifecycleMarkers(); })
-      .catch(function (err) { console.error('Resume failed:', err); });
+    solver.resume().then(function () { syncLifecycleMarkers(); }).catch(function (err) { console.error('Resume failed:', err); });
   }
 
   function cancelSolve() {
-    solver.cancel()
-      .then(function () { syncLifecycleMarkers(); })
-      .catch(function (err) { console.error('Cancel failed:', err); });
+    solver.cancel().then(function () { syncLifecycleMarkers(); }).catch(function (err) { console.error('Cancel failed:', err); });
   }
 
   function openAnalysis() {
@@ -222,7 +198,7 @@
     solver.analyzeSnapshot()
       .then(function (analysis) {
         lastAnalysis = analysis;
-        analysisModal.setBody(buildAnalysisHtml(analysis));
+        analysisModal.setBody(renderer.buildAnalysisHtml(analysis));
         analysisModal.open();
       })
       .catch(function (err) { console.error('Analysis failed:', err); });
@@ -233,511 +209,40 @@
     if (!solver.getJobId() || state === 'IDLE' || state === 'PAUSED' || solver.isRunning()) {
       return Promise.resolve(null);
     }
-    return solver.delete()
-      .then(function () {
-        lastAnalysis = null;
-        syncLifecycleMarkers();
-      });
+    return solver.delete().then(function () {
+      lastAnalysis = null;
+      syncLifecycleMarkers();
+    });
   }
 
   function resolvePlanForSolve() {
-    if (currentPlan) {
-      return Promise.resolve(clonePlan(currentPlan));
-    }
-    if (!demoCatalog.defaultId) {
-      return Promise.reject(new Error('demo data catalog is unavailable'));
-    }
-    return fetchDemoPlan(demoCatalog.defaultId);
+    if (currentPlan) return Promise.resolve(utils.clonePlan(currentPlan));
+    if (!demoCatalog.defaultId) return Promise.reject(new Error('demo data catalog is unavailable'));
+    return utils.fetchDemoPlan(demoCatalog.defaultId);
   }
 
   function bootstrapDemoData() {
-    fetchDemoCatalog()
+    utils.fetchDemoCatalog()
       .then(function (catalog) {
         demoCatalog = catalog;
         clearBootstrapError();
-        renderApiGuide();
-        return fetchDemoPlan(catalog.defaultId);
+        renderer.renderApiGuide();
+        return utils.fetchDemoPlan(catalog.defaultId);
       })
       .then(function (plan) {
-        renderAll(plan);
+        renderPlan(plan);
         updateSolveActionAvailability();
       })
-      .catch(function (err) {
-        reportBootstrapError(err);
-      });
-  }
-
-  function fetchDemoCatalog() {
-    return requestJson('/demo-data', 'demo data catalog')
-      .then(function (catalog) {
-        if (!catalog || typeof catalog.defaultId !== 'string' || !Array.isArray(catalog.availableIds)) {
-          throw new Error('demo data catalog is missing defaultId or availableIds');
-        }
-        return {
-          defaultId: catalog.defaultId,
-          availableIds: catalog.availableIds.slice(),
-        };
-      });
-  }
-
-  function fetchDemoPlan(demoId) {
-    return requestJson('/demo-data/' + encodeURIComponent(demoId), 'demo data "' + demoId + '"');
-  }
-
-  function requestJson(path, label) {
-    return fetch(path)
-      .then(function (response) {
-        if (!response.ok) {
-          throw new Error(label + ' returned HTTP ' + response.status);
-        }
-        return response.json();
-      });
-  }
-
-  function renderAll(plan) {
-    currentPlan = clonePlan(plan);
-    renderSummary(plan);
-    renderMap(plan);
-    renderRouteCards(plan);
-    renderTimeline(plan);
-    renderTables(plan);
-  }
-
-  function renderSummary(plan) {
-    var routes = plan.technician_routes || [];
-    var visits = plan.service_visits || [];
-    var assigned = assignedVisitSet(routes);
-    var routeMetrics = routes.map(function (route) { return routeStats(plan, route); });
-    var travelMinutes = routeMetrics.reduce(function (sum, stats) { return sum + stats.travelMinutes; }, 0);
-    var serviceMinutes = routeMetrics.reduce(function (sum, stats) { return sum + stats.serviceMinutes; }, 0);
-    var hardIssues = routeMetrics.reduce(function (sum, stats) {
-      return sum + stats.unreachable + stats.missingSkills + stats.missingParts + stats.lateMinutes + stats.overtimeMinutes;
-    }, 0);
-
-    summaryContainer.innerHTML = '';
-    summaryContainer.appendChild(SF.createTable({
-      columns: ['Dataset', 'Visits', 'Assigned', 'Technicians', 'Travel', 'Service', 'Hard issues', 'Score'],
-      rows: [[
-        demoCatalog.defaultId || 'STANDARD',
-        String(visits.length),
-        String(Object.keys(assigned).length),
-        String(routes.length),
-        formatDuration(travelMinutes),
-        formatDuration(serviceMinutes),
-        String(hardIssues),
-        String(plan.score || 'unsolved'),
-      ]],
-    }));
-  }
-
-  function renderMap(plan) {
-    if (!routeMap) return;
-    routeMap.clearAll();
-
-    var locations = plan.locations || [];
-    var visits = plan.service_visits || [];
-    var routes = plan.technician_routes || [];
-    var assigned = assignedVisitSet(routes);
-
-    routes.forEach(function (route) {
-      var start = locations[route.start_location_idx];
-      if (start) {
-        routeMap.addVehicleMarker({
-          lat: locationLat(start),
-          lng: locationLng(start),
-          color: route.color || '#2563eb',
-        });
-      }
-    });
-
-    visits.forEach(function (visit, idx) {
-      var location = locations[visit.location_idx];
-      if (!location) return;
-      routeMap.addVisitMarker({
-        lat: locationLat(location),
-        lng: locationLng(location),
-        color: assigned[idx] ? assigned[idx].color : '#64748b',
-        icon: 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);
-        var stopLocation = locations[visit.location_idx];
-        if (stopLocation) {
-          routeMap.addStopNumber({
-            lat: locationLat(stopLocation),
-            lng: locationLng(stopLocation),
-            number: sequenceIdx + 1,
-            color: route.color || '#2563eb',
-          });
-        }
-        previous = visit.location_idx;
-      });
-      drawLeg(plan, previous, route.end_location_idx, route.color);
-    });
-
-    routeMap.fitBounds();
-  }
-
-  function renderRouteCards(plan) {
-    routeCards.innerHTML = '';
-    renderUnassignedCard(plan);
-    (plan.technician_routes || []).forEach(function (route) {
-      var stats = 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),
-          formatDuration(stats.travelMinutes),
-          formatDuration(stats.serviceMinutes),
-        ]],
-      }));
-      card.appendChild(SF.createTable({
-        columns: ['Territory', 'Late', 'Overtime'],
-        rows: [[
-          route.territory || '-',
-          formatDuration(stats.lateMinutes),
-          formatDuration(stats.overtimeMinutes),
-        ]],
-      }));
-      routeCards.appendChild(card);
-    });
-  }
-
-  function renderUnassignedCard(plan) {
-    var assigned = 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,
-        timeLabel(visit.earliest_minute) + '-' + timeLabel(visit.latest_minute),
-        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,
-    }));
-    routeCards.appendChild(card);
+      .catch(function (err) { reportBootstrapError(err); });
   }
 
-  function renderTimeline(plan) {
-    var timelineConfig = buildTimelineConfig(plan);
-    timelineContainer.innerHTML = '';
-    timelineContainer.appendChild(SF.el('div', { className: 'sf-section' }, SF.createTable({
-      columns: ['Route lanes', 'Window', 'Source'],
-      rows: [[
-        String((plan.technician_routes || []).length),
-        '08:00-18:00',
-        'Latest SolverForge solution payload',
-      ]],
-    })));
-
-    if (!routeTimeline) {
-      routeTimeline = SF.rail.createTimeline(timelineConfig);
-    } else {
-      routeTimeline.setModel(timelineConfig.model);
-    }
-    timelineContainer.appendChild(routeTimeline.el);
-  }
-
-  function buildTimelineConfig(plan) {
-    var lanes = (plan.technician_routes || []).map(function (route, routeIdx) {
-      var items = routeSchedule(plan, route).map(function (entry, entryIdx) {
-        return {
-          id: 'route-' + routeIdx + '-visit-' + entryIdx,
-          startMinute: entry.start,
-          endMinute: entry.end,
-          label: entry.visit.customer || entry.visit.name || entry.visit.id,
-          meta: timeLabel(entry.start) + '-' + timeLabel(entry.end),
-          tone: toneForRoute(routeIdx),
-        };
-      });
-      var stats = routeStats(plan, route);
-      return {
-        id: route.id || ('route-' + routeIdx),
-        label: route.technician_name || route.id || ('Technician ' + (routeIdx + 1)),
-        mode: 'detailed',
-        badges: routeBadges(stats),
-        stats: [
-          { label: 'Stops', value: (route.visits || []).length },
-          { label: 'Travel', value: formatDuration(stats.travelMinutes) },
-          { label: 'Service', value: formatDuration(stats.serviceMinutes) },
-        ],
-        items: items,
-      };
-    });
-
-    return {
-      label: 'Technician',
-      labelWidth: 280,
-      title: 'Bergamo Field Service Routes',
-      subtitle: 'Ordered service visits per technician',
-      model: {
-        axis: buildDayAxis(),
-        lanes: lanes,
-      },
-    };
-  }
-
-  function buildDayAxis() {
-    var days = [{
-      id: 'bergamo-day',
-      label: 'Service day',
-      subLabel: '08:00-18:00',
-      startMinute: DAY_START,
-      endMinute: DAY_END,
-    }];
-    var ticks = [];
-    for (var minute = DAY_START; minute <= DAY_END; minute += 60) {
-      ticks.push({
-        id: 'tick-' + minute,
-        minute: minute,
-        label: timeLabel(minute),
-      });
-    }
-    return {
-      startMinute: DAY_START,
-      endMinute: DAY_END,
-      days: days,
-      ticks: ticks,
-      initialViewport: { startMinute: DAY_START, endMinute: DAY_END },
-    };
-  }
-
-  function renderTables(plan) {
-    tablesContainer.innerHTML = '';
-    ['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 section = SF.el('div', { className: 'sf-section' });
-      section.appendChild(SF.el('h3', null, title(key)));
-      section.appendChild(SF.createTable({
-        columns: columns,
-        rows: rows.map(function (row) {
-          return columns.map(function (column) {
-            var value = row[column];
-            if (value == null) return '-';
-            if (Array.isArray(value)) return value.join(', ');
-            return String(value);
-          });
-        }),
-      }));
-      tablesContainer.appendChild(section);
-    });
-  }
-
-  function renderApiGuide() {
-    apiGuideContainer.innerHTML = '';
-    apiGuideContainer.appendChild(SF.createApiGuide({
-      endpoints: [
-        { method: 'GET', path: '/demo-data', description: 'Discover demo datasets', curl: buildCurl('GET', '/demo-data') },
-        { method: 'GET', path: '/demo-data/' + (demoCatalog.defaultId || '{defaultId}'), description: 'Fetch Bergamo OSM-backed demo data', curl: buildCurl('GET', '/demo-data/' + (demoCatalog.defaultId || 'STANDARD')) },
-        { method: 'POST', path: '/jobs', description: 'Create a retained solve job', curl: buildCurl('POST', '/jobs', true) },
-        { method: 'GET', path: '/jobs/{id}/events', description: 'Stream typed SolverForge lifecycle events', curl: buildCurl('GET', '/jobs/{id}/events') },
-        { method: 'GET', path: '/jobs/{id}/snapshot', description: 'Fetch latest route snapshot', curl: buildCurl('GET', '/jobs/{id}/snapshot') },
-        { method: 'GET', path: '/jobs/{id}/analysis', description: 'Analyze the latest retained score', curl: buildCurl('GET', '/jobs/{id}/analysis') },
-      ],
-    }));
-  }
-
-  function buildCurl(method, path, json) {
-    var parts = ['curl'];
-    if (method && method !== 'GET') parts.push('-X', method);
-    if (json) parts.push('-H', '"Content-Type: application/json"', '-d', '@plan.json');
-    parts.push(window.location.origin + path);
-    return parts.join(' ');
-  }
-
-  function routeSchedule(plan, route) {
-    var visits = plan.service_visits || [];
-    var entries = [];
-    var clock = route.shift_start_minute;
-    var previous = route.start_location_idx;
-
-    (route.visits || []).forEach(function (visitIdx) {
-      var visit = visits[visitIdx];
-      if (!visit) return;
-      var leg = legFor(plan, previous, visit.location_idx);
-      clock += leg && leg.reachable ? Math.ceil((leg.duration_seconds || 0) / 60) : 0;
-      if (clock < visit.earliest_minute) clock = visit.earliest_minute;
-      var start = clock;
-      var end = start + Math.max(0, visit.duration_minutes || 0);
-      entries.push({ visit: visit, start: start, end: end });
-      clock = end;
-      previous = visit.location_idx;
-    });
-
-    return entries;
-  }
-
-  function routeStats(plan, route) {
-    var visits = plan.service_visits || [];
-    var travelMinutes = 0;
-    var serviceMinutes = 0;
-    var lateMinutes = 0;
-    var overtimeMinutes = 0;
-    var missingSkills = 0;
-    var missingParts = 0;
-    var unreachable = 0;
-    var clock = route.shift_start_minute;
-    var previous = route.start_location_idx;
-
-    (route.visits || []).forEach(function (visitIdx) {
-      var visit = visits[visitIdx];
-      if (!visit) {
-        unreachable += 1;
-        return;
-      }
-      var leg = legFor(plan, previous, visit.location_idx);
-      if (!leg || !leg.reachable) {
-        unreachable += 1;
-      } else {
-        var legMinutes = Math.ceil((leg.duration_seconds || 0) / 60);
-        travelMinutes += legMinutes;
-        clock += legMinutes;
-      }
-      if (clock < visit.earliest_minute) clock = visit.earliest_minute;
-      if (clock > visit.latest_minute) lateMinutes += clock - visit.latest_minute;
-      if (!maskContains(route.skill_mask, visit.required_skill_mask)) missingSkills += 1;
-      if (!maskContains(route.inventory_mask, visit.required_parts_mask)) missingParts += 1;
-      serviceMinutes += Math.max(0, visit.duration_minutes || 0);
-      clock += Math.max(0, visit.duration_minutes || 0);
-      previous = visit.location_idx;
-    });
-
-    var returnLeg = legFor(plan, previous, route.end_location_idx);
-    if (!returnLeg || !returnLeg.reachable) {
-      unreachable += 1;
-    } else {
-      var returnMinutes = Math.ceil((returnLeg.duration_seconds || 0) / 60);
-      travelMinutes += returnMinutes;
-      clock += returnMinutes;
-    }
-
-    var routeMinutes = Math.max(0, clock - route.shift_start_minute);
-    overtimeMinutes += Math.max(0, clock - route.shift_end_minute);
-    overtimeMinutes += Math.max(0, routeMinutes - route.max_route_minutes);
-
-    return {
-      travelMinutes: travelMinutes,
-      serviceMinutes: serviceMinutes,
-      lateMinutes: lateMinutes,
-      overtimeMinutes: overtimeMinutes,
-      missingSkills: missingSkills,
-      missingParts: missingParts,
-      unreachable: unreachable,
-    };
-  }
-
-  function drawLeg(plan, from, to, color) {
-    var leg = legFor(plan, from, to);
-    if (!leg || !leg.reachable || !leg.encoded_polyline) return;
-    routeMap.drawEncodedRoute({ encoded: leg.encoded_polyline, color: color || '#2563eb' });
-  }
-
-  function legFor(plan, from, to) {
-    var width = (plan.locations || []).length;
-    var direct = (plan.travel_legs || [])[from * width + to];
-    if (direct && direct.from_location_idx === from && direct.to_location_idx === to) {
-      return direct;
-    }
-    return (plan.travel_legs || []).find(function (leg) {
-      return leg.from_location_idx === from && leg.to_location_idx === to;
-    });
-  }
-
-  function assignedVisitSet(routes) {
-    var assigned = {};
-    (routes || []).forEach(function (route) {
-      (route.visits || []).forEach(function (visitIdx) {
-        assigned[visitIdx] = route;
-      });
-    });
-    return assigned;
+  function renderSnapshot(snapshot) {
+    if (snapshot && snapshot.solution) renderPlan(snapshot.solution);
   }
 
-  function locationLat(location) {
-    if (location.lat != null) return Number(location.lat);
-    return Number(location.lat_e6 || 0) / 1000000;
-  }
-
-  function locationLng(location) {
-    if (location.lng != null) return Number(location.lng);
-    return Number(location.lng_e6 || 0) / 1000000;
-  }
-
-  function routeBadges(stats) {
-    var badges = [];
-    if (stats.unreachable) badges.push('Routing');
-    if (stats.missingSkills) badges.push('Skills');
-    if (stats.missingParts) badges.push('Parts');
-    if (stats.lateMinutes) badges.push('Late');
-    if (stats.overtimeMinutes) badges.push('Overtime');
-    return badges.length ? badges : ['Feasible'];
-  }
-
-  function iconForVisit(visit) {
-    if ((visit.required_skill_mask & 8) === 8) return 'fa-elevator';
-    if ((visit.required_skill_mask & 4) === 4) return 'fa-faucet';
-    if ((visit.required_skill_mask & 2) === 2) return 'fa-bolt';
-    return 'fa-screwdriver-wrench';
-  }
-
-  function maskContains(available, required) {
-    return ((available || 0) & (required || 0)) === (required || 0);
-  }
-
-  function toneForRoute(index) {
-    return ['blue', 'emerald', 'amber', 'rose', 'violet', 'slate'][index % 6];
-  }
-
-  function formatDuration(minutes) {
-    var value = Math.max(0, Math.round(minutes || 0));
-    var h = Math.floor(value / 60);
-    var m = value % 60;
-    if (!h) return String(m) + 'm';
-    return String(h) + 'h ' + String(m).padStart(2, '0') + 'm';
-  }
-
-  function timeLabel(minute) {
-    var h = Math.floor(minute / 60);
-    var m = minute % 60;
-    return String(h).padStart(2, '0') + ':' + String(m).padStart(2, '0');
-  }
-
-  function clonePlan(data) {
-    return JSON.parse(JSON.stringify(data));
+  function renderPlan(plan) {
+    currentPlan = utils.clonePlan(plan);
+    renderer.renderAll(plan);
   }
 
   function canSolve() {
@@ -745,7 +250,7 @@
   }
 
   function reportBootstrapError(err) {
-    bootstrapError = describeError(err);
+    bootstrapError = err && err.message ? err.message : String(err || 'unknown error');
     bootstrapNotice.textContent = 'Demo data bootstrap failed: ' + bootstrapError;
     bootstrapNotice.style.display = '';
     app.dataset.bootstrapError = 'true';
@@ -760,12 +265,8 @@
     delete app.dataset.bootstrapError;
   }
 
-  function describeError(err) {
-    return err && err.message ? err.message : String(err || 'unknown error');
-  }
-
   function updateSolveActionAvailability() {
-    var solveButton = findHeaderButton('Solve');
+    var solveButton = utils.findHeaderButton(header, 'Solve');
     if (!solveButton) return;
     var disabled = !canSolve();
     solveButton.disabled = disabled;
@@ -775,14 +276,6 @@
       : '';
   }
 
-  function findHeaderButton(label) {
-    var buttons = header.querySelectorAll('button');
-    for (var i = 0; i < buttons.length; i += 1) {
-      if ((buttons[i].textContent || '').trim() === label) return buttons[i];
-    }
-    return null;
-  }
-
   function syncLifecycleMarkers(meta) {
     var jobId = solver.getJobId();
     var snapshotRevision = solver.getSnapshotRevision();
@@ -796,21 +289,4 @@
     else delete app.dataset.lifecycleState;
     updateSolveActionAvailability();
   }
-
-  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;
-  }
-
-  function title(text) {
-    return String(text || '')
-      .replace(/_/g, ' ')
-      .replace(/\b\w/g, function (match) { return match.toUpperCase(); });
-  }
 })();

static/index.html

@@ -16,6 +16,8 @@
   <script src="/sf/vendor/leaflet/leaflet.js"></script>
   <script src="/sf/sf.js"></script>
   <script src="/sf/modules/sf-map.js"></script>
+  <script src="/app-utils.js"></script>
+  <script src="/app-render.js"></script>
   <script src="/app.js"></script>
 </body>
 </html>