Merge remote-tracking branch 'upstream/main' into fix/mcp-shared-panel-key

# Conflicts:
#	CHANGELOG.md

scripts/fixtures/street-level/mapillaryGraph.mjs

@@ -0,0 +1,218 @@
+import { readFileSync } from 'node:fs';
+
+/**
+ * Mapillary Graph API and image CDN answered from fixtures, covering every
+ * request the provider and MapillaryJS make while opening, stepping and
+ * closing a photo, so the gate needs no network and no real token.
+ *
+ * No `merge_cc` or `sfm_cluster` means MapillaryJS never asks for a mesh or
+ * cluster, and empty S2 cells mean no spatial edges, which the gate does not
+ * use. The photo is generated for this repository, so it has no third-party
+ * licence.
+ */
+
+const DAY_MS = 86_400_000;
+
+/** The one sequence with photos: a north-south line through the parked view. */
+export const PHOTO_SEQUENCE_ID = 'fx-photo';
+export const PHOTO_LINE = Object.freeze({
+  lon: -121.4944,
+  south: 38.579,
+  north: 38.591,
+});
+/** Metres between consecutive photos on the line (≥ the 3 m cone thinning). */
+export const PHOTO_SPACING_M = 30;
+/** Fixture thumbnail host (answered, never reached). */
+export const THUMB_HOST = 'qa-fixture.mapillary.com';
+
+const METRES_PER_DEG_LAT = 110_540;
+
+/** Ground distance in metres, as the app's metresBetween. */
+export function metresApart(a, b) {
+  const lat = (((a.lat + b.lat) / 2) * Math.PI) / 180;
+  return Math.hypot(
+    (b.lon - a.lon) * 111_320 * Math.cos(lat),
+    (b.lat - a.lat) * METRES_PER_DEG_LAT,
+  );
+}
+
+/**
+ * Photos along PHOTO_LINE, south to north; every third one is a panorama.
+ * @returns {Array<{id: string, lon: number, lat: number, isPano: boolean, capturedAt: number, compassAngle: number}>}
+ */
+export function photoImages(now = Date.now()) {
+  const step = PHOTO_SPACING_M / METRES_PER_DEG_LAT;
+  const count =
+    Math.floor((PHOTO_LINE.north - PHOTO_LINE.south) / step + 1e-9) + 1;
+  return Array.from({ length: count }, (_, i) => ({
+    id: String(9_100_000_000_000 + i),
+    lon: PHOTO_LINE.lon,
+    lat: Number((PHOTO_LINE.south + i * step).toFixed(7)),
+    isPano: i % 3 === 0,
+    capturedAt: now - 30 * DAY_MS - i * 1000,
+    compassAngle: 0,
+  }));
+}
+
+const point = (image) => ({
+  type: 'Point',
+  coordinates: [image.lon, image.lat],
+});
+
+/** Every field either caller asks for; extra fields are harmless to both. */
+function imageRecord(image) {
+  const thumb = `https://${THUMB_HOST}/thumb/${image.id}.jpg`;
+  return {
+    id: image.id,
+    sequence: PHOTO_SEQUENCE_ID,
+    geometry: point(image),
+    computed_geometry: point(image),
+    altitude: 12,
+    computed_altitude: 12,
+    atomic_scale: 1,
+    camera_parameters: image.isPano ? [] : [0.85, 0, 0],
+    camera_type: image.isPano ? 'spherical' : 'perspective',
+    captured_at: image.capturedAt,
+    compass_angle: image.compassAngle,
+    computed_compass_angle: image.compassAngle,
+    // Angle-axis world-to-camera rotation: +90° about east looks north, level.
+    computed_rotation: [Math.PI / 2, 0, 0],
+    creator: { id: '1', username: 'qa-fixture' },
+    exif_orientation: 1,
+    height: 320,
+    width: 640,
+    is_pano: image.isPano,
+    merge_cc: null,
+    mesh: null,
+    organization: null,
+    quality_score: 0.9,
+    sfm_cluster: null,
+    thumb_256_url: thumb,
+    thumb_1024_url: thumb,
+    thumb_2048_url: thumb,
+  };
+}
+
+/** The requested fields plus id, as the Graph API answers. */
+function withFields(record, fields) {
+  if (!fields) return record;
+  const out = { id: record.id };
+  for (const field of fields.split(','))
+    if (field in record) out[field] = record[field];
+  return out;
+}
+
+const CORS = Object.freeze({
+  'Access-Control-Allow-Origin': '*',
+  'Access-Control-Allow-Methods': 'GET, OPTIONS',
+  'Access-Control-Allow-Headers': 'Accept, Authorization, Content-Type',
+  'Access-Control-Max-Age': '600',
+});
+
+const json = (status, body) => ({
+  status,
+  contentType: 'application/json',
+  headers: CORS,
+  body: JSON.stringify(body),
+});
+
+let photoBytes = null;
+export function photoJpeg() {
+  photoBytes ??= readFileSync(new URL('./street-640x320.jpg', import.meta.url));
+  return photoBytes;
+}
+
+/** Name a call by its parameter names only, so the token is never echoed. */
+export function describeCall(method, url) {
+  const keys = [...url.searchParams.keys()]
+    .filter((key) => key !== 'access_token')
+    .sort();
+  const path = url.pathname
+    .replace(/^\/\d{6,}(?=\/|$)/, '/{imageId}')
+    .replace(/^\/thumb\/[\w-]+\.jpg$/, '/thumb/{imageId}.jpg');
+  return `${method} ${url.hostname}${path}${keys.length ? `?${keys.join('&')}` : ''}`;
+}
+
+/**
+ * Answer one Mapillary request. `known` is false for a request no fixture
+ * covers, so the gate fails on a new MapillaryJS call instead of missing it.
+ * @param {{method: string, url: string, images?: ReturnType<typeof photoImages>}} request
+ * @returns {{status: number, contentType?: string, headers?: object, body: string|Buffer, known: boolean}}
+ */
+export function answerMapillaryRequest({ method, url, images }) {
+  const address = new URL(url);
+  const photos = images ?? photoImages();
+  const byId = new Map(photos.map((image) => [image.id, image]));
+  if (method === 'OPTIONS')
+    return { status: 204, headers: CORS, body: '', known: true };
+  if (address.hostname === THUMB_HOST) {
+    if (/^\/thumb\/[\w-]+\.jpg$/.test(address.pathname))
+      return {
+        status: 200,
+        contentType: 'image/jpeg',
+        headers: CORS,
+        body: photoJpeg(),
+        known: true,
+      };
+    return { ...json(404, { error: 'no such fixture' }), known: false };
+  }
+  if (address.hostname !== 'graph.mapillary.com')
+    return { ...json(404, { error: 'no such fixture host' }), known: false };
+  const q = address.searchParams;
+  const fields = q.get('fields');
+  const path = address.pathname;
+  if (path === '/images') {
+    if (q.has('image_ids')) {
+      const data = q
+        .get('image_ids')
+        .split(',')
+        .map((id) => byId.get(id))
+        .filter(Boolean)
+        .map((image) => withFields(imageRecord(image), fields));
+      return { ...json(200, { data }), known: true };
+    }
+    if (q.has('sequence_ids')) {
+      const ids = q.get('sequence_ids').split(',');
+      const limit = Number(q.get('limit')) || photos.length;
+      const data = ids.includes(PHOTO_SEQUENCE_ID)
+        ? photos
+            .slice(0, limit)
+            .map((image) => withFields(imageRecord(image), fields))
+        : [];
+      return { ...json(200, { data }), known: true };
+    }
+    if (q.has('lat') && q.has('lng')) {
+      const at = { lat: Number(q.get('lat')), lon: Number(q.get('lng')) };
+      const radius = Math.min(50, Number(q.get('radius')) || 50);
+      const limit = Number(q.get('limit')) || 10;
+      // In no particular order, as the real API answers.
+      const data = photos
+        .filter((image) => metresApart(at, image) <= radius)
+        .reverse()
+        .slice(0, limit)
+        .map((image) => withFields(imageRecord(image), fields));
+      return { ...json(200, { data }), known: true };
+    }
+    if (q.has('s2')) return { ...json(200, { data: [] }), known: true };
+    return {
+      ...json(400, { error: 'unsupported images query' }),
+      known: false,
+    };
+  }
+  if (path === '/image_ids' && q.has('sequence_id')) {
+    const data =
+      q.get('sequence_id') === PHOTO_SEQUENCE_ID
+        ? photos.map((image) => ({ id: image.id }))
+        : [];
+    return { ...json(200, { data }), known: true };
+  }
+  const tiles = path.match(/^\/([\w-]+)\/tiles$/);
+  if (tiles) return { ...json(200, { data: [] }), known: true };
+  const entity = path.match(/^\/([\w-]+)$/);
+  if (entity && byId.has(entity[1]))
+    return {
+      ...json(200, withFields(imageRecord(byId.get(entity[1])), fields)),
+      known: true,
+    };
+  return { ...json(404, { error: 'no such fixture' }), known: false };
+}

