{/* Developer notes for this component live in notes/ServePlayground.md. Keep it under about 225k when compiled in MDX development mode: over ReadMe's cap the whole page loses its server-rendered HTML. */} import { useState, useEffect, useRef, useMemo, useCallback } from 'react'; export const BASE = 'https://api.sandbox.serverobotics.com'; export const MAPBOX_TOKEN = ''; export const MAPBOX_STYLE = 'mapbox://styles/mapbox/light-v11'; export const PARTNER = 'Saymo Delivery'; export const DEFAULT_PLACES_LABEL = { pickup: '3201 S Figueroa St, Los Angeles, CA 90007', dropoff: '3375 S Hoover St, Los Angeles, CA 90007' }; export const REJECTIONS = [ { id: 'pickup_untraversable', scope: 'quote', status: 400, cause: 'No robot-traversable path reaches the pickup point.', remedy: 'Move the pickup to a curbside-accessible address.', fix: { field: 'pickup', value: DEFAULT_PLACES_LABEL.pickup } }, { id: 'dropoff_untraversable', scope: 'quote', status: 400, cause: 'No robot-traversable path reaches the dropoff point.', remedy: 'Move the dropoff to a curbside-accessible address.', fix: { field: 'dropoff', value: DEFAULT_PLACES_LABEL.dropoff } }, { id: 'delivery_distance_exceeds_limit', scope: 'quote', status: 400, cause: 'The route is longer than the service zone allows.', remedy: 'Choose a dropoff inside the pickup’s delivery radius.', fix: { field: 'dropoff', value: DEFAULT_PLACES_LABEL.dropoff } }, { id: 'outside_operating_hours', scope: 'quote', status: 400, cause: 'The fleet is not operating at the requested time.', remedy: 'Send pickup_at inside operating hours, or omit it for "now".', fix: { field: 'pickup_at', value: '' } }, { id: 'pickup_deadline_unreachable', scope: 'quote', status: 400, cause: 'No courier can reach the pickup before your deadline.', remedy: 'Push pickup_deadline out, or drop it to let Serve schedule.', fix: { field: 'pickup_deadline', value: '' } }, { id: 'dropoff_deadline_unreachable', scope: 'quote', status: 400, cause: 'The delivery cannot complete before your deadline.', remedy: 'Push dropoff_deadline out by at least the quoted ETA.', fix: { field: 'dropoff_deadline', value: '' } }, { id: 'couriers_busy', scope: 'quote', status: 409, cause: 'Every courier in the zone is already assigned.', remedy: 'Transient. Retry with backoff rather than treating it as fatal.', fix: { field: 'simulate_rejection', value: '' } }, { id: 'internal_error', scope: 'quote', status: 500, cause: 'Serve failed to price the delivery.', remedy: 'Retry once. If it persists, send us the x-request-id.', fix: { field: 'simulate_rejection', value: '' } }, { id: 'mismatched_quote', scope: 'job', status: 400, cause: 'The job body does not match the quote it references.', remedy: 'Post the job with the exact addresses the quote was priced on.', fix: { field: 'simulate_rejection', value: '' } }, { id: 'used_quote', scope: 'job', status: 400, cause: 'That quote was already redeemed. Quotes are single-use and last 5 minutes.', remedy: 'Request a fresh quote, then create the job from it.', fix: { field: 'simulate_rejection', value: '' } }, ]; export const failWhere = id => /^(dropoff|delivery_distance)/.test(id) ? 'customer' : 'merchant'; export const DEFAULT_PLACES = { pickup: { name: 'Corner Coffee', label: DEFAULT_PLACES_LABEL.pickup, address: { street_address_1: '3201 S Figueroa St', city: 'Los Angeles', state: 'CA', zip_code: '90007', country: 'US' }, location: { lat: 34.0227, lng: -118.2798 } }, dropoff: { name: 'Alex', label: DEFAULT_PLACES_LABEL.dropoff, address: { street_address_1: '3375 S Hoover St', city: 'Los Angeles', state: 'CA', zip_code: '90007', country: 'US' }, location: { lat: 34.0226, lng: -118.2835 } }, }; export const lngLat = place => [place.location.lng, place.location.lat]; export const ROBOT_OFFSETS = [ [-0.0021, -0.0006], [-0.0042, 0.0011], [-0.0034, -0.0026], [-0.0062, -0.0009], [-0.0012, 0.0023], [-0.0075, 0.0007], [-0.0053, -0.0035], [-0.0085, -0.0017], [-0.0029, 0.0036], [-0.0093, 0.0020], ]; export const robotSpot = (pickup, i) => { const o = ROBOT_OFFSETS[i % ROBOT_OFFSETS.length]; return [pickup[0] + o[0], pickup[1] + o[1]]; }; export function featureToPlace(f, fallbackName) { const p = (f && f.properties) || {}, c = p.context || {}; const pick = k => (c[k] && (c[k].region_code || c[k].country_code || c[k].name)) || ''; const lng = (p.coordinates && p.coordinates.longitude) || (f.geometry && f.geometry.coordinates[0]); const lat = (p.coordinates && p.coordinates.latitude) || (f.geometry && f.geometry.coordinates[1]); return { name: p.name || fallbackName, label: p.full_address || p.place_formatted || p.name || fallbackName, address: { street_address_1: (c.address && c.address.name) || p.name || '', city: (c.place && c.place.name) || (c.locality && c.locality.name) || '', state: pick('region'), zip_code: (c.postcode && c.postcode.name) || '', country: String(pick('country') || 'US').toUpperCase() }, location: { lat: Number(lat), lng: Number(lng) }, }; } export const placeTitle = (place, which) => which === 'dropoff' && place.name === DEFAULT_PLACES.dropoff.name ? `${place.name} · ${place.address.street_address_1}` : place.name; export const waypoint = (place, forJob) => forJob ? { name: place.name, address: place.address, location: place.location } : { address: place.address, location: place.location }; export const STAGES = [ { id: 'pending_courier_assignment', label: 'Pending courier assignment' }, { id: 'pickup_en_route', label: 'Pickup en route' }, { id: 'pickup_arrived', label: 'Pickup arrived' }, { id: 'dropoff_en_route', label: 'Dropoff en route' }, { id: 'dropoff_arrived', label: 'Dropoff arrived' }, { id: 'dropoff_complete', label: 'Dropoff complete' }, ]; export const STEPS = [ { id: 'fleet', n: 1, title: 'Set up the simulated fleet', verb: 'POST', path: '/simulated_fleet/fleets', op: 'create-sandbox-fleet-no-spawn', schema: 'SimulatedFleetConfig', query: 'create sandbox fleet', ask: 'Spin up a test fleet of 3 robots near Corner Coffee.', blurb: 'Creates a 3-robot fleet at the pickup, powers it up, waits until it is ready, then places each robot on the map. Without a fleet, every quote returns couriers_busy.' }, { id: 'nearby', n: 2, title: 'Robots near me', verb: 'GET', path: '/robots/nearby_count', op: 'count-nearby-robots', schema: 'query lat, lng, radius_m', query: 'count nearby robots', ask: 'How many robots are near Corner Coffee right now?', blurb: 'Counts on-duty robots within a radius. Zero means no coverage, not an error.' }, { id: 'quote', n: 3, title: 'Quote', verb: 'POST', path: '/quotes', op: 'create-quote', schema: 'CreateQuoteRequest', query: 'create delivery quote', ask: 'What would a delivery to Alex at 3375 S Hoover St cost?', blurb: 'Prices the delivery and returns ETAs. Nothing is dispatched and nothing is charged.' }, { id: 'job', n: 4, title: 'Commit to the delivery', verb: 'POST', path: '/jobs', needs: 'quote', op: 'create-job', schema: 'CreateJobRequest', query: 'create job from quote', ask: 'Book it.', blurb: 'Passing the quote_id back dispatches a robot. A quote is single-use and lasts 5 minutes.' }, { id: 'route', n: 5, title: 'Draw the route', verb: 'GET', path: '/jobs/{job_id}/route', needs: 'job', op: 'get-job-route', schema: 'JobRouteResponse', query: 'job route', ask: 'Show me the route the robot will take.', blurb: 'GeoJSON legs with distances in meters, ready to draw on your own map.' }, { id: 'advance', n: 6, title: 'Drive it by hand', verb: 'POST', path: '/simulated_fleet/jobs/{job_id}/advance', needs: 'job', op: 'advance-simulated-job', schema: 'AdvanceJobRequest', query: 'advance simulated job stage', ask: 'Move the test job to its next stage.', blurb: 'One stage per press, so you can test each status handler without waiting for a robot.' }, { id: 'instant', n: 7, title: 'One call instead', alt: 'Alternative · skip hand-driving', verb: 'POST', path: '/jobs/instant', op: 'create-instant-job', schema: 'CreateInstantJobRequest', query: 'create job from new quote', ask: 'Book a robot delivery to Alex at 3375 S Hoover St, whatever the price.', blurb: 'Quotes and creates in one request, then the playground plays the whole delivery for you.' }, { id: 'fail', n: 8, title: 'Failures', alt: 'Branch · rehearse an error', verb: 'POST', path: '/quotes or /jobs', op: 'create-quote', schema: 'simulate_rejection', query: 'simulate rejection', ask: '', blurb: 'Fire any documented rejection, read the error, then retry with the fix applied.' }, { id: 'down', n: 9, title: 'Power down robots', alt: 'Cleanup · end the session', verb: 'POST', path: '/simulated_fleet/fleets/{fleet_id}/power_down', op: 'power-down-single-sandbox-fleet', schema: 'path fleet_id', query: 'power down sandbox fleet', ask: 'I am done testing. Power the robots down.', blurb: 'Powers down only this session’s fleet. Leaving the page does the same automatically.' }, ]; export const STEP = Object.fromEntries(STEPS.map(s => [s.id, s])); export const JOB_READ = { id: 'advance', n: 6, title: 'Drive it by hand', path: '/jobs/{job_id}', op: 'show-job', schema: 'JobResponse', query: 'show job status' }; export function legCoords(g) { if (!g) return []; if (g.type === 'FeatureCollection') return (g.features || []).flatMap(f => legCoords(f)); if (g.type === 'Feature') return legCoords(g.geometry); if (g.type === 'MultiLineString') return (g.coordinates || []).flat(); return Array.isArray(g.coordinates) ? g.coordinates : []; } export function geoDist(a, b) { const R = 6371000, rad = Math.PI / 180; const dLat = (b[1] - a[1]) * rad, dLng = (b[0] - a[0]) * rad; const h = Math.sin(dLat / 2) ** 2 + Math.cos(a[1] * rad) * Math.cos(b[1] * rad) * Math.sin(dLng / 2) ** 2; return 2 * R * Math.asin(Math.sqrt(h)); } export function contractRespond(kind, body, ctx = {}) { const code = body && body.simulate_rejection; if (code) { const r = REJECTIONS.find(x => x.id === code); if (r) return { status: r.status, json: { code: r.id, detail: r.cause } }; } const now = Date.now(); const iso = ms => new Date(now + ms).toISOString().replace(/\.\d{3}Z$/, 'Z'); const pk = ctx.pickup || lngLat(DEFAULT_PLACES.pickup), spot = robotSpot(pk, 0); const fid = 'flt_qoD3iGx_T1OhnnYEL1OtFg', prefix = ctx.prefix || 'cor_pg-demo-'; const cl = ctx.courierAt || spot, robot = ctx.courier || prefix + '1'; const courier = { courier_id: `${ctx.partner || PARTNER}.${robot}`, name: `simulated_robot-${ctx.partner || PARTNER}.${robot}`, location: { lat: cl[1], lng: cl[0] } }; const job = status => ({ delivery_id: 'del_3vDjjkd21b', status, created: iso(0), updated: iso(0), fee: 0, currency: 'USD', quote_id: (body && body.quote_id) || 'dqt_yRNKTdwJRF-jHXzaWKdnFA', external_order_id: 'SP 937-215', eta_source: 'manhattan', pickup_eta: iso(1 * 60000), dropoff_eta: iso(8 * 60000), courier, delivery_items: [{ name: 'Burrito', quantity: 1 }], }); if (kind === 'fleet_down' || kind === 'fleet_down_all') return { status: 200, json: [] }; if (kind === 'fleet_create') { const b = body || {}; return { status: 200, json: { fleet_size: b.fleet_size, id: fid, randomized_starting_offset_meters: b.randomized_starting_offset_meters, rover_config: { auto_job_event_frequency: b.auto_job_event_frequency, auto_simulate_job: b.auto_advance_jobs, compressed_simulation: true, follow_job_directions_route: true, gps_telemetry_frequency: b.gps_telemetry_frequency, job_assignment_poll_frequency: b.job_assignment_poll_frequency, max_rover_speed_mph: b.max_robot_speed_mph, route_position_jitter_meters: 0, route_speed_variation_percent: 0, rover_speed_mph: 1.79, start_gps: b.start_gps }, rover_names: null, rover_naming_prefix: b.robot_naming_prefix } }; } if (kind === 'fleet_up') { return { status: 200, json: { fleet_reservation: [fid], fleet_id: fid, robots: Array.from({ length: ctx.n || 3 }, (_, i) => prefix + (i + 1)), config_fleet_id: fid } }; } if (kind === 'ready') return { status: 200, json: (ctx.poll || 1) > 1 }; if (kind === 'status') return { status: 200, json: Array.from({ length: ctx.n || 3 }, (_, i) => ({ is_ready: true, fleet_reservation: [fid], fleet_id: fid, robot_id: prefix + (i + 1), gps_frequency: 1000 })) }; if (kind === 'target' || kind === 'robot_down') return { status: 200, json: {} }; if (kind === 'location') return { status: 200, json: {} }; if (kind === 'nearby') { return { status: 200, json: { count: ctx.count == null ? 3 : ctx.count, lat: pk[1], lng: pk[0], radius_m: ctx.radius || 1000 } }; } if (kind === 'quote') { return { status: 201, json: { currency: 'USD', created: iso(0), expires: iso(5 * 60000), quote_id: 'dqt_yRNKTdwJRF-jHXzaWKdnFA', pickup_estimate_minutes: 1, dropoff_estimate_minutes: 8, dropoff_eta: iso(8 * 60000), fee: 0, external_ref_id: null, } }; } if (kind === 'route') { return { status: 200, json: { courier_id: 'cor_test-1', delivery_id: 'del_3vDjjkd21b', legs: [ { distance: 1250.5, openlr_route: 'CwRbWyNG9RpsCQCb/jsbtAT/6/+jK1lH', route: { coordinates: [[-118.2437, 34.0522], [-118.244, 34.053]], type: 'LineString' }, waypoint_id: 'way_BHDs+L2jtHwF6n4IFFktl6TAiQxcUppNTGqnPWKEzuc=' }, ] } }; } if (kind === 'get') return { status: 200, json: job(ctx.status || 'pending_courier_assignment') }; if (kind === 'advance') return { status: 200, json: job(body.target_stage) }; return { status: 201, json: job('pickup_en_route') }; } export const LOCAL_FAILS = { fleet_cap_reached: { cause: 'The sandbox caps a partner at 10 simulated robots across all its fleets, and this partner is at the cap.', remedy: 'The shared demo fleet is busy — try again in a minute, or use your own sandbox credentials.', action: 'power_down_all' }, fleet_not_ready: { cause: 'The fleet did not report ready within 60 seconds.', remedy: 'Run step 1 again: it powers this fleet down first, then starts a fresh one.' }, missing_fleet_id: { cause: 'The create-fleet response carried no id, so there is nothing to power up.', remedy: 'Compare the response in the terminal with POST /simulated_fleet/fleets in the reference.' }, robots_offline: { cause: 'Your simulated robots went offline (the sandbox stops them after about a minute).', remedy: 'Set them up again, then carry on from this step.', action: 'setup_again', badge: 'offline' }, }; export const fleetUp = json => Array.isArray(json) && json.length > 0 && json.every(x => x && (x.is_ready === true || x.ready === true)); export const goneOk = r => r.ok || [400, 404, 409, 422].includes(r.status); export const isCap = r => !r.ok && [400, 403, 409, 422].includes(r.status) && /\bcap\b|capped|limit|exceed|maximum|too many/i.test(JSON.stringify(r.json || '')); export function describe(status, json) { const code = json && (json.code || json.error); const known = REJECTIONS.find(r => r.id === code); if (known) return { ...known, status }; if (LOCAL_FAILS[code]) return { id: code, status, fix: null, ...LOCAL_FAILS[code] }; const detail = json && (json.detail || json.message); if (status === 401 || status === 403) { return { id: code || 'unauthorized', status, cause: detail || 'The gateway rejected the call before it reached the delivery service.', remedy: 'Enter your sandbox Partner ID and its X-API-Key in the scope bar; they must belong to the same sandbox partner. "API key not recognized" means the key is not active on the sandbox: check it with Serve.', fix: null }; } if (status === 0) { return { id: 'network_error', status: 0, cause: 'The request never reached Serve.', remedy: 'Check connectivity and any blocking extension, then try again.', fix: null }; } return { id: code || ('http_' + status), status, cause: detail || 'Serve rejected this request.', remedy: 'Compare the request body in the terminal with the endpoint reference.', fix: null }; } export const REDUCE = '(prefers-reduced-motion: reduce)'; export const reduced = () => typeof window !== 'undefined' && !!window.matchMedia && window.matchMedia(REDUCE).matches; export const easeInOut = t => -(Math.cos(Math.PI * Math.min(1, Math.max(0, t))) - 1) / 2; export function makeLife() { const L = { alive: true, rafs: new Set(), timers: new Set() }; L.sleep = ms => new Promise(res => { if (!L.alive) return; const t = setTimeout(() => { L.timers.delete(t); res(); }, ms); L.timers.add(t); }); L.tween = (ms, fn) => new Promise(res => { if (!L.alive) return; if (ms <= 0 || reduced()) { fn(1, 1); res(); return; } let t0 = null, id = 0; const tick = now => { L.rafs.delete(id); if (!L.alive) return; if (t0 === null) t0 = now; const t = Math.min(1, (now - t0) / ms); fn(easeInOut(t), t); if (t < 1) { id = requestAnimationFrame(tick); L.rafs.add(id); } else res(); }; id = requestAnimationFrame(tick); L.rafs.add(id); }); L.stop = () => { L.alive = false; L.rafs.forEach(id => cancelAnimationFrame(id)); L.timers.forEach(t => clearTimeout(t)); L.rafs.clear(); L.timers.clear(); }; return L; } export const esc = s => String(s).replace(/[&<>"]/g, c => ({ '&': '&', '<': '<', '>': '>', '"': '"' }[c])); export function hl(src, singleQuotes) { const re = singleQuotes ? /("(?:[^"\\]|\\.)*")(\s*:)?|('(?:[^'\\]|\\.)*')|\b(true|false|null|True|False|None)\b|(-?\b\d+(?:\.\d+)?\b)|([{}[\],])|([&<>])/g : /("(?:[^"\\]|\\.)*")(\s*:)?|()\b(true|false|null|True|False|None)\b|(-?\b\d+(?:\.\d+)?\b)|([{}[\],])|([&<>])/g; return src.replace(re, (m, dq, colon, sq, kw, num, punc, ch) => { if (dq) return colon ? `${esc(dq)}${colon}` : `${esc(dq)}`; if (sq) return `${esc(sq)}`; if (kw) return `${kw}`; if (num) return `${num}`; if (punc) return `${punc}`; return esc(ch || m); }); } export const STATUS_TEXT = { 0: 'Network error', 200: 'OK', 201: 'Created', 400: 'Bad Request', 401: 'Unauthorized', 403: 'Forbidden', 404: 'Not Found', 409: 'Conflict', 429: 'Too Many Requests', 500: 'Internal Server Error' }; export function snippet(req, lang) { const url = BASE + req.path, has = req.body != null; const json = ind => JSON.stringify(req.body, null, 2).replace(/\n/g, '\n' + ind); if (lang === 'curl') return `curl -X ${req.method} \\\n "${url}"` + (has ? ` \\\n -H "Content-Type: application/json" \\\n -d '${json(' ')}'` : ''); if (lang === 'js') return `const res = await fetch(\n '${url}',\n {\n method: '${req.method}',` + (has ? `\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(${json(' ')}),` : '') + `\n },\n);\nconst data = await res.json();`; const py = has ? json(' ').replace(/\btrue\b/g, 'True').replace(/\bfalse\b/g, 'False').replace(/\bnull\b/g, 'None') : ''; return `import requests\n\ndata = requests.${req.method.toLowerCase()}(\n "${url}",` + (has ? `\n json=${py},` : '') + `\n).json()`; } export const money = (c, cur) => new Intl.NumberFormat('en-US', { style: 'currency', currency: cur || 'USD' }).format((Number(c) || 0) / 100); export const clock = iso => { const d = new Date(iso); return isNaN(d) ? '' : d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' }); }; export const street = a => String(a).split(',')[0]; export const harLine = req => { const t = req.body ? JSON.stringify(req.body) : ''; return `har: { method: "${req.method}", url: "${req.path.split('?')[0]}"` + (req.body ? `, postData: { mimeType: "application/json", text: "${t.length > 34 ? t.slice(0, 34) + '…' : t}" }` : '') + ' }'; }; export const NOOP_MAP = { kind: 'none', spawn: async () => {}, pulse: async () => {}, highlight: async () => {}, commit: async () => {}, drawRoute: async () => {}, driveTo: async () => {}, loading: async () => {}, celebrate: async () => {}, failMark: async () => {}, clearMarks: async () => {}, reset: async () => {}, setPlaces: async () => {}, spread: async () => null, powerDown: async () => {}, ghosts: () => {}, moveBot: async () => {}, removeBot: async () => {}, select: () => {}, lock: () => {} }; export const MAX_ROBOTS = 10; export const DEMO_PLACEHOLDERS = ['DEMO_PARTNER_ID', 'DEMO_API_KEY']; export const FLEET_KEY = 'serve_pg_fleet'; export const storage = () => { try { return window.sessionStorage; } catch (e) { return null; } }; export function sessionId() { const st = storage(); let id = st && st.getItem('serve_pg_session'); if (!id) { id = Math.random().toString(36).slice(2, 7); if (st) st.setItem('serve_pg_session', id); } return id; } export function storedFleet() { try { const f = JSON.parse((storage() && storage().getItem(FLEET_KEY)) || 'null'); return f && f.id ? f : null; } catch (e) { return null; } } export function releaseFleet(f) { if (!f || !f.live || f.released) return; f.released = true; const url = `${BASE}/v2/partners/${encodeURIComponent(f.partner)}/simulated_fleet/fleets/${encodeURIComponent(f.id)}/power_down`; const forget = () => { const cur = storedFleet(); if (cur && cur.id === f.id && storage()) storage().removeItem(FLEET_KEY); }; try { fetch(url, { method: 'POST', keepalive: true, headers: f.key ? { 'X-API-Key': f.key } : {} }) .then(r => { if (goneOk(r)) forget(); }, () => {}); } catch (e) { } } export const EVENT_STATUS = { reserved_courier: 'pending_courier_assignment', courier_dispatched: 'pickup_en_route', arrived_pick_up: 'pickup_arrived', dropoff_en_route: 'dropoff_en_route', dropoff_arrived: 'dropoff_arrived', dropoff_complete: 'dropoff_complete' }; export const VERIFY_SNIPPET = `// Node: compare against the raw request body, before parsing it const crypto = require('crypto'); function verify(rawBody, header, secret) { const expected = crypto.createHmac('sha256', secret).update(rawBody).digest('hex'); return crypto.timingSafeEqual(Buffer.from(expected), Buffer.from(header)); } # Python import hmac, hashlib def verify(raw_body: bytes, header: str, secret: str) -> bool: expected = hmac.new(secret.encode(), raw_body, hashlib.sha256).hexdigest() return hmac.compare_digest(expected, header)`; export const SVP_ARROW = 'M13.3125 5.24414C14.6315 7.20259 16.2669 8.92825 18.1523 10.3496L19.2666 11.1895C19.4546 11.3312 19.5654 11.5527 19.5654 11.7881C19.5654 12.0235 19.4546 12.245 19.2666 12.3867L18.1523 13.2266C16.2669 14.6479 14.6315 16.3736 13.3125 18.332L12.8936 18.9541L11.6494 18.1162L12.0684 17.4941C13.3267 15.6256 14.8553 13.9564 16.6016 12.5381H4.94043V11.0381H16.6016C14.8553 9.61978 13.3267 7.95053 12.0684 6.08203L11.6494 5.45996L12.8936 4.62207L13.3125 5.24414Z'; export function SplitBtn({ href, size, className = '', children, ...rest }) { const cls = ['sv-btn', size ? 'sv-btn-' + size : '', className].filter(Boolean).join(' '); const body = [ {children}, , , ]; return href ? {body} : ; } export const ATLAS = { ground: '#edf2f0', street: '#ffffff', block: '#e1e9e6', lot: '#d4dfdb', park: '#cee8e1', parkPath: '#ffffff', water: '#d4e7ec', waterLine: '#8fc0ca', centre: '#c9d8d3', casing: '#ffffff', route: '#0a8f6e', }; export const COLS = [60, 220, 390, 560, 720, 880, 1040, 1200, 1370]; export const ROWS = [110, 250, 390, 520, 660, 800, 930]; export const COL_NAMES = ['Bayview Ave', 'Harbor Ave', 'Linden Ave', 'Market Ave', 'Orchard Ave', 'Juniper Ave', 'Pier Ave', 'Sutter Ave', 'Shore Ave']; export const ROW_NAMES = ['Ash St', 'Birch St', 'Cypress St', 'Dogwood St', 'Elm St', 'Fig St', 'Grove St']; export const MAJOR_COL = 3, MAJOR_ROW = 3; export const PARK = { c0: 4, c1: 6, r0: 2, r1: 4 }; export const DEAD = new Set(['5,3']); export const key = (c, r) => c + ',' + r; export const edgeKey = (a, b) => [a, b].sort().join('|'); export const BLOCKED = new Set([edgeKey('5,2', '5,3'), edgeKey('5,3', '5,4'), edgeKey('4,3', '5,3'), edgeKey('5,3', '6,3')]); export const xy = ([c, r]) => [COLS[c], ROWS[r]]; export function neighbors([c, r]) { return [[c + 1, r], [c - 1, r], [c, r + 1], [c, r - 1]].filter(([nc, nr]) => nc >= 0 && nr >= 0 && nc < COLS.length && nr < ROWS.length && !DEAD.has(key(nc, nr)) && !BLOCKED.has(edgeKey(key(c, r), key(nc, nr)))); } export function route(a, b) { const dist = new Map([[key(...b), 0]]); const q = [b]; while (q.length) { const n = q.shift(); for (const m of neighbors(n)) if (!dist.has(key(...m))) { dist.set(key(...m), dist.get(key(...n)) + 1); q.push(m); } } if (!dist.has(key(...a))) return null; const path = [a]; let cur = a, dir = null; while (dist.get(key(...cur)) > 0) { const d = dist.get(key(...cur)); const opts = neighbors(cur).filter(m => dist.get(key(...m)) === d - 1); const straight = dir && opts.find(m => m[0] - cur[0] === dir[0] && m[1] - cur[1] === dir[1]); const next = straight || opts[0]; dir = [next[0] - cur[0], next[1] - cur[1]]; path.push(next); cur = next; } return path; } export function buildMap() { let seed = 0x8412e7cc; const rand = () => { seed |= 0; seed = seed + 0x6D2B79F5 | 0; let t = Math.imul(seed ^ seed >>> 15, 1 | seed); t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t; return ((t ^ t >>> 14) >>> 0) / 4294967296; }; const blocks = [], park = [], streets = [], labels = []; let k = 0; const DECOR_COLS = [-580, -420, -260, -100]; const XS = [-740, ...DECOR_COLS, ...COLS, 1470], YS = [-40, ...ROWS, 1080]; const inPark = (x0, y0) => x0 >= COLS[PARK.c0] && x0 < COLS[PARK.c1] && y0 >= ROWS[PARK.r0] && y0 < ROWS[PARK.r1]; for (let i = 0; i < XS.length - 1; i++) for (let j = 0; j < YS.length - 1; j++) { const x0 = XS[i], y0 = YS[j], x1 = XS[i + 1], y1 = YS[j + 1]; if (inPark(x0, y0)) continue; const pad = 13, bx = x0 + pad, by = y0 + pad, bw = x1 - x0 - pad * 2, bh = y1 - y0 - pad * 2; blocks.push(); const nx = bw > 150 ? 3 : 2, ny = 2, gap = 7, lw = (bw - gap * (nx + 1)) / nx, lh = (bh - gap * (ny + 1)) / ny; for (let a = 0; a < nx; a++) for (let b = 0; b < ny; b++) { if (rand() < 0.22) continue; const shrinkW = rand() * lw * 0.28, shrinkH = rand() * lh * 0.28; blocks.push(); } } const px = COLS[PARK.c0] + 13, py = ROWS[PARK.r0] + 13, pw = COLS[PARK.c1] - COLS[PARK.c0] - 26, ph = ROWS[PARK.r1] - ROWS[PARK.r0] - 26; const path = { className: 'm-path' }; park.push(); park.push(); park.push(); park.push(); park.push(Cedar Park); const seg = (x1, y1, x2, y2, major) => streets.push(); COLS.forEach((x, c) => { seg(x, -60, x, ROWS[0], c === MAJOR_COL); seg(x, ROWS.at(-1), x, 1100, c === MAJOR_COL); for (let r = 0; r < ROWS.length - 1; r++) if (!BLOCKED.has(edgeKey(key(c, r), key(c, r + 1)))) seg(x, ROWS[r], x, ROWS[r + 1], c === MAJOR_COL); }); DECOR_COLS.forEach(x => seg(x, -60, x, 1100, false)); ROWS.forEach((y, r) => { seg(-760, y, COLS[0], y, r === MAJOR_ROW); seg(COLS.at(-1), y, 1500, y, r === MAJOR_ROW); for (let c = 0; c < COLS.length - 1; c++) if (!BLOCKED.has(edgeKey(key(c, r), key(c + 1, r)))) seg(COLS[c], y, COLS[c + 1], y, r === MAJOR_ROW); }); const centre = { className: 'm-centre' }; streets.push(); streets.push(); streets.push(); const label = (t, x, y, rot) => labels.push({t}); COLS.forEach((x, c) => { [0, 4].forEach(r => { if (c !== 5 || r !== 2) label(COL_NAMES[c], x, (ROWS[r] + ROWS[r + 1] - 46) / 2, true); }); }); ROWS.forEach((y, r) => { [1, 6].forEach(c => label(ROW_NAMES[r], (COLS[c] + COLS[c + 1]) / 2 + (r % 2 ? 14 : -10), y, false)); }); return { blocks, park, streets, labels }; } export const ROBOT_IMG = 'data:image/webp;base64,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'; export const servebotSvg = () => ``; export const faceBot = (el, r) => { if (!el || el.classList.contains('face-r') === r) return; el.classList.toggle('face-r', r); el.classList.toggle('face-l', !r); }; export const hoFig = (k, i) => ``; export const HANDOFF = { dur: 5000, load: hoFig('', ''), drop: hoFig(' ho-dr', 'd') }; export const handoffSvg = (give, left) => `${give ? HANDOFF.load : HANDOFF.drop}`; export const STORE_GLYPH = ''; export const HOME_GLYPH = ''; export const CHECK_SVG = ''; export const X_SVG = ''; export const pinSvg = (glyph, extra = '') => `${glyph}${extra}`; export const A_MERCHANT = [3, 1], A_CUSTOMER = [6, 3]; export const MPOS = xy(A_MERCHANT), CPOS = xy(A_CUSTOMER); export const M_PIN = [MPOS[0] - 30, MPOS[1] - 18], C_PIN = [CPOS[0] + 30, CPOS[1] + 66]; export const A_SPOTS = [[4, 2], [5, 0], [2, 3], [1, 1], [6, 1], [4, 4], [1, 3], [5, 5], [0, 2], [2, 5]]; export const A_FULL = [330, 40, 1190, 660]; export const polyCum = pts => pts.reduce((acc, p, i) => { acc.push(i ? acc[i - 1] + Math.hypot(p[0] - pts[i - 1][0], p[1] - pts[i - 1][1]) : 0); return acc; }, []); export function polyAt(pts, cum, d) { let i = 1; while (i < pts.length - 1 && cum[i] < d) i++; const seg = (cum[i] - cum[i - 1]) || 1, t = Math.min(1, Math.max(0, (d - cum[i - 1]) / seg)); return [pts[i - 1][0] + (pts[i][0] - pts[i - 1][0]) * t, pts[i - 1][1] + (pts[i][1] - pts[i - 1][1]) * t]; } export function atlasPath(node) { const a = route(node, A_MERCHANT), b = route(A_MERCHANT, A_CUSTOMER); const pts = [...a, ...b.slice(1)].map(xy), cum = polyCum(pts), total = cum[cum.length - 1]; const mD = Math.max(0, cum[a.length - 1] - 34), cD = total - 34; return { pts, cum, total, mD, aD: mD + (cD - mD) * 0.8, cD }; } export const pathD = pts => pts.map((p, i) => (i ? 'L' : 'M') + p[0].toFixed(1) + ' ' + p[1].toFixed(1)).join(' '); export const ATLAS_M = 0.75; export const atlasToGeo = ([x, y], pk) => [pk[0] + (x - MPOS[0]) * ATLAS_M / (111320 * Math.cos(pk[1] * Math.PI / 180)), pk[1] - (y - MPOS[1]) * ATLAS_M / 110540]; export const geoToAtlas = ([lng, lat], pk) => [MPOS[0] + (lng - pk[0]) * 111320 * Math.cos(pk[1] * Math.PI / 180) / ATLAS_M, MPOS[1] - (lat - pk[1]) * 110540 / ATLAS_M]; export function nearestNode(p) { let best = A_SPOTS[0], bd = Infinity; COLS.forEach((x, c) => ROWS.forEach((y, r) => { const d = Math.hypot(x - p[0], y - p[1]); if (!DEAD.has(key(c, r)) && d < bd) { bd = d; best = [c, r]; } })); return best; } export function atlasSpread(n, box) { const cand = []; COLS.forEach((x, c) => ROWS.forEach((y, r) => { const rt = route([c, r], A_MERCHANT); if (DEAD.has(key(c, r)) || !rt || rt.length < 2 || key(c, r) === key(...A_CUSTOMER)) return; if (x < box[0] || x > box[2] || y < box[1] || y > box[3]) return; cand.push({ node: [c, r], l: rt.length }); })); cand.sort((a, b) => a.l - b.l); const out = []; for (const gap of [3, 2, 1]) for (const q of cand) { if (out.length < n && !out.includes(q) && out.every(o => Math.abs(o.node[0] - q.node[0]) + Math.abs(o.node[1] - q.node[1]) >= gap)) out.push(q); } return out.map(q => q.node); } export function AtlasMap({ apiRef, placesRef, clickRef, botRef }) { const base = useMemo(buildMap, []); const svgRef = useRef(null), cullRef = useRef(null); const [ready, setReady] = useState(false); useEffect(() => setReady(true), []); useEffect(() => { if (ready && cullRef.current) cullRef.current(); }, [ready]); useEffect(() => { const svg = svgRef.current, L = makeLife(), NS = 'http://www.w3.org/2000/svg'; const layer = n => svg.querySelector('.a-' + n); const Lroute = layer('route'), Lring = layer('ring'), Lpins = layer('pins'), Lbots = layer('bots'), Lscene = layer('scene'), Lmarks = layer('marks'), Lghosts = layer('ghosts'); const gEl = (html, cls) => { const el = document.createElementNS(NS, 'g'); if (cls) el.setAttribute('class', cls); el.innerHTML = html; return el; }; const at = (el, x, y, extra = '') => el.setAttribute('transform', `translate(${x.toFixed(1)} ${y.toFixed(1)})${extra}`); const handoff = async (pin, rx, ry, give) => { const left = pin[0] < rx, w = gEl(handoffSvg(give, left), 'handoff'); at(w, rx, ry); Lscene.append(w); if (chosen) faceBot(chosen.el, !left); await L.sleep(reduced() ? 1600 : HANDOFF.dur); w.remove(); }; const plate = (parent, text, x, y, align, cls) => { const el = gEl('', 'plate' + (cls ? ' ' + cls : '')); const t = el.querySelector('text'); t.textContent = text; parent.appendChild(el); let w = text.length * 9; try { w = t.getComputedTextLength() || w; } catch (e) { } const h = 26, px = 11, x0 = align === 'end' ? x - w - px * 2 : align === 'middle' ? x - w / 2 - px : x; const r = el.querySelector('rect'); r.setAttribute('x', x0); r.setAttribute('y', y - h / 2); r.setAttribute('width', w + px * 2); r.setAttribute('height', h); t.setAttribute('x', x0 + px); t.setAttribute('y', y + 1); return el; }; let vb = null, focus = A_FULL; const fit = ([x0, y0, x1, y1]) => { const r = svg.getBoundingClientRect(), RW = r.width, RH = r.height; if (RW < 60 || RH < 60) return vb || [x0, y0, x1 - x0, y1 - y0]; const pt = Math.min(64, RH * .16), pb = Math.min(84, RH * .2), px = 14; const w = x1 - x0, h = y1 - y0, k = Math.min((RW - px * 2) / w, Math.max(40, RH - pt - pb) / h); return [x0 - (RW / k - w) / 2, y0 - pt / k - ((RH - pt - pb) / k - h) / 2, RW / k, RH / k]; }; const setView = v => { vb = v; svg.setAttribute('viewBox', v.map(n => n.toFixed(1)).join(' ')); }; const cull = () => { const v = svg.getBoundingClientRect(); const badge = svg.parentElement && svg.parentElement.querySelector('.svp-map-badge'); const k = badge && badge.getBoundingClientRect(); svg.querySelectorAll('.st-label').forEach(n => { const r = n.getBoundingClientRect(); const under = k && r.left < k.right + 6 && r.right > k.left - 6 && r.top < k.bottom + 6 && r.bottom > k.top - 6; n.style.visibility = under || r.left < v.left || r.right > v.right || r.top < v.top || r.bottom > v.bottom ? 'hidden' : ''; }); }; const camera = async (box, ms = 900) => { focus = box; const to = fit(box), from = vb || to; await L.tween(ms, e => setView(from.map((f, i) => f + (to[i] - f) * e))); cull(); }; setView(fit(focus)); cull(); cullRef.current = cull; let ro = null; if (typeof ResizeObserver !== 'undefined') { ro = new ResizeObserver(() => { setView(fit(focus)); cull(); }); ro.observe(svg); } const mPin = gEl(pinSvg(STORE_GLYPH), 'pin merch'), cPin = gEl(pinSvg(HOME_GLYPH, CHECK_SVG), 'pin cust'); at(mPin, M_PIN[0], M_PIN[1], ' scale(1.2)'); at(cPin, C_PIN[0], C_PIN[1], ' scale(1.2)'); Lpins.append(mPin, cPin); let plates = []; const drawPlates = pl => { plates.forEach(x => x.remove()); plates = [plate(Lpins, placeTitle(pl.pickup, 'pickup'), M_PIN[0], M_PIN[1] - 80, 'middle'), plate(Lpins, placeTitle(pl.dropoff, 'dropoff'), C_PIN[0], C_PIN[1] + 26, 'middle')]; }; drawPlates(placesRef.current); let bots = [], chosen = null, P = null, last = null; const pk = () => lngLat(placesRef.current.pickup); const geoOf = node => atlasToGeo(xy(node), pk()); const setLL = (el, ll) => el.setAttribute('data-ll', ll[0].toFixed(6) + ',' + ll[1].toFixed(6)); const svgPt = e => { const q = svg.createSVGPoint(); q.x = e.clientX; q.y = e.clientY; const m = q.matrixTransform(svg.getScreenCTM().inverse()); return [m.x, m.y]; }; const dragify = (el, o) => { el.setAttribute('tabindex', '0'); el.setAttribute('role', 'button'); el.addEventListener('pointerdown', e => { e.stopPropagation(); e.preventDefault(); const x0 = e.clientX, y0 = e.clientY, can = !o.canDrag || o.canDrag(); let moved = false; const mv = ev => { if (can && Math.hypot(ev.clientX - x0, ev.clientY - y0) > 4) moved = true; if (moved) { const [x, y] = svgPt(ev); at(el, x, y); } }; const up = ev => { window.removeEventListener('pointermove', mv); window.removeEventListener('pointerup', up); if (!moved) { o.onTap(); return; } const node = nearestNode(svgPt(ev)); at(el, ...xy(node)); o.onDrop(node); }; window.addEventListener('pointermove', mv); window.addEventListener('pointerup', up); }); el.addEventListener('click', e => e.stopPropagation()); el.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); o.onTap(); } }); }; const onSvgClick = e => { if (clickRef && clickRef.current) clickRef.current(geoOf(nearestNode(svgPt(e)))); }; svg.addEventListener('click', onSvgClick); const makeBot = (i, ll) => { const node = ll ? nearestNode(geoToAtlas(ll, pk())) : A_SPOTS[i % A_SPOTS.length], [x, y] = xy(node); const el = gEl(`${servebotSvg()}`, 'bot'); if (ll) setLL(el, ll); if (reduced()) el.classList.add('still'); else el.firstChild.style.animationDelay = (i * 170) + 'ms'; at(el, x, y); Lbots.appendChild(el); const b = { i, node, el, pos: [x, y], d: 0, tag: null }; b.tag = plate(el, 'Robot ' + (i + 1), 0, 56, 'middle', 'tag'); el.setAttribute('aria-label', 'Robot ' + (i + 1)); dragify(el, { canDrag: () => !(botRef.current && botRef.current.locked(b.i)), onTap: () => botRef.current && botRef.current.onSelect(b.i), onDrop: n2 => { b.node = n2; b.pos = xy(n2); const g = geoOf(n2); setLL(el, g); if (botRef.current) botRef.current.onDrop(b.i, g); } }); return b; }; const byI = i => bots.find(b => b.i === i); const setTag = (b, text) => { b.tag.remove(); b.tag = plate(b.el, text, 0, 56, 'middle', 'tag'); }; const nearest = () => { let best = null, bl = Infinity; for (const b of bots) { const r = route(b.node, A_MERCHANT); const l = r ? r.length : Infinity; if (l < bl) { bl = l; best = b; } } return best; }; const boxFor = () => bots.reduce(([x0, y0, x1, y1], b) => [Math.min(x0, b.pos[0] - 80), Math.min(y0, b.pos[1] - 60), Math.max(x1, b.pos[0] + 80), Math.max(y1, b.pos[1] + 90)], A_FULL); const prog = () => { const p = Lroute.querySelector('.r-prog'); if (p && P && chosen) p.setAttribute('stroke-dasharray', `${(chosen.d / P.total).toFixed(4)} 1`); }; const clear = () => { Lbots.innerHTML = ''; Lroute.innerHTML = ''; Lring.innerHTML = ''; Lscene.innerHTML = ''; bots = []; chosen = null; P = null; }; const api = { kind: 'atlas', async spawn(n, pts) { clear(); last = pts || null; for (let i = 0; i < Math.min(n, 10); i++) bots.push(makeBot(i, pts && pts[i])); await camera(boxFor(), 500); await L.sleep(reduced() ? 0 : 500 + n * 170); }, async pulse() { Lring.innerHTML = ``; for (const b of bots) { b.el.classList.remove('pulse'); void b.el.getBBox(); b.el.classList.add('pulse'); b.el.setAttribute('data-pulsed', String(Number(b.el.getAttribute('data-pulsed') || 0) + 1)); await L.sleep(reduced() ? 0 : 170); } await L.sleep(reduced() ? 400 : 1300); bots.forEach(b => b.el.classList.remove('pulse')); }, async spread(n) { const v = vb || fit(focus), k = (svg.getBoundingClientRect().width || v[2]) / v[2], u = px => px / k; return atlasSpread(n, [v[0] + u(40), v[1] + u(80), v[0] + v[2] - u(40), v[1] + v[3] - u(100)]).map(node => atlasToGeo(xy(node), pk())); }, async highlight(idx) { chosen = byI(idx) || nearest(); bots.forEach(b => b.el.classList.toggle('chosen', b === chosen)); if (chosen) setTag(chosen, 'Nearest robot'); await L.sleep(reduced() ? 0 : 400); }, async commit(label, idx) { if (!bots.length) { bots = [makeBot(0)]; await L.sleep(reduced() ? 0 : 500); } if (byI(idx)) chosen = byI(idx); if (!chosen) chosen = nearest(); chosen.el.classList.add('chosen'); bots.forEach(b => { if (b !== chosen) b.el.classList.add('gone'); }); setTag(chosen, label); Lring.innerHTML = ''; await L.sleep(reduced() ? 0 : 700); bots.forEach(b => { if (b !== chosen) b.el.remove(); }); bots = [chosen]; P = atlasPath(chosen.node); chosen.d = 0; }, async drawRoute() { if (!chosen) return; P = P || atlasPath(chosen.node); const d = pathD(P.pts); Lroute.innerHTML = ``; prog(); await L.sleep(reduced() ? 0 : 400); }, async driveTo(target) { if (!chosen) return; P = P || atlasPath(chosen.node); const to = { merchant: P.mD, approach: P.aD, customer: P.cD }[target], from = chosen.d; if (!(to > from)) return; let px = polyAt(P.pts, P.cum, from)[0]; await L.tween(Math.min(3400, Math.max(1100, (to - from) * 3.2)), e => { chosen.d = from + (to - from) * e; const [x, y] = polyAt(P.pts, P.cum, chosen.d), dx = x - px; if (Math.abs(dx) > .01) faceBot(chosen.el, dx > 0); px = x; chosen.pos = [x, y]; at(chosen.el, x, y); prog(); }); }, async loading() { if (!chosen) return; const [rx, ry] = chosen.pos; svg.setAttribute('data-scene', 'loading'); await camera([rx - 230, ry - 175, rx + 190, ry + 105], 900); await handoff(M_PIN, rx, ry, true); svg.removeAttribute('data-scene'); await camera(boxFor(), 900); }, async celebrate() { if (chosen) { const [rx, ry] = chosen.pos; await camera([rx - 230, ry - 175, rx + 190, ry + 105], 900); await handoff(C_PIN, rx, ry, false); await camera(boxFor(), 900); } cPin.classList.remove('celebrate'); void cPin.getBBox(); cPin.classList.add('celebrate', 'done'); await L.sleep(reduced() ? 0 : 900); }, async failMark(where) { const [x, y] = where === 'customer' ? C_PIN : M_PIN; Lmarks.innerHTML = `${X_SVG}`; }, async clearMarks() { Lmarks.innerHTML = ''; }, async powerDown() { bots.forEach(b => b.el.classList.add('gone')); await L.sleep(reduced() ? 0 : 700); clear(); last = null; }, ghosts(pts, h) { Lghosts.innerHTML = ''; pts.forEach((ll, k) => { const el = gEl(`${servebotSvg()}`, 'bot ghost'); el.setAttribute('aria-label', `Placed robot ${k + 1}: Enter removes it`); setLL(el, ll); at(el, ...geoToAtlas(ll, pk())); Lghosts.appendChild(el); dragify(el, { onTap: () => h.onRemove(k), onDrop: n2 => { const g = geoOf(n2); setLL(el, g); h.onMove(k, g); } }); }); }, async moveBot(i, ll, ms = 900) { const b = byI(i); if (!b) return; const to = geoToAtlas(ll, pk()), from = b.pos; if (ms >= 900 && Math.abs(to[0] - from[0]) > 1) faceBot(b.el, to[0] > from[0]); setLL(b.el, ll); await L.tween(ms, e => { b.pos = [from[0] + (to[0] - from[0]) * e, from[1] + (to[1] - from[1]) * e]; at(b.el, ...b.pos); }); b.node = nearestNode(to); }, async removeBot(i) { const b = byI(i); if (!b) return; b.el.classList.add('gone'); bots = bots.filter(x => x !== b); if (chosen === b) chosen = null; await L.sleep(reduced() ? 0 : 600); b.el.remove(); }, select(i) { bots.forEach(b => b.el.classList.toggle('sel', b.i === i)); }, lock(i) { bots.forEach(b => { const on = b.i === i; b.el.toggleAttribute('data-locked', on); b.el.setAttribute('aria-label', `Robot ${b.i + 1}` + (on ? ': assigned to the active job, so it cannot be moved' : '')); let tip = b.el.querySelector(':scope > title'); if (on && !tip) { tip = document.createElementNS(NS, 'title'); tip.textContent = 'Assigned to the active job, so it cannot be moved'; b.el.prepend(tip); } if (!on && tip) tip.remove(); }); }, async reset() { clear(); Lmarks.innerHTML = ''; cPin.classList.remove('celebrate', 'done'); await camera(A_FULL, 0); }, async setPlaces(pl) { const n = bots.length, keep = last; await api.reset(); drawPlates(pl); for (let i = 0; i < n; i++) bots.push(makeBot(i, keep && keep[i])); last = keep; }, }; apiRef.current = api; return () => { L.stop(); svg.removeEventListener('click', onSvgClick); if (ro) ro.disconnect(); if (apiRef.current === api) apiRef.current = null; }; }, [apiRef]); return ( ); } export const paintMap = (map, el) => { const css = getComputedStyle(el), v = n => css.getPropertyValue('--' + n).trim(); const set = (id, prop, value) => { try { map.setPaintProperty(id, prop, value); } catch (e) { } }; const green = ['match', ['get', 'class'], ['park', 'pitch', 'grass', 'wood', 'scrub', 'cemetery', 'national_park'], v('map-park'), v('map-block')]; for (const { id, type, 'source-layer': src = '' } of map.getStyle().layers) { if (id.startsWith('svp-')) continue; if (type === 'background') set(id, 'background-color', v('map-ground')); else if (type === 'symbol') { set(id, 'text-color', v('muted')); set(id, 'text-halo-color', v('map-ground')); } else if (src === 'hillshade') set(id, 'fill-opacity', 0); else if (type === 'fill') set(id, 'fill-color', src === 'water' ? v(id.includes('shadow') ? 'map-waterline' : 'map-water') : src === 'building' ? v('map-lot') : src === 'landcover' ? v('map-park') : src.startsWith('landuse') ? green : v('map-block')); else if (type === 'line') set(id, 'line-color', v(src === 'waterway' ? 'map-waterline' : /case|rail|admin|building|structure/.test(id + src) ? 'map-centre' : /path|steps|pedestrian/.test(id) ? 'map-path' : 'map-street')); } set('svp-route-case', 'line-color', v('route-case')); set('svp-route-core', 'line-color', v('route')); set('svp-prog', 'line-color', v('route-prog')); }; export function MapboxMap({ token, apiRef, onFail, placesRef, clickRef, botRef }) { const el = useRef(null); useEffect(() => { const L = makeLife(); let map = null, gl = null, dead = false, ok = false, settle = null; const loaded = new Promise(r => { settle = r; }); let P = lngLat(placesRef.current.pickup), D = lngLat(placesRef.current.dropoff); let bots = [], chosen = null, path = null, scene = null, mark = null, last = null; const pins = {}; const div = (html, cls) => { const d = document.createElement('div'); d.className = cls; d.innerHTML = html; return d; }; const faceAlong = (a, b, el = chosen.el) => { const dx = map.project(b).x - map.project(a).x; if (Math.abs(dx) > 2) faceBot(el, dx > 0); }; const faceOn = (d, end) => { const sx = e => map.project(polyAt(path.coords, path.cum, Math.min(e, end))).x, x = sx(d), near = sx(d + 12) - x, far = sx(d + 150) - x; if (Math.abs(near) > .5 && Math.abs(far) > 4 && near > 0 === far > 0) faceBot(chosen.el, near > 0); }; const handoff = async (pin, give) => { const ll = chosen.ll || pin, a = map.project(pin), b = map.project(ll), left = a.x < b.x - 2; scene = new gl.Marker({ element: div(``, 'svp-mk svp-mho'), anchor: 'center', offset: [0, 14] }).setLngLat(ll).addTo(map); faceBot(chosen.el, !left); await L.sleep(reduced() ? 1600 : HANDOFF.dur); scene.remove(); scene = null; }; const fail = () => { if (dead || ok) return; ok = true; settle(false); onFail(); }; let painted = false; const repaint = () => { if (painted && !dead) paintMap(map, el.current); }; const mo = new MutationObserver(repaint); mo.observe(document.documentElement, { attributes: true, attributeFilter: ['data-color-mode'] }); L.sleep(15000).then(() => { if (!ok) fail(); }); if (!document.getElementById('svp-mapbox-css')) { const l = document.createElement('link'); l.id = 'svp-mapbox-css'; l.rel = 'stylesheet'; l.href = 'https://api.mapbox.com/mapbox-gl-js/v3.6.0/mapbox-gl.css'; document.head.appendChild(l); } const PAD = { top: 128, bottom: 118, left: 60, right: 60 }; const bbox = pts => [[Math.min(...pts.map(p => p[0])), Math.min(...pts.map(p => p[1]))], [Math.max(...pts.map(p => p[0])), Math.max(...pts.map(p => p[1]))]]; const frame = (pts, ms) => map.fitBounds(bbox([P, D, ...bots.map(b => b.ll), ...(pts || [])]), { padding: PAD, maxZoom: 15.6, duration: reduced() ? 0 : (ms == null ? 800 : ms) }); const EMPTY = { type: 'FeatureCollection', features: [] }; const setData = (id, geom) => { const s = map.getSource(id); if (s) s.setData(geom ? { type: 'Feature', properties: {}, geometry: geom } : EMPTY); }; const circle = (c, m) => { const pts = []; for (let i = 0; i <= 64; i++) { const a = i / 64 * 2 * Math.PI; pts.push([c[0] + m / (111320 * Math.cos(c[1] * Math.PI / 180)) * Math.cos(a), c[1] + m / 110540 * Math.sin(a)]); } return { type: 'Polygon', coordinates: [pts] }; }; const setLegs = legs => { const s = map.getSource('svp-route'); if (s) s.setData({ type: 'FeatureCollection', features: legs.map(c => ({ type: 'Feature', properties: {}, geometry: { type: 'LineString', coordinates: c } })) }); }; const mkPath = (coords, pickIdx) => { const cum = [0]; for (let i = 1; i < coords.length; i++) cum.push(cum[i - 1] + geoDist(coords[i - 1], coords[i])); let pi = pickIdx; if (pi == null || !(pi < coords.length)) { pi = 0; coords.forEach((c, i) => { if (geoDist(c, P) < geoDist(coords[pi], P)) pi = i; }); } const total = cum[cum.length - 1], mD = cum[pi]; return { coords, cum, total, mD, aD: mD + (total - mD) * 0.85, cD: total }; }; const pinHtml = (glyph, label, extra) => `

${esc(label)}

`; const botHtml = i => `

Robot ${i + 1}

`; const setTag = (b, t) => { const s = b.el.querySelector('.svp-mtag'); if (s) s.textContent = t; }; const clearBots = () => { bots.forEach(b => b.mk.remove()); bots = []; chosen = null; path = null; setData('svp-route'); setData('svp-prog'); }; const nearest = () => bots.reduce((best, b) => (!best || geoDist(b.ll, P) < geoDist(best.ll, P) ? b : best), null); const byI = i => bots.find(b => b.i === i); const setLL = (el, ll) => el.setAttribute('data-ll', ll[0].toFixed(6) + ',' + ll[1].toFixed(6)); const llOf = mk => { const q = mk.getLngLat(); return [q.lng, q.lat]; }; const interact = (e, mk, o) => { let dragged = 0; e.setAttribute('tabindex', '0'); e.setAttribute('role', 'button'); mk.on('dragend', () => { dragged = Date.now(); o.onDrop(llOf(mk)); }); e.addEventListener('click', ev => { ev.stopPropagation(); if (Date.now() - dragged > 250) o.onTap(); }); e.addEventListener('keydown', ev => { if (ev.key === 'Enter' || ev.key === ' ') { ev.preventDefault(); o.onTap(); } }); }; let ghostMks = []; const onPath = q => { let best = { d: 0, off: Infinity }; const k = Math.cos(q[1] * Math.PI / 180); for (let i = 1; i < path.coords.length; i++) { const a = path.coords[i - 1], b = path.coords[i], vx = (b[0] - a[0]) * k, vy = b[1] - a[1]; const t = Math.max(0, Math.min(1, (((q[0] - a[0]) * k) * vx + (q[1] - a[1]) * vy) / ((vx * vx + vy * vy) || 1))); const pt = [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t], off = geoDist(pt, q); if (off < best.off) best = { d: path.cum[i - 1] + (path.cum[i] - path.cum[i - 1]) * t, off }; } return best; }; const walk = async (a, b) => { const r = await fetch(`https://api.mapbox.com/directions/v5/mapbox/walking/${a[0]},${a[1]};${b[0]},${b[1]}?geometries=geojson&overview=full&access_token=${encodeURIComponent(token)}`); const j = await r.json(); const g = j && j.routes && j.routes[0] && j.routes[0].geometry; if (!g || !g.coordinates || g.coordinates.length < 2) throw new Error('no walking route'); return g.coordinates; }; const progTo = d => { const { coords, cum } = path; const out = [coords[0]]; for (let i = 1; i < coords.length && cum[i] < d; i++) out.push(coords[i]); out.push(polyAt(coords, cum, d)); setData('svp-prog', { type: 'LineString', coordinates: out }); }; import('https://esm.sh/mapbox-gl@3.6.0').then(m => { if (dead) return; gl = m.default || m; gl.accessToken = token; try { map = new gl.Map({ container: el.current, style: MAPBOX_STYLE, bounds: bbox([P, D]), fitBoundsOptions: { padding: PAD }, attributionControl: false }); } catch (e) { fail(); return; } map.addControl(new gl.AttributionControl({ compact: false }), 'bottom-right'); map.on('error', e => { const st = e && e.error && e.error.status; if (!ok && (st === 401 || st === 403)) fail(); }); map.on('click', e => { if (clickRef.current) clickRef.current([e.lngLat.lng, e.lngLat.lat]); }); map.once('load', () => { if (dead || ok) return; ok = true; map.addSource('svp-radius', { type: 'geojson', data: EMPTY }); map.addLayer({ id: 'svp-radius-fill', type: 'fill', source: 'svp-radius', paint: { 'fill-color': '#61e5c0', 'fill-opacity': 0.1 } }); map.addLayer({ id: 'svp-radius-line', type: 'line', source: 'svp-radius', paint: { 'line-color': '#61e5c0', 'line-width': 2, 'line-dasharray': [2, 2] } }); map.addSource('svp-route', { type: 'geojson', data: EMPTY }); map.addLayer({ id: 'svp-route-case', type: 'line', source: 'svp-route', layout: { 'line-cap': 'round', 'line-join': 'round' }, paint: { 'line-color': '#ffffff', 'line-width': 12 } }); map.addLayer({ id: 'svp-route-core', type: 'line', source: 'svp-route', layout: { 'line-cap': 'round', 'line-join': 'round' }, paint: { 'line-color': '#0a8f6e', 'line-width': 6 } }); map.addSource('svp-prog', { type: 'geojson', data: EMPTY }); map.addLayer({ id: 'svp-prog', type: 'line', source: 'svp-prog', layout: { 'line-cap': 'round', 'line-join': 'round' }, paint: { 'line-color': '#b9d0ca', 'line-width': 6 } }); painted = true; repaint(); const pl = placesRef.current; pins.merch = new gl.Marker({ element: div(pinHtml(STORE_GLYPH, placeTitle(pl.pickup, 'pickup')), 'svp-mk svp-mpin pin merch'), anchor: 'bottom' }).setLngLat(P).addTo(map); pins.cust = new gl.Marker({ element: div(pinHtml(HOME_GLYPH, placeTitle(pl.dropoff, 'dropoff'), CHECK_SVG), 'svp-mk svp-mpin pin cust'), anchor: 'bottom' }).setLngLat(D).addTo(map); const unclash = () => { const [a, b] = [pins.merch, pins.cust].map(p => p.getElement().querySelector('.svp-mplate')); b.classList.remove('flip'); const r = a.getBoundingClientRect(), q = b.getBoundingClientRect(); if (r.left < q.right && q.left < r.right && r.top < q.bottom && q.top < r.bottom) b.classList.add('flip'); }; map.on('zoom', unclash); map.on('moveend', unclash); map.resize(); frame(null, 0); if (el.current) el.current.setAttribute('data-ready', '1'); settle(true); }); }).catch(fail); const api = { kind: 'mapbox', async spawn(n, pts) { if (!(await loaded)) return; clearBots(); last = pts || null; for (let i = 0; i < Math.min(n, 10); i++) { const e = div(botHtml(i), 'svp-mk svp-mbot'); if (reduced()) e.classList.add('still'); else e.firstChild.style.animationDelay = (i * 170) + 'ms'; const b = { i, ll: (pts && pts[i]) || robotSpot(P, i), el: e, d: 0 }; if (pts && pts[i]) e.setAttribute('data-ll', b.ll[0].toFixed(6) + ',' + b.ll[1].toFixed(6)); b.mk = new gl.Marker({ element: e, anchor: 'center', offset: [0, 14], draggable: true }).setLngLat(b.ll).addTo(map); e.setAttribute('aria-label', 'Robot ' + (i + 1)); interact(e, b.mk, { onTap: () => botRef.current && botRef.current.onSelect(b.i), onDrop: ll => { b.ll = ll; setLL(e, ll); if (botRef.current) botRef.current.onDrop(b.i, ll); } }); bots.push(b); } frame(); await L.sleep(reduced() ? 0 : 600 + n * 170); }, async pulse(res) { if (!(await loaded)) return; const centre = res && isFinite(res.lng) && isFinite(res.lat) ? [Number(res.lng), Number(res.lat)] : P; const c = circle(centre, (res && Number(res.radius_m)) || 1000); setData('svp-radius', c); frame(c.coordinates[0]); for (const b of bots) { b.el.classList.remove('pulse'); void b.el.offsetWidth; b.el.classList.add('pulse'); b.el.setAttribute('data-pulsed', String(Number(b.el.getAttribute('data-pulsed') || 0) + 1)); await L.sleep(reduced() ? 0 : 170); } await L.sleep(reduced() ? 400 : 1300); bots.forEach(b => b.el.classList.remove('pulse')); }, async spread(n) { if (!(await loaded)) return null; const c = map.getContainer(), x0 = PAD.left, y0 = PAD.top, x1 = c.clientWidth - PAD.right, y1 = c.clientHeight - PAD.bottom; const pp = map.project(P), cand = []; for (let y = y0 + 12; y <= y1 - 12; y += 24) for (let x = x0 + 12; x <= x1 - 12; x += 24) { const d = Math.hypot(x - pp.x, y - pp.y); if (d < 60) continue; let road = false; try { road = map.queryRenderedFeatures([[x - 3, y - 3], [x + 3, y + 3]]).some(f => /road|street|path/.test(f.sourceLayer || (f.layer && f.layer.id) || '')); } catch (e) { } cand.push({ x, y, d, road }); } cand.sort((a, b) => (b.road - a.road) || (a.d - b.d)); const sep = Math.max(90, Math.min(x1 - x0, y1 - y0) * 0.35), out = []; for (const k of [1, 0.6, 0.3, 0]) for (const q of cand) { if (out.length < n && !out.includes(q) && out.every(o => Math.hypot(o.x - q.x, o.y - q.y) >= sep * k)) out.push(q); } return out.map(q => { const ll = map.unproject([q.x, q.y]); return [ll.lng, ll.lat]; }); }, async highlight(idx) { if (!(await loaded)) return; chosen = byI(idx) || nearest(); bots.forEach(b => b.el.classList.toggle('chosen', b === chosen)); if (chosen) setTag(chosen, 'Nearest robot'); await L.sleep(reduced() ? 0 : 400); }, async commit(label, idx) { if (!(await loaded)) return; if (!bots.length) await api.spawn(1); if (byI(idx)) chosen = byI(idx); if (!chosen) chosen = nearest(); chosen.el.classList.add('chosen'); bots.forEach(b => { if (b !== chosen) b.el.classList.add('gone'); }); setTag(chosen, label); setData('svp-radius'); await L.sleep(reduced() ? 0 : 700); bots.forEach(b => { if (b !== chosen) b.mk.remove(); }); bots = [chosen]; chosen.d = 0; path = null; frame(); }, async drawRoute(json, opts = {}) { if (!(await loaded) || !chosen) return 'none'; let legs = [], source = 'response'; if (opts.approx) { source = 'directions'; try { legs = [await walk(chosen.ll, P), await walk(P, D)]; } catch (e) { legs = []; } if (dead) return 'none'; } else { legs = ((json && json.legs) || []).map(l => legCoords(l && l.route)).filter(c => c.length > 1); } if (!legs.length) { legs = [[chosen.ll, P], [P, D]]; source = 'straight'; } const raw = legs.flat(); const coords = raw.filter((c, i) => !i || c[0] !== raw[i - 1][0] || c[1] !== raw[i - 1][1]); path = mkPath(coords, legs.length > 1 ? legs[0].length - 1 : null); chosen.ll = path.coords[0]; chosen.mk.setLngLat(chosen.ll); chosen.d = 0; setLegs(legs); setData('svp-prog'); frame(path.coords); await L.sleep(reduced() ? 0 : 800); return source; }, async driveTo(target, loc) { if (!(await loaded) || !chosen) return; const q = loc && isFinite(loc.lng) && isFinite(loc.lat) ? [Number(loc.lng), Number(loc.lat)] : null; if (q && !path) { const from = chosen.ll; faceAlong(from, q); await L.tween(1400, e => { chosen.ll = [from[0] + (q[0] - from[0]) * e, from[1] + (q[1] - from[1]) * e]; chosen.mk.setLngLat(chosen.ll); }); return; } path = path || mkPath([chosen.ll, P, D], 1); let to = { merchant: path.mD, approach: path.aD, customer: path.cD }[target]; if (q) { const near = onPath(q); if (near.off > 40) { const from = chosen.ll; faceAlong(from, q); await L.tween(1400, e => { chosen.ll = [from[0] + (q[0] - from[0]) * e, from[1] + (q[1] - from[1]) * e]; chosen.mk.setLngLat(chosen.ll); }); chosen.d = near.d; progTo(near.d); return; } to = near.d; } const from = chosen.d; if (!(to > from)) return; if (reduced()) faceAlong(polyAt(path.coords, path.cum, from), polyAt(path.coords, path.cum, to)); await L.tween(Math.min(3600, Math.max(1400, (to - from) / path.total * 5200)), e => { chosen.d = from + (to - from) * e; chosen.ll = polyAt(path.coords, path.cum, chosen.d); faceOn(chosen.d, to); chosen.mk.setLngLat(chosen.ll); progTo(chosen.d); }); }, async loading() { if (!(await loaded) || !chosen) return; el.current.setAttribute('data-scene', 'loading'); if (reduced()) map.jumpTo({ center: P, zoom: 17.4 }); else map.easeTo({ center: P, zoom: 17.4, duration: 1000 }); await L.sleep(reduced() ? 0 : 1050); await handoff(P, true); el.current.removeAttribute('data-scene'); frame(path ? path.coords : null, 1000); await L.sleep(reduced() ? 0 : 1000); }, async celebrate() { if (!(await loaded)) return; if (chosen) { map.easeTo({ center: D, zoom: 17.4, duration: reduced() ? 0 : 1000 }); await L.sleep(reduced() ? 0 : 1050); await handoff(D, false); frame(path ? path.coords : null, 1000); } const e = pins.cust.getElement(); e.classList.remove('celebrate'); void e.offsetWidth; e.classList.add('celebrate', 'done'); await L.sleep(reduced() ? 0 : 900); }, async failMark(where) { if (!(await loaded)) return; if (mark) mark.remove(); mark = new gl.Marker({ element: div(``, 'svp-mk svp-mx xmark'), anchor: 'center', offset: [0, -40] }) .setLngLat(where === 'customer' ? D : P).addTo(map); mark.getElement().setAttribute('data-where', where); }, async clearMarks() { if (mark) { mark.remove(); mark = null; } }, ghosts(pts, h) { ghostMks.forEach(m => m.remove()); ghostMks = []; if (!map) return; pts.forEach((ll, k) => { const e = div(botHtml(k).replace(/Robot \d+/, 'Placed ' + (k + 1)), 'svp-mk svp-mbot ghost'); e.setAttribute('aria-label', `Placed robot ${k + 1}: Enter removes it`); setLL(e, ll); const mk = new gl.Marker({ element: e, anchor: 'center', offset: [0, 14], draggable: true }).setLngLat(ll).addTo(map); interact(e, mk, { onTap: () => h.onRemove(k), onDrop: g => { setLL(e, g); h.onMove(k, g); } }); ghostMks.push(mk); }); }, async moveBot(i, ll, ms = 900) { const b = byI(i); if (!b || !(await loaded)) return; const from = b.ll; if (ms >= 900) faceAlong(from, ll, b.el); setLL(b.el, ll); await L.tween(ms, e => { b.ll = [from[0] + (ll[0] - from[0]) * e, from[1] + (ll[1] - from[1]) * e]; b.mk.setLngLat(b.ll); }); }, async removeBot(i) { const b = byI(i); if (!b) return; b.el.classList.add('gone'); bots = bots.filter(x => x !== b); if (chosen === b) chosen = null; await L.sleep(reduced() ? 0 : 600); b.mk.remove(); }, select(i) { bots.forEach(b => b.el.classList.toggle('sel', b.i === i)); }, lock(i) { bots.forEach(b => { const on = b.i === i; b.mk.setDraggable(!on); if (on) b.el.title = 'Assigned to the active job, so it cannot be moved'; else b.el.removeAttribute('title'); b.el.setAttribute('aria-label', `Robot ${b.i + 1}` + (on ? ': assigned to the active job, so it cannot be moved' : '')); }); }, async powerDown() { if (!(await loaded)) return; bots.forEach(b => b.el.classList.add('gone')); await L.sleep(reduced() ? 0 : 700); clearBots(); last = null; setData('svp-radius'); }, async reset() { if (!(await loaded)) return; clearBots(); if (scene) { scene.remove(); scene = null; } api.clearMarks(); setData('svp-radius'); pins.cust.getElement().classList.remove('celebrate', 'done'); frame(null, 0); }, async setPlaces(pl) { if (!(await loaded)) return; const n = bots.length, keep = last; P = lngLat(pl.pickup); D = lngLat(pl.dropoff); pins.merch.setLngLat(P); pins.cust.setLngLat(D); pins.merch.getElement().querySelector('.svp-mplate').textContent = placeTitle(pl.pickup, 'pickup'); pins.cust.getElement().querySelector('.svp-mplate').textContent = placeTitle(pl.dropoff, 'dropoff'); await api.reset(); if (n) await api.spawn(n, keep); }, }; apiRef.current = api; return () => { dead = true; L.stop(); settle(false); mo.disconnect(); if (apiRef.current === api) apiRef.current = null; if (map) map.remove(); }; }, [token, apiRef, onFail]); return

; } export const Icon = ({ name }) => { if (name === 'play') return ; if (name === 'tick') return ; if (name === 'retry') return ; if (name === 'caret') return ; if (name === 'pin') return ; if (name === 'tool') return ; if (name === 'spark') return ; if (name === 'store') return ; return null; }; export const tabKeys = (values, current, set) => e => { const i = values.indexOf(current); let n = -1; if (e.key === 'ArrowRight' || e.key === 'ArrowDown') n = (i + 1) % values.length; else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') n = (i - 1 + values.length) % values.length; else if (e.key === 'Home') n = 0; else if (e.key === 'End') n = values.length - 1; if (n < 0) return; e.preventDefault(); set(values[n]); const b = e.currentTarget.querySelectorAll('[role="tab"]')[n]; if (b) b.focus(); }; export const MINI_PATH = atlasPath(A_SPOTS[0]); export function MiniMap({ stage, routeShown }) { const P = MINI_PATH; const d = stage < 1 ? 0 : stage < 3 ? P.mD : stage === 3 ? P.aD : P.cD; const [x, y] = polyAt(P.pts, P.cum, d); const dpath = pathD(P.pts); return ( ); } export function FailureCard({ r, onRetry, busy, onAction, actionLabel }) { return (

{r.id} {r.badge || r.status || 'ERR'}

Cause: {r.cause}
Remedy: {r.remedy}

{r.fix && (

)} {r.action && onAction && (

)}

); } export const StatusBar = () => ( ); export const STAGE_TARGET = [null, 'merchant', 'merchant', 'approach', 'customer', 'customer']; export function AppScreen({ s, onRetry, onAction, actionLabel }) { const app = s.app, pk = s.places.pickup, dr = s.places.dropoff; const courier = s.job && s.job.courier && s.job.courier.courier_id ? s.job.courier.courier_id : 'your robot'; const hero = (h, p) =>

{h}

{p &&

{p}

}

; const art = count => (

{count != null && {count}}

); let body = null, cta = '', quiet = false; if (app.screen === 'idle') { body = <>{art()}{hero('Get it delivered by robot', 'Run a step and this order screen follows along.')}; cta = 'Check robots nearby'; } else if (app.screen === 'fleet') { body = <>{art(app.count)}{hero(`${app.count} robot${app.count === 1 ? '' : 's'} online in your area`, 'Sandbox robots, simulated for testing.')}

{app.robots.map(r => {r})}

; cta = 'Get a delivery price'; } else if (app.screen === 'nearby') { body = app.count > 0 ? <>{art(app.count)}{hero(`${app.count} robot${app.count === 1 ? '' : 's'} near ${pk.name}`, `On duty within ${app.radius} m.`)} : hero(`No robots near ${pk.name}`, 'Serve has no coverage at this address yet.'); cta = 'Get a delivery price'; } else if (app.screen === 'quote') { const q = app.quote; body = <>{hero('Delivery by robot', 'Priced before anything is dispatched.')}

From: {pk.name}
To: {placeTitle(dr, 'dropoff')}
Delivery fee: {money(q.fee, q.currency)}
Pickup: in about {q.pickup_estimate_minutes} min
Dropoff: by {clock(q.dropoff_eta)}
Quote valid: 5 minutes

; cta = `Place order · ${money(q.fee, q.currency)}`; } else if (app.screen === 'track') { const i = Math.max(0, s.stage), j = s.job || {}; const head = [`Order placed`, `${courier} is heading to ${pk.name}`, 'Your order is being loaded', `On the way to ${dr.name}`, 'Your robot is outside', 'Delivered'][i]; const sub = [`Robot ${courier} is assigned. Waiting for it to set off.`, j.pickup_eta ? `Pickup around ${clock(j.pickup_eta)}.` : '', `Staff at ${pk.name} are placing it in the robot.`, j.dropoff_eta ? `Dropoff by ${clock(j.dropoff_eta)}.` : '', `At ${dr.address.street_address_1}. The lid opens for ${dr.name}.`, `Delivered to ${dr.name}${app.time ? ' at ' + clock(app.time) : ''}.`][i]; body = <>

{hero(head, sub)}

Order: {j.external_order_id || j.delivery_id}
{it.name}: {it.quantity} item{it.quantity === 1 ? '' : 's'}

; cta = i === 5 ? 'Rate this delivery' : 'Track order'; quiet = i !== 5; } else if (app.screen === 'fail' && s.fail) { body = <>

We couldn’t place this order

The API said no. Here is why, and the fix.

; cta = 'Try again'; quiet = true; } else if (app.screen === 'info') { body = <>{app.art && art()}{hero(app.title, app.text)}; cta = app.cta || 'Track order'; quiet = true; } return (

{pk.name}Delivery by sidewalk robot

{body}

); } export function AgentChat({ s, onRetry, onAction, actionLabel }) { const a = s.agent; return (

Delivery agentConcept · tools from Serve MCP

{!a ? (

Run a step. An AI agent does the same step here through Serve’s MCP server, calling search-endpoints, get-endpoint and execute-request.

) : ( <>

{a.user}

{a.tools.map((t, i) => (

{t.name}

{t.args}

{t.result}

))}

{a.reply}

{a.fail && s.fail && s.fail.r.fix && ( )} {a.fail && s.fail && s.fail.r.action && onAction && ( )} )}

); } export function FailDropdown({ value, onChange, disabled }) { const [open, setOpen] = useState(false); const [active, setActive] = useState(0); const btn = useRef(null), list = useRef(null); const idx = Math.max(0, REJECTIONS.findIndex(r => r.id === value)); const cur = REJECTIONS[idx]; useEffect(() => { if (!open || !list.current) return; list.current.focus(); const o = list.current.children[active]; if (o && o.scrollIntoView) o.scrollIntoView({ block: 'nearest' }); }, [open, active]); const close = refocus => { setOpen(false); if (refocus && btn.current) btn.current.focus(); }; const pick = i => { onChange(REJECTIONS[i].id); close(true); }; const onBtnKey = e => { if (['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(e.key)) { e.preventDefault(); setActive(idx); setOpen(true); } }; const onListKey = e => { const last = REJECTIONS.length - 1; if (e.key === 'ArrowDown') { e.preventDefault(); setActive(a => Math.min(last, a + 1)); } else if (e.key === 'ArrowUp') { e.preventDefault(); setActive(a => Math.max(0, a - 1)); } else if (e.key === 'Home') { e.preventDefault(); setActive(0); } else if (e.key === 'End') { e.preventDefault(); setActive(last); } else if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); pick(active); } else if (e.key === 'Escape') { e.preventDefault(); close(true); } else if (e.key === 'Tab') close(false); }; return (

{open && ( )}

); } export function AddressField({ which, label, place, token, disabled, armed, onArm, onPick, onText, proximity }) { const [q, setQ] = useState(place.label); const [items, setItems] = useState([]); const [open, setOpen] = useState(false); const [act, setAct] = useState(0); const listId = 'svp-ac-' + which; useEffect(() => { setQ(place.label); }, [place.label]); useEffect(() => { if (!token || !open) return undefined; const term = q.trim(); if (term.length < 3 || term === place.label) { setItems([]); return undefined; } const ctl = new AbortController(); const t = setTimeout(() => { fetch(`https://api.mapbox.com/search/geocode/v6/forward?q=${encodeURIComponent(term)}&proximity=${proximity[0]},${proximity[1]}&limit=5&access_token=${encodeURIComponent(token)}`, { signal: ctl.signal }) .then(r => r.json()) .then(j => { setItems((j.features || []).map(f => featureToPlace(f, term)).filter(x => isFinite(x.location.lat))); setAct(0); }) .catch(() => {}); }, 260); return () => { clearTimeout(t); ctl.abort(); }; }, [q, open, token]); const showList = !!token && open && items.length > 0; const choose = i => { const it = items[i]; if (!it) return; onPick(it); setOpen(false); setItems([]); }; const onKey = e => { if (!token) return; if (e.key === 'ArrowDown') { e.preventDefault(); setOpen(true); setAct(a => Math.min(items.length - 1, a + 1)); } else if (e.key === 'ArrowUp') { e.preventDefault(); setAct(a => Math.max(0, a - 1)); } else if (e.key === 'Enter') { if (showList) { e.preventDefault(); choose(act); } } else if (e.key === 'Escape') { if (open) { e.preventDefault(); setOpen(false); } } }; return (

{label}

{ setQ(e.target.value); setOpen(true); if (!token) onText(e.target.value); }} onFocus={() => setOpen(true)} onBlur={() => setOpen(false)} onKeyDown={onKey} /> {token && ( )}

{showList && ( )}

); } export function Terminal({ s, tab, setTab }) { const bodyRef = useRef(null); const [copied, setCopied] = useState(false); useEffect(() => { const el = bodyRef.current; if (el) el.scrollTop = el.scrollHeight; }, [s.logRev, tab]); const tabs = [['log', 'Log'], ['hooks', 'Webhooks'], ['curl', 'curl'], ['js', 'JavaScript'], ['python', 'Python']]; const code = s.lastReq && tab !== 'log' && tab !== 'hooks' ? snippet(s.lastReq, tab) : ''; const copy = () => { if (typeof navigator === 'undefined' || !navigator.clipboard) return; navigator.clipboard.writeText(code).then(() => setCopied(true), () => {}); }; useEffect(() => { if (!copied) return undefined; const t = setTimeout(() => setCopied(false), 1400); return () => clearTimeout(t); }, [copied]); return (

Terminal {s.mode === 'live' && ( WebSocket · {{ on: 'Connected', off: 'Off', connecting: 'Connecting', retry: 'Reconnecting' }[s.ws]} )}

t[0]), tab, setTab)}> {tabs.map(([v, l]) => ( ))}

