Merge branch 'main' into fix/nyc-cctv-pack

scripts/format-scope.json

@@ -898,6 +898,17 @@
   "src/layers/streetLevel/selection.js",
   "src/layers/streetLevel/providers/mapillary/viewer.js",
   "src/layers/streetLevel/providers/mapillary/source.js",
+  "src/layers/streetLevel/groundClick.js",
+  "src/layers/streetLevel/providers/google/index.js",
+  "src/layers/streetLevel/providers/google/policy.js",
+  "src/layers/streetLevel/providers/google/viewer.js",
+  "src/layers/streetLevel/providers/google/mapsLoader.js",
+  "src/layers/streetLevel/groundClick.test.mjs",
+  "src/app/layers/streetLevel.test.mjs",
+  "src/layers/streetLevel/providers/google/provider.test.mjs",
+  "src/layers/streetLevel/providers/google/viewer.test.mjs",
+  "src/layers/streetLevel/providers/google/mapsLoader.test.mjs",
+  "src/testSupport/googleStreetViewFakes.mjs",
   "server/providers/mapillary.js",
   "server/providers/mapillary/routes.js",
   "server/providers/mapillary/constants.js",
@@ -969,5 +980,7 @@
   "src/tools/views.test.mjs",
   "src/app/embed.test.mjs",
   "src/tools/globePanel.test.mjs",
-  "src/costEndpointThrottle.test.mjs"
+  "src/costEndpointThrottle.test.mjs",
+  "src/sources/gbfsStations.test.mjs",
+  "scripts/qa-gbfs-names.mjs"
 ]

scripts/package-boundaries.json

@@ -1194,7 +1194,8 @@
     "exports": [
       "./layers/street-level",
       "./layers/street-level/mapillary",
-      "./layers/street-level/mapillary/source"
+      "./layers/street-level/mapillary/source",
+      "./layers/street-level/google"
     ],
     "modules": [
       "src/layers/streetLevel/index.js",
@@ -1223,6 +1224,11 @@
       "src/layers/streetLevel/tileMath.js",
       "src/layers/streetLevel/selection.js",
       "src/layers/streetLevel/providers/mapillary/viewer.js",
+      "src/layers/streetLevel/groundClick.js",
+      "src/layers/streetLevel/providers/google/index.js",
+      "src/layers/streetLevel/providers/google/policy.js",
+      "src/layers/streetLevel/providers/google/viewer.js",
+      "src/layers/streetLevel/providers/google/mapsLoader.js",
       "src/layers/streetLevel/providers/mapillary/source.js",
       "scripts/qa-street-level.mjs"
     ],
@@ -2178,6 +2184,11 @@
       "src/layers/streetLevel/tileMath.js",
       "src/layers/streetLevel/selection.js",
       "src/layers/streetLevel/providers/mapillary/viewer.js",
+      "src/layers/streetLevel/groundClick.js",
+      "src/layers/streetLevel/providers/google/index.js",
+      "src/layers/streetLevel/providers/google/policy.js",
+      "src/layers/streetLevel/providers/google/viewer.js",
+      "src/layers/streetLevel/providers/google/mapsLoader.js",
       "src/layers/streetLevel/providers/mapillary/source.js",
       "src/app/layers/streetLevel.js",
       "src/layers/alpr/tileRecords.js",
@@ -2704,6 +2715,11 @@
       "src/layers/streetLevel/tileMath.js",
       "src/layers/streetLevel/selection.js",
       "src/layers/streetLevel/providers/mapillary/viewer.js",
+      "src/layers/streetLevel/groundClick.js",
+      "src/layers/streetLevel/providers/google/index.js",
+      "src/layers/streetLevel/providers/google/policy.js",
+      "src/layers/streetLevel/providers/google/viewer.js",
+      "src/layers/streetLevel/providers/google/mapsLoader.js",
       "src/layers/streetLevel/providers/mapillary/source.js",
       "src/app/layers/streetLevel.js",
       "src/layers/alpr/tileRecords.js",

scripts/qa-gbfs-names.mjs