scripts/format-scope.json

@@ -36,6 +36,9 @@
   "src/main.js",
   "docs/APPLICATION.md",
   "scripts/qa-application.mjs",
+  "scripts/qa-panel-resize.mjs",
+  "scripts/qa-panelDrag.mjs",
+  "src/tooling/panelResizeQa.test.mjs",
   "scripts/qa-terrain-429.mjs",
   "src/app/application.js",
   "src/app/application.test.mjs",
@@ -165,6 +168,7 @@
   "src/ui/panelRails.js",
   "src/ui/leftPanelRail.js",
   "src/ui/rightPanelRail.js",
+  "src/ui/panelResize.test.mjs",
   "src/ui/panelMeasurement.js",
   "src/ui/panelRailGeometry.js",
   "src/ui/panelRails.test.mjs",
@@ -271,6 +275,7 @@
   "src/ui/styles.js",
   "src/ui/shellLifecycle.test.mjs",
   "src/testSupport/readStylesheet.mjs",
+  "src/testSupport/streetLevelFakes.mjs",
   "src/splitFlap.js",
   "style.css",
   "src/ui/styles/overlays.css",
@@ -856,6 +861,68 @@
   "src/ui/recentImagery.test.mjs",
   "src/layers/recentImagery/testDoubles.mjs",
   "scripts/qa-recent-imagery.mjs",
+  "src/ui/streetLevelControls.js",
+  "src/ui/streetLevelPresentation.js",
+  "src/ui/streetLevelPresentation.test.mjs",
+  "src/app/layers/streetLevel.js",
+  "src/tooling/mapillaryProvider.test.mjs",
+  "src/layers/streetLevel/providers/mapillary/source.test.mjs",
+  "src/streetLevelMarkup.test.mjs",
+  "src/layers/streetLevel/index.js",
+  "src/layers/streetLevel/policy.js",
+  "src/layers/streetLevel/filter.js",
+  "src/layers/streetLevel/registry.js",
+  "src/layers/streetLevel/params.js",
+  "src/layers/streetLevel/pickRouter.js",
+  "src/layers/streetLevel/uiState.js",
+  "src/layers/streetLevel/groundCast.js",
+  "src/layers/streetLevel/meshSampler.js",
+  "src/layers/streetLevel/view.js",
+  "src/layers/streetLevel/marker.js",
+  "src/layers/streetLevel/cameraFollow.js",
+  "src/layers/streetLevel/credits.js",
+  "src/layers/streetLevel/viewerHost.js",
+  "src/layers/streetLevel/providers/mapillary/index.js",
+  "src/layers/streetLevel/state.js",
+  "src/layers/streetLevel/providers/mapillary/policy.js",
+  "src/layers/streetLevel/providers/mapillary/coverage.js",
+  "src/layers/streetLevel/providers/mapillary/sequences.js",
+  "src/layers/streetLevel/glyphs.js",
+  "src/layers/streetLevel/providers/mapillary/decode.js",
+  "src/layers/streetLevel/tileMath.js",
+  "src/layers/streetLevel/selection.js",
+  "src/layers/streetLevel/providers/mapillary/viewer.js",
+  "src/layers/streetLevel/providers/mapillary/source.js",
+  "server/providers/mapillary.js",
+  "server/providers/mapillary/routes.js",
+  "server/providers/mapillary/constants.js",
+  "server/providers/mapillary/tiles.js",
+  "server/providers/mapillary/trim.js",
+  "src/layers/streetLevel/tileMath.test.mjs",
+  "scripts/qa-street-level.mjs",
+  "src/tooling/streetLevelQa.test.mjs",
+  "scripts/qa-browserEvidence.mjs",
+  "scripts/fixtures/street-level/mapillaryGraph.mjs",
+  "src/layers/streetLevel/filter.test.mjs",
+  "src/layers/streetLevel/registry.test.mjs",
+  "src/layers/streetLevel/params.test.mjs",
+  "src/layers/streetLevel/pickRouter.test.mjs",
+  "src/layers/streetLevel/uiState.test.mjs",
+  "src/layers/streetLevel/groundCast.test.mjs",
+  "src/layers/streetLevel/meshSampler.test.mjs",
+  "src/layers/streetLevel/view.test.mjs",
+  "src/layers/streetLevel/providers/mapillary/provider.test.mjs",
+  "src/layers/streetLevel/providers/mapillary/decode.test.mjs",
+  "src/layers/streetLevel/providers/mapillary/coverage.test.mjs",
+  "src/layers/streetLevel/providers/mapillary/coverageFixture.mjs",
+  "src/layers/streetLevel/cameraFollow.test.mjs",
+  "src/ui/streetLevelControls.test.mjs",
+  "src/ui/panelDock.test.mjs",
+  "src/layers/streetLevel/marker.test.mjs",
+  "src/layers/streetLevel/viewerHost.test.mjs",
+  "src/layers/streetLevel/providers/mapillary/sequences.test.mjs",
+  "src/layers/streetLevel/selection.test.mjs",
+  "src/layers/streetLevel/index.test.mjs",
   "scripts/qa-overpass-offload.mjs",
   "src/overpassOffload.test.mjs",
   "src/sources/openFreeMap.test.mjs",

scripts/package-boundaries.json

@@ -183,6 +183,24 @@
     ],
     "external": []
   },