{code && }

{tab === 'log' ? ( s.log.length === 0 ? (

# Requests and responses append here, newest at the bottom.
$

) : s.log.map(e => e.t === 'note' ? (

# {e.text}

) : (

{e.step &&

# {e.step.n} · {e.step.title}

} {e.note &&

# {e.note}

}

> {e.method} {e.path}

{e.body &&

}
              {e.res ? (
                <>
                  = 200 && e.res.status < 300 ? 'ok' : 'bad')}>
                    < {e.res.status || 'ERR'} {STATUS_TEXT[e.res.status] || ''} · {e.res.ms} ms · {e.src === 'live' ? 'live sandbox' : 'contract example'}
                  
                                  
              ) : < waiting for the response}

)) ) : tab === 'hooks' ? ( <>

{s.mode === 'live' && s.hooks.some(h => h.ws) ? '# Live events from the WebSocket — the same envelope Serve POSTs to your webhook_url.' : '# Preview of webhook deliveries — payload shape from the v1 webhook contract; the playground can’t receive webhooks in your browser.'}

Verify the signature

{s.hooks.length === 0 ? (

# Commit a job (step 4 or 7). Each status change appears here as the POST your webhook_url receives.

) : s.hooks.map(h => (

{h.ws ?

< WS {h.body.kind}

: <>

> POST {'{webhook_url}'}

Content-Type: application/json
X-SERVE-ROBOTICS-SIGNATURE: <hmac-sha256 of body>

}

))} ) : code ? (

        ) : (
          # Run a step. Its request appears here as curl, JavaScript or Python.
        )}

); } export const COLOR_KEY = 'color-scheme'; export const darkNow = () => typeof document !== 'undefined' && document.documentElement.getAttribute('data-color-mode') === 'dark'; export const setColorMode = mode => { document.documentElement.setAttribute('data-color-mode', mode); document.querySelectorAll('.rm-ReadMe').forEach(el => el.setAttribute('data-color-mode', mode)); try { localStorage.setItem(COLOR_KEY, mode); } catch (e) {} }; export function ThemeToggle() { const [dark, setDark] = useState(false); useEffect(() => { let saved = null; try { saved = localStorage.getItem(COLOR_KEY); } catch (e) {} setColorMode(saved === 'dark' ? 'dark' : 'light'); const sync = () => setDark(darkNow()); sync(); const mo = new MutationObserver(sync); mo.observe(document.documentElement, { attributes: true, attributeFilter: ['data-color-mode'] }); return () => mo.disconnect(); }, []); return ( ); } export const PHONE = '(max-width:720px), (max-height:540px) and (max-width:979px)'; export function ServePlayground({ mapboxToken = MAPBOX_TOKEN, mode: initialMode = 'contract', demoPartnerId = '', demoApiKey = '' }) { const demo = demoPartnerId && demoApiKey && !DEMO_PLACEHOLDERS.includes(demoPartnerId) && !DEMO_PLACEHOLDERS.includes(demoApiKey) ? { partnerId: demoPartnerId, apiKey: demoApiKey } : null; const S = useRef(null); if (!S.current) S.current = { mode: initialMode, apiKey: demo ? demo.apiKey : '', partnerId: demo ? demo.partnerId : '', log: [], logRev: 0, seq: 0, lastReq: null, stage: -1, quote: null, job: null, route: null, robots: 0, done: {}, fleet: null, fleetPts: null, fleetIds: [], setup: '', hooks: [], hookSeq: 0, hookIds: {}, placing: false, ghosts: [], sel: null, selReady: null, sendFor: null, downConfirm: null, jobBot: null, ws: 'off', wsAt: {}, wsLast: {}, busy: false, running: null, compound: null, arm: null, app: { screen: 'idle' }, agent: null, fail: null, caption: '', places: { pickup: DEFAULT_PLACES.pickup, dropoff: DEFAULT_PLACES.dropoff }, reject: 'pickup_untraversable', }; const s = S.current; const [, bump] = useState(0); const sync = useCallback(() => bump(x => x + 1), []); const [view, setView] = useState('app'); const [pane, setPane] = useState('steps'); const showPane = (v, tab) => { setPane(v); if (!window.matchMedia(PHONE).matches) return; const desk = tab.closest('.svp-desk'); requestAnimationFrame(() => (v === 'steps' ? desk : desk.querySelector('.svp-seg')).scrollIntoView({ block: 'start' })); }; useEffect(() => { if (!window.matchMedia(PHONE).matches) return; const li = document.querySelector('.svp-step[data-running="true"]'); if (li) li.scrollIntoView({ block: 'nearest', behavior: 'smooth' }); }, [s.running, s.compound]); const [term, setTerm] = useState('log'); const [mapFailed, setMapFailed] = useState(false); const mapApi = useRef(null), life = useRef(null), clickRef = useRef(null), botRef = useRef(null), onFrame = useRef(null); const placesRef = useRef(s.places); placesRef.current = s.places; const onMapFail = useCallback(() => setMapFailed(true), []); const useMapbox = !!mapboxToken && !mapFailed; useEffect(() => { const L = makeLife(); life.current = L; return () => L.stop(); }, []); useEffect(() => { try { const k = window.sessionStorage.getItem('serve_api_key'); if (k) { S.current.apiKey = k; sync(); } } catch (e) { } try { const pid = window.sessionStorage.getItem('serve_partner_id'); if (pid) { S.current.partnerId = pid; sync(); } } catch (e) { } const prev = storedFleet(); if (prev) releaseFleet({ ...prev, live: true, key: S.current.apiKey }); }, [sync]); useEffect(() => { const leave = () => releaseFleet(S.current.fleet); window.addEventListener('pagehide', leave); return () => { window.removeEventListener('pagehide', leave); leave(); }; }, []); const setCred = (field, storeKey, v) => { s[field] = v; try { if (v) window.sessionStorage.setItem(storeKey, v); else window.sessionStorage.removeItem(storeKey); } catch (err) { } sync(); }; const onDemo = !!demo && s.partnerId === demo.partnerId && s.apiKey === demo.apiKey; const useDemo = () => { s.partnerId = demo.partnerId; s.apiKey = demo.apiKey; try { window.sessionStorage.removeItem('serve_partner_id'); window.sessionStorage.removeItem('serve_api_key'); } catch (err) { } sync(); }; const map = () => mapApi.current || NOOP_MAP; const alive = () => !!(life.current && life.current.alive); const sleep = ms => (life.current ? life.current.sleep(ms) : Promise.resolve()); const show = (app, agent, caption) => { if (app) s.app = app; if (agent !== undefined) s.agent = agent; if (caption) s.caption = caption; sync(); }; const begin = st => { if (!s.compound) s.running = st.id; sync(); }; const finish = st => { s.done[st.id] = true; sync(); return true; }; const courierOf = j => { const id = j && j.courier && j.courier.courier_id; return id ? String(id).split('.').pop() : 'the robot'; }; const pushNote = text => { s.log = [...s.log, { id: ++s.seq, t: 'note', text }]; s.logRev++; sync(); }; const partnerOf = () => (s.mode === 'live' && s.partnerId.trim()) || PARTNER; async function call(kind, method, path, body, step, extra = {}) { const full = `/v2/partners/${encodeURIComponent(partnerOf())}${path}`; const e = extra.entry || { id: ++s.seq, t: 'req', step, method, path: full, body: body || null, src: s.mode }; e.note = extra.note; e.res = null; s.lastReq = { method, path: full, body: body || null }; s.log = extra.entry ? [...s.log] : [...s.log, e]; s.logRev++; sync(); const t0 = Date.now(); let status = 0, json = null; if (s.mode === 'contract') { await sleep(240); ({ status, json } = contractRespond(kind, body, { pickup: lngLat(s.places.pickup), status: extra.status, ...extra.ctx })); } else { try { const headers = { Accept: 'application/json' }; if (body) headers['Content-Type'] = 'application/json'; if (s.apiKey) headers['X-API-Key'] = s.apiKey; const res = await fetch(BASE + full, { method, headers, body: body ? JSON.stringify(body) : undefined }); status = res.status; const text = await res.text(); try { json = text ? JSON.parse(text) : {}; } catch (err) { json = { raw: text.slice(0, 2000) }; } } catch (err) { status = 0; json = { error: String((err && err.message) || err) }; } } if (!alive()) return { ok: false, status, json: json || {}, entry: e }; e.res = { status, json, ms: Date.now() - t0 }; s.log = [...s.log]; s.logRev++; sync(); return { ok: status >= 200 && status < 300, status, json: json == null ? {} : json, entry: e }; } const tpl = st => '/v2/partners/{partner_id}' + st.path; const agentFor = (st, req, r, reply, ask) => ({ user: ask || st.ask || 'Do the next step.', tools: [ { name: 'search-endpoints', args: `query: "${st.query}"`, result: `${req.method} ${tpl(st)}` }, { name: 'get-endpoint', args: `${req.method} ${tpl(st)}`, result: `${st.op} · ${st.schema}` }, { name: 'execute-request', args: harLine(req), result: `${r.status || 'ERR'} ${STATUS_TEXT[r.status] || ''}`.trim(), bad: !r.ok }, ], reply, fail: !r.ok, }); const failed = (st, r, ask) => { let d = describe(r.status, r.json); if (d.id === 'couriers_busy' && st.id === 'quote' && s.mode === 'live' && s.robots) { d = { ...d, cause: 'Your robots are online, but the sandbox did not offer a quote.', remedy: 'Retry in a moment. The fleet stays up; power it down with step 9 when you are done.' }; } s.fail = { r: d, step: st.id }; show({ screen: 'fail' }, agentFor(st, s.lastReq, r, `That failed with ${d.id}${d.status ? ' (' + d.status + ')' : ''}. ${d.cause} ${d.remedy}${d.fix ? ' I can retry with the fix applied.' : ''}`, ask), `Request rejected: ${d.id}. Nothing moves until the fix is applied.`); map().failMark(failWhere(d.id)); return false; }; const clearFail = () => { if (!s.fail) return; s.fail = null; map().clearMarks(); if (s.app.screen === 'fail') s.app = s.job ? { screen: 'track' } : { screen: 'idle' }; }; const courierCtx = () => { const i = nearestIdx(); return i == null ? {} : { ctx: { courier: s.fleetIds[i], courierAt: s.fleetPts[i], partner: partnerOf() } }; }; const nearestIdx = () => { if (!s.fleetPts) return undefined; const pk = lngLat(s.places.pickup); return s.fleetPts.reduce((b, p, i) => (geoDist(p, pk) < geoDist(s.fleetPts[b], pk) ? i : b), 0); }; const hook = (kind, payload, ev) => { s.hooks = [...s.hooks, { id: ++s.seq, body: { created: (ev && ev.timestamp) || new Date().toISOString(), event_id: (ev && ev.event_id) || 'evt_' + Math.random().toString(36).slice(2, 12), kind, sequence_id: ++s.hookSeq, payload } }]; s.logRev++; sync(); }; const statusHook = (j, ev, status) => hook('event.delivery_status', { delivery_id: j.delivery_id, status: status || j.status, pickup_eta: j.pickup_eta || null, dropoff_eta: j.dropoff_eta || null, partner_metadata: j.partner_metadata || {} }, ev); const jobHooks = (j, final) => { if (s.mode === 'live' && s.ws === 'on') return; const evs = s.mode === 'live' && Array.isArray(j.events) ? j.events.filter(e => e && e.event_id) : []; if (!evs.length) { statusHook(j); return; } if (!final) return; evs.filter(e => !s.hookIds[e.event_id]).sort((a, b) => String(a.timestamp).localeCompare(String(b.timestamp))) .forEach(e => { s.hookIds[e.event_id] = true; statusHook(j, e, EVENT_STATUS[e.event_name] || j.status); }); }; const courierHook = (i, loc) => { if (s.mode === 'live' && s.ws === 'on') return; const j = s.job || {}, pk = s.places.pickup.location, dr = s.places.dropoff.location; const at = loc || [j.courier && j.courier.location, pk, { lat: (pk.lat + dr.lat) / 2, lng: (pk.lng + dr.lng) / 2 }, dr][i - 1] || pk; hook('event.courier_status', { courier_id: (j.courier && j.courier.courier_id) || courierOf(j), delivery_id: j.delivery_id, lat: Number(at.lat), lng: Number(at.lng), partner_metadata: j.partner_metadata || {} }); }; const quoteBody = () => ({ pickup: waypoint(s.places.pickup), dropoff: waypoint(s.places.dropoff) }); const jobBody = extra => ({ ...extra, pickup: waypoint(s.places.pickup, true), dropoff: waypoint(s.places.dropoff, true), external_order_id: 'SP 937-215', delivery_items: [{ name: 'Burrito', quantity: 1 }] }); const idsOf = list => (Array.isArray(list) ? list : []).map(x => (typeof x === 'string' ? x : x && (x.robot_id || x.courier_id || x.id || x.name))).filter(Boolean); const forgetFleet = () => { const f = s.fleet, st = storage(); if (f && st) { const cur = storedFleet(); if (cur && cur.id === f.id) st.removeItem(FLEET_KEY); } Object.assign(s, { fleet: null, fleetPts: null, fleetIds: [], robots: 0, sel: null, sendFor: null, jobBot: null }); }; const capFailed = (st, r) => failed(st, { ...r, json: { code: 'fleet_cap_reached', detail: (r.json && r.json.detail) || '' } }); async function offline(st, r) { if (s.fleet) s.fleet.released = true; forgetFleet(); delete s.done.fleet; delete s.done.nearby; await map().powerDown(); return failed(st, { ...r, ok: false, json: { code: 'robots_offline' } }); } const isBusy = r => !r.ok && r.json && r.json.code === 'couriers_busy'; async function warmCall(st, kind, path, body, extra = {}) { let r = await call(kind, 'POST', path, body, st, extra); if (s.mode !== 'live' || !s.fleet || !isBusy(r)) return r; pushNote('couriers_busy right after setup: new robots take about 30 s to come online. Retrying every 4 s…'); const t0 = Date.now(), secs = () => Math.round((Date.now() - t0) / 1000); let entry = null, n = 1; while (alive() && isBusy(r) && Date.now() - t0 < 75000) { for (let k = 0; k < 4 && alive(); k++) { s.setup = `Waiting for a courier to come online… ${secs()} s`; show({ screen: 'info', art: true, title: 'Waiting for a courier to come online…', text: `New sandbox robots take about 30 s. ${secs()} s so far.`, cta: 'Get a delivery price' }, undefined, s.setup); await sleep(1000); } if (!alive()) break; r = await call(kind, 'POST', path, body, st, { ...extra, entry, note: `retry ${++n} · ${secs()} s after the first attempt` }); entry = r.entry; } s.setup = ''; return r; } async function checkFleet(st, ask) { if (s.mode !== 'live' || !s.fleet) return true; const path = `/simulated_fleet/fleets/${encodeURIComponent(s.fleet.id)}/status`; const r = await call('status', 'GET', path, null, st, { note: 'Quick check: are the robots still up?' }); if (!alive()) return false; if (!r.ok && r.status !== 404) return failed(st, r, ask); return fleetUp(r.json) ? true : offline(st, r); } const bgCheck = useRef(null); bgCheck.current = async () => { const f = s.fleet; if (!f || !f.live || f.released || s.mode !== 'live' || s.busy || !s.done.fleet) return; let res, j; try { res = await fetch(`${BASE}/v2/partners/${encodeURIComponent(f.partner)}/simulated_fleet/fleets/${encodeURIComponent(f.id)}/status`, { headers: { Accept: 'application/json', ...(f.key ? { 'X-API-Key': f.key } : {}) } }); if (!res.ok && res.status !== 404) return; j = res.ok ? await res.json() : []; } catch (e) { return; } if (!alive() || s.fleet !== f || s.busy || fleetUp(j)) return; pushNote(`Background check: fleet ${f.id} has no ready robots any more.`); await offline(STEP.fleet, { status: res.status, json: j }); s.agent = { user: 'Are my test robots still up?', tools: [], reply: `No. ${LOCAL_FAILS.robots_offline.cause} I can set them up again.`, fail: true }; sync(); }; useEffect(() => { const id = setInterval(() => bgCheck.current(), 10000); return () => clearInterval(id); }, []); async function doFleet(drops) { const st = STEP.fleet; begin(st); clearFail(); const own = Array.isArray(drops) && drops.length ? drops.slice(0, MAX_ROBOTS) : null; const n = own ? own.length : 3, live = s.mode === 'live', pk = s.places.pickup.location; const start = own ? { lat: own.reduce((a, q) => a + q[1], 0) / n, lng: own.reduce((a, q) => a + q[0], 0) / n } : pk; Object.assign(s, { placing: false, ghosts: [], sel: null, sendFor: null }); map().ghosts([]); const tools = [{ name: 'search-endpoints', args: `query: "${st.query}"`, result: 'POST …/simulated_fleet/fleets · …/power_up · GET …/ready · POST …/robots/{robot_id}/location' }]; const sub = (path, title) => ({ ...st, path, title: `${st.title} · ${title}` }); const progress = text => { s.setup = text; show({ screen: 'info', art: true, title: `Setting up ${n} sandbox robots`, text, cta: 'Get a delivery price' }, { user: st.ask, tools: [...tools], reply: text, fail: false }, text); }; const exec = async (kind, method, path, body, title, extra = {}) => { progress(`${title}…`); const r = await call(kind, method, path, body, sub(path, title), extra); tools.push({ name: 'execute-request', args: harLine(s.lastReq), result: `${r.status || 'ERR'} ${STATUS_TEXT[r.status] || ''}`.trim(), bad: !r.ok }); return r; }; const lost = r => r.status === 0 || r.status === 401 || r.status === 403 || r.status >= 500; const prev = (s.fleet && !s.fleet.released && s.fleet) || (live && storedFleet()) || null; if (prev) { const path = `/simulated_fleet/fleets/${encodeURIComponent(prev.id)}/power_down`; const r = await exec('fleet_down', 'POST', path, null, 'Power down the previous fleet'); if (!alive()) return false; if (!r.ok && lost(r)) return failed(sub(path, 'Power down the previous fleet'), r); if (s.fleet) s.fleet.released = true; forgetFleet(); if (storage()) storage().removeItem(FLEET_KEY); await map().powerDown(); } else pushNote('No earlier fleet in this session, so there is nothing to power down.'); Object.assign(s, { job: null, quote: null, route: null, stage: -1, robots: 0, fleetPts: null, fleetIds: [] }); const prefix = `cor_pg-${sessionId()}-`; const created = await exec('fleet_create', 'POST', '/simulated_fleet/fleets', { fleet_size: n, robot_naming_prefix: prefix, start_gps: { lat: +start.lat.toFixed(6), lng: +start.lng.toFixed(6) }, auto_advance_jobs: false, max_robot_speed_mph: 5, gps_telemetry_frequency: 1000, job_assignment_poll_frequency: 5000, auto_job_event_frequency: 45000, randomized_starting_offset_meters: 5 }, 'Create the fleet', { ctx: { prefix } }); if (!alive()) return false; const createSt = sub('/simulated_fleet/fleets', 'Create the fleet'); if (isCap(created)) return capFailed(createSt, created); if (!created.ok) return failed(createSt, created); const fleetId = created.json.id || created.json.fleet_id; if (!fleetId) return failed(createSt, { ...created, json: { code: 'missing_fleet_id' } }); s.fleet = { id: fleetId, live, partner: partnerOf(), key: s.apiKey, released: false }; if (live && storage()) storage().setItem(FLEET_KEY, JSON.stringify({ id: fleetId, partner: s.fleet.partner })); const base = `/simulated_fleet/fleets/${encodeURIComponent(fleetId)}`; const up = await exec('fleet_up', 'POST', base + '/power_up', null, 'Power up', { ctx: { prefix, n } }); if (!alive()) return false; if (isCap(up)) return capFailed(sub(base + '/power_up', 'Power up'), up); if (!up.ok) return failed(sub(base + '/power_up', 'Power up'), up); let ids = idsOf(up.json.robots); const t0 = Date.now(); let entry = null, poll = 0, path = base + '/ready', ready = false; while (alive()) { poll++; const secs = ((Date.now() - t0) / 1000).toFixed(1); progress(`Waiting for the robots to report ready · ${secs} s`); const r = await call(path.endsWith('/ready') ? 'ready' : 'status', 'GET', path, null, sub(path, 'Wait until ready'), { entry, note: poll > 1 ? `poll ${poll} · ${secs} s since power up` : undefined, ctx: { poll, prefix, n } }); entry = r.entry; if (!alive()) return false; if ((r.status === 404 || r.status === 405) && path.endsWith('/ready')) { path = base + '/status'; entry = null; continue; } if (!r.ok) return failed(sub(path, 'Wait until ready'), r); if (Array.isArray(r.json)) { if (!ids.length) ids = idsOf(r.json); ready = r.json.length > 0 && r.json.every(x => x && (x.is_ready === true || x.ready === true)); } else ready = r.json === true || r.json.ready === true; if (ready) break; if (Date.now() - t0 > 60000) return failed(sub(path, 'Wait until ready'), { ...r, json: { code: 'fleet_not_ready' } }); await sleep(1500); } tools.push({ name: 'execute-request', args: harLine(s.lastReq), result: `200 OK · ready after ${poll} poll${poll === 1 ? '' : 's'}`, bad: false }); if (!ids.length) { const r = await exec('status', 'GET', base + '/status', null, 'List the robots', { ctx: { prefix, n } }); if (!alive()) return false; ids = idsOf(r.json); } ids = ids.slice(0, 10); const pts = own || (await map().spread(ids.length)) || []; const spot = i => pts[i] || robotSpot([pk.lng, pk.lat], i); for (let i = 0; i < ids.length; i++) { const [lng, lat] = spot(i), path2 = `/simulated_fleet/robots/${encodeURIComponent(ids[i])}/location`; const r = await exec('location', 'POST', path2, { lat: +lat.toFixed(6), lng: +lng.toFixed(6) }, `Place ${ids[i]}`); if (!alive()) return false; if (!r.ok) return failed(sub(path2, `Place ${ids[i]}`), r); } const placed = ids.map((_, i) => { const [lng, lat] = spot(i); return [+lng.toFixed(6), +lat.toFixed(6)]; }); Object.assign(s, { robots: ids.length, fleetIds: ids, fleetPts: placed, setup: '' }); ids.forEach((id, i) => { s.wsLast[id] = placed[i]; }); show({ screen: 'fleet', count: ids.length, robots: ids }, { user: st.ask, tools, fail: false, reply: ids.length ? `Done. Fleet ${fleetId} is up with ${ids.length} simulated robots (${ids.join(', ')}), placed ${own ? 'where you dropped them' : 'across the map'}. They exist only in your sandbox, and leaving this page powers them down.` : 'The fleet is up but listed no robots.' }, live ? `${ids.length} simulated robots, each at the spot the sandbox placed it.` : `${ids.length} simulated robots on the map. Their positions are illustrative; the count is from the response.`); await map().spawn(ids.length, placed); return finish(st); } async function doDown() { const st = STEP.down, f = s.fleet; if (!f) return false; begin(st); clearFail(); const r = await call('fleet_down', 'POST', `/simulated_fleet/fleets/${encodeURIComponent(f.id)}/power_down`, null, st); if (!alive()) return false; if (!goneOk(r)) return failed(st, r); if (f.live && s.mode !== 'live') releaseFleet(f); f.released = true; forgetFleet(); Object.assign(s, { job: null, quote: null, route: null, stage: -1, done: {} }); show({ screen: 'info', art: true, title: 'Robots powered down', text: 'Your sandbox fleet is gone. Run step 1 for a new one.', cta: 'Check robots nearby' }, agentFor(st, s.lastReq, r, `Powered down fleet ${f.id}. Its robots are gone from your sandbox.`), 'Robots powered down. Run step 1 to start a new fleet.'); await map().powerDown(); return finish(st); } async function powerDownAll() { const st = { ...STEP.down, path: '/simulated_fleet/power_down', title: 'Power down all robots' }; begin(STEP.fleet); clearFail(); const r = await call('fleet_down_all', 'POST', st.path, null, st); if (!alive()) return; if (!r.ok) { failed(st, r); return; } forgetFleet(); await map().powerDown(); pushNote('Every simulated robot of this partner is powered down. Setting the fleet up again.'); await doFleet(); } async function doNearby() { const st = STEP.nearby; begin(st); clearFail(); const pk = s.places.pickup.location; const far = s.fleetPts ? Math.max(0, ...s.fleetPts.map(p => geoDist(p, [pk.lng, pk.lat]))) : 0; const want = s.fleetPts ? Math.min(50000, Math.max(300, Math.ceil((far + 60) / 50) * 50)) : 1000; const r = await call('nearby', 'GET', `${st.path}?lat=${pk.lat}&lng=${pk.lng}&radius_m=${want}`, null, st, { ctx: { radius: want, count: s.fleetPts ? s.fleetPts.length : undefined } }); if (!r.ok) return failed(st, r); const count = Math.max(0, Number(r.json.count) || 0), radius = Number(r.json.radius_m) || 1000; show({ screen: 'nearby', count, radius }, agentFor(st, s.lastReq, r, `${count} robot${count === 1 ? ' is' : 's are'} on duty within ${radius} m of ${s.places.pickup.name}.`), count ? `${count} robots within ${radius} m: each pulses once, and the ring marks the search radius.` : 'No robots in range. A count of zero means no coverage, not an error.'); if (count && count !== s.robots && !s.job && !s.fleetPts) { s.robots = Math.min(count, 10); await map().spawn(s.robots); } await map().pulse(r.json); return finish(st); } async function doQuote(ask) { const st = STEP.quote; begin(st); clearFail(); if (!(await checkFleet(st, ask))) return false; const r = await warmCall(st, 'quote', st.path, quoteBody()); if (!r.ok) return failed(st, r, ask); const q = r.json, pk = s.places.pickup, dr = s.places.dropoff; s.quote = q; show({ screen: 'quote', quote: q }, agentFor(st, s.lastReq, r, `A robot delivery from ${pk.name} to ${dr.name} costs ${money(q.fee, q.currency)}: pickup in about ${q.pickup_estimate_minutes} min, dropoff by ${clock(q.dropoff_eta)}. The quote holds for 5 minutes. Shall I book it?`, ask), !s.robots ? 'Quoted. Run step 1 to put robots on the map.' : s.mode === 'live' && s.fleetPts ? 'Nearest robot to the pickup highlighted, by its real position. A quote does not reserve a robot.' : 'Nearest robot highlighted (illustrative). A quote does not reserve a robot.'); if (s.robots && !s.job) await map().highlight(nearestIdx()); return finish(st); } async function startJob(st, r, ask, reply) { const j = r.json; if (s.job) { await map().reset(); if (s.robots) await map().spawn(s.robots, s.fleetPts); } s.job = j; s.route = null; const idx = STAGES.findIndex(x => x.id === j.status); s.stage = idx < 0 ? 0 : idx; const c = courierOf(j); show({ screen: 'track' }, agentFor(st, s.lastReq, r, (reply || `Booked. Job ${j.delivery_id} is ${j.status}, and robot ${c} is assigned. Dropoff by ${clock(j.dropoff_eta)}.`) + ' Serve will also POST each status change to your webhook URL; the Webhooks tab in the terminal shows them.', ask), `${c} is assigned to the job. The other robots step back.`); jobHooks(j, true); const cid = j.courier && j.courier.courier_id; const mine = cid ? s.fleetIds.findIndex(id => cid === id || cid.endsWith('.' + id)) : -1; s.jobBot = mine >= 0 ? mine : nearestIdx(); await map().commit(c, mine >= 0 ? mine : undefined); map().lock(s.jobBot); const loc = s.mode === 'live' && j.courier && j.courier.location; if (loc) await map().driveTo(null, loc); } async function doJob(ask) { const st = STEP.job; if (!s.quote) return false; begin(st); clearFail(); if (!(await checkFleet(st, ask))) return false; const r = await call('job', 'POST', st.path, jobBody({ quote_id: s.quote.quote_id }), st, courierCtx()); if (!r.ok) return failed(st, r, ask); s.quote = null; await startJob(st, r, ask); return finish(st); } async function fetchRoute() { const st = STEP.route; begin(st); clearFail(); const r = await call('route', 'GET', `/jobs/${s.job.delivery_id}/route`, null, st); if (r.status === 404 && r.json.code === 'route_not_found') { show(null, agentFor(st, s.lastReq, r, 'The route is no longer available: the job is finished.'), 'Route no longer available: the job is finished.'); return true; } if (!r.ok) return failed(st, r); s.route = r.json; const legs = Array.isArray(r.json.legs) ? r.json.legs : []; const m = legs.reduce((a, l) => a + (Number(l && l.distance) || 0), 0); show({ screen: 'track' }, agentFor(st, s.lastReq, r, `The planned route is ${(m / 1000).toFixed(2)} km over ${legs.length} leg${legs.length === 1 ? '' : 's'}, for courier ${r.json.courier_id || courierOf(s.job)}.`), 'Drawing the route.'); const src = await map().drawRoute(r.json, { approx: s.mode === 'contract' }); s.caption = src === 'directions' ? 'Approximate route (Mapbox walking directions). The terminal shows the contract example response.' : src === 'response' ? 'Serve’s planned route from GET /jobs/{job_id}/route, one line per leg.' : src === 'straight' ? 'Straight lines between the stops: no route geometry was available.' : 'Route drawn on the illustrative streets; the terminal shows the response.'; sync(); return true; } async function doRoute() { if (!s.job) return false; if (!(await fetchRoute())) return false; return finish(STEP.route); } async function playStage(i, r, ask, final) { s.stage = i; const c = courierOf(s.job), pk = s.places.pickup, dr = s.places.dropoff, st = final ? r.json.status : STAGES[i].id; const reply = [null, `I read the job: ${st}. ${c} is driving to ${pk.name}. Advancing starts at pickup_arrived; the fleet sets pickup_en_route itself.`, `Advanced to ${st}. ${c} is at ${pk.name} for loading.`, `Advanced to ${st}. The order is on its way to ${dr.name}.`, `Advanced to ${st}. ${c} is outside ${dr.address.street_address_1}.`, `Advanced to ${st}. Delivered to ${dr.name}.`][i]; const cap = [null, `Pickup en route: ${c} drives to ${pk.name}.`, `Loading at ${pk.name}: the order goes into the robot's locked bin.`, `Dropoff en route: heading to ${dr.name}.`, `Dropoff arrived: ${c} is at the door.`, `Delivered. ${dr.name} has the order.`][i]; show({ screen: 'track', time: i === 5 ? (r.json.updated || new Date().toISOString()) : undefined }, agentFor(i === 1 ? JOB_READ : STEP.advance, s.lastReq, r, reply, ask), cap); const loc = final && s.mode === 'live' && r.json.courier && r.json.courier.location ? r.json.courier.location : null; jobHooks(final ? { ...s.job, ...r.json } : { ...s.job, status: st }, final); if (i < 5) courierHook(i, loc); await map().driveTo(STAGE_TARGET[i]); if (i === 2) await map().loading(); if (i === 5) { map().lock(null); await map().celebrate(); } } async function advanceOnce(ask) { const st = STEP.advance; if (!s.job || s.stage >= 5) return false; begin(st); clearFail(); const next = s.stage + 1, id = s.job.delivery_id; const r = next === 1 ? await call('get', 'GET', `/jobs/${id}`, null, st, { status: 'pickup_en_route', ...courierCtx(), note: 'pickup_en_route is not an advance target_stage: the fleet dispatches the robot itself. Reading the job instead.' }) : await call('advance', 'POST', `/simulated_fleet/jobs/${id}/advance`, { target_stage: STAGES[next].id }, st, courierCtx()); if (!r.ok) return failed(next === 1 ? JOB_READ : st, r, ask); if (r.json.courier) s.job = { ...s.job, courier: r.json.courier }; const idx = STAGES.findIndex(x => x.id === r.json.status); if (idx < 0) { show({ screen: 'info', title: `The job is ${r.json.status || 'in an unknown state'}`, text: 'That status is outside the six stages this playground animates.' }, agentFor(st, s.lastReq, r, `The job reports ${r.json.status || 'no status'}.`, ask)); return finish(st); } if (idx <= s.stage) { show(null, agentFor(next === 1 ? JOB_READ : st, s.lastReq, r, `The job is still ${r.json.status}.`, ask), `Still ${STAGES[idx].label.toLowerCase()}. Press again to check.`); return finish(st); } for (let i = s.stage + 1; i <= idx && alive(); i++) await playStage(i, r, ask, i === idx); return finish(st); } async function doInstant() { const st = STEP.instant; begin(st); s.compound = 'instant'; clearFail(); if (!(await checkFleet(st))) return false; const r = await warmCall(st, 'job', st.path, jobBody(), courierCtx()); if (!r.ok) return failed(st, r); s.quote = null; await startJob(st, r, null, `Booked in one call: job ${r.json.delivery_id}, ${money(r.json.fee, r.json.currency)}. I’ll fetch the route and advance it through every stage.`); s.done.instant = true; sync(); await sleep(700); if (!alive() || !(await fetchRoute())) return false; while (alive() && s.stage < 5) { await sleep(600); if (!(await advanceOnce('Keep it moving.'))) return false; } return true; } async function doFail() { const rj = REJECTIONS.find(x => x.id === s.reject) || REJECTIONS[0]; const st = { ...(rj.scope === 'job' ? STEP.job : STEP.quote), id: 'fail', n: 8, title: 'Failures' }; begin(STEP.fail); clearFail(); const ask = `Try a delivery that fails with ${rj.id}.`; const r = rj.scope === 'job' ? await call('job', 'POST', '/jobs', jobBody({ quote_id: (s.quote && s.quote.quote_id) || 'dqt_qUdje83jhdk', simulate_rejection: rj.id }), st) : await call('quote', 'POST', '/quotes', { ...quoteBody(), simulate_rejection: rj.id }, st); s.done.fail = true; if (!r.ok) { failed(st, r, ask); return true; } show({ screen: 'info', title: 'No rejection came back', text: `The API answered ${r.status} instead of ${rj.id}.` }, agentFor(st, s.lastReq, r, `I asked for ${rj.id}, but the API answered ${r.status}.`, ask)); return true; } async function retry() { const f = s.fail; if (!f || !f.r.fix) return; const fx = f.r.fix; if ((fx.field === 'pickup' || fx.field === 'dropoff') && s.places[fx.field].label !== DEFAULT_PLACES[fx.field].label) { s.places = { ...s.places, [fx.field]: DEFAULT_PLACES[fx.field] }; sync(); await map().setPlaces(s.places); } clearFail(); pushNote(`Retry with the fix applied: ${fx.field === 'simulate_rejection' || !fx.value ? 'the same request without simulate_rejection' : fx.field + ' set to ' + fx.value}`); const scope = (REJECTIONS.find(x => x.id === f.r.id) || {}).scope; const ask = 'Apply the fix and try again.'; if (f.step === 'fail' && scope === 'job') { if (!s.quote || f.r.id === 'used_quote') { if (!(await doQuote(ask))) return; await sleep(500); } await doJob(ask); return; } if (f.step === 'fail' || f.step === 'quote') { await doQuote(ask); return; } const again = { fleet: doFleet, nearby: doNearby, job: () => doJob(ask), route: doRoute, advance: () => advanceOnce(ask), instant: doInstant, down: doDown }[f.step]; if (again) await again(); } async function story() { Object.assign(s, { done: {}, fail: null, job: null, quote: null, route: null, stage: -1, robots: 0 }); await map().reset(); pushNote('Run the whole story: steps 1 to 6, then advance until delivered'); for (const f of [doFleet, doNearby, () => doQuote(), () => doJob(), doRoute]) { if (!alive() || !(await f())) return; await sleep(900); } while (alive() && s.stage < 5) { if (!(await advanceOnce())) return; await sleep(700); } } const run = fn => async () => { if (s.busy) return; s.busy = true; sync(); try { await fn(); } finally { if (alive()) { s.busy = false; s.running = null; s.compound = null; sync(); } } }; async function setPlaceDirect(which, place) { if (s.busy) return; s.busy = true; sync(); try { s.places = { ...s.places, [which]: place }; s.arm = null; Object.assign(s, { quote: null, job: null, route: null, stage: -1 }); ['quote', 'job', 'route', 'advance', 'instant'].forEach(k => { delete s.done[k]; }); clearFail(); show(s.app.screen === 'fleet' || s.app.screen === 'nearby' ? null : { screen: 'idle' }, undefined, `${which === 'pickup' ? 'Pickup' : 'Dropoff'} set to ${place.label}. Run step 3 for a fresh quote.`); await map().setPlaces(s.places); } finally { if (alive()) { s.busy = false; sync(); } } } const editText = (which, v) => { const old = s.places[which]; s.places = { ...s.places, [which]: { ...old, label: v, address: { ...old.address, street_address_1: v.split(',')[0].trim() } } }; s.quote = null; delete s.done.quote; sync(); }; const arm = which => { s.arm = s.arm === which ? null : which; if (s.arm) s.caption = `Click the map to set the ${which}.`; sync(); }; clickRef.current = async ll => { if (s.placing && !s.busy) { if (s.ghosts.length < MAX_ROBOTS) { s.ghosts = [...s.ghosts, ll]; drawGhosts(); } return; } if (s.sendFor != null && !s.busy) { const i = s.sendFor; s.sendFor = null; run(() => sendTo(i, ll))(); return; } if (!s.arm || s.busy) return; const which = s.arm; s.arm = null; s.caption = 'Looking up that address.'; sync(); let place = { name: 'Dropped pin', label: `${ll[1].toFixed(5)}, ${ll[0].toFixed(5)}`, address: { ...DEFAULT_PLACES[which].address, street_address_1: `${ll[1].toFixed(5)}, ${ll[0].toFixed(5)}` }, location: { lat: ll[1], lng: ll[0] } }; try { const res = await fetch(`https://api.mapbox.com/search/geocode/v6/reverse?longitude=${ll[0]}&latitude=${ll[1]}&limit=1&access_token=${encodeURIComponent(mapboxToken)}`); const j = await res.json(); if (j.features && j.features[0]) place = { ...featureToPlace(j.features[0], place.label), location: { lat: ll[1], lng: ll[0] } }; } catch (e) { } if (alive()) setPlaceDirect(which, place); }; const drawGhosts = () => { map().ghosts(s.ghosts, { onRemove: k => { s.ghosts = s.ghosts.filter((_, j) => j !== k); drawGhosts(); }, onMove: (k, ll) => { s.ghosts = s.ghosts.map((g, j) => (j === k ? ll : g)); sync(); }, }); sync(); }; const startPlace = () => { Object.assign(s, { placing: true, ghosts: [], arm: null, sendFor: null, caption: `Click the map to drop up to ${MAX_ROBOTS} robots. Drag one to adjust it, click it to remove it.` }); drawGhosts(); }; const cancelPlace = () => { Object.assign(s, { placing: false, ghosts: [], caption: '' }); drawGhosts(); }; const robotStep = (title, path) => ({ ...STEP.fleet, path, title: `Robot · ${title}` }); const locked = i => !!(s.job && s.stage < 5 && s.jobBot === i); const setPt = (i, ll) => { s.fleetPts = s.fleetPts.map((q, k) => (k === i ? [+ll[0].toFixed(6), +ll[1].toFixed(6)] : q)); }; const robotPrefix = () => ({ ctx: { prefix: String(s.fleetIds[0] || '').replace(/\d+$/, ''), n: s.fleetIds.length } }); async function selectRobot(i) { Object.assign(s, { sel: i, selReady: null, downConfirm: null, sendFor: null }); map().select(i); sync(); if (!s.fleet) return; const path = `/simulated_fleet/fleets/${encodeURIComponent(s.fleet.id)}/status`; const r = await call('status', 'GET', path, null, robotStep(`Details for ${s.fleetIds[i]}`, path), robotPrefix()); if (!alive() || s.sel !== i) return; const row = Array.isArray(r.json) ? r.json.find(x => x && x.robot_id === s.fleetIds[i]) : null; s.selReady = !!(row && (row.is_ready === true || row.ready === true)); sync(); } const closeRobot = () => { Object.assign(s, { sel: null, sendFor: null, downConfirm: null }); map().select(null); sync(); }; async function moveRobot(i, ll) { const id = s.fleetIds[i], path = `/simulated_fleet/robots/${encodeURIComponent(id)}/location`; const r = await call('location', 'POST', path, { lat: +ll[1].toFixed(6), lng: +ll[0].toFixed(6) }, robotStep(`Move ${id}`, path)); if (!alive()) return false; if (!r.ok) { await map().moveBot(i, s.fleetPts[i], 300); return failed(robotStep(`Move ${id}`, path), r); } setPt(i, ll); s.wsLast[id] = s.fleetPts[i]; show(null, undefined, `${id} moved: the sandbox now reports it there.`); return true; } async function sendTo(i, ll) { const id = s.fleetIds[i], path = `/simulated_fleet/robots/${encodeURIComponent(id)}/target_location`; const r = await call('target', 'POST', path, { lat: +ll[1].toFixed(6), lng: +ll[0].toFixed(6) }, robotStep(`Send ${id}`, path)); if (!alive()) return false; if (!r.ok) return failed(robotStep(`Send ${id}`, path), r); if (s.mode === 'live') { show(null, undefined, `${id} is heading there. The live feed moves it as it drives.`); return true; } show(null, undefined, `${id} drives there (simulated locally in contract mode).`); await map().moveBot(i, ll, 2600); setPt(i, ll); sync(); return true; } async function powerDownRobot(i) { const id = s.fleetIds[i], path = `/simulated_fleet/robots/${encodeURIComponent(id)}/power_down`; const r = await call('robot_down', 'POST', path, null, robotStep(`Power down ${id}`, path)); if (!alive()) return false; if (!goneOk(r)) return failed(robotStep(`Power down ${id}`, path), r); const wasCourier = locked(i); Object.assign(s, { sel: null, downConfirm: null }); await map().removeBot(i); s.fleetIds = s.fleetIds.filter((_, k) => k !== i); s.fleetPts = s.fleetPts.filter((_, k) => k !== i); s.robots = s.fleetIds.length; if (wasCourier) s.jobBot = null; else if (!s.job && s.robots) await map().spawn(s.robots, s.fleetPts); show(null, undefined, `${id} powered down.${wasCourier ? ' The active job has lost its courier.' : ''}`); return true; } botRef.current = { onSelect: i => { selectRobot(i); }, locked, onDrop: (i, ll) => { if (s.busy || locked(i)) { map().moveBot(i, s.fleetPts[i], 200); return; } run(() => moveRobot(i, ll))(); }, }; onFrame.current = f => { if (!f || !f.payload || (f.kind !== 'event.courier_status' && f.kind !== 'event.delivery_status')) return; const p = f.payload, name = p.courier_id ? String(p.courier_id).split('.').slice(1).join('.') : ''; const i = name ? s.fleetIds.indexOf(name) : -1, ourJob = !!(s.job && p.delivery_id && p.delivery_id === s.job.delivery_id); if (i < 0 && !ourJob) return; s.hooks = [...s.hooks.slice(-199), { id: ++s.seq, ws: true, body: f }]; s.logRev++; if (f.kind === 'event.courier_status' && i >= 0 && isFinite(p.lat) && isFinite(p.lng)) { const ll = [Number(p.lng), Number(p.lat)], prev = s.wsLast[name]; s.wsAt[name] = f.created || new Date().toISOString(); s.wsLast[name] = ll; const animated = s.job && i === s.jobBot; if (prev && !animated && geoDist(prev, ll) > 2) { setPt(i, ll); map().moveBot(i, ll); } } if (f.kind === 'event.delivery_status' && ourJob) { const idx = STAGES.findIndex(x => x.id === p.status); if (idx > s.stage && !s.busy) { s.job = { ...s.job, ...p }; run(async () => { for (let k = s.stage + 1; k <= idx && alive(); k++) await playStage(k, { ok: true, status: 200, json: s.job }, 'What is my order doing?', k === idx); })(); } } sync(); }; const wsKey = s.mode === 'live' && s.partnerId.trim() && s.apiKey ? `${s.partnerId.trim()}|${s.apiKey}` : ''; useEffect(() => { if (!wsKey) { if (S.current.ws !== 'off') { S.current.ws = 'off'; sync(); } return undefined; } const pid = wsKey.split('|')[0], key = wsKey.slice(pid.length + 1); let sock = null, timer = null, tries = 0, stopped = false; const set = v => { S.current.ws = v; sync(); }; const open = () => { set(tries ? 'retry' : 'connecting'); try { sock = new WebSocket(`${BASE.replace(/^http/, 'ws')}/v2/ws/partners/${encodeURIComponent(pid)}?api_key=${encodeURIComponent(key)}`); } catch (e) { again(); return; } sock.onopen = () => { tries = 0; set('on'); }; sock.onmessage = m => { let f = null; try { f = JSON.parse(m.data); } catch (e) { return; } onFrame.current(f); }; sock.onclose = () => { sock = null; if (!stopped) again(); }; }; const again = () => { set('retry'); timer = setTimeout(open, Math.min(30000, 1000 * 2 ** tries++)); }; const stop = () => { stopped = true; clearTimeout(timer); if (sock) { sock.onclose = null; sock.close(); } sock = null; S.current.ws = 'off'; }; timer = setTimeout(open, 500); window.addEventListener('pagehide', stop); return () => { window.removeEventListener('pagehide', stop); stop(); }; }, [wsKey, sync]); const runners = { fleet: doFleet, nearby: doNearby, quote: () => doQuote(), job: () => doJob(), route: doRoute, advance: () => advanceOnce(), instant: doInstant, fail: doFail, down: doDown }; const need = id => { if (id === 'job' && !s.quote) return 'Needs a fresh quote from step 3.'; if ((id === 'route' || id === 'advance') && !s.job) return 'Needs a job from step 4 or 7.'; if (id === 'advance' && s.stage >= 5) return 'Delivered. Commit a new job to drive again.'; if (id === 'down' && !s.fleet) return 'Needs a fleet from step 1.'; if ((s.compound || s.running) === id && s.setup) return s.setup; return ''; }; const nextId = (() => { for (const st of STEPS.slice(0, 6)) { if (st.id === 'advance') return s.job && s.stage < 5 ? 'advance' : null; if (!s.done[st.id] && !need(st.id)) return st.id; if (!s.done[st.id]) return null; } return null; })(); const status = s.fail ? ['bad', 'Rejected'] : s.stage >= 5 ? ['done', 'Delivered'] : s.stage >= 0 ? ['live', 'Job live'] : s.busy ? ['live', 'Running'] : ['idle', 'Idle']; const caption = s.caption || `${s.places.pickup.name} is the pickup and ${placeTitle(s.places.dropoff, 'dropoff')} is the dropoff. Run step 1 to put robots on the map.`; const doneCount = STEPS.filter(st => s.done[st.id]).length; const setupAgain = s.fail && s.fail.r.action === 'setup_again'; const selBot = s.sel != null && s.fleetPts ? s.fleetIds[s.sel] : null, selPt = selBot ? s.fleetPts[s.sel] : null; const actionLabel = setupAgain ? 'Set up the robots again' : onDemo ? 'Power down all demo robots' : 'Power down all robots of this partner'; const stepRow = st => { const n = need(st.id), done = !!s.done[st.id], running = (s.compound || s.running) === st.id; return (

{st.title}{done && (done)} {st.alt && {st.alt}} {st.verb} {st.path} {(nextId === st.id || st.alt) &&

{st.blurb}

} {st.id === 'advance' && s.job && s.stage < 5 && Next: {STAGES[s.stage + 1].label}} {n && {n}} {st.id === 'fleet' && (

{s.placing ? <> Click the map to drop robots: {s.ghosts.length} of up to {MAX_ROBOTS}. Drag one to adjust it, click it to remove it. : <> }

)} {st.id === 'fail' && (

Rejection to fire { s.reject = v; sync(); }} />

)}

); }; return (

Delivery API playground

{s.mode !== 'live' || !demo ? sandbox · partner {partnerOf()} : onDemo ? Demo sandbox credentials : }

{[['contract', 'Contract'], ['live', 'Live sandbox']].map(([v, l]) => ( ))}

{status[1]} {s.mode === 'live' && ( Partner ID setCred('partnerId', 'serve_partner_id', e.target.value)} /> )} {s.mode === 'live' && ( X-API-Key optional setCred('apiKey', 'serve_api_key', e.target.value)} /> )}

