ui(mapillary): drop the keyless empty state

The panel no longer shows a separate keyless call-to-action; the fieldset
gate and the layer-row tooltip already cover the missing-key case. The
planner flag is tri-state (null until status answers).

Co-Authored-By: Claude Fable 5.1 <[email protected]>

src/layers/mapillary/index.js

@@ -180,7 +180,8 @@ export function createMapillaryLayer({ source, services = {} }) {
     return {
       enabled: state.enabled,
       keyRequired: state.keyRequired,
-      planner: state.status?.planner === true,
+      // null until the status call answers (the layer initialises lazily).
+      planner: state.status ? state.status.planner === true : null,
       plannerModel: state.status?.plannerModel || null,
       coverage: {
         zoom: state.coverage.zoom,

src/mapillaryMarkup.test.mjs

@@ -63,9 +63,9 @@ test('panel styles stay inside GEV conventions: no !important, no fixed panel',
   assert.deepEqual(fixed, ['.mly-viewer-wrap-expanded']);
 });
 
-test('keyless and no-planner states are real, gated UI rather than dead buttons', () => {
-  assert.match(html, /id="mly-keyless"[^>]*hidden/);
-  assert.match(html, /MAPILLARY_CLIENT_TOKEN/);
+test('keyless and no-planner states gate the controls rather than leave dead buttons', () => {
+  // The key requirement is documented (README, .env.example), not repeated in the panel.
+  assert.doesNotMatch(html, /mly-keyless/);
   assert.match(html, /<fieldset id="mly-controls"/);
   assert.match(html, /<ul id="mly-legend"/);
   assert.match(html, /id="mly-error"[^>]*role="alert"/);

src/ui/applicationShell.js

@@ -900,7 +900,6 @@ export class StyleManager extends ShellFacade {
           }),
         setPanelCollapsed: (collapsed, options) =>
           this.setPanelCollapsed('mapillary-panel', collapsed, options),
-        openKeySetup: () => document.getElementById('key-setup-chip')?.click(),
         showToast: (message) => this._showToast(message),
       },
     });

src/ui/mapillaryControls.js

@@ -36,8 +36,6 @@ export class MapillaryControls {
     const byId = (id) => this.root?.querySelector(`#${id}`) || null;
     return {
       status: byId('mly-status'),
-      keyless: byId('mly-keyless'),
-      keylessBtn: byId('mly-keyless-btn'),
       controls: byId('mly-controls'),
       enableBtn: byId('mly-enable-btn'),
       lookBtn: byId('mly-look-btn'),
@@ -82,7 +80,6 @@ export class MapillaryControls {
     if (!this.root) return;
     this.mapillary.attachViewerHost?.(el.viewer);
 
-    this.listen(el.keylessBtn, 'click', () => this.actions.openKeySetup?.());
     this.listen(el.enableBtn, 'click', () => this._toggleEnabled());
     this.listen(el.lookBtn, 'click', async () => {
       if (!(await this._ensureEnabled())) return;
@@ -306,7 +303,7 @@ export class MapillaryControls {
     const view = presentMapillaryPanel(state);
     this._view = view;
     this._renderHeader(view);
-    this._renderEmptyState(view);
+    this._renderGate(view);
     this._renderQuery(view);
     this._renderResults(view);
     this._renderFilters(view);
@@ -331,9 +328,8 @@ export class MapillaryControls {
     }
   }
 
-  _renderEmptyState(view) {
+  _renderGate(view) {
     const el = this._elements;
-    if (el.keyless) el.keyless.hidden = !view.keyless.visible;
     if (el.controls) el.controls.disabled = view.controlsDisabled;
   }
 

src/ui/mapillaryPresentation.js

@@ -153,7 +153,9 @@ function presentMeta(state) {
 export function presentMapillaryPanel(state) {
   const enabled = state.enabled === true;
   const keyRequired = state.keyRequired === true;
-  const planner = state.planner === true;
+  // Unknown (status not fetched yet) reads as available: the server answers
+  // a missing key with its own error, and the panel must not claim one is missing.
+  const planner = state.planner !== false;
   const busy = state.query.busy === true;
   const error = state.query.error || state.street.error || null;
   let answer = state.query.answer || '';
@@ -167,10 +169,6 @@ export function presentMapillaryPanel(state) {
     enabled,
     keyRequired,
     status: presentStatus(state),
-    keyless: {
-      visible: keyRequired,
-      text: 'Street Level needs a free Mapillary client token (MAPILLARY_CLIENT_TOKEN). Coverage, photos and queries stay off until one is added.',
-    },
     controlsDisabled: keyRequired,
     enableButton: {
       text: enabled ? 'STREET LEVEL ON' : 'STREET LEVEL OFF',

src/ui/mapillaryPresentation.test.mjs

@@ -86,10 +86,8 @@ function deepMerge(target, source) {
   return out;
 }
 
-test('a missing Mapillary token gates every control and names the variable', () => {
+test('a missing Mapillary token gates every control and flags KEY REQUIRED', () => {
   const view = presentMapillaryPanel(snapshot({ keyRequired: true }));
-  assert.equal(view.keyless.visible, true);
-  assert.match(view.keyless.text, /MAPILLARY_CLIENT_TOKEN/);
   assert.equal(view.controlsDisabled, true);
   assert.deepEqual(view.status, { text: 'KEY REQUIRED', tone: 'warn' });
 });
@@ -103,10 +101,16 @@ test('without an Anthropic key the query box explains itself and stays disabled'
   assert.equal(view.query.hintWarn, true);
   assert.match(view.query.hint, /Anthropic key/);
   assert.ok(view.query.placeholder.length < 40, 'placeholder fits the field');
-  assert.equal(view.keyless.visible, false);
   assert.equal(view.controlsDisabled, false);
 });
 
+test('before the status call answers the query box does not claim a missing key', () => {
+  const view = presentMapillaryPanel(snapshot({ planner: null }));
+  assert.equal(view.query.inputDisabled, false);
+  assert.equal(view.query.hintWarn, false);
+  assert.doesNotMatch(view.query.placeholder, /Anthropic/);
+});
+
 test('a running query turns ASK into STOP and shows indeterminate progress per stage', () => {
   const planning = presentMapillaryPanel(
     snapshot({ enabled: true, query: { busy: true, stage: 'planning' } }),

src/ui/styles/mapillary.css

@@ -110,31 +110,6 @@
   pointer-events: none;
 }
 
-/* ── Keyless empty state ─────────────────────────────────────────────────── */
-.mly-keyless {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 10px 12px;
-  border: 1px solid rgba(255, 179, 0, 0.45);
-  border-radius: 9px;
-  background: rgba(255, 179, 0, 0.06);
-}
-
-.mly-keyless-text {
-  margin: 0;
-  font-family: var(--font-sans);
-  font-size: 0.72rem;
-  line-height: 1.4;
-  color: var(--text-primary);
-}
-
-.mly-keyless-text code {
-  font-family: var(--font-mono);
-  font-size: 0.66rem;
-  color: #ffb300;
-}
-
 /* ── Query ───────────────────────────────────────────────────────────────── */
 .mly-query {
   display: flex;

src/ui/templates/layer-panels.html

@@ -85,10 +85,6 @@
         <button class="panel-collapse-btn" data-collapse-target="mapillary-panel" title="Expand panel">◀</button>
       </div>
       <div id="mly-body" class="mly-body">
-        <div id="mly-keyless" class="mly-keyless" hidden>
-          <p class="mly-keyless-text">Street Level needs a free Mapillary client token (<code>MAPILLARY_CLIENT_TOKEN</code>). Coverage, photos and queries stay off until one is added.</p>
-          <button id="mly-keyless-btn" class="scene-btn" type="button">ADD KEY IN POWER UP</button>
-        </div>
         <fieldset id="mly-controls" class="mly-controls">
           <div class="cctv-controls">
             <button id="mly-enable-btn" class="scene-btn" type="button" aria-pressed="false" title="Turn the Street Level layer on or off">STREET LEVEL OFF</button>