+  "mapillary-provider": {
+    "runtime": "node",
+    "exports": ["./server/providers/mapillary"],
+    "modules": [
+      "server/providers/mapillary.js",
+      "server/providers/mapillary/routes.js",
+      "server/providers/mapillary/constants.js",
+      "server/providers/mapillary/tiles.js",
+      "server/providers/mapillary/trim.js",
+      "server/providers/common/same-site.js",
+      "src/localRequestGate.mjs",
+      "server/providers/common/rate-limit.js",
+      "src/sources/rateLimit.js",
+      "server/providers/common/http.js",
+      "src/sources/httpBody.js"
+    ],
+    "external": ["pbf"]
+  },
   "radio-provider": {
     "runtime": "node",
     "exports": ["./server/providers/radio"],
@@ -605,6 +623,7 @@
       "src/ui/panelLayoutController.js",
       "src/ui/panelMeasurement.js",
       "src/ui/panelPositionControls.js",
+      "src/ui/panelResize.js",
       "src/ui/panelRailGeometry.js",
       "src/ui/panelRails.js",
       "src/ui/radio.js",
@@ -635,6 +654,8 @@
       "src/ui/layerBindings.js",
       "src/ui/displayBindings.js",
       "src/ui/shellFacade.js",
+      "src/ui/streetLevelControls.js",
+      "src/ui/streetLevelPresentation.js",
       "src/ui/localSdrControls.js",
       "src/layers/localAdsb/feedNames.js",
       "src/ui/localSdrPresentation.js",
@@ -1155,6 +1176,43 @@
     ],
     "external": ["hls.js", "cesium"]
   },
+  "street-level-layer": {
+    "exports": [
+      "./layers/street-level",
+      "./layers/street-level/mapillary",
+      "./layers/street-level/mapillary/source"
+    ],
+    "modules": [
+      "src/layers/streetLevel/index.js",
+      "src/layers/streetLevel/providers/mapillary/index.js",
+      "src/layers/streetLevel/viewerHost.js",
+      "src/layers/streetLevel/credits.js",
+      "src/layers/streetLevel/cameraFollow.js",
+      "src/layers/streetLevel/marker.js",
+      "src/layers/streetLevel/view.js",
+      "src/layers/streetLevel/uiState.js",
+      "src/layers/streetLevel/groundCast.js",
+      "src/layers/streetLevel/meshSampler.js",
+      "src/layers/streetLevel/pickRouter.js",
+      "src/layers/streetLevel/params.js",
+      "src/layers/streetLevel/registry.js",
+      "src/layers/streetLevel/filter.js",
+      "src/layers/streetLevel/policy.js",
+      "src/layers/streetLevel/state.js",
+      "src/layers/streetLevel/providers/mapillary/policy.js",
+      "src/layers/streetLevel/providers/mapillary/coverage.js",
+      "src/layers/streetLevel/providers/mapillary/sequences.js",
+      "src/layers/streetLevel/glyphs.js",
+      "src/layers/streetLevel/providers/mapillary/decode.js",
+      "src/layers/streetLevel/providers/mapillary/coverageFixture.mjs",
+      "src/layers/streetLevel/tileMath.js",
+      "src/layers/streetLevel/selection.js",
+      "src/layers/streetLevel/providers/mapillary/viewer.js",
+      "src/layers/streetLevel/providers/mapillary/source.js",
+      "scripts/qa-street-level.mjs"
+    ],
+    "external": ["cesium", "pbf", "@mapbox/vector-tile", "mapillary-js"]
+  },
   "alpr-cameras": {
     "exports": ["./layers/alpr"],
     "modules": [
@@ -1854,6 +1912,7 @@
       "src/ui/panelLayoutController.js",
       "src/ui/panelMeasurement.js",
       "src/ui/panelPositionControls.js",
+      "src/ui/panelResize.js",
       "src/ui/panelRailGeometry.js",
       "src/ui/panelRails.js",
       "src/ui/radio.js",
@@ -2042,6 +2101,35 @@
       "src/maps/imageryHost.js",
       "src/ui/recentImagery.js",
       "src/ui/imageryBoxTool.js",
+      "src/ui/streetLevelControls.js",
+      "src/ui/streetLevelPresentation.js",
+      "src/layers/streetLevel/index.js",
+      "src/layers/streetLevel/providers/mapillary/index.js",
+      "src/layers/streetLevel/viewerHost.js",
+      "src/layers/streetLevel/credits.js",
+      "src/layers/streetLevel/cameraFollow.js",
+      "src/layers/streetLevel/marker.js",
+      "src/layers/streetLevel/view.js",
+      "src/layers/streetLevel/uiState.js",
+      "src/layers/streetLevel/groundCast.js",
+      "src/layers/streetLevel/meshSampler.js",
+      "src/layers/streetLevel/pickRouter.js",
+      "src/layers/streetLevel/params.js",
+      "src/layers/streetLevel/registry.js",
+      "src/layers/streetLevel/filter.js",
+      "src/layers/streetLevel/policy.js",
+      "src/layers/streetLevel/state.js",
+      "src/layers/streetLevel/providers/mapillary/policy.js",
+      "src/layers/streetLevel/providers/mapillary/coverage.js",
+      "src/layers/streetLevel/providers/mapillary/sequences.js",
+      "src/layers/streetLevel/glyphs.js",
+      "src/layers/streetLevel/providers/mapillary/decode.js",
+      "src/layers/streetLevel/providers/mapillary/coverageFixture.mjs",
+      "src/layers/streetLevel/tileMath.js",
+      "src/layers/streetLevel/selection.js",
+      "src/layers/streetLevel/providers/mapillary/viewer.js",
+      "src/layers/streetLevel/providers/mapillary/source.js",
+      "src/app/layers/streetLevel.js",
       "src/layers/alpr/tileRecords.js",
       "src/sources/capability.js",
       "src/sources/openFreeMap.js",
@@ -2070,6 +2158,7 @@
       "mgrs",
       "pbf",
       "satellite.js",
+      "mapillary-js",
       "@jtarrio/webrtlsdr"
     ]
   },
@@ -2535,6 +2624,33 @@
       "src/layers/recentImagery/rendering.js",
       "src/layers/recentImagery/thumbnails.js",
       "src/maps/imageryHost.js",
+      "src/layers/streetLevel/index.js",
+      "src/layers/streetLevel/providers/mapillary/index.js",
+      "src/layers/streetLevel/viewerHost.js",
+      "src/layers/streetLevel/credits.js",
+      "src/layers/streetLevel/cameraFollow.js",
+      "src/layers/streetLevel/marker.js",
+      "src/layers/streetLevel/view.js",
+      "src/layers/streetLevel/uiState.js",
+      "src/layers/streetLevel/groundCast.js",
+      "src/layers/streetLevel/meshSampler.js",
+      "src/layers/streetLevel/pickRouter.js",
+      "src/layers/streetLevel/params.js",
+      "src/layers/streetLevel/registry.js",
+      "src/layers/streetLevel/filter.js",
+      "src/layers/streetLevel/policy.js",
+      "src/layers/streetLevel/state.js",
+      "src/layers/streetLevel/providers/mapillary/policy.js",
+      "src/layers/streetLevel/providers/mapillary/coverage.js",
+      "src/layers/streetLevel/providers/mapillary/sequences.js",
+      "src/layers/streetLevel/glyphs.js",
+      "src/layers/streetLevel/providers/mapillary/decode.js",
+      "src/layers/streetLevel/providers/mapillary/coverageFixture.mjs",
+      "src/layers/streetLevel/tileMath.js",
+      "src/layers/streetLevel/selection.js",
+      "src/layers/streetLevel/providers/mapillary/viewer.js",
+      "src/layers/streetLevel/providers/mapillary/source.js",
+      "src/app/layers/streetLevel.js",
       "src/layers/alpr/tileRecords.js",
       "src/sources/capability.js",
       "src/sources/openFreeMap.js",