@@ -0,0 +1,336 @@
+#!/usr/bin/env node
+/**
+ * Keyless station-name regression against the real globe and bike-share tool.
+ * Run with a dev or preview server: node scripts/qa-gbfs-names.mjs --url http://localhost:4173
+ * GBFS documents are synthetic; no operator feed or provider key is required.
+ */
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import path from 'node:path';
+import puppeteer from 'puppeteer';
+
+const urlIndex = process.argv.indexOf('--url');
+const appUrl =
+  urlIndex < 0 ? 'http://localhost:4173' : process.argv[urlIndex + 1];
+const shots = path.resolve('qa-shots/gbfs-names');
+fs.mkdirSync(shots, { recursive: true });
+const information = {
+  version: '3.0',
+  data: {
+    stations: [
+      {
+        station_id: 'english',
+        name: [
+          { language: 'hu', text: 'Magyar tér' },
+          { language: 'en', text: 'QA English Square' },
+        ],
+      },
+      {
+        station_id: 'short',
+        name: [null, { language: 'en', text: ' ' }],
+        short_name: [{ language: 'en-GB', text: 'QA Short Name' }],
+      },
+      { station_id: 'unnamed', name: [null, {}, { language: 42, text: [] }] },
+      { station_id: 'legacy', name: ' QA Legacy Station ' },
+      {
+        station_id: 'fallback',
+        name: [null, { language: 'hu', text: 'QA Magyar Station' }],
+      },
+    ].map((station, index) => ({
+      ...station,
+      lat: 30.2681 + index * 0.001,
+      lon: -97.7469 + index * 0.001,
+      capacity: 13,
+    })),
+  },
+};
+const status = {
+  data: {
+    stations: information.data.stations.map(({ station_id }) => ({
+      station_id,
+      num_bikes_available: 4,
+      num_docks_available: 9,
+      is_renting: true,
+      is_returning: true,
+    })),
+  },
+};
+const browser = await puppeteer.launch({
+  headless: 'new',
+  ...(process.env.PUPPETEER_EXECUTABLE_PATH
+    ? { executablePath: process.env.PUPPETEER_EXECUTABLE_PATH }
+    : {}),
+  args:
+    process.platform === 'darwin'
+      ? ['--use-angle=metal']
+      : ['--use-gl=angle', '--use-angle=swiftshader'],
+});
+let checks = 0;
+const check = (name, actual, expected) => {
+  assert.deepEqual(actual, expected, name);
+  checks++;
+  console.log(`[PASS] ${name}`);
+};
+async function open(mode = 'normal') {
+  const page = await browser.newPage();
+  await page.bringToFront();
+  const errors = [];
+  page.on('pageerror', (error) => errors.push(error.message));
+  await page.setViewport({ width: 1440, height: 900 });
+  await page.evaluateOnNewDocument(
+    ({ information, status, mode }) => {
+      localStorage.clear();
+      localStorage.setItem('gev:first-run-mission:v1', 'suppressed');
+      window.__qaPainted = [];
+      const paint = CanvasRenderingContext2D.prototype.fillText;
+      CanvasRenderingContext2D.prototype.fillText = function (text, ...args) {
+        if (
+          String(text).startsWith('QA ') ||
+          String(text) === 'Station unnamed'
+        ) {
+          window.__qaPainted.push(String(text));
+          if (window.__qaPainted.length > 100) window.__qaPainted.shift();
+        }
+        return paint.call(this, text, ...args);
+      };
+      const original = window.fetch.bind(window);
+      window.fetch = async (input, init) => {
+        const url = String(
+          typeof input === 'string' || input instanceof URL ? input : input.url,
+        );
+        if (url.includes('/api/gbfs/')) {
+          if (mode === 'failure') return new Response('{}', { status: 503 });
+          const payload =
+            mode === 'empty'
+              ? { data: { stations: [] } }
+              : decodeURIComponent(url).includes('station_information')
+                ? information
+                : status;
+          return new Response(JSON.stringify(payload), {
+            headers: { 'Content-Type': 'application/json' },
+          });
+        }
+        if (url.includes('/api/flights')) return new Response('{"states":[]}');
+        if (url.includes('/api/military')) return new Response('{"ac":[]}');
+        if (url.includes('/api/vessels'))
+          return new Response('{"connected":false,"vessels":[]}');
+        return original(input, init);
+      };
+    },
+    { information, status, mode },
+  );
+  await page.goto(appUrl, { waitUntil: 'domcontentloaded' });
+  await page.waitForFunction(
+    () =>
+      window.__godsEyeView?.dataManager && window.__godsEyeView?.voiceCommands,
+    { timeout: 60000 },
+  );
+  await page.waitForFunction(
+    () =>
+      !document.getElementById('loading-screen') ||
+      (document.getElementById('loading-screen').classList.contains('hidden') &&
+        getComputedStyle(document.getElementById('loading-screen')).opacity ===
+          '0'),
+    { timeout: 60000 },
+  );
+  await page.evaluate(async () => {
+    const { dataManager, viewer } = window.__godsEyeView;
+    for (const [id, layer] of dataManager.layers) {
+      if (layer.enabled)
+        await dataManager.setEnabled(id, false, { origin: 'user' });
+    }
+    const Cartesian3 = viewer.camera.position.constructor;
+    viewer.camera.cancelFlight();
+    viewer.camera.setView({
+      destination: Cartesian3.fromDegrees(-97.7449, 30.2701, 3000),
+      orientation: { heading: 0, pitch: -Math.PI / 2, roll: 0 },
+    });
+    await dataManager.setEnabled('bikeshare', true, { origin: 'user' });
+    window.__godsEyeView.requestRender('gbfs-name-qa');
+  });
+  return { page, errors };
+}
+try {
+  const { page, errors } = await open();
+  await page.waitForFunction(
+    () =>
+      window.__godsEyeView.dataManager.layers.get('bikeshare').module.getStats()
+        .count === 5,
+    { timeout: 15000 },
+  );
+  const records = await page.evaluate(() =>
+    window.__godsEyeView.dataManager.layers
+      .get('bikeshare')
+      .module.getAnalystRecords(),
+  );
+  check(
+    'the layer retains all five stations and normalized names',
+    records.map((r) => r.name),
+    [
+      'QA English Square',
+      'QA Short Name',
+      null,
+      'QA Legacy Station',
+      'QA Magyar Station',
+    ],
+  );
+  const tool = await page.evaluate(() =>
+    window.__godsEyeView.voiceCommands.runner('get_bike_share', {
+      area: { lat: 30.2701, lon: -97.7449, radius_km: 2 },
+    }),
+  );
+  check('the real bike-share tool succeeds', tool.ok, true);
+  check(
+    'the tool preserves localized, short, unnamed, legacy and non-English names',
+    tool.data.rows.map((r) => r.name).sort(),
+    [
+      null,
+      'QA English Square',
+      'QA Short Name',
+      'QA Legacy Station',
+      'QA Magyar Station',
+    ].sort(),
+  );
+  check(
+    'availability remains attached to every station',
+    tool.data.rows.every(
+      (r) => r.bikes_available === 4 && r.docks_available === 9,
+    ),
+    true,
+  );
+  const clickPoint = await page.evaluate(() => {
+    window.__qaPainted = [];
+    const { viewer } = window.__godsEyeView;
+    const Cartesian3 = viewer.camera.position.constructor;
+    const point = viewer.scene.cartesianToCanvasCoordinates(
+      Cartesian3.fromDegrees(-97.7469, 30.2681),
+    );
+    const rect = viewer.scene.canvas.getBoundingClientRect();
+    return { x: rect.left + point.x, y: rect.top + point.y };
+  });
+  await page.mouse.click(clickPoint.x, clickPoint.y);
+  await page.waitForFunction(
+    () => window.__qaPainted.includes('QA English Square'),
+    { timeout: 10000 },
+  );
+  check(
+    'a real pointer click selects the station with its localized name',
+    await page.evaluate(() => window.__qaPainted.includes('QA English Square')),
+    true,
+  );
+  await page.keyboard.press('Escape');
+  for (const [id, title] of [
+    ['english', 'QA English Square'],
+    ['short', 'QA Short Name'],
+    ['unnamed', 'Station unnamed'],
+  ]) {
+    await page.evaluate((id) => {
+      window.__qaPainted = [];
+      const app = window.__godsEyeView;
+      app.dataManager.layers
+        .get('bikeshare')
+        .module._selectBikeshareStationForTest(`austin-capmetro:${id}`);
+      app.requestRender('gbfs-name-selection-qa');
+    }, id);
+    await page.waitForFunction(
+      (title) => window.__qaPainted.includes(title),
+      { timeout: 10000 },
+      title,
+    );
+    check(
+      `the selected ${id} card paints the expected title`,
+      await page.evaluate((title) => window.__qaPainted.includes(title), title),
+      true,
+    );
+    await page.screenshot({ path: path.join(shots, `${id}.png`) });
+    await page.keyboard.press('Escape');
+    await page.waitForFunction(() =>
+      window.__godsEyeView.dataManager.layers
+        .get('bikeshare')
+        .module.getDetectableObjects()
+        .every((record) => !record.skipLabel),
+    );
+    check(
+      `Escape clears the ${id} card`,
+      await page.evaluate(
+        () =>
+          window.__godsEyeView.dataManager.layers
+            .get('bikeshare')
+            .module.getDetectableObjects()
+            .filter((record) => record.skipLabel).length,
+      ),
+      0,
+    );
+  }
+  await page.setViewport({ width: 390, height: 844 });
+  await page.evaluate(() => {
+    window.__qaPainted = [];
+    const app = window.__godsEyeView;
+    // Use the supported clean view to inspect the mobile card clear of panels.
+    app.styleManager.toggleCleanView(true);
+    const Cartesian3 = app.viewer.camera.position.constructor;
+    app.viewer.camera.cancelFlight();
+    app.viewer.camera.setView({
+      destination: Cartesian3.fromDegrees(-97.7449, 30.2701, 3000),
+      orientation: { heading: 0, pitch: -Math.PI / 2, roll: 0 },
+    });
+    app.dataManager.layers
+      .get('bikeshare')
+      .module._selectBikeshareStationForTest('austin-capmetro:english');
+    app.requestRender('gbfs-name-mobile-qa');
+  });
+  await page.waitForFunction(
+    () => window.__qaPainted.includes('QA English Square'),
+    { timeout: 10000 },
+  );
+  check(
+    'the mobile selected card paints its normalized name',
+    await page.evaluate(() => window.__qaPainted.includes('QA English Square')),
+    true,
+  );
+  await page.screenshot({ path: path.join(shots, 'mobile.png') });
+  await page.evaluate(() =>
+    window.__godsEyeView.dataManager.setEnabled('bikeshare', false, {
+      origin: 'user',
+    }),
+  );
+  check(
+    'disabling clears selected cards and analyst records',
+    await page.evaluate(() => ({
+      count: window.__godsEyeView.dataManager.layers
+        .get('bikeshare')
+        .module.getAnalystRecords().length,
+      selected: window.__godsEyeView.dataManager.layers
+        .get('bikeshare')
+        .module.getDetectableObjects()
+        .filter((record) => record.skipLabel).length,
+    })),
+    { count: 0, selected: 0 },
+  );
+  check('normal fixtures produce no page exceptions', errors, []);
+  await page.close();
+  for (const mode of ['empty', 'failure']) {
+    const { page, errors } = await open(mode);
+    await page.waitForFunction(
+      () =>
+        !window.__godsEyeView.dataManager.layers
+          .get('bikeshare')
+          .module.getStats().loading,
+    );
+    check(
+      `${mode} leaves no rendered stations`,
+      await page.evaluate(
+        () =>
+          window.__godsEyeView.dataManager.layers
+            .get('bikeshare')
+            .module.getStats().count,
+      ),
+      0,
+    );
+    check(`${mode} produces no page exceptions`, errors, []);
+    await page.close();
+  }
+  console.log(`GBFS names: ${checks}/${checks} checks passed; ${appUrl}`);
+} finally {
+  await browser.close();
+}

