fix(street-level): point a key-gated layer at Street View; button beside the hint

Review of #966: with a Google Maps key but no Mapillary token, switching
Street Level on read KEY REQUIRED / "Needs MAPILLARY_CLIENT_TOKEN" with
nothing about Street View, which stayed off (billing), so the layer looked
broken.

- While the switched-on providers lack their keys, the layer reports the
  switched-off ones that would draw with a key already set
  (keyAlternatives: Street View on Google 3D with a Google key). The
  panel's KEY REQUIRED tooltip, its coverage line and the layer row's
  tooltip then read "Needs MAPILLARY_CLIENT_TOKEN — add it in Provider
  Settings, or light STREET VIEW to use your Google Maps key"
  (keySetupWithAlternatives). Off Google 3D the plain KEY REQUIRED stays.
  Street View stays off by default.
- OPEN STREET VIEW moves beside the coverage hint: at the default panel
  width the PROVIDERS row has no room for it, so it wrapped onto a line of
  its own.
- The panel gate's corner drag names what lay under the pointer when it
  fails.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

src/layers/streetLevel/index.js

@@ -9,7 +9,11 @@ import { createViewerHost } from './viewerHost.js';
 import { requiresKeyIdFor, validateProviders } from './registry.js';
 import { normalizeFilter, resolveFilter, sameFilter } from './filter.js';
 import { decodeParams, encodeParams } from './params.js';
-import { composeUIState, summarizeCoverage } from './uiState.js';
+import {
+  composeUIState,
+  keyAlternatives,
+  summarizeCoverage,
+} from './uiState.js';
 import { cameraHeightAboveGround, viewCentre, whenIdle } from './view.js';
 import { createGroundClick, groundClickHeightOk } from './groundClick.js';
 import { createGroundCaster, nextSurfaceMode } from './groundCast.js';
@@ -501,7 +505,8 @@ export function createStreetLevelLayer({
 
     getStats() {
       // The lifecycle polls this every second: summarise, don't snapshot.
-      const coverage = summarizeCoverage(providerSnapshots());
+      const snapshots = providerSnapshots();
+      const coverage = summarizeCoverage(snapshots);
       let loadingLabel = '';
       const keyLabel = coverage.keyRejected ? 'KEY REJECTED' : 'KEY REQUIRED';
       if (coverage.keyRequired) loadingLabel = keyLabel;
@@ -512,6 +517,8 @@ export function createStreetLevelLayer({
         count: coverage.count,
         loading: coverage.loading,
         keyRequired: coverage.keyRequired,
+        /** Switched-off sources that would draw with a key already set. */
+        keyAlternatives: keyAlternatives(snapshots),
         error: coverage.keyRequired
           ? coverage.keyRejected
             ? coverage.error || keyLabel

src/layers/streetLevel/index.test.mjs

@@ -484,7 +484,10 @@ test('switching a provider on while the layer is off activates nothing (M01)', a
 });
 
 /** The real Google provider over the Street View fakes, beside a Mapillary stand-in. */
-async function withStreetView(t, { mapStack = 'photoreal', nearest } = {}) {
+async function withStreetView(
+  t,
+  { mapStack = 'photoreal', nearest, mapillaryKeyless = false } = {},
+) {
   const { createGoogleProvider } = await import('./providers/google/index.js');
   const { fakeHost, fakeMapsLoader, fakeStreetViewLibrary } =
     await import('../../testSupport/googleStreetViewFakes.mjs');
@@ -502,6 +505,14 @@ async function withStreetView(t, { mapStack = 'photoreal', nearest } = {}) {
     },
   });
   mapillary.requiresKeyId = 'mapillary';
+  if (mapillaryKeyless) {
+    mapillary.stats.keyRequired = true;
+    const create = mapillary.create;
+    mapillary.create = (context) => ({
+      ...create(context),
+      status: async () => ({ configured: false }),
+    });
+  }
   const loader = fakeMapsLoader(fake.library);
   const google = createGoogleProvider({
     getApiKey: () => 'browser-key',
@@ -637,3 +648,20 @@ test('the button’s “centre of the view” is the ground under the middle of
   assert.ok(Math.abs(lookups[0].lat - 38.5799) < 1e-9);
   assert.ok(Math.abs(lookups[0].lon - -121.4937) < 1e-9);
 });
+
+test('with no Mapillary token, the layer points at Street View, on Google 3D only', async (t) => {
+  const { layer, stack } = await withStreetView(t, { mapillaryKeyless: true });
+  await settle();
+  const stats = layer.getStats();
+  assert.equal(stats.keyRequired, true);
+  assert.deepEqual(stats.keyAlternatives, [
+    { id: 'google', label: 'STREET VIEW', requiresKeyId: 'google-maps' },
+  ]);
+  assert.deepEqual(layer.getUIState().keyAlternatives, stats.keyAlternatives);
+  stack.switchTo('esri-imagery');
+  assert.deepEqual(layer.getStats().keyAlternatives, [], 'not off Google 3D');
+  // Lit, Street View draws: the layer is no longer key-gated.
+  stack.switchTo('photoreal');
+  layer.setProviderEnabled('google', true);
+  assert.equal(layer.getStats().keyRequired, false);
+});

src/layers/streetLevel/uiState.js

@@ -38,6 +38,20 @@ export function summarizeCoverage(providers) {
   };
 }
 
+/**
+ * Switched-off providers that would draw with a key already set, offered
+ * while the switched-on ones lack theirs (Street View beside a Mapillary
+ * layer with no token).
+ * @param {Array<ProviderSnapshot>} providers
+ * @returns {Array<{id: string, label: string, requiresKeyId: string|null}>}
+ */
+export function keyAlternatives(providers) {
+  if (!summarizeCoverage(providers).keyRequired) return [];
+  return providers
+    .filter((p) => !p.on && p.configured === true && p.keyRequired !== true)
+    .map(({ id, label, requiresKeyId }) => ({ id, label, requiresKeyId }));
+}
+
 /**
  * The panel snapshot from core state and provider snapshots. The legend has
  * one swatch per active source, then the shared selection colour.
@@ -67,6 +81,7 @@ export function composeUIState({
     /** The camera is at street zoom: a ground-click provider can open here. */
     groundClickReady: groundClickReady === true,
     keyRequired,
+    keyAlternatives: keyAlternatives(providers),
     keyRejected,
     filter: { ...filter },
     providers: providers.map((p) => ({ ...p })),

src/layers/streetLevel/uiState.test.mjs

@@ -168,3 +168,27 @@ test('every switched-on provider’s hint is kept, once each', async () => {
     'zoom in for sequences · click a street to open Street View',
   );
 });
+
+test('a key-gated layer offers the switched-off sources that would draw with a key already set', async () => {
+  const { keyAlternatives } = await import('./uiState.js');
+  const mapillary = providerSnapshot({ keyRequired: true, configured: false });
+  const streetView = providerSnapshot({
+    id: 'google',
+    label: 'STREET VIEW',
+    on: false,
+    configured: true,
+    requiresKeyId: 'google-maps',
+  });
+  assert.deepEqual(keyAlternatives([mapillary, streetView]), [
+    { id: 'google', label: 'STREET VIEW', requiresKeyId: 'google-maps' },
+  ]);
+  // Nothing to offer: Mapillary has its key, or Street View has none either.
+  assert.deepEqual(keyAlternatives([providerSnapshot(), streetView]), []);
+  assert.deepEqual(
+    keyAlternatives([
+      mapillary,
+      { ...streetView, configured: false, keyRequired: true },
+    ]),
+    [],
+  );
+});