Hugging Face's logo

Spaces:
Asmitha-28
/
ptis
Running

App Files Community
ptis / app.js
Asmitha-28's picture
Asmitha-28
Fix dashboard page deploy
3271031 verified
Raw
History Blame Contribute Delete
66.1 kB
const API_BASE = "http://localhost:8000";
const DEFAULT_SCENARIO_ID = "silk_board_whitefield_capacity_safe_v1";
const TILE_SIZE = 256;
const MAP_MIN_ZOOM = 10;
const MAP_MAX_ZOOM = 15;
const STATIC_PREFIX = location.pathname.includes("/frontend/") ? "../" : "./";
function staticAsset(path) {
 return STATIC_PREFIX + path.replace(/^\/+/, "");
}
const mapState = {
autoFit: true,
center: null,
context: null,
dragging: false,
lastPointer: null,
routeKey: "",
zoom: null,
 maplibre: null,
 maplibreMarkers: [],
 maplibreRouteKey: "",
 maplibreReady: false
};
const audienceState = {
active: "control",
evidence: null
};
const fallbackEvidence = {
passed: true,
scenario_id: DEFAULT_SCENARIO_ID,
scenario_name: "Silk Board to Whitefield capacity-safe activation",
generated_at: "not loaded",
corridor: {
name: "Bengaluru ORR: Silk Board to Whitefield",
junctions: [
{ id: "silk_board", lat: 12.917, lon: 77.6228, name: "Silk Board", order: 0 },
{ id: "hsr_layout", lat: 12.9116, lon: 77.6365, name: "HSR Layout", order: 1 },
{ id: "sony_world", lat: 12.9352, lon: 77.654, name: "Sony World", order: 2 },
{ id: "marathahalli", lat: 12.9591, lon: 77.7014, name: "Marathahalli", order: 3 },
{ id: "doddanekkundi", lat: 12.9724, lon: 77.7185, name: "Doddanekkundi", order: 4 },
{ id: "itpl", lat: 12.985, lon: 77.736, name: "ITPL", order: 5 },
{ id: "whitefield", lat: 12.9698, lon: 77.748, name: "Whitefield", order: 6 }
],
smart_links: [
{ id: "sl_marathahalli_whitefield", from_junction_id: "marathahalli", to_junction_id: "whitefield", destination_id: "whitefield", min_confidence: 0.65, capacity_vpm: 23 }
]
},
cycles: [
{
cycle: 3,
observation: { junction_id: "marathahalli" },
posterior: { doddanekkundi: 0.1492537313, itpl: 0.1791044776, whitefield: 0.6716417910 },
best_destination_id: "whitefield",
best_confidence: 0.6716417910,
density_tw_per_km: [66.67, 74.87, 82.26, 87.97, 86.84, 83.73],
decisions: [{ link_id: "sl_marathahalli_whitefield", activate: true, confidence: 0.6716417910, available_capacity_vpm: 14.5, q_expected_vpm: 14.5, q_commanded_vpm: 14.35, reason: "fallback evidence" }]
}
],
assertions: [
{ name: "expected_link_activates", passed: true },
{ name: "activation_confidence_floor", passed: true },
{ name: "capacity_safe_decisions", passed: true }
]
};
const fallbackSuite = { passed: true, passed_count: 0, scenario_count: 0, scenarios: [] };
const fallbackBatch = {
passed: true,
metrics: {
vehicle_count: 0,
observation_count: 0,
activation_count: 0,
capacity_violation_count: 0,
overcommand_count: 0,
false_positive_activations: 0,
mean_activation_confidence: 0,
mean_abs_demand_error_vpm: 0
},
aggregate_decisions: [],
assertions: []
};
const fallbackExtremeBatch = fallbackBatch;
const fallbackCctv = {
passed: false,
metrics: { metadata_rows: 0, coco_image_count: 0, coco_annotation_count: 0, category_count: 0, local_image_count: 0, sample_annotation_count: 0 },
sample_images: [],
assertions: []
};
const fallbackField = { field_proven: false, status: "waiting_for_field_replay_data", metrics: {}, assertions: [] };
const fallbackRemoteAggregate = { passed: false, field_proven: false, remote_aggregate_replay: false, status: "waiting_for_remote_aggregate_counts", metrics: {}, assertions: [] };
const fallbackOfficial = { status: "missing", source_documents: [], planning_facts: [], junction_counts: [], screenline_counts: [] };
const fallbackRouteGeometry = { status: "missing", coordinate_count: 0, distance_m: 0, features: [] };
async function fetchWithTimeout(url, timeoutMs = 1400) {
const controller = new AbortController();
const timer = setTimeout(() => controller.abort(), timeoutMs);
try {
return await fetch(url, { cache: "no-store", signal: controller.signal });
} finally {
clearTimeout(timer);
}
}
async function fetchJson(apiPath, localPath, fallback) {
try {
const api = await fetchWithTimeout(`${API_BASE}${apiPath}`);
if (api.ok) return api.json();
} catch (_) {}
try {
const local = await fetchWithTimeout(localPath, 3000);
if (local.ok) return local.json();
} catch (_) {}
return fallback;
}
async function postJson(apiPath) {
const response = await fetch(`${API_BASE}${apiPath}`, { method: "POST" });
if (!response.ok) throw new Error(`API returned ${response.status}`);
return response.json();
}
async function loadAllEvidence() {
const [scenario, suite, batch, extremeBatch, official, cctv, field, remoteAggregate, routeGeometry] = await Promise.all([
fetchJson("/api/evidence/latest", staticAsset("evidence/latest_run.json"), fallbackEvidence),
fetchJson("/api/evidence/suite", staticAsset("evidence/suite_report.json"), fallbackSuite),
fetchJson("/api/evidence/batch", staticAsset("evidence/batch_report.json"), fallbackBatch),
fetchJson("/api/evidence/extreme-batch", staticAsset("evidence/extreme_batch_report.json"), fallbackExtremeBatch),
fetchJson("/api/official-reference", staticAsset("data/official_reference_bengaluru_cmp_2020.json"), fallbackOfficial),
fetchJson("/api/evidence/cctv", staticAsset("evidence/cctv_bmd45_report.json"), fallbackCctv),
fetchJson("/api/evidence/field-replay", staticAsset("evidence/field_replay_report.json"), fallbackField),
fetchJson("/api/evidence/remote-aggregate", staticAsset("evidence/remote_aggregate_replay_report.json"), fallbackRemoteAggregate),
fetchJson("/api/route-geometry", staticAsset("data/orr_silk_board_whitefield_route_osrm.geojson"), fallbackRouteGeometry)
]);
renderAll({ scenario, suite, batch, extremeBatch, official, cctv, field, remoteAggregate, routeGeometry });
}
async function runScenario() {
try {
await postJson(`/api/scenarios/${DEFAULT_SCENARIO_ID}/run`);
} catch (error) {
console.info("API replay unavailable; using saved evidence", error.message);
}
loadAllEvidence();
}
async function runSuite() {
try {
await postJson("/api/suite/run");
} catch (error) {
console.info("API suite unavailable; using saved evidence", error.message);
}
loadAllEvidence();
}
async function runBatch() {
try {
await postJson("/api/batch/run");
} catch (error) {
console.info("API batch unavailable; using saved evidence", error.message);
}
loadAllEvidence();
}
async function runExtremeBatch() {
try {
await postJson("/api/extreme-batch/run");
} catch (error) {
console.info("API extreme stress unavailable; using saved evidence", error.message);
}
loadAllEvidence();
}
function renderAll({ scenario, suite, batch, extremeBatch, official, cctv, field, remoteAggregate, routeGeometry }) {
const cycles = scenario.cycles || fallbackEvidence.cycles;
const latest = cycles[cycles.length - 1];
const decision = cycles.flatMap(c => c.decisions || []).find(d => d.activate);
const posterior = latest.posterior || {};
const bestId = latest.best_destination_id || Object.entries(posterior).sort((a, b) => b[1] - a[1])[0]?.[0] || "unknown";
const confidence = latest.best_confidence ?? posterior[bestId] ?? 0;
const softwarePassed = Boolean(scenario.passed && suite.passed && batch.passed && (extremeBatch?.passed ?? true));
const cctvPassed = Boolean(cctv.passed);
const officialReady = Boolean(official.source_documents?.length && official.status !== "missing");
const fieldPassed = Boolean(field.field_proven);
const remotePassed = Boolean(remoteAggregate?.passed);
const context = { scenario, suite, batch, extremeBatch, official, cctv, field, remoteAggregate, routeGeometry, latest, decision, bestId, confidence };
renderHeader(scenario, confidence, softwarePassed, cctvPassed, fieldPassed);
renderUnderstanding(context);
renderStats({ suite, batch, extremeBatch, official, cctv, field, remoteAggregate, routeGeometry, softwarePassed, cctvPassed, officialReady, fieldPassed, remotePassed });
renderGeoMap(scenario, latest, bestId, decision, extremeBatch, routeGeometry);
renderPosterior(posterior, bestId, latest, decision);
renderDecision(decision, confidence);
renderCapacity(decision);
renderCctv(cctv);
renderDensity(scenario, latest);
renderTraceStrip(extremeBatch);
renderAudienceViews(context);
renderScenarioLibrary(suite);
renderBottomMetrics({ batch, extremeBatch, cctv, official, field, remoteAggregate, decision });
renderDetails(context);
}
function renderUnderstanding(context) {
 const proof = proofMetrics(context);
 const latest = context.latest || {};
 const junctions = [...(context.scenario?.corridor?.junctions || [])].sort((a, b) => a.order - b.order);
 const activeId = latest.observation?.junction_id;
 const activeOrder = junctions.find(item => item.id === activeId)?.order ?? -1;
 const selectedIds = ["silk_board", "hsr_layout", "sony_world", "marathahalli", "whitefield"];
 const selected = selectedIds.map(id => junctions.find(item => item.id === id)).filter(Boolean);
 const confidence = context.confidence || 0;
 const decision = context.decision;
 const action = decision?.activate ? "simulated activation" : "standby";
 const status = document.getElementById("understand-status");
 if (status) status.textContent = `${proof.suiteScore} scenarios passed / ${proof.capacityViolations} capacity violations / field ${proof.fieldGate}`;
 setText("route-story-title", `${proof.checkpoint} -> ${proof.bestDestination} ${proof.confidence}`);
const story = document.getElementById("simple-route-story");
 if (story) {
 story.innerHTML = selected.map((junction, index) => {
 const cls = ["simple-node"];
 let state = "possible";
 if (junction.order < activeOrder) {
 cls.push("passed");
 state = "passed";
 }
 if (junction.id === activeId) {
 cls.push("checkpoint");
 state = "checkpoint";
 }
 if (junction.id === context.bestId) {
 cls.push("target");
 state = "likely";
 }
 return `
 <article class="${cls.join(" ")}">
 <span class="node-index">${index + 1}</span>
 <strong>${escapeHtml(shortLabel(junction.name))}</strong>
 <small>${escapeHtml(state)}</small>
 </article>
 `;
 }).join("");
 }
const gate = document.getElementById("simple-gate-story");
 if (gate) {
 gate.innerHTML = `
 <article class="gate-mini ${confidence >= 0.65 ? "pass" : "wait"}">
 <span>Confidence</span>
 <strong>${escapeHtml(proof.confidence)}</strong>
 <p>${escapeHtml(`${proof.bestDestination} is the strongest destination belief.`)}</p>
 </article>
 <article class="gate-mini ${decision?.activate ? "pass" : "wait"}">
 <span>Capacity</span>
 <strong>${escapeHtml(decision ? `${number(decision.available_capacity_vpm)} vpm` : "waiting")}</strong>
 <p>${escapeHtml(decision?.activate ? "Receiving capacity is enough in replay." : "Action stays closed until capacity is safe.")}</p>
 </article>
 <article class="gate-result ${decision?.activate ? "active" : "wait"}">
 <span>Replay action</span>
 <strong>${escapeHtml(action)}</strong>
 </article>
 `;
 }
const proofStrip = document.getElementById("simple-proof-strip");
 if (proofStrip) {
 proofStrip.innerHTML = [
 simpleProofItem("Software", proof.suiteScore, "scenario suite"),
 simpleProofItem("Stress", proof.vehicleCount, `${proof.observationCount} observations`),
 simpleProofItem("Safety", proof.capacityViolations, "capacity violations"),
 simpleProofItem("Route", proof.routePoints, proof.routeDistance),
 simpleProofItem("CCTV", proof.cctvBoxes, "BMD-45 boxes"),
 simpleProofItem("Field", proof.fieldGate, "not claimed yet")
 ].join("");
 }
}
function simpleProofItem(labelText, value, detail) {
 return `<article class="simple-proof-item"><span>${escapeHtml(labelText)}</span><strong>${escapeHtml(value)}</strong><p>${escapeHtml(detail)}</p></article>`;
}
function renderHeader(scenario, confidence, softwarePassed, cctvPassed, fieldPassed) {
setText("corridor-label", scenario.corridor?.name || "Bengaluru ORR evidence console");
setText("scenario-name", scenario.scenario_name || "Scenario");
setText("wf-probability", percent(confidence));
const status = document.getElementById("status-pill");
const passed = softwarePassed && cctvPassed;
status.textContent = passed ? (fieldPassed ? "field replay passed" : "software + CCTV passed; field pending") : "evidence review";
status.className = `badge ${passed ? (fieldPassed ? "pass" : "wait") : "fail"}`;
}
function renderStats({ suite, batch, extremeBatch, official, cctv, field, remoteAggregate, routeGeometry, softwarePassed, cctvPassed, officialReady, fieldPassed, remotePassed }) {
const m = extremeBatch?.metrics || batch.metrics || fallbackBatch.metrics;
const cm = cctv.metrics || fallbackCctv.metrics;
const routeReady = Boolean(routeGeometry?.coordinate_count);
const rm = remoteAggregate?.metrics || fallbackRemoteAggregate.metrics;
document.getElementById("stats-row").innerHTML = [
statTile("Proof Suite", suite.scenario_count ? `${suite.passed_count}/${suite.scenario_count}` : "--", softwarePassed ? "software assertions passed" : "review needed"),
statTile("Stress Replay", `${integer(m.vehicle_count)} veh`, `${integer(m.observation_count)} checkpoint observations`),
statTile("Route Geometry", routeReady ? `${integer(routeGeometry.coordinate_count)} pts` : "--", routeGeometry?.distance_m ? `${number(routeGeometry.distance_m / 1000)} km OSRM/OpenStreetMap` : "route reference pending"),
statTile("CCTV Audit", `${integer(cm.coco_annotation_count)} boxes`, cctvPassed ? `${integer(cm.local_image_count)} BMD-45 frames` : "waiting"),
statTile("Remote Replay", remotePassed ? `${integer(rm.row_count || 0)} rows` : "pending", remotePassed ? `${number(rm.peak_total_vpm || 0)} vpm peak observed` : "aggregate counts needed"),
statTile("Field Gate", fieldPassed ? "passed" : "pending", field.status || "observed replay needed")
].join("");
}
function renderGeoMap(report, latest, bestId, decision, extremeBatch, routeGeometry) {
mapState.context = { report, latest, bestId, decision, extremeBatch, routeGeometry };
const svg = document.getElementById("geo-map");
const stack = document.getElementById("map-stack");
const junctions = [...(report.corridor?.junctions || [])].sort((a, b) => a.order - b.order);
if (!junctions.length) {
svg.innerHTML = "";
setText("map-status", "Corridor geometry unavailable");
return;
}
const rect = stack?.getBoundingClientRect();
const width = Math.max(320, Math.round(rect?.width || 980));
const height = Math.max(260, Math.round(rect?.height || 330));
svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
const roadCoords = extractRouteCoordinates(routeGeometry);
const routeCoords = roadCoords.length ? roadCoords : junctions.map(j => [Number(j.lon), Number(j.lat)]);
const allCoords = [...routeCoords, ...junctions.map(j => [Number(j.lon), Number(j.lat)])];
const lats = allCoords.map(coord => Number(coord[1]));
const lons = allCoords.map(coord => Number(coord[0]));
const minLat = Math.min(...lats);
const maxLat = Math.max(...lats);
const minLon = Math.min(...lons);
const maxLon = Math.max(...lons);
const routePointCount = routeGeometry?.coordinate_count || routeCoords.length;
const routeKey = `${routePointCount}:${minLat.toFixed(6)}:${maxLat.toFixed(6)}:${minLon.toFixed(6)}:${maxLon.toFixed(6)}`;
if (!mapState.center || mapState.zoom == null || mapState.autoFit || mapState.routeKey !== routeKey) {
const fitted = fitMapView(minLat, maxLat, minLon, maxLon, width, height);
mapState.center = fitted.center;
mapState.zoom = fitted.zoom;
mapState.routeKey = routeKey;
mapState.autoFit = false;
}
const maplibreReady = renderMapLibreShowcase({ routeCoords, junctions, latest, bestId, decision, routeGeometry, stress: extremeBatch?.metrics || fallbackBatch.metrics, bounds: { minLat, maxLat, minLon, maxLon } });
renderTileLayer(width, height);
const project = (lon, lat) => projectMapPoint(lon, lat, width, height);
const points = junctions.map(j => ({ ...j, ...project(j.lon, j.lat) }));
const routePoints = routeCoords.map(coord => ({ lon: Number(coord[0]), lat: Number(coord[1]), ...project(coord[0], coord[1]) }));
const byId = Object.fromEntries(points.map(p => [p.id, p]));
const routeD = pathFromPoints(routePoints);
const nearestIndexById = Object.fromEntries(junctions.map(j => [j.id, nearestRouteIndex(routeCoords, j)]));
const activeOrder = junctions.find(j => j.id === latest.observation?.junction_id)?.order ?? -1;
const activeIndex = nearestIndexById[latest.observation?.junction_id] ?? -1;
const activeD = activeIndex > 0 ? pathFromPoints(routePoints.slice(0, activeIndex + 1)) : "";
const link = report.corridor?.smart_links?.[0];
const from = link ? byId[link.from_junction_id] : null;
const to = link ? byId[link.to_junction_id] : null;
const fromIndex = link ? nearestIndexById[link.from_junction_id] : -1;
const toIndex = link ? nearestIndexById[link.to_junction_id] : -1;
const linkD = from && to ? pathFromPoints(routeSlice(routePoints, fromIndex, toIndex)) : "";
const density = latest.density_tw_per_km || [];
const stress = extremeBatch?.metrics || fallbackBatch.metrics;
const routeFlowCount = flowDotCount(stress.vehicle_count || 0);
const divertFlowCount = decision?.activate ? Math.max(8, Math.round(routeFlowCount * 0.34)) : 0;
const maxDensity = Math.max(100, ...density.map(Number));
const routeSegments = buildRouteSegments(routePoints, junctions, nearestIndexById);
const densitySegments = buildDensitySegments(routeSegments, density, maxDensity);
const routeDots = buildFlowDots("route-flow-path", routeFlowCount, "route", stress.vehicle_count || 0);
const divertDots = linkD && decision?.activate ? buildFlowDots("divert-flow-path", divertFlowCount, "divert", stress.vehicle_count || 0) : "";
const panelLines = flowPanelLines(stress, decision, routeGeometry);
const routeKm = routeGeometry?.distance_m ? `${number(routeGeometry.distance_m / 1000)} km` : "junction fallback";
const nodes = points.map(p => {
const cls = ["map-node"];
if (p.order < activeOrder) cls.push("passed");
if (p.id === latest.observation?.junction_id) cls.push("active");
if (p.id === bestId) cls.push("target");
const pulse = p.id === latest.observation?.junction_id ? `<circle class="node-pulse" r="18"></circle>` : "";
const halo = p.id === bestId ? `<circle class="target-halo" r="23"></circle>` : "";
return `
<g class="${cls.join(" ")}" transform="translate(${p.x.toFixed(1)} ${p.y.toFixed(1)})" data-node="${escapeHtml(p.id)}">
${pulse}${halo}
<circle class="node-ring" r="15"></circle>
<text class="abbr" y="4" text-anchor="middle">${escapeHtml(abbr(p.name))}</text>
<text x="0" y="34" text-anchor="middle">${escapeHtml(shortLabel(p.name))}</text>
</g>
`;
}).join("");
svg.innerHTML = `
<rect x="0" y="0" width="${width}" height="${height}" fill="#ffffff" opacity="0.03"></rect>
${densitySegments}
<path id="route-flow-path" class="map-flow-path-hidden" d="${routeD}"></path>
<path class="map-route-base real-route" d="${routeD}" data-route-points="${routePointCount}" data-map-zoom="${mapState.zoom}"></path>
<path class="map-flow-stroke" d="${routeD}"></path>
${activeD ? `<path class="map-route-active" d="${activeD}"></path>` : ""}
${linkD ? `<path id="divert-flow-path" class="map-flow-path-hidden" d="${linkD}"></path>` : ""}
${linkD ? `<path class="map-link ${decision?.activate ? "active" : ""}" d="${linkD}"></path>` : ""}
${linkD && decision?.activate ? `<path class="map-flow-stroke divert" d="${linkD}"></path>` : ""}
${routeDots}
${divertDots}
${nodes}
<g class="map-flow-panel" transform="translate(18 38)">
<rect width="326" height="72"></rect>
<text x="12" y="20">${escapeHtml(panelLines[0])}</text>
<text class="muted" x="12" y="40">${escapeHtml(panelLines[1])}</text>
<text class="muted" x="12" y="58">${escapeHtml(`${integer(routePointCount)} routed points / zoom ${mapState.zoom} / ${routeKm}`)}</text>
</g>
<text class="map-label" x="18" y="26">Built-in OpenStreetMap tile viewport / OSRM route geometry</text>
<text class="map-label" x="18" y="${height - 20}">tiles, route, markers and flow share one Web Mercator transform</text>
`;
const action = decision?.activate ? "capacity-safe activation" : "standby";
renderRouteCheckpoints(junctions, latest, bestId, decision, routeGeometry, activeOrder);
setText("route-proof", routeGeometry?.coordinate_count ? `${integer(routeGeometry.coordinate_count)} pts / ${routeKm}` : "junction fallback");
setText("map-mode", maplibreReady ? "MapLibre route showcase" : (routeGeometry?.coordinate_count ? `${integer(routeGeometry.coordinate_count)}-point fallback map` : "route fallback"));
setText("map-status", `${label(latest.observation?.junction_id || "checkpoint")} checkpoint -> ${label(bestId)} ${percent(latest.best_confidence || 0)} -> ${action}. ${maplibreReady ? "MapLibre/CARTO basemap with OSRM route overlay" : "Fallback map with OSRM route overlay"}; verified replay, not live field traffic.`);
setText("flow-vehicles", stress.vehicle_count ? `${integer(stress.vehicle_count)} veh` : "scenario replay");
setText("flow-observations", stress.observation_count ? `${integer(stress.observation_count)} obs` : `${integer((report.cycles || []).length)} cycles`);
setText("flow-safety", `${integer(stress.capacity_violation_count || 0)} violations`);
}
function renderMapLibreShowcase({ routeCoords, junctions, latest, bestId, decision, routeGeometry, stress, bounds }) {
 const container = document.getElementById("maplibre-map");
 const stack = document.getElementById("map-stack");
 if (!container || !window.maplibregl || !routeCoords.length) {
 stack?.classList.remove("maplibre-ready");
 return false;
 }
const routeKey = `${routeCoords.length}:${bounds.minLat.toFixed(5)}:${bounds.maxLat.toFixed(5)}:${bounds.minLon.toFixed(5)}:${bounds.maxLon.toFixed(5)}`;
 const routeGeoJson = {
 type: "FeatureCollection",
 features: [{ type: "Feature", properties: {}, geometry: { type: "LineString", coordinates: routeCoords } }]
 };
 const activeId = latest.observation?.junction_id;
 const pointFeatures = junctions.map(junction => ({
 type: "Feature",
 properties: {
 id: junction.id,
 name: junction.name,
 abbr: abbr(junction.name),
 state: junction.id === bestId ? "target" : (junction.id === activeId ? "checkpoint" : "route")
 },
 geometry: { type: "Point", coordinates: [Number(junction.lon), Number(junction.lat)] }
 }));
 const pointsGeoJson = { type: "FeatureCollection", features: pointFeatures };
if (!mapState.maplibre) {
 mapState.maplibre = new maplibregl.Map({
 container,
 style: "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json",
 center: [(bounds.minLon + bounds.maxLon) / 2, (bounds.minLat + bounds.maxLat) / 2],
 zoom: 11,
 pitch: 38,
 bearing: -18,
 attributionControl: true
 });
 mapState.maplibre.dragRotate.disable();
 mapState.maplibre.touchZoomRotate.disableRotation();
 mapState.maplibre.on("load", () => updateMapLibreLayers(routeGeoJson, pointsGeoJson, bounds));
 } else if (mapState.maplibre.loaded()) {
 updateMapLibreLayers(routeGeoJson, pointsGeoJson, bounds);
 }
if (mapState.maplibre.loaded() && mapState.maplibreRouteKey !== routeKey) {
 fitMapLibreBounds(bounds, false);
 mapState.maplibreRouteKey = routeKey;
 }
stack?.classList.add("maplibre-ready");
 renderMapLibreOverlay(stress, decision, routeGeometry);
 return true;
}
function updateMapLibreLayers(routeGeoJson, pointsGeoJson, bounds) {
 const map = mapState.maplibre;
 if (!map) return;
 if (!map.getSource("ptis-route")) {
 map.addSource("ptis-route", { type: "geojson", data: routeGeoJson });
 map.addLayer({
 id: "ptis-route-shadow",
 type: "line",
 source: "ptis-route",
 paint: { "line-color": "#0f172a", "line-width": 11, "line-opacity": 0.18, "line-blur": 1.2 }
 });
 map.addLayer({
 id: "ptis-route-line",
 type: "line",
 source: "ptis-route",
 paint: { "line-color": "#087f68", "line-width": 5.5, "line-opacity": 0.96 }
 });
 } else {
 map.getSource("ptis-route").setData(routeGeoJson);
 }
if (!map.getSource("ptis-points")) {
 map.addSource("ptis-points", { type: "geojson", data: pointsGeoJson });
 map.addLayer({
 id: "ptis-point-halo",
 type: "circle",
 source: "ptis-points",
 paint: {
 "circle-radius": ["match", ["get", "state"], "target", 18, "checkpoint", 16, 11],
 "circle-color": "#ffffff",
 "circle-opacity": 0.92,
 "circle-stroke-color": "#d8e1dc",
 "circle-stroke-width": 1
 }
 });
 map.addLayer({
 id: "ptis-point-dot",
 type: "circle",
 source: "ptis-points",
 paint: {
 "circle-radius": ["match", ["get", "state"], "target", 10, "checkpoint", 9, 6],
 "circle-color": ["match", ["get", "state"], "target", "#087f68", "checkpoint", "#255fbd", "#334155"],
 "circle-stroke-color": "#ffffff",
 "circle-stroke-width": 2
 }
 });
 map.addLayer({
 id: "ptis-point-label",
 type: "symbol",
 source: "ptis-points",
 layout: {
 "text-field": ["get", "abbr"],
 "text-size": 11,
 "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
 "text-offset": [0, 1.85],
 "text-anchor": "top",
 "text-allow-overlap": false
 },
 paint: { "text-color": "#0f172a", "text-halo-color": "#ffffff", "text-halo-width": 1.5 }
 });
 } else {
 map.getSource("ptis-points").setData(pointsGeoJson);
 }
 fitMapLibreBounds(bounds, true);
}
function fitMapLibreBounds(bounds, initialOnly) {
 const map = mapState.maplibre;
 if (!map) return;
 if (initialOnly && mapState.maplibreReady) return;
 map.fitBounds([[bounds.minLon, bounds.minLat], [bounds.maxLon, bounds.maxLat]], {
 padding: { top: 74, right: 56, bottom: 56, left: 56 },
 pitch: 38,
 bearing: -18,
 duration: initialOnly ? 0 : 700
 });
 mapState.maplibreReady = true;
}
function renderMapLibreOverlay(stress, decision, routeGeometry) {
 const container = document.getElementById("maplibre-map");
 if (!container) return;
 const overlay = container.querySelector(".mapcn-overlay") || document.createElement("div");
 overlay.className = "mapcn-overlay";
 overlay.innerHTML = `
 <div><span>Stress replay</span><strong>${integer(stress.vehicle_count || 0)} vehicles</strong></div>
 <div><span>Observations</span><strong>${integer(stress.observation_count || 0)}</strong></div>
 <div><span>Safety</span><strong>${integer(stress.capacity_violation_count || 0)} violations</strong></div>
 <div><span>Route</span><strong>${integer(routeGeometry?.coordinate_count || 0)} pts</strong></div>
 <p>${escapeHtml(decision?.activate ? "Capacity-safe simulated activation" : "Gate remains on standby")}</p>
 `;
 if (!overlay.parentElement) container.appendChild(overlay);
}
function fitMapView(minLat, maxLat, minLon, maxLon, width, height) {
const pad = 48;
const nw = lonLatToWorld(minLon, maxLat);
const se = lonLatToWorld(maxLon, minLat);
const dx = Math.max(0.000001, Math.abs(se.x - nw.x));
const dy = Math.max(0.000001, Math.abs(se.y - nw.y));
const usableWidth = Math.max(180, width - pad * 2);
const usableHeight = Math.max(160, height - pad * 2);
const zoomX = Math.log2(usableWidth / (dx * TILE_SIZE));
const zoomY = Math.log2(usableHeight / (dy * TILE_SIZE));
const zoom = clamp(Math.floor(Math.min(zoomX, zoomY)), MAP_MIN_ZOOM, MAP_MAX_ZOOM);
const centerWorld = { x: (nw.x + se.x) / 2, y: (nw.y + se.y) / 2 };
return { center: worldToLonLat(centerWorld.x, centerWorld.y), zoom };
}
function renderTileLayer(width, height) {
const tileMap = document.getElementById("tile-map");
if (!tileMap || !mapState.center || mapState.zoom == null) return;
const z = clamp(Math.round(mapState.zoom), MAP_MIN_ZOOM, MAP_MAX_ZOOM);
const center = lonLatToPixel(mapState.center.lon, mapState.center.lat, z);
const leftWorld = center.x - width / 2;
const topWorld = center.y - height / 2;
const startX = Math.floor(leftWorld / TILE_SIZE) - 1;
const endX = Math.floor((leftWorld + width) / TILE_SIZE) + 1;
const startY = Math.floor(topWorld / TILE_SIZE) - 1;
const endY = Math.floor((topWorld + height) / TILE_SIZE) + 1;
const tileCount = 2 ** z;
const tiles = [`<div class="tile-fallback-grid"></div>`];
for (let x = startX; x <= endX; x += 1) {
for (let y = startY; y <= endY; y += 1) {
if (y < 0 || y >= tileCount) continue;
const wrappedX = ((x % tileCount) + tileCount) % tileCount;
const left = Math.round(x * TILE_SIZE - leftWorld);
const top = Math.round(y * TILE_SIZE - topWorld);
tiles.push(`<img class="map-tile" src="https://tile.openstreetmap.org/${z}/${wrappedX}/${y}.png" alt="" loading="lazy" draggable="false" style="left:${left}px;top:${top}px" data-tile="${z}/${wrappedX}/${y}" />`);
}
}
tileMap.innerHTML = tiles.join("");
}
function projectMapPoint(lon, lat, width, height) {
const z = clamp(Math.round(mapState.zoom ?? MAP_MIN_ZOOM), MAP_MIN_ZOOM, MAP_MAX_ZOOM);
const center = lonLatToPixel(mapState.center.lon, mapState.center.lat, z);
const point = lonLatToPixel(lon, lat, z);
return { x: width / 2 + (point.x - center.x), y: height / 2 + (point.y - center.y) };
}
function lonLatToPixel(lon, lat, zoom) {
const world = lonLatToWorld(lon, lat);
const scale = TILE_SIZE * (2 ** zoom);
return { x: world.x * scale, y: world.y * scale };
}
function pixelToLonLat(x, y, zoom) {
const scale = TILE_SIZE * (2 ** zoom);
return worldToLonLat(x / scale, y / scale);
}
function lonLatToWorld(lon, lat) {
const safeLat = clamp(Number(lat), -85.05112878, 85.05112878);
const sin = Math.sin((safeLat * Math.PI) / 180);
return {
x: (Number(lon) + 180) / 360,
y: 0.5 - Math.log((1 + sin) / (1 - sin)) / (4 * Math.PI)
};
}
function worldToLonLat(x, y) {
const lon = x * 360 - 180;
const n = Math.PI - 2 * Math.PI * y;
const lat = (180 / Math.PI) * Math.atan(Math.sinh(n));
return { lon, lat };
}
function renderPosterior(posterior, bestId, latest, decision) {
const entries = Object.entries(posterior).sort((a, b) => b[1] - a[1]);
setText("posterior-title", `${label(bestId)} ${percent(latest.best_confidence || posterior[bestId] || 0)}`);
setText("posterior-cycle", `cycle ${latest.cycle ?? "--"}`);
document.getElementById("dest-bars").innerHTML = entries.map(([id, value]) => `
<div class="bar-row">
<div class="bar-name">${escapeHtml(shortLabel(label(id)))}</div>
<div class="track"><div class="fill ${id === bestId ? "best" : ""}" style="width:${Math.round(Number(value) * 100)}%"></div></div>
<div class="bar-value">${percent(value)}</div>
</div>
`).join("");
const alert = document.getElementById("activation-alert");
alert.textContent = decision?.activate ? `Gate open at ${percent(decision.confidence)}. Command is capped by receiving capacity.` : "Gate closed. Confidence or capacity threshold not met.";
alert.className = `alert-line ${decision?.activate ? "active" : ""}`;
}
function renderDecision(decision, confidence) {
const card = document.getElementById("decision-card");
const active = Boolean(decision?.activate);
card.className = `panel decision-card ${active ? "active" : ""}`;
setText("decision-state", active ? "ACTIVE" : "STANDBY");
setText("decision-detail", active ? `P=${percent(confidence)} / ${number(decision.q_expected_vpm)} vpm expected / ${number(decision.available_capacity_vpm)} vpm available` : `P=${percent(confidence)} / waiting for safe gate`);
}
function renderCapacity(decision) {
document.getElementById("capacity-ledger").innerHTML = decision ? [
ledgerCell("Confidence", percent(decision.confidence), "gate input"),
ledgerCell("Expected", `${number(decision.q_expected_vpm)} vpm`, "capped demand"),
ledgerCell("Available", `${number(decision.available_capacity_vpm)} vpm`, "receiving route"),
ledgerCell("Commanded", `${number(decision.q_commanded_vpm)} vpm`, "after compliance")
].join("") : [
ledgerCell("Confidence", "below gate", "standby"),
ledgerCell("Expected", "0.00 vpm", "no command"),
ledgerCell("Available", "--", "not used"),
ledgerCell("Commanded", "0.00 vpm", "standby")
].join("");
}
function renderCctv(cctv) {
const metrics = cctv.metrics || fallbackCctv.metrics;
setText("cctv-state", cctv.passed ? "audited" : "waiting");
setText("cctv-count", cctv.passed ? `${integer(metrics.coco_annotation_count)} boxes` : "--");
const canShowLocalFrames = location.pathname.includes("/frontend/");
 document.getElementById("cctv-strip").innerHTML = (cctv.sample_images || []).slice(0, 3).map(item => {
 const src = encodeURI(staticAsset(`Real data/BMD-45-Val/${item.file_name}`));
 const frame = canShowLocalFrames
 ? `<img src="${escapeHtml(src)}" alt="BMD-45 validation frame ${escapeHtml(item.file_name)}" />`
 : `<div class="cctv-frame-placeholder"><span>BMD-45</span><strong>${integer(item.coco_annotation_count)}</strong></div>`;
 return `
 <figure class="cctv-frame">
 ${frame}
 <figcaption><span>${escapeHtml(item.file_name.replace("images_000/", ""))}</span><strong>${integer(item.coco_annotation_count)}</strong></figcaption>
 </figure>
 `;
 }).join("") || `<figure class="cctv-frame"><div class="cctv-frame-placeholder"><span>BMD-45</span><strong>--</strong></div><figcaption><span>waiting</span><strong>--</strong></figcaption></figure>`;
}
function renderDensity(report, latest) {
const density = latest.density_tw_per_km || [];
const junctions = [...(report.corridor?.junctions || [])].sort((a, b) => a.order - b.order);
const max = Math.max(100, ...density);
document.getElementById("density-bars").innerHTML = density.map((value, index) => {
const from = junctions[index]?.name || `S${index + 1}`;
const to = junctions[index + 1]?.name || `S${index + 2}`;
const color = value > 95 ? "var(--amber)" : value > 78 ? "var(--blue)" : "var(--green)";
const height = Math.max(14, (Number(value) / max) * 82);
return `
<div class="density-seg">
<div class="density-bar" style="height:${height.toFixed(1)}px;background:${color}"></div>
<div class="density-label">${escapeHtml(abbr(from))}-${escapeHtml(abbr(to))}</div>
</div>
`;
}).join("");
}
function renderRouteCheckpoints(junctions, latest, bestId, decision, routeGeometry, activeOrder) {
const element = document.getElementById("route-checkpoints");
if (!element) return;
const activeId = latest.observation?.junction_id;
element.innerHTML = junctions.map(junction => {
const classes = ["checkpoint-item"];
let state = "queued";
if (junction.order < activeOrder) {
classes.push("passed");
state = "seen";
}
if (junction.id === activeId) {
classes.push("active");
state = "checkpoint";
}
if (junction.id === bestId) {
classes.push("target");
state = decision?.activate ? "target" : "likely";
}
const meta = `${Number(junction.lat).toFixed(4)}, ${Number(junction.lon).toFixed(4)}`;
return `
<article class="${classes.join(" ")}">
<span class="checkpoint-dot" aria-hidden="true"></span>
<div>
<div class="checkpoint-name">${escapeHtml(junction.name)}</div>
<div class="checkpoint-meta">${escapeHtml(meta)}</div>
</div>
<span class="checkpoint-state">${escapeHtml(state)}</span>
</article>
`;
}).join("");
if (!routeGeometry?.coordinate_count) setText("route-proof", "junction fallback");
}
function renderTraceStrip(extremeBatch) {
const element = document.getElementById("trace-strip");
if (!element) return;
const traces = (extremeBatch?.sample_vehicle_traces || []).slice(0, 4);
if (!traces.length) {
element.innerHTML = `<article class="trace-card"><div class="trace-top"><strong>waiting</strong><span>--</span></div><p class="trace-foot">Run the stress replay to populate sample traces.</p></article>`;
return;
}
element.innerHTML = traces.map(trace => {
const stops = (trace.observations || []).map(item => item.junction_id).filter(Boolean);
const route = stops.map((stop, index) => {
const hop = `<span class="trace-hop">${escapeHtml(shortLabel(label(stop)))}</span>`;
return index < stops.length - 1 ? `${hop}<span class="trace-arrow">&gt;</span>` : hop;
}).join("");
const destination = shortLabel(label(trace.actual_destination_id || trace.best_destination_id || "--"));
const traceId = trace.vehicle_id_hash || trace.vehicle_id || "sample";
return `
<article class="trace-card">
<div class="trace-top"><strong>${escapeHtml(traceId)}</strong><span>${escapeHtml(destination)}</span></div>
<div class="trace-route">${route}</div>
<p class="trace-foot">${integer(stops.length)} checkpoints replayed; posterior best ${percent(trace.best_confidence || 0)}</p>
</article>
`;
}).join("");
}
function renderAudienceViews(context) {
audienceState.evidence = context;
const content = document.getElementById("audience-content");
if (!content) return;
document.querySelectorAll("[data-audience-tab]").forEach(button => {
button.classList.toggle("active", button.dataset.audienceTab === audienceState.active);
});
const views = {
control: renderControlRoomView,
citizen: renderCitizenView,
officer: renderOfficerView,
engineer: renderEngineerView,
press: renderPressView
};
content.innerHTML = (views[audienceState.active] || renderControlRoomView)(context);
}
function renderControlRoomView(context) {
const proof = proofMetrics(context);
return `
<div class="audience-grid">
<article class="story-card primary">
<span class="story-eyebrow">Operational story</span>
<h2>${escapeHtml(proof.actionTitle)}</h2>
<p>${escapeHtml(`At ${proof.checkpoint}, the replay posterior for ${proof.bestDestination} is ${proof.confidence}. The smart-link gate is ${proof.decisionState.toLowerCase()} and the command is bounded by available receiving capacity.`)}</p>
${renderNarrativeCard(context)}
</article>
<div class="proof-grid">
${proofCard("Route", proof.routePoints, `${proof.routeDistance} OSRM/OpenStreetMap reference`)}
${proofCard("Stress", proof.vehicleCount, `${proof.observationCount} replay observations`)}
${proofCard("Safety", proof.capacityViolations, "capacity violations")}
${proofCard("Overcommands", proof.overcommands, "stress replay audit")}
${proofCard("CCTV", proof.cctvBoxes, `${proof.cctvFrames} local frames audited`)}
${proofCard("Remote", proof.remoteGate, proof.remoteDetail)}
${proofCard("Field Gate", proof.fieldGate, "observed CSV still required")}
</div>
</div>
`;
}
function renderCitizenView(context) {
const proof = proofMetrics(context);
return `
<div class="audience-grid">
<article class="story-card primary">
<span class="story-eyebrow">Citizen-safe explanation</span>
<h2>What this screen can honestly show today</h2>
<p>${escapeHtml(`This is a verified software replay for the ${proof.corridorName} corridor. It shows how the system estimates where flow is likely going and opens a managed connector only when confidence and receiving capacity pass the gate.`)}</p>
<div class="safe-copy">${escapeHtml("Safe public wording: PTIS has passed reproducible software tests on a Bengaluru ORR scenario, uses real OSRM/OpenStreetMap route geometry for visualization, and includes a real BMD-45 CCTV detection audit. Field impact is not claimed until observed replay data or a pilot is completed.")}</div>
</article>
<article class="boundary-card">
<span>Boundary</span>
<h2>No field-impact claim yet</h2>
<p>${escapeHtml("Do not say travel time was reduced, congestion was reduced, or public roads were controlled. The current proof is software replay plus data provenance, not a live deployment.")}</p>
</article>
</div>
`;
}
function renderOfficerView(context) {
const proof = proofMetrics(context);
return `
<div class="audience-grid">
<article class="story-card primary">
<span class="story-eyebrow">Officer / operations view</span>
<h2>${escapeHtml(proof.decisionState === "ACTIVE" ? "Advisory activation is capacity-safe in replay" : "Replay gate remains on standby")}</h2>
<p>${escapeHtml(`The replay recommendation is ${proof.decisionState}. If used in a pilot, this should stay advisory: officers approve, reject, or override every connector action. The system has ${proof.capacityViolations} capacity violations and ${proof.overcommands} overcommands in the stress audit.`)}</p>
<div class="audit-list">
${auditRow("Current checkpoint", proof.checkpoint)}
${auditRow("Best destination", `${proof.bestDestination} at ${proof.confidence}`)}
${auditRow("Expected flow", proof.expectedFlow)}
${auditRow("Commanded flow", proof.commandedFlow)}
</div>
</article>
${renderNarrativeCard(context)}
</div>
`;
}
function renderEngineerView(context) {
const proof = proofMetrics(context);
return `
<div class="audience-grid">
<article class="story-card primary">
<span class="story-eyebrow">Engineer proof</span>
<h2>Evidence chain and failure boundary</h2>
<p>${escapeHtml("The frontend is reading saved evidence/API outputs, not random UI state. The route uses an in-app Web Mercator tile viewport, so tiles, markers, density bands, and animated route flow share one transform during zoom and pan.")}</p>
<div class="audit-list">
${auditRow("Scenario suite", proof.suiteScore)}
${auditRow("Extreme replay", `${proof.vehicleCount} / ${proof.observationCount}`)}
${auditRow("Route geometry", `${proof.routePoints} / ${proof.routeDistance}`)}
${auditRow("CCTV detection audit", `${proof.cctvBoxes} boxes`)}
${auditRow("Remote aggregate", proof.remoteGate)}
${auditRow("Field replay", proof.fieldGate)}
</div>
</article>
<div class="proof-grid">
${proofCard("Tests", proof.suiteScore, "published scenarios")}
${proofCard("Vehicles", proof.vehicleCount, "extreme stress replay")}
${proofCard("Observations", proof.observationCount, "checkpoint events")}
${proofCard("False Positives", proof.falsePositives, "activation audit")}
${proofCard("Capacity", proof.capacityViolations, "violations")}
${proofCard("Route Pts", proof.routePoints, "rendered geometry")}
</div>
</div>
`;
}
function renderPressView(context) {
const proof = proofMetrics(context);
return `
<div class="audience-grid">
<article class="story-card primary">
<span class="story-eyebrow">Press-safe summary</span>
<h2>One paragraph you can post without overclaiming</h2>
<div class="safe-copy">${escapeHtml(`PTIS v2.0 is a reproducible traffic-intelligence software prototype for Bengaluru ORR. In the current evidence bundle it passes ${proof.suiteScore} scenarios, stress-replays ${proof.vehicleCount} vehicles with ${proof.capacityViolations} capacity violations, renders a ${proof.routePoints}-point OSRM/OpenStreetMap route, and audits BMD-45 CCTV detection data. It is not yet field-proven; observed field replay data is the next milestone.`)}</div>
</article>
<article class="boundary-card">
<span>Do not claim yet</span>
<h2>No live deployment language</h2>
<p>${escapeHtml("Avoid percent congestion-reduction claims, rupee benefit claims, live BTP/FASTag/Google/Waze integration, and field-proven performance until actual observed field replay or a pilot validates them.")}</p>
</article>
</div>
`;
}
function renderNarrativeCard(context) {
const cycles = context.scenario.cycles || [];
const rows = cycles.map(cycle => {
const active = (cycle.decisions || []).some(item => item.activate);
const checkpoint = label(cycle.observation?.junction_id || "checkpoint");
const best = label(cycle.best_destination_id || "unknown");
const confidence = percent(cycle.best_confidence || 0);
const detail = `Best destination ${best}; confidence ${confidence}`;
return `
<article class="narrative-step">
<span class="cycle">${escapeHtml(cycle.cycle ?? "-")}</span>
<div><strong>${escapeHtml(checkpoint)}</strong><p>${escapeHtml(detail)}</p></div>
<span class="decision-pill ${active ? "active" : ""}">${active ? "activate" : "standby"}</span>
</article>
`;
}).join("");
return `
<article class="narrative-card">
<span>Replay narrative</span>
<h2>How the decision forms</h2>
<div class="narrative-list">${rows || `<article class="narrative-step"><span class="cycle">-</span><div><strong>Waiting</strong><p>No cycles loaded.</p></div><span class="decision-pill">pending</span></article>`}</div>
</article>
`;
}
function proofMetrics(context) {
const m = context.extremeBatch?.metrics || context.batch?.metrics || fallbackBatch.metrics;
const cm = context.cctv?.metrics || fallbackCctv.metrics;
const decision = context.decision;
const checkpoint = label(context.latest?.observation?.junction_id || "checkpoint");
const bestDestination = label(context.bestId || "unknown");
const routePoints = integer(context.routeGeometry?.coordinate_count || 0);
const routeDistance = context.routeGeometry?.distance_m ? `${number(context.routeGeometry.distance_m / 1000)} km` : "route fallback";
const suiteScore = context.suite?.scenario_count ? `${integer(context.suite.passed_count)}/${integer(context.suite.scenario_count)}` : "--";
const fieldGate = context.field?.field_proven ? "passed" : "pending";
const remoteMetrics = context.remoteAggregate?.metrics || fallbackRemoteAggregate.metrics;
const remoteGate = context.remoteAggregate?.passed ? "passed" : "pending";
const remoteDetail = context.remoteAggregate?.passed ? `${integer(remoteMetrics.row_count || 0)} rows / ${number(remoteMetrics.peak_total_vpm || 0)} vpm peak` : "aggregate counts not loaded";
const decisionState = decision?.activate ? "ACTIVE" : "STANDBY";
return {
actionTitle: decision?.activate ? "Smart link activates inside the replay gate" : "Smart link stays closed inside the replay gate",
bestDestination,
capacityViolations: integer(m.capacity_violation_count || 0),
cctvBoxes: integer(cm.coco_annotation_count || 0),
cctvFrames: integer(cm.local_image_count || 0),
checkpoint,
commandedFlow: decision ? `${number(decision.q_commanded_vpm)} vpm` : "0.00 vpm",
confidence: percent(context.confidence || 0),
corridorName: context.scenario?.corridor?.name || "Bengaluru ORR",
decisionState,
expectedFlow: decision ? `${number(decision.q_expected_vpm)} vpm` : "0.00 vpm",
falsePositives: integer(m.false_positive_activations || 0),
fieldGate,
remoteDetail,
remoteGate,
observationCount: integer(m.observation_count || 0),
overcommands: integer(m.overcommand_count || 0),
routeDistance,
routePoints,
suiteScore,
vehicleCount: integer(m.vehicle_count || 0)
};
}
function proofCard(labelText, value, detail) {
return `<article class="proof-card"><span>${escapeHtml(labelText)}</span><strong>${escapeHtml(value)}</strong><p>${escapeHtml(detail)}</p></article>`;
}
function auditRow(labelText, value) {
return `<div class="audit-row"><b>${escapeHtml(labelText)}</b><span>${escapeHtml(value)}</span></div>`;
}
function renderScenarioLibrary(suite) {
const element = document.getElementById("scenario-library");
if (!element) return;
const scenarios = suite?.scenarios || [];
setText("scenario-library-state", scenarios.length ? `${integer(scenarios.length)} verified cases` : "suite unavailable");
if (!scenarios.length) {
element.innerHTML = `<article class="scenario-card review"><div class="scenario-top"><div class="scenario-title"><strong>Waiting for suite report</strong><span>Run the verifier or suite replay to populate this section.</span></div><span class="scenario-badge block">pending</span></div></article>`;
return;
}
element.innerHTML = scenarios.map(renderScenarioCard).join("");
}
function renderScenarioCard(item) {
const cycles = item.cycles || [];
const latest = cycles[cycles.length - 1] || {};
const decisions = cycles.flatMap(cycle => cycle.decisions || []);
const activeDecision = decisions.find(decision => decision.activate);
const finalDecision = decisions[decisions.length - 1];
const assertionCount = (item.assertions || []).length;
const passedAssertions = (item.assertions || []).filter(assertion => assertion.passed).length;
const passed = Boolean(item.passed && assertionCount === passedAssertions);
const outcome = activeDecision ? "activate" : "standby";
const reason = activeDecision?.reason || finalDecision?.reason || scenarioReadableReason(item.scenario_id, outcome);
const best = latest.best_destination_id ? label(latest.best_destination_id) : "--";
const confidence = percent(latest.best_confidence || 0);
const cycleCount = integer(cycles.length || 0);
const assertionChips = (item.assertions || []).slice(0, 4).map(assertion => `<span class="${assertion.passed ? "pass" : ""}">${escapeHtml(assertion.name.replaceAll("_", " "))}</span>`).join("");
return `
<article class="scenario-card ${passed ? "pass" : "review"}">
<div class="scenario-top">
<div class="scenario-title">
<strong>${escapeHtml(item.scenario_name || item.scenario_id || "Scenario")}</strong>
<span>${escapeHtml(item.scenario_id || "scenario")}</span>
</div>
<span class="scenario-badge ${activeDecision ? "pass" : "block"}">${escapeHtml(outcome)}</span>
</div>
<div class="scenario-metrics">
${scenarioMetric("Assertions", `${integer(passedAssertions)}/${integer(assertionCount)}`)}
${scenarioMetric("Best", best)}
${scenarioMetric("Confidence", confidence)}
${scenarioMetric("Cycles", cycleCount)}
${scenarioMetric("Safety", passed ? "passed" : "review")}
${scenarioMetric("Decision", outcome)}
</div>
<p class="scenario-reason">${escapeHtml(reason)}</p>
<div class="scenario-assertions">${assertionChips}</div>
</article>
`;
}
function scenarioMetric(labelText, value) {
return `<article><span>${escapeHtml(labelText)}</span><strong>${escapeHtml(value)}</strong></article>`;
}
function scenarioReadableReason(id, outcome) {
const clean = String(id || "scenario").replaceAll("_", " ");
if (outcome === "standby") return `No activation in this case; ${clean}.`;
return `Activation case; ${clean}.`;
}
function renderBottomMetrics({ batch, extremeBatch, cctv, official, field, remoteAggregate, decision }) {
const m = extremeBatch?.metrics || batch.metrics || fallbackBatch.metrics;
const cm = cctv.metrics || fallbackCctv.metrics;
const rm = remoteAggregate?.metrics || fallbackRemoteAggregate.metrics;
document.getElementById("bottom-metrics").innerHTML = [
metricTile("Overcommands", integer(m.overcommand_count || 0), "batch stress"),
metricTile("False Positives", integer(m.false_positive_activations || 0), "activation audit"),
metricTile("Mean Confidence", percent(m.mean_activation_confidence || decision?.confidence || 0), "batch activation"),
metricTile("CCTV Images", integer(cm.coco_image_count || 0), "BMD-45 records"),
metricTile("Remote Replay", remoteAggregate?.passed ? integer(rm.row_count || 0) : "pending", remoteAggregate?.passed ? "aggregate count rows" : "no-travel count gate"),
metricTile("Field Replay", field.field_proven ? "passed" : "pending", "observed CSV gate")
].join("");
}
function renderDetails({ scenario, suite, batch, extremeBatch, official, cctv, field, remoteAggregate, routeGeometry }) {
const m = extremeBatch?.metrics || batch.metrics || fallbackBatch.metrics;
const cm = cctv.metrics || fallbackCctv.metrics;
document.getElementById("detail-grid").innerHTML = [
detailItem("Generated", scenario.generated_at || "--"),
detailItem("Scenario Hash", scenario.scenario_sha256 ? scenario.scenario_sha256.slice(0, 12) : "--"),
detailItem("Official Docs", official.source_documents?.length || 0),
detailItem("Route Points", routeGeometry?.coordinate_count || 0),
detailItem("CCTV Categories", cm.category_count || 0),
detailItem("Observations", m.observation_count || 0),
detailItem("Activations", m.activation_count || 0),
detailItem("Field Status", field.status || "pending"),
detailItem("Remote Aggregate", remoteAggregate?.passed ? "passed" : (remoteAggregate?.status || "pending")),
detailItem("CCTV Audit", cctv.passed ? "passed" : "waiting")
].join("");
document.getElementById("scenario-table").innerHTML = `
<thead><tr><th>Cycle</th><th>Checkpoint</th><th>Best</th><th>Confidence</th><th>Decision</th></tr></thead>
<tbody>${(scenario.cycles || []).map(cycle => {
const active = (cycle.decisions || []).some(d => d.activate);
return `<tr><td>${escapeHtml(cycle.cycle ?? "--")}</td><td>${escapeHtml(label(cycle.observation?.junction_id || "--"))}</td><td>${escapeHtml(label(cycle.best_destination_id || "--"))}</td><td>${percent(cycle.best_confidence || 0)}</td><td>${active ? "ACTIVATE" : "STANDBY"}</td></tr>`;
}).join("")}</tbody>
`;
setText("truth-boundary", "Validated software replay + real BMD-45 CCTV detection audit. Remote aggregate replay is optional no-travel evidence; field impact remains pending observed OD replay data.");
}
function statTile(labelText, value, detail) {
return `<article class="stat"><span>${escapeHtml(labelText)}</span><strong>${escapeHtml(value)}</strong><p>${escapeHtml(detail)}</p></article>`;
}
function metricTile(labelText, value, detail) {
return `<article class="metric"><span>${escapeHtml(labelText)}</span><strong>${escapeHtml(value)}</strong><p>${escapeHtml(detail)}</p></article>`;
}
function ledgerCell(labelText, value, detail) {
return `<article><span>${escapeHtml(labelText)}</span><strong>${escapeHtml(value)}</strong><p>${escapeHtml(detail)}</p></article>`;
}
function detailItem(labelText, value) {
return `<article class="detail-item"><span>${escapeHtml(labelText)}</span><strong>${escapeHtml(value)}</strong></article>`;
}
function extractRouteCoordinates(routeGeometry) {
const coords = routeGeometry?.features?.[0]?.geometry?.coordinates || routeGeometry?.geometry?.coordinates || [];
return coords
.filter(coord => Array.isArray(coord) && coord.length >= 2)
.map(coord => [Number(coord[0]), Number(coord[1])])
.filter(coord => Number.isFinite(coord[0]) && Number.isFinite(coord[1]));
}
function nearestRouteIndex(routeCoords, junction) {
let bestIndex = 0;
let bestDistance = Number.POSITIVE_INFINITY;
routeCoords.forEach((coord, index) => {
const dx = Number(coord[0]) - Number(junction.lon);
const dy = Number(coord[1]) - Number(junction.lat);
const distance = dx * dx + dy * dy;
if (distance < bestDistance) {
bestDistance = distance;
bestIndex = index;
}
});
return bestIndex;
}
function routeSlice(routePoints, fromIndex, toIndex) {
const start = Math.max(0, Math.min(fromIndex, toIndex));
const end = Math.min(routePoints.length - 1, Math.max(fromIndex, toIndex));
const slice = routePoints.slice(start, end + 1);
return fromIndex <= toIndex ? slice : slice.reverse();
}
function pathFromPoints(points) {
return points.map((p, index) => `${index ? "L" : "M"} ${p.x.toFixed(1)} ${p.y.toFixed(1)}`).join(" ");
}
function buildRouteSegments(routePoints, junctions, nearestIndexById) {
return junctions.slice(0, -1).map((junction, index) => {
const next = junctions[index + 1];
const start = nearestIndexById[junction.id] ?? 0;
const end = nearestIndexById[next.id] ?? start;
const segment = routeSlice(routePoints, start, end);
return segment.length >= 2 ? segment : [routePoints[start], routePoints[end]].filter(Boolean);
});
}
function buildDensitySegments(segments, density, maxDensity) {
return segments.map((segment, index) => {
const value = Number(density[index] || 0);
const ratio = Math.max(0.18, Math.min(1, value / maxDensity));
const width = 7 + ratio * 12;
const opacity = 0.18 + ratio * 0.40;
const color = densityColor(value);
return `<path class="map-density-seg" d="${pathFromPoints(segment)}" style="stroke:${color};stroke-width:${width.toFixed(1)};opacity:${opacity.toFixed(2)}" data-density="${number(value)}"></path>`;
}).join("");
}
function buildFlowDots(pathId, count, kind, vehicleCount) {
const safeCount = Math.max(0, Math.min(64, count));
const baseDuration = kind === "divert" ? 9.2 : 13.6;
const loadFactor = vehicleCount ? Math.max(0, Math.min(2.4, Math.log10(vehicleCount) - 2.2)) : 0;
const duration = Math.max(6.6, baseDuration - loadFactor);
return Array.from({ length: safeCount }, (_, index) => {
const lane = index % 3;
const radius = kind === "divert" ? (lane === 0 ? 3.3 : 2.4) : (lane === 0 ? 2.8 : 2.1);
const begin = -1 * ((duration / safeCount) * index + lane * 0.23);
return `<circle class="map-vehicle ${kind} lane-${lane}" r="${radius.toFixed(1)}" data-flow-dot="${kind}-${index}">
<animateMotion dur="${duration.toFixed(2)}s" begin="${begin.toFixed(2)}s" repeatCount="indefinite" rotate="auto">
<mpath href="#${pathId}"></mpath>
</animateMotion>
</circle>`;
}).join("");
}
function flowDotCount(vehicleCount) {
if (!vehicleCount) return 22;
return Math.round(Math.max(22, Math.min(58, Math.sqrt(Number(vehicleCount)) * 0.62)));
}
function densityColor(value) {
if (value >= 90) return "#ffb347";
if (value >= 78) return "#4a9eff";
return "#00d4aa";
}
function flowPanelLines(metrics, decision, routeGeometry) {
const vehicles = metrics.vehicle_count ? `${integer(metrics.vehicle_count)} vehicles` : "scenario vehicles";
const observations = metrics.observation_count ? `${integer(metrics.observation_count)} observations` : "checkpoint observations";
const safety = `${integer(metrics.capacity_violation_count || 0)} capacity violations`;
const commanded = decision?.q_commanded_vpm ? `${number(decision.q_commanded_vpm)} vpm command` : "standby command";
const source = routeGeometry?.source ? "OSRM/OpenStreetMap route" : "junction fallback route";
return [`${vehicles} / ${observations}`, `${safety} / ${commanded} / ${source}`];
}
function curvePath(a, b) {
const mx = (a.x + b.x) / 2;
const my = (a.y + b.y) / 2;
const lift = Math.max(32, Math.abs(a.x - b.x) * 0.22);
return `M ${a.x.toFixed(1)} ${a.y.toFixed(1)} Q ${mx.toFixed(1)} ${(my + lift).toFixed(1)} ${b.x.toFixed(1)} ${b.y.toFixed(1)}`;
}
function abbr(name) {
const clean = String(name).replace("Layout", "").replace("World", "").trim();
return clean.split(/\s+/).map(part => part[0]).join("").slice(0, 3).toUpperCase();
}
function label(id) { return String(id || "--").replaceAll("_", " ").replace(/\b\w/g, c => c.toUpperCase()); }
function shortLabel(value) {
return String(value)
.replace("Doddanekkundi", "D.Kundi")
.replace("Doddanekundi", "D.Kundi")
.replace("Marathahalli", "Maratha.")
.replace("Sony World", "Sony")
.replace("HSR Layout", "HSR");
}
function percent(value) {
const parsed = Number(value);
return Number.isFinite(parsed) ? `${(parsed * 100).toFixed(1)}%` : "--";
}
function number(value) {
const parsed = Number(value);
return Number.isFinite(parsed) ? parsed.toFixed(2) : "--";
}
function integer(value) {
const parsed = Number(value);
return Number.isFinite(parsed) ? parsed.toLocaleString("en-IN") : "--";
}
function setText(id, value) {
const element = document.getElementById(id);
if (element) element.textContent = value;
}
function escapeHtml(value) {
return String(value).replace(/[&<>\'"]/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", "'": "&#39;", '"': "&quot;" }[c]));
}
function clamp(value, min, max) {
return Math.min(max, Math.max(min, Number(value)));
}
function rerenderStoredMap() {
if (!mapState.context) return;
renderGeoMap(
mapState.context.report,
mapState.context.latest,
mapState.context.bestId,
mapState.context.decision,
mapState.context.extremeBatch,
mapState.context.routeGeometry
);
}
function zoomBuiltInMap(delta) {
 if (mapState.maplibre && mapState.maplibreReady) {
 const nextZoom = Math.max(9, Math.min(16, mapState.maplibre.getZoom() + delta));
 mapState.maplibre.easeTo({ zoom: nextZoom, duration: 240 });
 return;
 }
 if (mapState.zoom == null) return;
 const nextZoom = clamp(Math.round(mapState.zoom) + delta, MAP_MIN_ZOOM, MAP_MAX_ZOOM);
 if (nextZoom === mapState.zoom) return;
 mapState.zoom = nextZoom;
 mapState.autoFit = false;
 rerenderStoredMap();
}
function resetBuiltInMap() {
 mapState.autoFit = true;
 mapState.maplibreReady = false;
 mapState.maplibreRouteKey = "";
 rerenderStoredMap();
}
function panBuiltInMap(dx, dy) {
 if (mapState.maplibre && mapState.maplibreReady) return;
 if (!mapState.center || mapState.zoom == null) return;
 const z = clamp(Math.round(mapState.zoom), MAP_MIN_ZOOM, MAP_MAX_ZOOM);
 const centerPx = lonLatToPixel(mapState.center.lon, mapState.center.lat, z);
 mapState.center = pixelToLonLat(centerPx.x - dx, centerPx.y - dy, z);
 mapState.autoFit = false;
 rerenderStoredMap();
}
function initMapInteractions() {
const stack = document.getElementById("map-stack");
if (!stack) return;
stack.addEventListener("wheel", event => {
if (stack.classList.contains("maplibre-ready")) return;
event.preventDefault();
zoomBuiltInMap(event.deltaY < 0 ? 1 : -1);
}, { passive: false });
stack.addEventListener("pointerdown", event => {
if (stack.classList.contains("maplibre-ready")) return;
if (event.target.closest(".map-controls")) return;
mapState.dragging = true;
mapState.lastPointer = { x: event.clientX, y: event.clientY };
stack.classList.add("is-dragging");
stack.setPointerCapture?.(event.pointerId);
});
stack.addEventListener("pointermove", event => {
if (stack.classList.contains("maplibre-ready")) return;
if (!mapState.dragging || !mapState.lastPointer) return;
const dx = event.clientX - mapState.lastPointer.x;
const dy = event.clientY - mapState.lastPointer.y;
mapState.lastPointer = { x: event.clientX, y: event.clientY };
panBuiltInMap(dx, dy);
});
const stopDrag = event => {
mapState.dragging = false;
mapState.lastPointer = null;
stack.classList.remove("is-dragging");
if (event?.pointerId != null) stack.releasePointerCapture?.(event.pointerId);
};
stack.addEventListener("pointerup", stopDrag);
stack.addEventListener("pointercancel", stopDrag);
stack.addEventListener("pointerleave", stopDrag);
}
let resizeTimer = null;
function initResponsiveMapRedraw() {
window.addEventListener("resize", () => {
window.clearTimeout(resizeTimer);
resizeTimer = window.setTimeout(() => rerenderStoredMap(), 120);
});
}
function initAudienceTabs() {
document.querySelectorAll("[data-audience-tab]").forEach(button => {
button.addEventListener("click", () => {
audienceState.active = button.dataset.audienceTab || "control";
if (audienceState.evidence) renderAudienceViews(audienceState.evidence);
});
});
}
document.getElementById("load-evidence")?.addEventListener("click", loadAllEvidence);
document.getElementById("run-scenario")?.addEventListener("click", runScenario);
document.getElementById("run-suite")?.addEventListener("click", runSuite);
document.getElementById("run-batch")?.addEventListener("click", runBatch);
document.getElementById("run-extreme")?.addEventListener("click", runExtremeBatch);
document.getElementById("map-zoom-in")?.addEventListener("click", () => zoomBuiltInMap(1));
document.getElementById("map-zoom-out")?.addEventListener("click", () => zoomBuiltInMap(-1));
document.getElementById("map-reset")?.addEventListener("click", resetBuiltInMap);
initMapInteractions();
initResponsiveMapRedraw();
initAudienceTabs();
loadAllEvidence();