scripts/qa-panel-resize.mjs

@@ -381,11 +381,36 @@ async function main() {
       );
       await nextFrames(page);
     };
-    await drag(handlePoint(await readPanel(), 'se'), 0, 200);
-    const chosen = await readPanel();
+    // Grow it from the corner once the restored window holds still, with the
+    // pointer really on the handle (a press beside it selects page text).
+    let chosen = await readPanel();
+    const tried = [];
+    for (
+      let attempt = 0;
+      attempt < 3 && chosen.height <= MIN_SIZE.height + 150;
+      attempt++
+    ) {
+      await settle();
+      const box = await readPanel();
+      const corner = handlePoint(box, 'se');
+      const hit = await page.evaluate(({ x, y }) => {
+        const node = document.elementFromPoint(x, y);
+        return {
+          dir: node?.dataset?.dir || null,
+          target: node
+            ? `${node.tagName.toLowerCase()}${node.id ? `#${node.id}` : ''}.${[...node.classList].join('.')}`
+            : 'nothing',
+        };
+      }, corner);
+      tried.push(
+        `${Math.round(corner.x)},${Math.round(corner.y)} on ${hit.target} (box ${Math.round(box.left)},${Math.round(box.top)} ${Math.round(box.width)}x${Math.round(box.height)})`,
+      );
+      if (hit.dir === 'se') await drag(corner, 0, 200);
+      chosen = await readPanel();
+    }
     assert.ok(
       chosen.height > MIN_SIZE.height + 150,
-      `the window grew to ${chosen.height}px`,
+      `the window grew to ${chosen.height}px; tried ${tried.join('; ')}`,
     );
     await setCollapsed(true);
     const strip = await readPanel();