@@ -2559,6 +2675,7 @@
       "@mapbox/vector-tile",
       "pbf",
       "mgrs",
+      "mapillary-js",
       "@jtarrio/webrtlsdr"
     ]
   },
@@ -2692,6 +2809,7 @@
       "src/ui/panelLayoutController.js",
       "src/ui/panelMeasurement.js",
       "src/ui/panelPositionControls.js",
+      "src/ui/panelResize.js",
       "src/ui/panelRailGeometry.js",
       "src/ui/panelRails.js",
       "src/ui/rightPanelRail.js",

scripts/qa-browserEvidence.mjs

@@ -0,0 +1,177 @@
+/**
+ * Evidence the browser QA gates collect while they run and save under
+ * `qa-artifacts/<gate>/` when they fail (CI uploads that directory). Tokens
+ * and keys are masked before anything is printed or saved.
+ */
+import fs from 'node:fs/promises';
+import path from 'node:path';
+
+/** Console messages and failed requests kept per page. */
+export const EVIDENCE_LIMIT = 200;
+
+/** Cesium's console line when the render loop throws (CesiumWidget). */
+export const RENDER_ERROR_PATTERN = /An error occurred while rendering/i;
+
+/** Mask tokens in a URL or message before it is printed or saved. */
+export function redact(text) {
+  return String(text ?? '')
+    .replace(
+      /([?&](?:access_token|token|key|api_key|apikey|client_secret|signature)=)[^&\s"']*/gi,
+      '$1REDACTED',
+    )
+    .replace(/MLY\|[^\s&"',)]+/g, 'MLY|REDACTED')
+    .replace(/AIza[\w-]{30,}/g, 'AIza…REDACTED');
+}
+
+function push(list, entry) {
+  list.push(entry);
+  if (list.length > EVIDENCE_LIMIT)
+    list.splice(0, list.length - EVIDENCE_LIMIT);
+}
+
+/**
+ * Subscribe to `viewer.scene.renderError` in every document the page loads
+ * (reloads included), into `window.__qaRenderErrors`. Call before `goto`.
+ */
+export function hookRenderErrors(page) {
+  return page.evaluateOnNewDocument(() => {
+    window.__qaRenderErrors = [];
+    const hook = () => {
+      const scene = window.__godsEyeView?.viewer?.scene;
+      if (!scene?.renderError) return false;
+      scene.renderError.addEventListener((_, error) =>
+        window.__qaRenderErrors.push(
+          String(error?.stack || error?.message || error),
+        ),
+      );
+      return true;
+    };
+    const timer = setInterval(() => {
+      if (hook()) clearInterval(timer);
+    }, 250);
+  });
+}
+
+export async function readRenderErrors(page) {
+  try {
+    return await page.evaluate(() => window.__qaRenderErrors ?? []);
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * Watch one page's console, errors and failed requests. `errors` is shared
+ * across pages; `isError(text)` adds console lines a gate treats as errors.
+ * @returns {{name: string, page: object, console: Array<object>, failed: Array<object>, renderErrors: Array<string>}}
+ */
+export function watchPage(page, { name, errors, isError = () => false }) {
+  const monitor = { name, page, console: [], failed: [], renderErrors: [] };
+  page.on('console', (message) => {
+    const text = redact(message.text());
+    push(monitor.console, { type: message.type(), text });
+    if (message.type() === 'error' && RENDER_ERROR_PATTERN.test(text)) {
+      monitor.renderErrors.push(text);
+      errors.push(`[${name}] render loop: ${text}`);
+    } else if (isError(text)) errors.push(`[${name}] ${text}`);
+  });
+  page.on('pageerror', (error) => {
+    const text = redact(error?.stack || error?.message || error);
+    push(monitor.console, { type: 'pageerror', text });
+    errors.push(`[${name}] ${text}`);
+  });
+  page.on('requestfailed', (request) =>
+    push(monitor.failed, {
+      url: redact(request.url()),
+      method: request.method(),
+      failure: request.failure()?.errorText ?? 'failed',
+    }),
+  );
+  page.on('response', (response) => {
+    if (response.status() < 400) return;
+    push(monitor.failed, {
+      url: redact(response.url()),
+      method: response.request().method(),
+      status: response.status(),
+    });
+  });
+  return monitor;
+}
+
+const withTimeout = (promise, ms, label) =>
+  Promise.race([
+    promise,
+    new Promise((_, reject) =>
+      setTimeout(() => reject(new Error(`${label} timed out`)), ms),
+    ),
+  ]);
+
+function streetLevelState(page) {
+  return page.evaluate(() => {
+    const module =
+      window.__godsEyeView?.dataManager?.layers?.get('street-level')?.module;
+    return module?.getUIState ? module.getUIState() : null;
+  });
+}
+
+/**
+ * Save a screenshot and JSON record per page, plus the error. A page that
+ * cannot be captured records why instead.
+ * @returns {Promise<string>} the directory written
+ */
+export async function saveFailureArtifacts({ dir, browser, monitors, error }) {
+  await fs.mkdir(dir, { recursive: true });
+  await fs.writeFile(
+    path.join(dir, 'error.txt'),
+    redact(error?.stack || error?.message || String(error)),
+  );
+  const known = new Map(monitors.map((monitor) => [monitor.page, monitor]));
+  let pages = [];
+  try {
+    pages = await browser.pages();
+  } catch {
+    pages = monitors.map((monitor) => monitor.page);
+  }
+  let index = 0;
+  for (const page of pages) {
+    const monitor = known.get(page);
+    // The browser's first blank tab holds nothing worth saving.
+    if (!monitor && page.url() === 'about:blank') continue;
+    const base = `${String(index++).padStart(2, '0')}-${monitor?.name ?? 'page'}`;
+    const record = { url: redact(page.url()) };
+    try {
+      await withTimeout(
+        page.screenshot({
+          path: path.join(dir, `${base}.png`),
+          fullPage: true,
+        }),
+        30_000,
+        'screenshot',
+      );
+    } catch (shotError) {
+      record.screenshotError = String(shotError?.message || shotError);
+    }
+    try {
+      record.streetLevel = await withTimeout(
+        streetLevelState(page),
+        10_000,
+        'getUIState',
+      );
+    } catch (stateError) {
+      record.streetLevelError = String(stateError?.message || stateError);
+    }
+    record.renderErrors = [
+      ...(monitor?.renderErrors ?? []),
+      ...(await withTimeout(readRenderErrors(page), 10_000, 'render errors')
+        .then((list) => list.map((text) => `scene.renderError: ${text}`))
+        .catch(() => [])),
+    ].map(redact);
+    record.console = monitor?.console ?? [];
+    record.failedRequests = monitor?.failed ?? [];
+    await fs.writeFile(
+      path.join(dir, `${base}.json`),
+      redact(JSON.stringify(record, null, 2)),
+    );
+  }
+  return dir;
+}

scripts/qa-panel-resize.mjs

@@ -0,0 +1,456 @@
+#!/usr/bin/env node
+/**
+ * Browser QA for the floating CCTV panel: lift, resize from every handle,
+ * minimum size, reload, and dock again. `--fail-on-retry` (or
+ * QA_FAIL_ON_RETRY=1) fails on any header-press retry.
+ */
+import assert from 'node:assert/strict';
+import { pathToFileURL } from 'node:url';
+import { RESIZE_DIRECTIONS, resizeBox } from '../src/ui/panelResize.js';
+import {
+  describePress,
+  dockPanelByDoubleClick,
+  dragPointer,
+  liftPanelByHeader,
+  nextFrames,
+} from './qa-panelDrag.mjs';
+import {
+  hookRenderErrors,
+  readRenderErrors,
+  saveFailureArtifacts,
+  watchPage,
+} from './qa-browserEvidence.mjs';
+
+export const PANEL_ID = 'cctv-panel';
+export const STORAGE_KEY = `godsEyeView.v8.panelPos.${PANEL_ID}`;
+export const MIN_SIZE = { width: 300, height: 160 };
+export const ARTIFACT_DIR = 'qa-artifacts/panel-resize';
+const VIEWPORT = { width: 1400, height: 900 };
+const EDGE_BY_SIDE = { n: 'top', s: 'bottom', e: 'right', w: 'left' };
+
+/** Box edges a resize in `dir` must leave exactly where they were. */
+export function pinnedEdges(dir) {
+  return Object.entries(EDGE_BY_SIDE)
+    .filter(([side]) => !dir.includes(side))
+    .map(([, edge]) => edge);
+}
+
+/** Pointer travel that grows a panel by `amount` on every edge named in `dir`. */
+export function growthDelta(dir, amount) {
+  return {
+    dx: dir.includes('e') ? amount : dir.includes('w') ? -amount : 0,
+    dy: dir.includes('s') ? amount : dir.includes('n') ? -amount : 0,
+  };
+}
+
+/**
+ * Viewport point inside the handle for `dir`, given the panel's client rect.
+ * Edge strips straddle the border by 3px; corners and the grip sit inside.
+ */
+export function handlePoint(rect, dir) {
+  const inset = dir.length === 2 ? 4 : 1;
+  const x = dir.includes('w')
+    ? rect.left + inset
+    : dir.includes('e')
+      ? rect.right - inset
+      : rect.left + rect.width / 2;
+  const y = dir.includes('n')
+    ? rect.top + inset
+    : dir.includes('s')
+      ? rect.bottom - inset
+      : rect.top + rect.height / 2;
+  return { x, y };
+}
+
+/** Pinned edges that moved during a resize in `dir`. */
+export function driftedEdges(before, after, dir, tolerance = 1.5) {
+  const edges = (box) => ({
+    left: box.left,
+    top: box.top,
+    right: box.left + box.width,
+    bottom: box.top + box.height,
+  });
+  const a = edges(before);
+  const b = edges(after);
+  return pinnedEdges(dir).filter(
+    (edge) => Math.abs(a[edge] - b[edge]) > tolerance,
+  );
+}
+
+function near(actual, expected, tolerance, label) {
+  assert.ok(
+    Math.abs(actual - expected) <= tolerance,
+    `${label}: expected ${expected} ± ${tolerance}, got ${actual}`,
+  );
+}
+
+async function main() {
+  const { default: puppeteer } = await import('puppeteer');
+  const args = process.argv.slice(2);
+  const urlIndex = args.indexOf('--url');
+  const url = urlIndex >= 0 ? args[urlIndex + 1] : 'http://localhost:4173';
+  if (args.includes('--fail-on-retry')) process.env.QA_FAIL_ON_RETRY = '1';
+  const browser = await puppeteer.launch({
+    headless: true,
+    executablePath:
+      process.env.PUPPETEER_EXECUTABLE_PATH ||
+      (await puppeteer.executablePath()),
+    args: ['--no-sandbox', '--use-gl=angle', '--use-angle=swiftshader'],
+  });
+  const monitors = [];
+  try {
+    const page = await browser.newPage();
+    await page.setViewport(VIEWPORT);
+    const errors = [];
+    monitors.push(watchPage(page, { name: 'panel', errors }));
+    await hookRenderErrors(page);
+
+    const boot = async () => {
+      await page.goto(`${url}/`, { waitUntil: 'domcontentloaded' });
+      await page.waitForFunction(() => window.__godsEyeView?.viewer, {
+        timeout: 90_000,
+      });
+      await page.waitForSelector(`#${PANEL_ID} .panel-header`);
+      await page.evaluate(() => {
+        document.querySelector('.first-run-explore')?.click();
+      });
+      await page.keyboard.press('Escape');
+      await page.evaluate(() => {
+        document.getElementById('first-run-launcher')?.remove();
+        for (const node of document.querySelectorAll('[class*=first-run]'))
+          node.remove();
+      });
+      await page.mouse.click(VIEWPORT.width / 2, VIEWPORT.height / 2);
+      await nextFrames(page);
+    };
+    const readPanel = () =>
+      page.evaluate((id) => {
+        const panel = document.getElementById(id);
+        const rect = panel.getBoundingClientRect();
+        return {
+          left: rect.left,
+          top: rect.top,
+          width: rect.width,
+          height: rect.height,
+          // handlePoint() reads the far edges for s/e handles.
+          right: rect.right,
+          bottom: rect.bottom,
+          floating: panel.classList.contains('panel-floating'),
+          collapsed: panel.classList.contains('collapsed'),
+          inRail: panel.parentElement?.id === 'right-context-rail',
+          allocated: panel.style.getPropertyValue(
+            '--right-panel-allocated-height',
+          ),
+          inlineWidth: panel.style.width,
+          inlineHeight: panel.style.height,
+          stored: localStorage.getItem(`godsEyeView.v8.panelPos.${id}`),
+        };
+      }, PANEL_ID);
+    /**
+     * Best effort: wait for the box to hold still for half a second. The lift
+     * is checked against the box at pointerdown, so a timeout only costs time.
+     */
+    const settle = async () => {
+      try {
+        await page.waitForFunction(
+          (id) => {
+            const r = document.getElementById(id).getBoundingClientRect();
+            const box = [r.left, r.top, r.width, r.height]
+              .map(Math.round)
+              .join(',');
+            const now = performance.now();
+            if (window.__qaLastBox !== box) {
+              window.__qaLastBox = box;
+              window.__qaSince = now;
+            }
+            return now - window.__qaSince >= 500;
+          },
+          { polling: 100, timeout: 20_000 },
+          PANEL_ID,
+        );
+      } catch (error) {
+        if (error?.name !== 'TimeoutError') throw error;
+        console.log('note: the CCTV panel was still moving; lifting anyway');
+      }
+    };
+    const headerPoint = async () => {
+      const rect = await page.evaluate((id) => {
+        const title = document.querySelector(
+          `#${id} .panel-header .panel-title`,
+        );
+        const r = title.getBoundingClientRect();
+        return { x: r.left + r.width / 2, y: r.top + r.height / 2 };
+      }, PANEL_ID);
+      return rect;
+    };
+    const drag = (from, dx, dy) => dragPointer(page, from, dx, dy);
+
+    await page.goto(`${url}/`, { waitUntil: 'domcontentloaded' });
+    await page.evaluate((key) => {
+      localStorage.removeItem(key);
+      localStorage.removeItem('godsEyeView.v8.panelFloatHintShown');
+    }, STORAGE_KEY);
+    await boot();
+
+    await page.evaluate((id) => {
+      const panel = document.getElementById(id);
+      if (panel.classList.contains('collapsed'))
+        document
+          .querySelector(`.panel-collapse-btn[data-collapse-target="${id}"]`)
+          .click();
+    }, PANEL_ID);
+    await page.waitForFunction(
+      (id) => !document.getElementById(id).classList.contains('collapsed'),
+      {},
+      PANEL_ID,
+    );
+    // The rail animates panel heights, and on a slow software renderer the
+    // panels above CCTV can still be moving after a fixed sleep.
+    await settle();
+    const docked = await readPanel();
+    assert.equal(docked.floating, false);
+    assert.equal(docked.inRail, true);
+
+    // Names whatever above CCTV in the rail shifted it, for a retry note.
+    const railAbove = () =>
+      page.evaluate((id) => {
+        const out = [];
+        for (const node of document.getElementById('right-context-rail')
+          ?.children || []) {
+          if (node.id === id) break;
+          out.push(
+            `${node.id || node.className}:${Math.round(node.offsetHeight)}`,
+          );
+        }
+        return out.join(' ');
+      }, PANEL_ID);
+    const aboveAtDock = await railAbove();
+    // On CI a panel above CCTV grows after load and can shift the header out
+    // from under the press; the helper retries only such a provable miss.
+    const attempt = await liftPanelByHeader(page, PANEL_ID, {
+      dx: -200,
+      dy: -100,
+      note: async () =>
+        `rail above CCTV ${aboveAtDock} -> ${await railAbove()}`,
+    });
+    const { pressed } = attempt;
+    const lifted = await readPanel();
+    assert.equal(
+      lifted.floating,
+      true,
+      `a header drag lifts the panel out (${describePress(attempt)}; panel docked at ${docked.top}, at press ${pressed?.top})`,
+    );
+    assert.equal(
+      lifted.collapsed,
+      false,
+      'the drag-ending click must not collapse',
+    );
+    const moved = `docked at ${docked.left},${docked.top}; pressed at ${pressed.left},${pressed.top}`;
+    near(
+      lifted.left,
+      Math.max(6, pressed.left - 200),
+      2,
+      `lifted left (${moved})`,
+    );
+    near(
+      lifted.top,
+      Math.max(6, pressed.top - 100),
+      2,
+      `lifted top (${moved})`,
+    );
+    near(lifted.width, pressed.width, 2, 'lifted width');
+    // The rail lets go of the lifted panel on its next layout pass.
+    await page
+      .waitForFunction(
+        (id) =>
+          document
+            .getElementById(id)
+            .style.getPropertyValue('--right-panel-allocated-height') === '',
+        { timeout: 5_000 },
+        PANEL_ID,
+      )
+      .catch(() => {});
+    const afterLayout = await readPanel();
+    assert.equal(afterLayout.allocated, '', 'the rail no longer allocates it');
+    const railExcludes = await page.evaluate((id) => {
+      const rail = document.getElementById('right-context-rail');
+      // Same rule as the rail: hidden panels take no room.
+      const counted = [...rail.children].filter((panel) =>
+        panel.matches(
+          '[data-panel-id]:not(.panel-floating):not(.collapsed):not([hidden])',
+        ),
+      );
+      return {
+        expandedCount: rail.dataset.expandedCount,
+        counted: counted.length,
+        includesPanel: counted.some((panel) => panel.id === id),
+      };
+    }, PANEL_ID);
+    assert.equal(railExcludes.includesPanel, false);
+    if (railExcludes.expandedCount !== undefined)
+      assert.equal(Number(railExcludes.expandedCount), railExcludes.counted);
+    const storedAfterLift = JSON.parse(afterLayout.stored);
+    assert.equal(storedAfterLift.floating, true);
+    assert.equal(
+      'height' in storedAfterLift,
+      false,
+      'a drag alone must not freeze the measured height',
+    );
+    console.log('PASS: header drag lifts CCTV out of the rail');
+
+    // Park near the top: the voice dock would cover the south corners once
+    // the loop below has grown the window.
+    {
+      const header = await headerPoint();
+      await drag(header, 0, 120 - header.y);
+    }
+
+    const limits = {
+      minWidth: MIN_SIZE.width,
+      minHeight: MIN_SIZE.height,
+      viewportWidth: VIEWPORT.width,
+      viewportHeight: VIEWPORT.height,
+    };
+    for (const dir of RESIZE_DIRECTIONS) {
+      const before = await readPanel();
+      const { dx, dy } = growthDelta(dir, 40);
+      const point = handlePoint(before, dir);
+      const hit = await page.evaluate(({ x, y }) => {
+        const node = document.elementFromPoint(x, y);
+        if (!node) return 'nothing';
+        const dirAttr = node.dataset?.dir
+          ? `[data-dir=${node.dataset.dir}]`
+          : '';
+        return `${node.tagName.toLowerCase()}${node.id ? `#${node.id}` : ''}.${[...node.classList].join('.')}${dirAttr}`;
+      }, point);
+      await drag(point, dx, dy);
+      const after = await readPanel();
+      const expected = resizeBox(before, dir, dx, dy, limits);
+      for (const key of ['left', 'top', 'width', 'height'])
+        near(after[key], expected[key], 2, `${dir} ${key} (pointer on ${hit})`);
+      assert.deepEqual(driftedEdges(before, after, dir, 2), [], `${dir} pins`);
+    }
+    console.log('PASS: eight resize handles keep the opposite edge pinned');
+
+    let before = await readPanel();
+    await drag(handlePoint(before, 'se'), -2000, -2000);
+    let after = await readPanel();
+    near(after.width, MIN_SIZE.width, 2, 'min width (se)');
+    near(after.height, MIN_SIZE.height, 2, 'min height (se)');
+    assert.deepEqual(driftedEdges(before, after, 'se', 2), []);
+    before = after;
+    await drag(handlePoint(before, 'nw'), 2000, 2000);
+    after = await readPanel();
+    near(after.width, MIN_SIZE.width, 2, 'min width (nw)');
+    near(after.height, MIN_SIZE.height, 2, 'min height (nw)');
+    assert.deepEqual(driftedEdges(before, after, 'nw', 2), []);
+    console.log('PASS: minimum size holds from both corners');
+
+    const saved = await readPanel();
+    const record = JSON.parse(saved.stored);
+    assert.equal(record.floating, true);
+    await boot();
+    const restored = await readPanel();
+    assert.equal(restored.floating, true, 'floating survives a reload');
+    for (const key of ['left', 'top', 'width', 'height'])
+      near(restored[key], record[key], 2, `restored ${key}`);
+    console.log('PASS: reload restores position and size');
+
+    // A collapsed window keeps the height chosen for it, through a drag of
+    // its header strip and a reload.
+    const setCollapsed = async (collapsed) => {
+      await page.evaluate(
+        (id, want) => {
+          const panel = document.getElementById(id);
+          if (panel.classList.contains('collapsed') !== want)
+            document
+              .querySelector(
+                `.panel-collapse-btn[data-collapse-target="${id}"]`,
+              )
+              .click();
+        },
+        PANEL_ID,
+        collapsed,
+      );
+      await page.waitForFunction(
+        (id, want) =>
+          document.getElementById(id).classList.contains('collapsed') === want,
+        {},
+        PANEL_ID,
+        collapsed,
+      );
+      await nextFrames(page);
+    };
+    await drag(handlePoint(await readPanel(), 'se'), 0, 200);
+    const chosen = await readPanel();
+    assert.ok(
+      chosen.height > MIN_SIZE.height + 150,
+      `the window grew to ${chosen.height}px`,
+    );
+    await setCollapsed(true);
+    const strip = await readPanel();
+    assert.ok(strip.height < chosen.height - 100, 'collapsed to its header');
+    await drag(await headerPoint(), 40, 30);
+    const movedStrip = await readPanel();
+    assert.equal(movedStrip.floating, true, 'the strip stays a window');
+    near(
+      JSON.parse(movedStrip.stored).height,
+      chosen.height,
+      2,
+      'stored height while collapsed',
+    );
+    await boot();
+    await setCollapsed(false);
+    near(
+      (await readPanel()).height,
+      chosen.height,
+      2,
+      'height after expanding',
+    );
+    console.log(
+      'PASS: a collapsed window keeps its height through a drag and a reload',
+    );
+
+    const dock = await dockPanelByDoubleClick(page, PANEL_ID);
+    const snapped = await readPanel();
+    assert.equal(
+      snapped.floating,
+      false,
+      `double-click snaps back (${describePress(dock)})`,
+    );
+    assert.equal(snapped.inRail, true);
+    assert.equal(snapped.inlineWidth, '');
+    assert.equal(snapped.inlineHeight, '');
+    assert.equal(snapped.stored, null, 'the storage key is gone');
+    console.log('PASS: header double-click returns the panel to the rail');
+
+    const renderErrors = await readRenderErrors(page);
+    assert.deepEqual(
+      [...errors, ...renderErrors.map((text) => `scene.renderError: ${text}`)],
+      [],
+      'no page errors and no Cesium render-loop errors',
+    );
+    console.log('PASS: no page errors and no render-loop errors');
+  } catch (error) {
+    const dir = await saveFailureArtifacts({
+      dir: ARTIFACT_DIR,
+      browser,
+      monitors,
+      error,
+    }).catch(() => null);
+    if (dir) console.error(`failure evidence saved in ${dir}/`);
+    throw error;
+  } finally {
+    await browser.close();
+  }
+}
+
+if (
+  process.argv[1] &&
+  import.meta.url === pathToFileURL(process.argv[1]).href
+) {
+  main().catch((error) => {
+    console.error(error.stack || error.message);
+    process.exit(1);
+  });
+}

scripts/qa-panelDrag.mjs

@@ -0,0 +1,319 @@
+/**
+ * Header press-and-verify for the QA gates that lift a rail panel into a
+ * floating window and dock it again. The rail animates panel heights, so a
+ * point read once can be under another panel by the time the pointer goes
+ * down. Only a provable miss (a recorded press outside the header) is
+ * retried, with a GitHub `::warning::`. With QA_FAIL_ON_RETRY=1 a miss the
+ * panel's own movement cannot explain fails the run instead.
+ */
+
+const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
+/** Retries after the first attempt, and the pause before each. */
+export const PRESS_RETRIES = 2;
+const RETRY_PAUSE_MS = 1000;
+
+/** Whether a retry fails the run (QA_FAIL_ON_RETRY=1 or --fail-on-retry). */
+export function failOnRetryDefault(
+  env = process.env,
+  argv = process.argv.slice(2),
+) {
+  return env.QA_FAIL_ON_RETRY === '1' || argv.includes('--fail-on-retry');
+}
+
+/**
+ * A failed attempt whose press landed outside the header. No recorded press
+ * is a failure, not a miss: a retry would only hide it.
+ * @param {{done: boolean, pressed: {inHeader: boolean}|null}} attempt
+ */
+export function pressMissed(attempt) {
+  return !attempt.done && attempt.pressed?.inHeader === false;
+}
+
+/** Whether the panel's box changed by more than 2 px between two reads. */
+export function panelMoved(before, after) {
+  if (!before || !after) return false;
+  return ['left', 'top', 'width', 'height'].some(
+    (key) => Math.abs((after[key] ?? NaN) - (before[key] ?? NaN)) > 2,
+  );
+}
+
+/** The panel's box, rounded, as `left,top widthxheight`. */
+export function formatBox(box) {
+  if (!box) return 'unknown';
+  const r = (value) => Math.round(value ?? NaN);
+  return `${r(box.left)},${r(box.top)} ${r(box.width)}x${r(box.height)}`;
+}
+
+function panelBox(page, panelId) {
+  return page.evaluate((id) => {
+    const r = document.getElementById(id).getBoundingClientRect();
+    return { left: r.left, top: r.top, width: r.width, height: r.height };
+  }, panelId);
+}
+
+export function headerPoint(page, panelId) {
+  return page.evaluate((id) => {
+    const title = document.querySelector(`#${id} .panel-header .panel-title`);
+    const r = title.getBoundingClientRect();
+    return { x: r.left + r.width / 2, y: r.top + r.height / 2 };
+  }, panelId);
+}
+
+/** Name the element at a point, and whether it is the panel's header. */
+export function hitAt(page, point, panelId) {
+  return page.evaluate(
+    ({ x, y, id }) => {
+      const node = document.elementFromPoint(x, y);
+      if (!node) return { target: 'nothing', inHeader: false };
+      return {
+        target: `${node.tagName.toLowerCase()}${node.id ? `#${node.id}` : ''}.${[...node.classList].join('.')}`,
+        inHeader: Boolean(node.closest(`#${id} .panel-header`)),
+      };
+    },
+    { ...point, id: panelId },
+  );
+}
+
+/**
+ * Re-resolve the header point until it hits the header or the wait runs out
+ * (the press then records the miss).
+ */
+export async function headerTarget(
+  page,
+  panelId,
+  { tries = 20, intervalMs = 500 } = {},
+) {
+  let point = await headerPoint(page, panelId);
+  let hit = await hitAt(page, point, panelId);
+  for (let i = 0; i < tries && !hit.inHeader; i++) {
+    await delay(intervalMs);
+    point = await headerPoint(page, panelId);
+    hit = await hitAt(page, point, panelId);
+  }
+  const box = await panelBox(page, panelId);
+  return { point, hit, timedOut: !hit.inHeader, box };
+}
+
+/**
+ * Best effort: wait until the panel's box has held still for `stillMs`, so
+ * the header does not move between the hit check and the press.
+ */
+export async function waitForStill(
+  page,
+  panelId,
+  { stillMs = 300, timeout = 5000 } = {},
+) {
+  try {
+    await page.waitForFunction(
+      (id, ms) => {
+        const r = document.getElementById(id).getBoundingClientRect();
+        const box = [r.left, r.top, r.width, r.height].map(Math.round).join();
+        const now = performance.now();
+        if (window.__qaStillBox !== box) {
+          window.__qaStillBox = box;
+          window.__qaStillSince = now;
+        }
+        return now - window.__qaStillSince >= ms;
+      },
+      { polling: 100, timeout },
+      panelId,
+      stillMs,
+    );
+    return true;
+  } catch (error) {
+    if (error?.name !== 'TimeoutError') throw error;
+    return false;
+  }
+}
+
+/** Record the next pointerdown's target and the panel's box at that moment. */
+export function recordNextPress(page, panelId) {
+  return page.evaluate((id) => {
+    window.__qaPressBox = null;
+    window.addEventListener(
+      'pointerdown',
+      (event) => {
+        const r = document.getElementById(id).getBoundingClientRect();
+        const target = event.target;
+        window.__qaPressBox = {
+          left: r.left,
+          top: r.top,
+          width: r.width,
+          height: r.height,
+          target: `${target.tagName?.toLowerCase()}${target.id ? `#${target.id}` : ''}.${[...(target.classList || [])].join('.')}`,
+          inHeader: Boolean(target.closest?.(`#${id} .panel-header`)),
+        };
+      },
+      { capture: true, once: true },
+    );
+  }, panelId);
+}
+
+function readPress(page) {
+  return page.evaluate(() => window.__qaPressBox ?? null);
+}
+
+export async function waitForFloating(
+  page,
+  panelId,
+  floating,
+  { timeout = 3000 } = {},
+) {
+  try {
+    await page.waitForFunction(
+      (id, want) =>
+        document.getElementById(id).classList.contains('panel-floating') ===
+        want,
+      { polling: 50, timeout },
+      panelId,
+      floating,
+    );
+    return true;
+  } catch (error) {
+    if (error?.name !== 'TimeoutError') throw error;
+    return false;
+  }
+}
+
+/** Two paints: by then every layout change an input caused is on screen. */
+export function nextFrames(page) {
+  return page.evaluate(
+    () =>
+      new Promise((resolve) =>
+        requestAnimationFrame(() => requestAnimationFrame(() => resolve())),
+      ),
+  );
+}
+
+export async function dragPointer(page, from, dx, dy, { steps = 6 } = {}) {
+  await page.mouse.move(from.x, from.y);
+  await page.mouse.down();
+  await page.mouse.move(from.x + dx / 2, from.y + dy / 2, { steps });
+  await page.mouse.move(from.x + dx, from.y + dy, { steps });
+  await page.mouse.up();
+  await nextFrames(page);
+}
+
+export function describeRetry(
+  panelId,
+  attempt,
+  { round, retries, extra = '' },
+) {
+  const { hit, pressed, timedOut, still, box } = attempt;
+  return [
+    `retry ${round + 1}/${retries}: the press missed the ${panelId} header (on ${pressed?.target ?? hit.target})`,
+    `pre-press hit check ${timedOut ? `timed out (on ${hit.target})` : 'passed'}`,
+    `stillness ${still === false ? 'timed out' : 'held'}`,
+    `panel box at hit check ${formatBox(box)} -> at press ${formatBox(pressed)}`,
+  ]
+    .concat(extra ? [extra] : [])
+    .join('; ');
+}
+
+/** Retry `press` only while it provably misses the header. */
+async function pressUntilDecided(
+  page,
+  panelId,
+  press,
+  {
+    retries,
+    log,
+    note,
+    pauseMs = RETRY_PAUSE_MS,
+    failOnRetry = failOnRetryDefault(),
+  },
+) {
+  for (let round = 0; ; round++) {
+    const still = await waitForStill(page, panelId);
+    await recordNextPress(page, panelId);
+    const { point, hit, timedOut, box } = await headerTarget(page, panelId);
+    const done = await press(point);
+    const attempt = {
+      point,
+      hit,
+      timedOut,
+      still,
+      box,
+      done,
+      pressed: await readPress(page),
+      retries: round,
+    };
+    if (round >= retries || !pressMissed(attempt)) return attempt;
+    const why = describeRetry(panelId, attempt, {
+      round,
+      retries,
+      extra: note ? await note() : '',
+    });
+    if (failOnRetry && !panelMoved(box, attempt.pressed))
+      throw new Error(
+        `QA_FAIL_ON_RETRY=1 turns this retry into a failure: ${why}`,
+      );
+    log(`note: ${why}; retrying`);
+    log(`::warning title=Panel press retried::${why}`);
+    await delay(pauseMs);
+  }
+}
+
+/**
+ * Lift a docked panel into a floating window with a header drag.
+ * @returns {Promise<{point: {x: number, y: number}, hit: {target: string, inHeader: boolean}, done: boolean, pressed: object|null}>}
+ */
+export function liftPanelByHeader(
+  page,
+  panelId,
+  {
+    dx,
+    dy,
+    retries = PRESS_RETRIES,
+    log = console.log,
+    note,
+    pauseMs,
+    failOnRetry,
+  } = {},
+) {
+  return pressUntilDecided(
+    page,
+    panelId,
+    async (point) => {
+      await dragPointer(page, point, dx, dy);
+      return waitForFloating(page, panelId, true);
+    },
+    { retries, log, note, pauseMs, failOnRetry },
+  );
+}
+
+/** Dock a floating panel with a header double-click; same result as lifting. */
+export function dockPanelByDoubleClick(
+  page,
+  panelId,
+  {
+    retries = PRESS_RETRIES,
+    log = console.log,
+    note,
+    pauseMs,
+    failOnRetry,
+  } = {},
+) {
+  return pressUntilDecided(
+    page,
+    panelId,
+    async (point) => {
+      await page.mouse.click(point.x, point.y, { clickCount: 1 });
+      await page.mouse.click(point.x, point.y, { clickCount: 2 });
+      return waitForFloating(page, panelId, false);
+    },
+    { retries, log, note, pauseMs, failOnRetry },
+  );
+}
+
+/** Where an attempt pressed, for an assertion message. */
+export function describePress(attempt) {
+  const { point, hit, pressed } = attempt;
+  const where = `pressed ${Math.round(point.x)},${Math.round(point.y)}`;
+  if (!pressed)
+    return `${where}: no pointerdown reached the page (hit check on ${hit.target}, in header: ${hit.inHeader})`;
+  const n = attempt.retries || 0;
+  const retried = n ? `, after ${n} ${n === 1 ? 'retry' : 'retries'}` : '';
+  return `${where} on ${pressed.target}, in header: ${pressed.inHeader}${retried}`;
+}

scripts/setup-doctor.mjs

@@ -34,6 +34,7 @@ export const CREDENTIALS = Object.freeze([
     )),
   },
   { name: 'LL2_API_TOKEN', label: 'Launch Library 2', keychain: [] },
+  { name: 'MAPILLARY_CLIENT_TOKEN', label: 'Mapillary street level', keychain: [['mapillary', 'client-token'], ['mapillary', 'token']] },
 ]);
 
 export function isConfiguredValue(value) {