{[['app', 'App'], ['agent', 'AI agent']].map(([v, l]) => ( ))}

{[['steps', 'Steps'], ['phone', 'App · Agent'], ['term', 'Terminal']].map(([v, l]) => ( ))}

Job state{s.job ? s.job.delivery_id : 'no job yet'}

Steps{doneCount} of {STEPS.length} done

{STEPS.slice(0, 6).map(stepRow)}

Alternatives

{STEPS.slice(6).map(stepRow)}

{s.busy ? 'Running' : 'Run the whole story'}

By using the Playground, you agree to the Serve Sandbox Terms. Privacy Policy

{useMapbox ? : }

{['pickup', 'dropoff'].map(w => ( arm(w)} onPick={p => setPlaceDirect(w, p)} onText={v => editText(w, v)} proximity={lngLat(s.places.pickup)} /> ))}

{selBot && (

{selBot} {s.selReady == null ? 'Checking' : s.selReady ? 'On duty' : 'Offline'}

Fleet: {s.fleet ? s.fleet.id : 'none'}
Position: {selPt[1].toFixed(5)}, {selPt[0].toFixed(5)}
Job: {s.job.delivery_id} · {s.job.status}
Live update: {s.wsAt[selBot] ? new Date(s.wsAt[selBot]).toLocaleTimeString('en-US') : s.mode === 'live' ? 'waiting for the feed' : 'none in contract mode'}

{s.downConfirm === s.sel &&

{locked(s.sel) ? 'This robot is on the active job: the job loses its courier.' : 'It leaves your sandbox.'}

}

)}

{caption}

{[['app', 'App'], ['agent', 'AI agent']].map(([v, l]) => ( ))}

{view === 'app' ? : }

{view === 'app' ? 'Illustrative app concept' : 'Concept · Serve MCP server (coming soon, built on ReadMe’s MCP)'}

); }