scripts/qa-street-level.mjs

@@ -49,18 +49,27 @@ export const VIEWPORTS = Object.freeze([
 ]);
 
 /** Provider chips the panel must show, in order. */
-export const EXPECTED_PROVIDERS = Object.freeze(['mapillary']);
+export const EXPECTED_PROVIDERS = Object.freeze(['mapillary', 'google']);
 
 /**
- * Skips no setup can avoid: CI forks have no Google key, and live runs cannot
- * stage fixture-only cases. `no Mapillary key` is not accepted: CI's dummy
- * token runs the keyed flow, so a keyless strict run means that wiring broke.
+ * Skips no setup can avoid: CI forks have no Google key (so neither Google 3D
+ * nor Street View), and live runs cannot stage fixture-only cases. `no
+ * Mapillary key` is not accepted: CI's dummy token runs the keyed flow, so a
+ * keyless strict run means that wiring broke. Nor is `Google key refused`: a
+ * key that is set must work.
  */
 export const STRICT_ALLOWED_SKIPS = Object.freeze([
   'no Google 3D',
+  'no Google key',
   'fixtures only',
 ]);
 
+/** A Sacramento street with Google Street View (10th St, by the Capitol). */
+export const STREET_VIEW_STREET = Object.freeze({
+  lon: -121.49372,
+  lat: 38.57986,
+});
+
 export function strictViolations(skips) {
   return skips.filter((skip) => !STRICT_ALLOWED_SKIPS.includes(skip.reason));
 }
@@ -619,7 +628,8 @@ async function main() {
     }
     await page.setViewport(VIEWPORTS[0]);
     const expandStrip = async (target = page) => {
-      await target.click(
+      await clickPanelControl(
+        target,
         '.panel-collapse-btn[data-collapse-target="street-level-panel"]',
       );
       assert.ok(
@@ -649,14 +659,30 @@ async function main() {
             ),
           ].map((chip) => chip.dataset.chipId),
         );
-        assert.deepEqual(chips, EXPECTED_PROVIDERS);
-        // One swatch per source plus "Selected"; each chip wears its colour.
-        assert.equal(
-          await page.evaluate(
-            () => document.querySelectorAll('#sl-legend li').length,
-          ),
-          EXPECTED_PROVIDERS.length + 1,
+        // Every registered provider usable on this map, in order (Street View
+        // only on Google 3D).
+        const listed = await page.evaluate(() =>
+          window.__godsEyeView.dataManager.layers
+            .get('street-level')
+            .module.getUIState()
+            .providers.map((provider) => provider.id),
         );
+        assert.deepEqual(chips, listed);
+        assert.deepEqual(
+          EXPECTED_PROVIDERS.filter((id) => listed.includes(id)),
+          listed,
+        );
+        assert.ok(listed.includes('mapillary'));
+        // One swatch per switched-on source plus "Selected" (Street View
+        // starts off); each chip wears its colour.
+        const legend = await page.evaluate(() => ({
+          swatches: document.querySelectorAll('#sl-legend li').length,
+          on: window.__godsEyeView.dataManager.layers
+            .get('street-level')
+            .module.getUIState()
+            .providers.filter((provider) => provider.on).length,
+        }));
+        assert.equal(legend.swatches, legend.on + 1);
         assert.equal(
           await page.$eval('[data-chip-id="mapillary"]', (chip) =>
             chip.style.getPropertyValue('--chip-color'),
@@ -1721,6 +1747,285 @@ async function main() {
           );
         },
       );
+      const googleChip = '#sl-provider-chips [data-chip-id="google"]';
+      const googleKey = await page.evaluate(() =>
+        Boolean(window.__GOOGLE_MAPS_API_KEY__),
+      );
+      await step(
+        'Street View starts off, appears only on the Google 3D map, and travels in the share link',
+        async () => {
+          const module = () =>
+            window.__godsEyeView.dataManager.layers.get('street-level').module;
+          assert.equal(
+            await page.evaluate(`(${module})().getParams().google`),
+            false,
+            'off until lit: panoramas are billed',
+          );
+          const setStreetView = (on) =>
+            page.evaluate(
+              (value) =>
+                window.__godsEyeView.dataManager.setLayerParams(
+                  'street-level',
+                  { google: value },
+                  { origin: 'user' },
+                ),
+              on,
+            );
+          const shown = () =>
+            page.evaluate(() => ({
+              chip: Boolean(
+                document.querySelector(
+                  '#sl-provider-chips [data-chip-id="google"]',
+                ),
+              ),
+              legend: [...document.querySelectorAll('#sl-legend li')].some(
+                (item) => /Street View/.test(item.textContent),
+              ),
+              credit: document.body.innerHTML.includes('Street View imagery'),
+              button: !document.getElementById('sl-nearest-btn').hidden,
+            }));
+          const original = await stacks.active();
+          // Off Google 3D (CI's only map) nothing of Street View shows, even
+          // switched on: Google's terms keep it off other maps.
+          if (original === 'photoreal') await stacks.set('esri-imagery');
+          await setStreetView(true);
+          await uiUntil((u) => u.providers.every((p) => p.id !== 'google'));
+          assert.ok(
+            await settle(
+              page,
+              () => !document.body.innerHTML.includes('Street View imagery'),
+            ),
+            'no Google credit on another map',
+          );
+          assert.deepEqual(await shown(), {
+            chip: false,
+            legend: false,
+            credit: false,
+            button: false,
+          });
+          // Street View rides the shared provider-switch field (r).
+          const option = `${STREET_LEVEL_TOKEN}.r.google-1`;
+          assert.ok(
+            await settle(
+              page,
+              (token) =>
+                (new URLSearchParams(location.hash.slice(1)).get('lo') || '')
+                  .split('_')
+                  .includes(token),
+              option,
+              // The link is written once the view rests for 500 ms; under a
+              // software renderer with a photo open that can take a while.
+              { timeout: 30_000 },
+            ),
+            `the share link keeps the choice: ${option}`,
+          );
+          if (await stacks.photoreal()) {
+            await stacks.set('photoreal');
+            await uiUntil((u) => u.providers.some((p) => p.id === 'google'));
+            const chipNow = await page.$eval(googleChip, (node) => ({
+              className: node.className,
+              title: node.title,
+              color: node.style.getPropertyValue('--chip-color'),
+            }));
+            assert.equal(chipNow.color, '#4285f4');
+            if (googleKey) assert.match(chipNow.className, /chip-active/);
+            else {
+              assert.match(chipNow.className, /chip-error/);
+              assert.match(chipNow.title, /GOOGLE_MAPS_API_KEY/);
+            }
+            assert.ok(
+              await settle(page, () =>
+                document.body.innerHTML.includes('Street View imagery'),
+              ),
+              'the Google credit shows on Google 3D',
+            );
+          }
+          // Back to Mapillary (one source at a time), as the next steps expect.
+          await page.evaluate(() =>
+            window.__godsEyeView.dataManager.setLayerParams(
+              'street-level',
+              { mapillary: true, google: false },
+              { origin: 'user' },
+            ),
+          );
+          await stacks.set(original);
+          await uiUntil(
+            (u) => u.providers.find((p) => p.id === 'google')?.on !== true,
+          );
+        },
+      );
+      await step(
+        'on Google 3D a click on a street opens Google Street View where it is, captioned and linked, and its view drives the pose',
+        async ({ skip }) => {
+          if (!googleKey) return skip('no Google key');
+          // Google's terms: Street View only beside Google's own map.
+          if (!(await stacks.photoreal())) return skip('no Google 3D');
+          const original = await stacks.active();
+          const closePhoto = () =>
+            page.evaluate(() =>
+              window.__godsEyeView.dataManager.layers
+                .get('street-level')
+                .module.closeViewer(),
+            );
+          const setOn = async (selector, id, on) => {
+            const now = (await ui()).providers.find((p) => p.id === id)?.on;
+            if (now === on) return;
+            await clickPanelControl(page, selector);
+            assert.ok(
+              await uiUntil(
+                (u, want) =>
+                  u.providers.find((p) => p.id === want.id)?.on === want.on,
+                { id, on },
+              ),
+              `the ${id} chip switched ${on ? 'on' : 'off'}`,
+            );
+          };
+          await closePhoto();
+          await stacks.set('photoreal');
+          // A Mapillary line under the pointer wins the click: aim at bare
+          // ground with only Street View on (lit first: the last lit chip
+          // would switch the layer off).
+          await setOn(googleChip, 'google', true);
+          await setOn(chip, 'mapillary', false);
+          try {
+            const street = STREET_VIEW_STREET;
+            await page.evaluate((at) => {
+              const v = window.__godsEyeView.viewer;
+              v.camera.cancelFlight?.();
+              const C = v.camera.positionCartographic.constructor;
+              v.camera.setView({
+                destination: v.scene.globe.ellipsoid.cartographicToCartesian(
+                  C.fromDegrees(at.lon, at.lat, 300),
+                ),
+                orientation: { heading: 0, pitch: -Math.PI / 2, roll: 0 },
+              });
+            }, street);
+            // At street zoom the hint invites the click.
+            assert.ok(
+              await uiUntil(
+                (u) =>
+                  u.providers.find((p) => p.id === 'google')?.hint ===
+                  'click a street to open Street View',
+              ),
+              'the click hint shows at street zoom',
+            );
+            const camera = () =>
+              page.evaluate(() => {
+                const c = window.__godsEyeView.viewer.camera.positionWC;
+                return [c.x, c.y, c.z];
+              });
+            const at = await page.evaluate((point) => {
+              const v = window.__godsEyeView.viewer;
+              const C = v.camera.positionCartographic.constructor;
+              const ground = v.scene.globe.ellipsoid.cartographicToCartesian(
+                C.fromDegrees(point.lon, point.lat, 0),
+              );
+              const canvas = v.scene.cartesianToCanvasCoordinates(ground);
+              const box = v.scene.canvas.getBoundingClientRect();
+              return (
+                canvas && { x: box.left + canvas.x, y: box.top + canvas.y }
+              );
+            }, street);
+            assert.ok(at, 'the street is on screen');
+            const before = await camera();
+            await page.mouse.click(at.x, at.y);
+            await uiUntil(
+              (u) =>
+                Boolean(u.street.error) ||
+                (u.street.providerId === 'google' &&
+                  Boolean(u.street.imageId) &&
+                  !u.street.loading),
+              null,
+              { timeout: 30_000 },
+            );
+            const opened = (await ui()).street;
+            if (/refused GOOGLE_MAPS_API_KEY/.test(opened.error || ''))
+              return skip('Google key refused');
+            if (/did not answer/.test(opened.error || ''))
+              return skip('Google did not answer');
+            assert.equal(opened.error, null);
+            assert.equal(opened.providerId, 'google');
+            const after = await camera();
+            assert.ok(
+              Math.hypot(...after.map((v, i) => v - before[i])) < 1,
+              'the camera stays where the user clicked',
+            );
+            const shown = await page.evaluate(() => ({
+              by: document.getElementById('sl-image-by').textContent,
+              when: document.getElementById('sl-image-when').textContent,
+              label: document.getElementById('sl-image-link').textContent,
+              href: document.getElementById('sl-image-link').href,
+              fitFillHidden:
+                document.querySelector('[data-sl-render]').parentElement.hidden,
+              panorama: Boolean(
+                document.querySelector('#sl-viewer .sl-google-panorama'),
+              ),
+              mapillaryLeft: Boolean(
+                document.querySelector('#sl-viewer .mapillary-dom'),
+              ),
+            }));
+            assert.match(shown.by, /Image by /);
+            assert.match(shown.when, /\d{4}-\d{2}$/, 'dated by month');
+            assert.equal(shown.label, 'GOOGLE STREET VIEW ↗');
+            assert.match(shown.href, /map_action=pano&pano=/);
+            assert.equal(shown.fitFillHidden, true, 'no FIT/FILL for Google');
+            assert.equal(shown.panorama, true);
+            assert.equal(shown.mapillaryLeft, false, 'no viewer left under it');
+            // A real drag turns Google's view, and the pose follows it.
+            const box = await page.$eval(
+              '#sl-viewer .sl-google-panorama',
+              (node) => {
+                const r = node.getBoundingClientRect();
+                return { x: r.left + r.width / 2, y: r.top + r.height / 2 };
+              },
+            );
+            await page.mouse.move(box.x, box.y);
+            await page.mouse.down();
+            await page.mouse.move(box.x - 120, box.y, { steps: 12 });
+            await page.mouse.up();
+            assert.ok(
+              await uiUntil(
+                (u, start) =>
+                  Number.isFinite(u.street.bearing) &&
+                  Math.abs(u.street.bearing - start) > 5,
+                opened.bearing ?? 0,
+                { timeout: 10_000 },
+              ),
+              'the pose bearing follows the drag',
+            );
+            // The keyboard path: OPEN STREET VIEW at the view centre.
+            await closePhoto();
+            await uiUntil((u) => u.street.open === false);
+            await clickPanelControl(page, '#sl-nearest-btn');
+            assert.ok(
+              await uiUntil(
+                (u) =>
+                  u.street.providerId === 'google' &&
+                  Boolean(u.street.imageId) &&
+                  !u.street.loading,
+                null,
+                { timeout: 30_000 },
+              ),
+              'OPEN STREET VIEW opens the panorama at the view centre',
+            );
+            // Leaving Google 3D closes the panorama (Google's terms).
+            await stacks.set('esri-imagery');
+            assert.ok(
+              await uiUntil((u) => u.street.open === false),
+              'the panorama closes off Google 3D',
+            );
+          } finally {
+            await closePhoto();
+            // Off Google 3D the Street View chip is hidden: return to it
+            // before switching the chip, or the cleanup throws and hides
+            // the step's own result.
+            await stacks.set('photoreal');
+            await setOn(chip, 'mapillary', true);
+            await setOn(googleChip, 'google', false);
+            await stacks.set(original);
+          }
+        },
+      );
       await step(
         'a reload with the layer on keeps a collapsed panel collapsed, and the share link carries its ui token',
         async () => {