style: format Radio component boundary

scripts/package-boundaries.json

@@ -10,47 +10,27 @@
       "src/data/localGeojsonCore.js",
       "src/data/localGeojsonLod.js"
     ],
-    "external": [
+    "external": ["cesium"]
-      "cesium"
-    ]
   },
   "application": {
-    "exports": [
+    "exports": ["./application"],
-      "./application"
+    "modules": ["src/app/application.js"],
-    ],
-    "modules": [
-      "src/app/application.js"
-    ],
     "external": []
   },
   "viewer": {
-    "exports": [
+    "exports": ["./application/viewer"],
-      "./application/viewer"
+    "modules": ["src/app/viewer.js"],
-    ],
+    "external": ["cesium"]
-    "modules": [
-      "src/app/viewer.js"
-    ],
-    "external": [
-      "cesium"
-    ]
   },
   "vite-build": {
     "runtime": "node",
-    "exports": [
+    "exports": ["./build/vite"],
-      "./build/vite"
+    "modules": ["build/vite.js"],
-    ],
+    "external": ["vite-plugin-cesium"]
-    "modules": [
-      "build/vite.js"
-    ],
-    "external": [
-      "vite-plugin-cesium"
-    ]
   },
   "live-providers": {
     "runtime": "node",
-    "exports": [
+    "exports": ["./server/providers/live"],
-      "./server/providers/live"
-    ],
     "modules": [
       "server/providers/live.js",
       "server/providers/common/http.js",
@@ -65,24 +45,16 @@
       "src/data/aisStreamAdapter.js",
       "src/data/aisWatchdog.js"
     ],
-    "external": [
+    "external": ["ws"]
-      "ws"
-    ]
   },
   "adsb-lol-source": {
-    "exports": [
+    "exports": ["./sources/adsb-lol"],
-      "./sources/adsb-lol"
+    "modules": ["src/data/adsbLolFallback.js"],
-    ],
-    "modules": [
-      "src/data/adsbLolFallback.js"
-    ],
     "external": []
   },
   "place-providers": {
     "runtime": "node",
-    "exports": [
+    "exports": ["./server/providers/places"],
-      "./server/providers/places"
-    ],
     "modules": [
       "server/providers/places.js",
       "server/providers/places/google.js",
@@ -97,19 +69,13 @@
     "external": []
   },
   "place-payloads": {
-    "exports": [
+    "exports": ["./sources/places"],
-      "./sources/places"
+    "modules": ["src/data/placeProviderPayloads.js"],
-    ],
-    "modules": [
-      "src/data/placeProviderPayloads.js"
-    ],
     "external": []
   },
   "space-providers": {
     "runtime": "node",
-    "exports": [
+    "exports": ["./server/providers/space"],
-      "./server/providers/space"
-    ],
     "modules": [
       "server/providers/space.js",
       "server/providers/space/celestrak.js",
@@ -120,19 +86,13 @@
     "external": []
   },
   "space-requests": {
-    "exports": [
+    "exports": ["./sources/space"],
-      "./sources/space"
+    "modules": ["src/data/spaceProviderRequests.js"],
-    ],
-    "modules": [
-      "src/data/spaceProviderRequests.js"
-    ],
     "external": []
   },
   "terrain-provider": {
     "runtime": "node",
-    "exports": [
+    "exports": ["./server/providers/terrain"],
-      "./server/providers/terrain"
-    ],
     "modules": [
       "server/providers/terrain.js",
       "src/data/terrainHeightsProxy.js"
@@ -140,50 +100,30 @@
     "external": []
   },
   "terrain-source": {
-    "exports": [
+    "exports": ["./sources/terrain"],
-      "./sources/terrain"
+    "modules": ["src/data/terrainHeightsProxy.js"],
-    ],
-    "modules": [
-      "src/data/terrainHeightsProxy.js"
-    ],
     "external": []
   },
   "traffic-provider": {
     "runtime": "node",
-    "exports": [
+    "exports": ["./server/providers/traffic"],
-      "./server/providers/traffic"
+    "modules": ["server/providers/traffic.js", "src/data/tomtomTiles.js"],
-    ],
-    "modules": [
-      "server/providers/traffic.js",
-      "src/data/tomtomTiles.js"
-    ],
     "external": []
   },
   "traffic-source": {
-    "exports": [
+    "exports": ["./sources/traffic"],
-      "./sources/traffic"
+    "modules": ["src/data/tomtomTiles.js"],
-    ],
-    "modules": [
-      "src/data/tomtomTiles.js"
-    ],
     "external": []
   },
   "firms-provider": {
     "runtime": "node",
-    "exports": [
+    "exports": ["./server/providers/firms"],
-      "./server/providers/firms"
+    "modules": ["server/providers/firms.js", "src/data/firmsCsv.js"],
-    ],
-    "modules": [
-      "server/providers/firms.js",
-      "src/data/firmsCsv.js"
-    ],
     "external": []
   },
   "gbfs-provider": {
     "runtime": "node",
-    "exports": [
+    "exports": ["./server/providers/gbfs"],
-      "./server/providers/gbfs"
-    ],
     "modules": [
       "server/providers/gbfs.js",
       "server/providers/common/http.js",
@@ -192,19 +132,13 @@
     "external": []
   },
   "gbfs-source": {
-    "exports": [
+    "exports": ["./sources/gbfs"],
-      "./sources/gbfs"
+    "modules": ["src/data/gbfsSource.js"],
-    ],
-    "modules": [
-      "src/data/gbfsSource.js"
-    ],
     "external": []
   },
   "cctv-provider": {
     "runtime": "node",
-    "exports": [
+    "exports": ["./server/providers/cctv"],
-      "./server/providers/cctv"
-    ],
     "modules": [
       "server/providers/cctv.js",
       "server/providers/cctv/catalog.js",
@@ -221,9 +155,7 @@
   },
   "radio-provider": {
     "runtime": "node",
-    "exports": [
+    "exports": ["./server/providers/radio"],
-      "./server/providers/radio"
-    ],
     "modules": [
       "server/providers/radio.js",
       "server/providers/radio/catalog.js",
@@ -237,9 +169,7 @@
   },
   "overpass-provider": {
     "runtime": "node",
-    "exports": [
+    "exports": ["./server/providers/overpass"],
-      "./server/providers/overpass"
-    ],
     "modules": [
       "server/providers/common/geo.js",
       "server/providers/common/http.js",
@@ -258,9 +188,7 @@
   },
   "military-installations-provider": {
     "runtime": "node",
-    "exports": [
+    "exports": ["./server/providers/military-installations"],
-      "./server/providers/military-installations"
-    ],
     "modules": [
       "server/providers/common/http.js",
       "server/providers/common/query.js",
@@ -277,9 +205,7 @@
   },
   "regional-provider": {
     "runtime": "node",
-    "exports": [
+    "exports": ["./server/providers/regional"],
-      "./server/providers/regional"
-    ],
     "modules": [
       "server/providers/common/http.js",
       "server/providers/common/query.js",
@@ -298,9 +224,7 @@
   },
   "openai-provider": {
     "runtime": "node",
-    "exports": [
+    "exports": ["./server/providers/openai"],
-      "./server/providers/openai"
-    ],
     "modules": [
       "server/providers/common/rate-limit.js",
       "server/providers/common/request.js",
@@ -320,9 +244,7 @@
   },
   "standalone-key-setup": {
     "runtime": "node",
-    "exports": [
+    "exports": ["./server/standalone/key-setup"],
-      "./server/standalone/key-setup"
-    ],
     "modules": [
       "scripts/pinokio-environment.mjs",
       "server/providers/common/source-root.js",
@@ -333,9 +255,7 @@
     "external": []
   },
   "place-search": {
-    "exports": [
+    "exports": ["./search"],
-      "./search"
-    ],
     "modules": [
       "src/search/index.js",
       "src/search/placeSearch.js",
@@ -345,27 +265,17 @@
     "external": []
   },
   "panel-disclosure": {
-    "exports": [
+    "exports": ["./ui/panels"],
-      "./ui/panels"
+    "modules": ["src/ui/panelDisclosure.js"],
-    ],
-    "modules": [
-      "src/ui/panelDisclosure.js"
-    ],
     "external": []
   },
   "surface-keyboard": {
-    "exports": [
+    "exports": ["./ui/surfaces"],
-      "./ui/surfaces"
+    "modules": ["src/ui/surfaceKeyboard.js"],
-    ],
-    "modules": [
-      "src/ui/surfaceKeyboard.js"
-    ],
     "external": []
   },
   "panel-rail-layout": {
-    "exports": [
+    "exports": ["./ui/layout"],
-      "./ui/layout"
-    ],
     "modules": [
       "src/ui/panelRails.js",
       "src/ui/leftPanelRail.js",
@@ -377,9 +287,7 @@
     "external": []
   },
   "visual-input": {
-    "exports": [
+    "exports": ["./ui/input"],
-      "./ui/input"
-    ],
     "modules": [
       "src/ui/visualInput.js",
       "src/ui/applicationShortcuts.js",
@@ -388,19 +296,12 @@
     "external": []
   },
   "display-controls": {
-    "exports": [
+    "exports": ["./ui/display"],
-      "./ui/display"
+    "modules": ["src/ui/displayControls.js"],
-    ],
-    "modules": [
-      "src/ui/displayControls.js"
-    ],
     "external": []
   },
   "visual-effects": {
-    "exports": [
+    "exports": ["./ui/effects", "./ui/effects/bloom"],
-      "./ui/effects",
-      "./ui/effects/bloom"
-    ],
     "modules": [
       "src/ui/effects.js",
       "src/ui/visualEffects.js",
@@ -413,14 +314,10 @@
       "src/styles/noir.js",
       "src/styles/snow.js"
     ],
-    "external": [
+    "external": ["cesium"]
-      "cesium"
-    ]
   },
   "map-source-controls": {
-    "exports": [
+    "exports": ["./ui/maps"],
-      "./ui/maps"
-    ],
     "modules": [
       "src/ui/mapSource.js",
       "src/ui/mapSourceControls.js",
@@ -430,10 +327,7 @@
     "external": []
   },
   "layer-panel": {
-    "exports": [
+    "exports": ["./ui/layers", "./ui/layers/feedback"],
-      "./ui/layers",
-      "./ui/layers/feedback"
-    ],
     "modules": [
       "src/ui/layers.js",
       "src/ui/layerPanel.js",
@@ -444,9 +338,7 @@
     "external": []
   },
   "location-controls": {
-    "exports": [
+    "exports": ["./ui/location"],
-      "./ui/location"
-    ],
     "modules": [
       "src/ui/location.js",
       "src/ui/locationControls.js",
@@ -456,9 +348,7 @@
     "external": []
   },
   "radio-controls": {
-    "exports": [
+    "exports": ["./ui/radio"],
-      "./ui/radio"
-    ],
     "modules": [
       "src/ui/radio.js",
       "src/ui/radioControls.js",

src/ui/radio.js

@@ -1,2 +1,7 @@
 export { RadioControls } from './radioControls.js';
-export { radioTunerSlot, radioTunerCommitSlot, radioTunerPointerPosition, buildRadioTunerTicks } from './radioTunerModel.js';
+export {
+  radioTunerSlot,
+  radioTunerCommitSlot,
+  radioTunerPointerPosition,
+  buildRadioTunerTicks,
+} from './radioTunerModel.js';

src/ui/radioControls.js

@@ -31,17 +31,24 @@ export class RadioControls {
   }
 
   listen(target, type, handler, options = {}) {
-    target?.addEventListener(type, handler, { ...options, signal: this.listeners.signal });
+    target?.addEventListener(type, handler, {
+      ...options,
+      signal: this.listeners.signal,
+    });
   }
 
   connect() {
     this._radioUnsubscribe?.();
     this._radioUnsubscribe = null;
     if (this.destroyed) return;
-    this._radioUnsubscribe = this.radio.subscribe?.((state) => this._renderRadioState(state));
+    this._radioUnsubscribe = this.radio.subscribe?.((state) =>
+      this._renderRadioState(state),
+    );
   }
 
-  _renderRadioState(state) { renderRadioState.call(this, state); }
+  _renderRadioState(state) {
+    renderRadioState.call(this, state);
+  }
 
   /**
    * Reveal the newly enabled directory and transport inside Context without
@@ -55,28 +62,46 @@ export class RadioControls {
     const scroller = contextPanel?.querySelector('.global-context-panel-inner');
     const directory = this._radioPanel?.querySelector('.radio-directory-row');
     const transport = this._radioPanel?.querySelector('.radio-transport');
-    if (!contextPanel || contextPanel.classList.contains('collapsed')
+    if (
-        || !scroller || !directory || !transport || !this._radioState?.enabled) return false;
+      !contextPanel ||
+      contextPanel.classList.contains('collapsed') ||
+      !scroller ||
+      !directory ||
+      !transport ||
+      !this._radioState?.enabled
+    )
+      return false;
 
-    await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+    await new Promise((resolve) =>
-    if (this.destroyed || !this._radioState?.enabled || !trigger?.isConnected) return false;
+      requestAnimationFrame(() => requestAnimationFrame(resolve)),
+    );
+    if (this.destroyed || !this._radioState?.enabled || !trigger?.isConnected)
+      return false;
 
     const viewport = scroller.getBoundingClientRect();
     const directoryRect = directory.getBoundingClientRect();
     const transportRect = transport.getBoundingClientRect();
     const margin = 10;
-    const minimum = scroller.scrollTop + transportRect.bottom - (viewport.bottom - margin);
+    const minimum =
-    const maximum = scroller.scrollTop + directoryRect.top - (viewport.top + margin);
+      scroller.scrollTop + transportRect.bottom - (viewport.bottom - margin);
-    const desired = minimum <= maximum
+    const maximum =
-      ? Math.min(Math.max(scroller.scrollTop, minimum), maximum)
+      scroller.scrollTop + directoryRect.top - (viewport.top + margin);
-      : minimum;
+    const desired =
+      minimum <= maximum
+        ? Math.min(Math.max(scroller.scrollTop, minimum), maximum)
+        : minimum;
     const next = Math.min(
       Math.max(0, scroller.scrollHeight - scroller.clientHeight),
       Math.max(0, desired),
     );
     if (Math.abs(next - scroller.scrollTop) < 1) return false;
-    const reducedMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches;
+    const reducedMotion = window.matchMedia?.(
-    scroller.scrollTo({ top: next, behavior: reducedMotion ? 'auto' : 'smooth' });
+      '(prefers-reduced-motion: reduce)',
+    )?.matches;
+    scroller.scrollTo({
+      top: next,
+      behavior: reducedMotion ? 'auto' : 'smooth',
+    });
     return true;
   }
 
@@ -89,11 +114,24 @@ export class RadioControls {
   async _revealRadioPanelInsideContext({ focusTarget = null } = {}) {
     const contextPanel = document.getElementById('global-context-panel');
     const scroller = contextPanel?.querySelector('.global-context-panel-inner');
-    if (!contextPanel || contextPanel.classList.contains('collapsed')
+    if (
-        || !scroller || !this._radioPanel || this._radioPanel.classList.contains('collapsed')) return false;
+      !contextPanel ||
+      contextPanel.classList.contains('collapsed') ||
+      !scroller ||
+      !this._radioPanel ||
+      this._radioPanel.classList.contains('collapsed')
+    )
+      return false;
 
-    await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+    await new Promise((resolve) =>
-    if (this.destroyed || contextPanel.classList.contains('collapsed') || this._radioPanel.classList.contains('collapsed')) return false;
+      requestAnimationFrame(() => requestAnimationFrame(resolve)),
+    );
+    if (
+      this.destroyed ||
+      contextPanel.classList.contains('collapsed') ||
+      this._radioPanel.classList.contains('collapsed')
+    )
+      return false;
 
     const viewport = scroller.getBoundingClientRect();
     const radioRect = this._radioPanel.getBoundingClientRect();
@@ -104,8 +142,13 @@ export class RadioControls {
     );
     const moved = Math.abs(next - scroller.scrollTop) >= 1;
     if (moved) {
-      const reducedMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches;
+      const reducedMotion = window.matchMedia?.(
-      scroller.scrollTo({ top: next, behavior: reducedMotion ? 'auto' : 'smooth' });
+        '(prefers-reduced-motion: reduce)',
+      )?.matches;
+      scroller.scrollTo({
+        top: next,
+        behavior: reducedMotion ? 'auto' : 'smooth',
+      });
     }
     focusTarget?.focus?.({ preventScroll: true });
     return moved;
@@ -115,25 +158,44 @@ export class RadioControls {
   _syncContextRadioLauncherState() {
     if (!this._contextRadioToggleBtn) return;
     const contextPanel = document.getElementById('global-context-panel');
-    const contextExpanded = Boolean(contextPanel && !contextPanel.classList.contains('collapsed'));
+    const contextExpanded = Boolean(
+      contextPanel && !contextPanel.classList.contains('collapsed'),
+    );
     if (contextExpanded) {
-      const radioExpanded = Boolean(this._radioPanel && !this._radioPanel.classList.contains('collapsed'));
+      const radioExpanded = Boolean(
+        this._radioPanel && !this._radioPanel.classList.contains('collapsed'),
+      );
       this._contextRadioToggleBtn.setAttribute('aria-controls', 'radio-panel');
-      this._contextRadioToggleBtn.setAttribute('aria-expanded', String(radioExpanded));
+      this._contextRadioToggleBtn.setAttribute(
-      const label = radioExpanded ? 'Go to expanded Radio section' : 'Expand Radio section in Context';
+        'aria-expanded',
+        String(radioExpanded),
+      );
+      const label = radioExpanded
+        ? 'Go to expanded Radio section'
+        : 'Expand Radio section in Context';
       this._contextRadioToggleBtn.setAttribute('aria-label', label);
       this._contextRadioToggleBtn.title = label;
       return;
     }
-    const compactOpen = Boolean(this._contextRadioDock?.classList.contains('disclosure-open'));
+    const compactOpen = Boolean(
-    this._contextRadioToggleBtn.setAttribute('aria-controls', 'context-radio-mini');
+      this._contextRadioDock?.classList.contains('disclosure-open'),
-    this._contextRadioToggleBtn.setAttribute('aria-expanded', String(compactOpen));
+    );
+    this._contextRadioToggleBtn.setAttribute(
+      'aria-controls',
+      'context-radio-mini',
+    );
+    this._contextRadioToggleBtn.setAttribute(
+      'aria-expanded',
+      String(compactOpen),
+    );
     const action = compactOpen ? 'Close' : 'Open';
-    this._contextRadioToggleBtn.setAttribute('aria-label', `${action} compact Radio controls`);
+    this._contextRadioToggleBtn.setAttribute(
+      'aria-label',
+      `${action} compact Radio controls`,
+    );
     this._contextRadioToggleBtn.title = `${action} compact Radio controls`;
   }
 
-
   destroy() {
     if (this.destroyed) return;
     this.destroyed = true;
@@ -148,9 +210,16 @@ export class RadioControls {
     this._radioTunerPool = [];
     this._radioTunerStations = [];
     this._radioTunerBandPinnedForNavigation = false;
-    try { if (pointer !== null) this._radioTunerSlider?.releasePointerCapture(pointer); } catch { /* capture already released */ }
+    try {
+      if (pointer !== null)
+        this._radioTunerSlider?.releasePointerCapture(pointer);
+    } catch {
+      /* capture already released */
+    }
     this._radioTuner?.classList.remove('is-dragging', 'is-static');
-    document.getElementById('title-bar')?.classList.remove('radio-broadcasting');
+    document
+      .getElementById('title-bar')
+      ?.classList.remove('radio-broadcasting');
     this.radio.endTuning();
   }
 }

src/ui/radioControls.test.mjs

@@ -13,13 +13,22 @@ class Element extends EventTarget {
       add: (...names) => names.forEach((n) => this.classes.add(n)),
       remove: (...names) => names.forEach((n) => this.classes.delete(n)),
       contains: (name) => this.classes.has(name),
-      toggle: (name, enabled) => enabled ? this.classes.add(name) : this.classes.delete(name),
+      toggle: (name, enabled) =>
+        enabled ? this.classes.add(name) : this.classes.delete(name),
     };
   }
-  setAttribute(name, value) { this.attrs.set(name, String(value)); }
+  setAttribute(name, value) {
-  getAttribute(name) { return this.attrs.get(name); }
+    this.attrs.set(name, String(value));
-  querySelector() { return null; }
+  }
-  focus() { this.focusCount++; }
+  getAttribute(name) {
+    return this.attrs.get(name);
+  }
+  querySelector() {
+    return null;
+  }
+  focus() {
+    this.focusCount++;
+  }
 }
 
 function fixture() {
@@ -34,25 +43,54 @@ function fixture() {
   const calls = [];
   const subscribers = [];
   const radio = {
-    subscribe(callback) { subscribers.push(callback); calls.push('subscribe'); return () => calls.push('unsubscribe'); },
+    subscribe(callback) {
-    endTuning() { calls.push('endTuning'); },
+      subscribers.push(callback);
-    cycleStation(direction) { calls.push(['cycle', direction]); return true; },
+      calls.push('subscribe');
+      return () => calls.push('unsubscribe');
+    },
+    endTuning() {
+      calls.push('endTuning');
+    },
+    cycleStation(direction) {
+      calls.push(['cycle', direction]);
+      return true;
+    },
   };
   const actions = {
-    isRegistered: () => true, isEnabled: () => false,
+    isRegistered: () => true,
+    isEnabled: () => false,
     runUserAction: (operation) => operation(),
     setEnabled: async () => true,
     setPanelCollapsed: (...args) => calls.push(['panel', ...args]),
-    layoutCockpit() {}, isCockpitActive: () => false,
+    layoutCockpit() {},
-    scheduleLayout() {}, getLifecycle: () => null,
+    isCockpitActive: () => false,
+    scheduleLayout() {},
+    getLifecycle: () => null,
     preservePanelStateDuringClear: () => false,
   };
   const controls = new RadioControls({
-    elements: { _radioPanel: panel, _radioEnableBtn: enable, _radioNextBtn: next },
+    elements: {
-    radio, actions, canvas: new Element(),
+      _radioPanel: panel,
+      _radioEnableBtn: enable,
+      _radioNextBtn: next,
+    },
+    radio,
+    actions,
+    canvas: new Element(),
   });
-  return { controls, enable, next, actions, calls, subscribers, document,
+  return {
-    cleanup() { controls.destroy(); Object.assign(globalThis, prior); } };
+    controls,
+    enable,
+    next,
+    actions,
+    calls,
+    subscribers,
+    document,
+    cleanup() {
+      controls.destroy();
+      Object.assign(globalThis, prior);
+    },
+  };
 }
 
 test('Radio listeners and subscriptions are revoked once before tuning teardown', () => {
@@ -61,7 +99,8 @@ test('Radio listeners and subscriptions are revoked once before tuning teardown'
     f.controls.connect();
     f.next.dispatchEvent(new Event('click'));
     assert.deepEqual(f.calls, ['subscribe', ['cycle', 1]]);
-    f.controls.destroy(); f.controls.destroy();
+    f.controls.destroy();
+    f.controls.destroy();
     const snapshot = structuredClone(f.calls);
     f.next.dispatchEvent(new Event('click'));
     f.document.dispatchEvent(new Event('gev:radio-selected'));
@@ -69,21 +108,28 @@ test('Radio listeners and subscriptions are revoked once before tuning teardown'
     f.controls.connect();
     assert.deepEqual(f.calls, snapshot);
     assert.deepEqual(f.calls.slice(-2), ['unsubscribe', 'endTuning']);
-  } finally { f.cleanup(); }
+  } finally {
+    f.cleanup();
+  }
 });
 
 test('Radio reconnect removes its previous state subscription', () => {
   const f = fixture();
   try {
-    f.controls.connect(); f.controls.connect();
+    f.controls.connect();
+    f.controls.connect();
     assert.deepEqual(f.calls, ['subscribe', 'unsubscribe', 'subscribe']);
-  } finally { f.cleanup(); }
+  } finally {
+    f.cleanup();
+  }
 });
 
 test('a delayed Radio enable cannot reveal or refocus controls after destruction', async () => {
   const f = fixture();
   let resolve;
-  const pending = new Promise((done) => { resolve = done; });
+  const pending = new Promise((done) => {
+    resolve = done;
+  });
   try {
     f.actions.setEnabled = () => pending;
     f.enable.dispatchEvent(new Event('click'));
@@ -91,26 +137,36 @@ test('a delayed Radio enable cannot reveal or refocus controls after destruction
     f.controls.destroy();
     const attrs = new Map(f.enable.attrs);
     resolve(true);
-    await pending; await new Promise((done) => setImmediate(done));
+    await pending;
+    await new Promise((done) => setImmediate(done));
     assert.deepEqual(f.enable.attrs, attrs);
     assert.equal(f.enable.focusCount, 0);
-    assert.equal(f.calls.some((call) => Array.isArray(call) && call[0] === 'panel'), false);
+    assert.equal(
-  } finally { f.cleanup(); }
+      f.calls.some((call) => Array.isArray(call) && call[0] === 'panel'),
+      false,
+    );
+  } finally {
+    f.cleanup();
+  }
 });
 
 test('destruction releases an active tuner pointer after revoking listeners', () => {
   const f = fixture();
   try {
     const released = [];
-    f.controls._radioTunerSlider = { releasePointerCapture(id) {
+    f.controls._radioTunerSlider = {
-      assert.equal(f.controls.listeners.signal.aborted, true);
+      releasePointerCapture(id) {
-      released.push(id);
+        assert.equal(f.controls.listeners.signal.aborted, true);
-    } };
+        released.push(id);
+      },
+    };
     f.controls._radioTunerPointerId = 7;
     f.controls._radioTunerDragging = true;
     f.controls.destroy();
     assert.deepEqual(released, [7]);
     assert.equal(f.controls._radioTunerDragging, false);
     assert.equal(f.controls._radioTunerPointerId, null);
-  } finally { f.cleanup(); }
+  } finally {
+    f.cleanup();
+  }
 });

src/ui/radioPresentation.js

@@ -1,245 +1,367 @@
-  /** Render Radio state without making playback or Context decisions. */
+/** Render Radio state without making playback or Context decisions. */
 export function renderRadioState(state) {
-    if (this.destroyed || !state || !this._radioPanel) return;
+  if (this.destroyed || !state || !this._radioPanel) return;
-    const lifecycle = this.actions.getLifecycle() || null;
+  const lifecycle = this.actions.getLifecycle() || null;
-    const lifecycleState = lifecycle?.lifecycleState || (state.enabled ? 'enabled' : 'disabled');
+  const lifecycleState =
-    state = {
+    lifecycle?.lifecycleState || (state.enabled ? 'enabled' : 'disabled');
-      ...state,
+  state = {
-      enabled: lifecycle ? lifecycle.enabled : state.enabled,
+    ...state,
-      lifecycleState,
+    enabled: lifecycle ? lifecycle.enabled : state.enabled,
-      lifecycleUncertain: lifecycle?.uncertain || false,
+    lifecycleState,
-    };
+    lifecycleUncertain: lifecycle?.uncertain || false,
-    this._radioState = state;
+  };
-    const enabled = Boolean(state.enabled);
+  this._radioState = state;
-    const transitioning = lifecycleState === 'enabling' || lifecycleState === 'disabling';
+  const enabled = Boolean(state.enabled);
-    const uncertain = Boolean(state.lifecycleUncertain);
+  const transitioning =
-    const interactive = enabled && !transitioning && !uncertain;
+    lifecycleState === 'enabling' || lifecycleState === 'disabling';
-    const selected = state.selected || null;
+  const uncertain = Boolean(state.lifecycleUncertain);
-    const hasStations = state.filteredCount > 0;
+  const interactive = enabled && !transitioning && !uncertain;
-    const activePlayback = ['playing', 'buffering'].includes(state.audioState);
+  const selected = state.selected || null;
-    document.getElementById('title-bar')?.classList.toggle('radio-broadcasting', state.audioState === 'playing');
+  const hasStations = state.filteredCount > 0;
-    this._radioPanel.classList.toggle('radio-enabled', enabled);
+  const activePlayback = ['playing', 'buffering'].includes(state.audioState);
-    this._radioPanel.classList.toggle('lifecycle-uncertain', uncertain);
+  document
-    this._contextRadioDock?.classList.toggle('active', enabled);
+    .getElementById('title-bar')
-    if (this._contextRadioToggleBtn) {
+    ?.classList.toggle('radio-broadcasting', state.audioState === 'playing');
-      this._contextRadioToggleBtn.classList.toggle('active', enabled);
+  this._radioPanel.classList.toggle('radio-enabled', enabled);
-    }
+  this._radioPanel.classList.toggle('lifecycle-uncertain', uncertain);
-    this._syncContextRadioLauncherState();
+  this._contextRadioDock?.classList.toggle('active', enabled);
-    this._radioLayerState?.classList.toggle('active', enabled);
+  if (this._contextRadioToggleBtn) {
-    if (this._radioLayerState) {
+    this._contextRadioToggleBtn.classList.toggle('active', enabled);
-      this._radioLayerState.textContent = transitioning
+  }
-        ? lifecycleState.toUpperCase()
+  this._syncContextRadioLauncherState();
-        : (uncertain ? 'UNCERTAIN' : (state.loading ? 'SYNC' : (enabled ? `${state.filteredCount}/${state.stationCount}` : 'OFF')));
+  this._radioLayerState?.classList.toggle('active', enabled);
-    }
+  if (this._radioLayerState) {
-    if (this._radioEnableBtn) {
+    this._radioLayerState.textContent = transitioning
-      this._radioEnableBtn.classList.toggle('active', enabled);
+      ? lifecycleState.toUpperCase()
-      this._radioEnableBtn.setAttribute('aria-pressed', String(enabled));
+      : uncertain
-      this._radioEnableBtn.textContent = transitioning
+        ? 'UNCERTAIN'
-        ? lifecycleState.toUpperCase()
+        : state.loading
-        : (uncertain ? 'RECONCILE' : (enabled ? 'DISABLE' : 'ENABLE'));
+          ? 'SYNC'
-      this._radioEnableBtn.setAttribute(
+          : enabled
-        'aria-label',
+            ? `${state.filteredCount}/${state.stationCount}`
-        uncertain ? 'Reconcile Radio — lifecycle uncertain' : `${enabled ? 'Disable' : 'Enable'} Radio`,
+            : 'OFF';
-      );
+  }
-      this._radioEnableBtn.disabled = false;
+  if (this._radioEnableBtn) {
-      this._radioEnableBtn.setAttribute('aria-disabled', String(transitioning));
+    this._radioEnableBtn.classList.toggle('active', enabled);
-      this._radioEnableBtn.setAttribute('aria-busy', String(transitioning));
+    this._radioEnableBtn.setAttribute('aria-pressed', String(enabled));
-    }
+    this._radioEnableBtn.textContent = transitioning
-    if (this._contextRadioMiniEnableBtn) {
+      ? lifecycleState.toUpperCase()
-      this._contextRadioMiniEnableBtn.classList.toggle('active', enabled);
+      : uncertain
-      this._contextRadioMiniEnableBtn.setAttribute('aria-pressed', String(enabled));
+        ? 'RECONCILE'
-      this._contextRadioMiniEnableBtn.textContent = transitioning
+        : enabled
-        ? lifecycleState.toUpperCase()
+          ? 'DISABLE'
-        : (uncertain ? 'RECONCILE' : (enabled ? 'DISABLE' : 'ENABLE'));
+          : 'ENABLE';
-      this._contextRadioMiniEnableBtn.setAttribute(
+    this._radioEnableBtn.setAttribute(
-        'aria-label',
+      'aria-label',
-        uncertain ? 'Reconcile Radio — lifecycle uncertain' : `${enabled ? 'Disable' : 'Enable'} Radio`,
+      uncertain
-      );
+        ? 'Reconcile Radio — lifecycle uncertain'
-      this._contextRadioMiniEnableBtn.disabled = false;
+        : `${enabled ? 'Disable' : 'Enable'} Radio`,
-      this._contextRadioMiniEnableBtn.setAttribute('aria-disabled', String(transitioning));
+    );
-      this._contextRadioMiniEnableBtn.setAttribute('aria-busy', String(transitioning));
+    this._radioEnableBtn.disabled = false;
-    }
+    this._radioEnableBtn.setAttribute('aria-disabled', String(transitioning));
-    if (this._cockpitRadioEnableBtn) {
+    this._radioEnableBtn.setAttribute('aria-busy', String(transitioning));
-      this._cockpitRadioEnableBtn.classList.toggle('active', enabled);
+  }
-      this._cockpitRadioEnableBtn.setAttribute('aria-pressed', String(enabled));
+  if (this._contextRadioMiniEnableBtn) {
-      this._cockpitRadioEnableBtn.textContent = transitioning
+    this._contextRadioMiniEnableBtn.classList.toggle('active', enabled);
-        ? lifecycleState.toUpperCase()
+    this._contextRadioMiniEnableBtn.setAttribute(
-        : (uncertain ? 'RECONCILE' : (enabled ? 'DISABLE' : 'ENABLE'));
+      'aria-pressed',
-      this._cockpitRadioEnableBtn.setAttribute(
+      String(enabled),
-        'aria-label',
+    );
-        uncertain ? 'Reconcile Radio — lifecycle uncertain' : `${enabled ? 'Disable' : 'Enable'} Radio`,
+    this._contextRadioMiniEnableBtn.textContent = transitioning
-      );
+      ? lifecycleState.toUpperCase()
-      this._cockpitRadioEnableBtn.disabled = false;
+      : uncertain
-      this._cockpitRadioEnableBtn.setAttribute('aria-disabled', String(transitioning));
+        ? 'RECONCILE'
-      this._cockpitRadioEnableBtn.setAttribute('aria-busy', String(transitioning));
+        : enabled
-    }
+          ? 'DISABLE'
+          : 'ENABLE';
+    this._contextRadioMiniEnableBtn.setAttribute(
+      'aria-label',
+      uncertain
+        ? 'Reconcile Radio — lifecycle uncertain'
+        : `${enabled ? 'Disable' : 'Enable'} Radio`,
+    );
+    this._contextRadioMiniEnableBtn.disabled = false;
+    this._contextRadioMiniEnableBtn.setAttribute(
+      'aria-disabled',
+      String(transitioning),
+    );
+    this._contextRadioMiniEnableBtn.setAttribute(
+      'aria-busy',
+      String(transitioning),
+    );
+  }
+  if (this._cockpitRadioEnableBtn) {
+    this._cockpitRadioEnableBtn.classList.toggle('active', enabled);
+    this._cockpitRadioEnableBtn.setAttribute('aria-pressed', String(enabled));
+    this._cockpitRadioEnableBtn.textContent = transitioning
+      ? lifecycleState.toUpperCase()
+      : uncertain
+        ? 'RECONCILE'
+        : enabled
+          ? 'DISABLE'
+          : 'ENABLE';
+    this._cockpitRadioEnableBtn.setAttribute(
+      'aria-label',
+      uncertain
+        ? 'Reconcile Radio — lifecycle uncertain'
+        : `${enabled ? 'Disable' : 'Enable'} Radio`,
+    );
+    this._cockpitRadioEnableBtn.disabled = false;
+    this._cockpitRadioEnableBtn.setAttribute(
+      'aria-disabled',
+      String(transitioning),
+    );
+    this._cockpitRadioEnableBtn.setAttribute(
+      'aria-busy',
+      String(transitioning),
+    );
+  }
 
-    if (this._radioFilter) {
+  if (this._radioFilter) {
-      const prior = state.filter || 'all';
+    const prior = state.filter || 'all';
-      const categorySignature = state.categories
+    const categorySignature = state.categories
-        .map((category) => `${category.id}:${category.count}:${category.color}`)
+      .map((category) => `${category.id}:${category.count}:${category.color}`)
-        .join('|');
+      .join('|');
-      if (categorySignature !== this._radioCategorySignature) {
+    if (categorySignature !== this._radioCategorySignature) {
-        this._radioFilter.replaceChildren(...state.categories.map((category) => {
+      this._radioFilter.replaceChildren(
+        ...state.categories.map((category) => {
           const option = document.createElement('option');
           option.value = category.id;
           option.textContent = `● ${category.label} (${category.count})`;
           option.dataset.radioColor = category.color;
           option.style.color = category.color;
-          option.setAttribute('aria-label', `${category.label} (${category.count})`);
+          option.setAttribute(
+            'aria-label',
+            `${category.label} (${category.count})`,
+          );
           return option;
-        }));
+        }),
-        this._radioCategorySignature = categorySignature;
+      );
-      }
+      this._radioCategorySignature = categorySignature;
-      this._radioFilter.value = prior;
-      const activeCategory = state.categories.find((category) => category.id === prior);
-      this._radioFilter.style.color = activeCategory?.color || '';
-      this._radioFilter.disabled = !interactive || !state.stationCount;
     }
-
+    this._radioFilter.value = prior;
-    const tunerAvailable = interactive && state.filteredCount > 0;
+    const activeCategory = state.categories.find(
-    if (this._radioTuner) this._radioTuner.hidden = !tunerAvailable;
+      (category) => category.id === prior,
-    if (this._radioTunerSlider) this._radioTunerSlider.disabled = !tunerAvailable;
+    );
-    if (this._radioTunerBandLabel) {
+    this._radioFilter.style.color = activeCategory?.color || '';
-      const activeCategory = state.categories.find((category) => category.id === state.filter);
+    this._radioFilter.disabled = !interactive || !state.stationCount;
-      this._radioTunerBandLabel.textContent = state.filter === 'all'
-        ? 'DIRECTORY BAND'
-        : `${String(activeCategory?.label || state.filter).toUpperCase()} BAND`;
-    }
-    this._radioTuner?.classList.toggle('is-static', Boolean(state.tuningStatic));
-    if (tunerAvailable) this._refreshRadioTunerBand?.();
-    if (!tunerAvailable && this._radioTunerDragging) {
-      this._radioTunerDragging = false;
-      this._radioTunerDragSnapshot = null;
-      this._radioTunerStations = [];
-      this._radioTuner?.classList.remove('is-static', 'is-dragging');
-    }
-    if (!tunerAvailable) {
-      this._radioTunerStations = [];
-      this._radioTunerPool = [];
-      this._radioTunerBandSignature = '';
-      this._radioTunerSelectedId = null;
-    }
-
-    if (this._radioStationName) this._radioStationName.textContent = selected?.name || 'NO STATION SELECTED';
-    if (this._radioStationMeta) {
-      const place = selected ? [selected.state, selected.countryCode].filter(Boolean).join(' · ') : '';
-      const signal = selected ? [selected.codec, selected.bitrate ? `${selected.bitrate} kbps` : ''].filter(Boolean).join(' · ') : '';
-      this._radioStationMeta.textContent = selected
-        ? [place, signal].filter(Boolean).join('  /  ') || 'Directory metadata only'
-        : (state.loading ? 'Loading station directory…' : 'Choose a globe marker or use next.');
-    }
-    if (this._radioStationTags) {
-      const tags = Array.isArray(selected?.tags) ? selected.tags.slice(0, 8) : [];
-      this._radioStationTags.textContent = tags.length ? `TAGS · ${tags.join(' · ')}` : '';
-    }
-    if (this._radioStationHomepage) {
-      const homepage = selected?.homepage || '';
-      this._radioStationHomepage.hidden = !homepage;
-      if (homepage) this._radioStationHomepage.href = homepage;
-      else this._radioStationHomepage.removeAttribute('href');
-    }
-
-    if (this._radioPrevBtn) this._radioPrevBtn.disabled = !interactive || !hasStations;
-    if (this._radioNextBtn) this._radioNextBtn.disabled = !interactive || !hasStations;
-    if (this._contextRadioMiniPrevBtn) this._contextRadioMiniPrevBtn.disabled = !interactive || !hasStations;
-    if (this._contextRadioMiniNextBtn) this._contextRadioMiniNextBtn.disabled = !interactive || !hasStations;
-    if (this._cockpitRadioPrevBtn) this._cockpitRadioPrevBtn.disabled = !interactive || !hasStations;
-    if (this._cockpitRadioNextBtn) this._cockpitRadioNextBtn.disabled = !interactive || !hasStations;
-    if (this._radioPlayBtn) {
-      const action = activePlayback ? 'Pause' : (state.audioState === 'paused' ? 'Resume' : 'Play');
-      this._radioPlayBtn.disabled = !interactive || !hasStations;
-      this._radioPlayBtn.classList.toggle('active', activePlayback);
-      this._radioPlayBtn.textContent = action.toUpperCase();
-      this._radioPlayBtn.setAttribute('aria-label', `${action} ${selected ? 'selected' : 'nearest'} radio station`);
-    }
-    if (this._contextRadioMiniPlayBtn) {
-      const action = activePlayback ? 'Pause' : (state.audioState === 'paused' ? 'Resume' : 'Play');
-      this._contextRadioMiniPlayBtn.disabled = !interactive || !hasStations;
-      this._contextRadioMiniPlayBtn.classList.toggle('active', activePlayback);
-      this._contextRadioMiniPlayBtn.textContent = activePlayback ? 'Ⅱ' : '▶';
-      this._contextRadioMiniPlayBtn.setAttribute('aria-label', `${action} ${selected ? 'selected' : 'nearest'} radio station`);
-      this._contextRadioMiniPlayBtn.title = action;
-    }
-    if (this._cockpitRadioPlayBtn) {
-      const action = activePlayback ? 'Pause' : (state.audioState === 'paused' ? 'Resume' : 'Play');
-      this._cockpitRadioPlayBtn.disabled = !interactive || !hasStations;
-      this._cockpitRadioPlayBtn.classList.toggle('active', activePlayback);
-      this._cockpitRadioPlayBtn.textContent = activePlayback ? 'Ⅱ' : '▶';
-      this._cockpitRadioPlayBtn.setAttribute('aria-label', `${action} ${selected ? 'selected' : 'nearest'} radio station`);
-      this._cockpitRadioPlayBtn.title = action;
-    }
-    if (this._radioStopBtn) this._radioStopBtn.disabled = !interactive || state.audioState === 'stopped';
-    if (this._radioVolume) this._radioVolume.disabled = !interactive;
-    if (this._radioVolume && document.activeElement !== this._radioVolume) {
-      this._radioVolume.value = String(Math.round(state.volume * 100));
-      if (this._radioVolumeValue) this._radioVolumeValue.textContent = `${Math.round(state.volume * 100)}%`;
-    }
-    if (this._contextRadioMiniVolume && document.activeElement !== this._contextRadioMiniVolume) {
-      this._contextRadioMiniVolume.value = String(Math.round(state.volume * 100));
-    }
-    if (this._contextRadioMiniVolume) this._contextRadioMiniVolume.disabled = !interactive;
-    if (this._contextRadioMiniVolumeValue) {
-      this._contextRadioMiniVolumeValue.textContent = `${Math.round(state.volume * 100)}%`;
-    }
-    if (this._cockpitRadioVolume && document.activeElement !== this._cockpitRadioVolume) {
-      this._cockpitRadioVolume.value = String(Math.round(state.volume * 100));
-    }
-    if (this._cockpitRadioVolume) this._cockpitRadioVolume.disabled = !interactive;
-    if (this._cockpitRadioVolumeValue) {
-      this._cockpitRadioVolumeValue.textContent = `${Math.round(state.volume * 100)}%`;
-    }
-    if (this._contextRadioMiniStation) {
-      this._contextRadioMiniStation.textContent = uncertain
-        ? 'RADIO STATE UNCERTAIN'
-        : (selected?.name || (state.loading ? 'SYNCING DIRECTORY' : 'RADIO READY'));
-    }
-    if (this._cockpitRadioStation) {
-      this._cockpitRadioStation.textContent = uncertain
-        ? 'UNCERTAIN'
-        : (selected?.name || (state.loading ? 'SYNCING' : 'READY'));
-    }
-    if (this._radioPlaybackState) {
-      const catalogSuffix = state.degraded
-        ? (state.stale ? ' · stale/degraded directory' : ' · degraded directory')
-        : (state.stale ? ' · stale directory' : '');
-      const outsideFilter = selected && state.selectedIndex < 0 ? ' · outside current filter' : '';
-      const messages = {
-        stopped: enabled ? 'Ready — playback starts only from your action' : 'Radio off',
-        loading: 'Connecting directly to broadcaster…',
-        buffering: 'Buffering broadcaster stream…',
-        playing: `Playing ${selected?.name || 'station'}`,
-        paused: `Paused ${selected?.name || 'station'}`,
-        error: state.audioError || 'Broadcaster stream unavailable',
-      };
-      const voiceSuffix = state.voiceDucked
-        ? ' · muted during voice interaction'
-        : (state.voiceRestoring ? ' · restoring volume after voice' : '');
-      const tuningSuffix = state.tuningAwaitingStationId
-        ? (state.audioState === 'error'
-          ? ' · static indicates no broadcaster audio'
-          : ' · tuning static until broadcaster starts')
-        : '';
-      const unavailable = state.tuningUnavailableStationId
-        ? 'Station unavailable after directory refresh — choose another channel'
-        : null;
-      const lifecycleMessage = transitioning
-        ? (lifecycleState === 'enabling' ? 'Radio is enabling…' : 'Radio is disabling…')
-        : null;
-      const uncertainMessage = uncertain
-        ? 'Radio lifecycle is uncertain — use Enable or Disable to reconcile'
-        : null;
-      this._radioPlaybackState.textContent = `${uncertainMessage || unavailable || lifecycleMessage || state.error || messages[state.audioState] || 'Ready'}${tuningSuffix}${voiceSuffix}${catalogSuffix}${outsideFilter}`;
-      this._radioPlaybackState.classList.toggle('error', Boolean(uncertainMessage || unavailable || state.error || state.audioState === 'error'));
-    }
-    if (
-      !enabled
-      && !transitioning
-      && !this.actions.preservePanelStateDuringClear()
-      && !this._radioPanel.classList.contains('collapsed')
-    ) {
-      this.actions.setPanelCollapsed('radio-panel', true);
-    }
-    this.actions.scheduleLayout();
   }
 
+  const tunerAvailable = interactive && state.filteredCount > 0;
+  if (this._radioTuner) this._radioTuner.hidden = !tunerAvailable;
+  if (this._radioTunerSlider) this._radioTunerSlider.disabled = !tunerAvailable;
+  if (this._radioTunerBandLabel) {
+    const activeCategory = state.categories.find(
+      (category) => category.id === state.filter,
+    );
+    this._radioTunerBandLabel.textContent =
+      state.filter === 'all'
+        ? 'DIRECTORY BAND'
+        : `${String(activeCategory?.label || state.filter).toUpperCase()} BAND`;
+  }
+  this._radioTuner?.classList.toggle('is-static', Boolean(state.tuningStatic));
+  if (tunerAvailable) this._refreshRadioTunerBand?.();
+  if (!tunerAvailable && this._radioTunerDragging) {
+    this._radioTunerDragging = false;
+    this._radioTunerDragSnapshot = null;
+    this._radioTunerStations = [];
+    this._radioTuner?.classList.remove('is-static', 'is-dragging');
+  }
+  if (!tunerAvailable) {
+    this._radioTunerStations = [];
+    this._radioTunerPool = [];
+    this._radioTunerBandSignature = '';
+    this._radioTunerSelectedId = null;
+  }
+
+  if (this._radioStationName)
+    this._radioStationName.textContent =
+      selected?.name || 'NO STATION SELECTED';
+  if (this._radioStationMeta) {
+    const place = selected
+      ? [selected.state, selected.countryCode].filter(Boolean).join(' · ')
+      : '';
+    const signal = selected
+      ? [selected.codec, selected.bitrate ? `${selected.bitrate} kbps` : '']
+          .filter(Boolean)
+          .join(' · ')
+      : '';
+    this._radioStationMeta.textContent = selected
+      ? [place, signal].filter(Boolean).join('  /  ') ||
+        'Directory metadata only'
+      : state.loading
+        ? 'Loading station directory…'
+        : 'Choose a globe marker or use next.';
+  }
+  if (this._radioStationTags) {
+    const tags = Array.isArray(selected?.tags) ? selected.tags.slice(0, 8) : [];
+    this._radioStationTags.textContent = tags.length
+      ? `TAGS · ${tags.join(' · ')}`
+      : '';
+  }
+  if (this._radioStationHomepage) {
+    const homepage = selected?.homepage || '';
+    this._radioStationHomepage.hidden = !homepage;
+    if (homepage) this._radioStationHomepage.href = homepage;
+    else this._radioStationHomepage.removeAttribute('href');
+  }
+
+  if (this._radioPrevBtn)
+    this._radioPrevBtn.disabled = !interactive || !hasStations;
+  if (this._radioNextBtn)
+    this._radioNextBtn.disabled = !interactive || !hasStations;
+  if (this._contextRadioMiniPrevBtn)
+    this._contextRadioMiniPrevBtn.disabled = !interactive || !hasStations;
+  if (this._contextRadioMiniNextBtn)
+    this._contextRadioMiniNextBtn.disabled = !interactive || !hasStations;
+  if (this._cockpitRadioPrevBtn)
+    this._cockpitRadioPrevBtn.disabled = !interactive || !hasStations;
+  if (this._cockpitRadioNextBtn)
+    this._cockpitRadioNextBtn.disabled = !interactive || !hasStations;
+  if (this._radioPlayBtn) {
+    const action = activePlayback
+      ? 'Pause'
+      : state.audioState === 'paused'
+        ? 'Resume'
+        : 'Play';
+    this._radioPlayBtn.disabled = !interactive || !hasStations;
+    this._radioPlayBtn.classList.toggle('active', activePlayback);
+    this._radioPlayBtn.textContent = action.toUpperCase();
+    this._radioPlayBtn.setAttribute(
+      'aria-label',
+      `${action} ${selected ? 'selected' : 'nearest'} radio station`,
+    );
+  }
+  if (this._contextRadioMiniPlayBtn) {
+    const action = activePlayback
+      ? 'Pause'
+      : state.audioState === 'paused'
+        ? 'Resume'
+        : 'Play';
+    this._contextRadioMiniPlayBtn.disabled = !interactive || !hasStations;
+    this._contextRadioMiniPlayBtn.classList.toggle('active', activePlayback);
+    this._contextRadioMiniPlayBtn.textContent = activePlayback ? 'Ⅱ' : '▶';
+    this._contextRadioMiniPlayBtn.setAttribute(
+      'aria-label',
+      `${action} ${selected ? 'selected' : 'nearest'} radio station`,
+    );
+    this._contextRadioMiniPlayBtn.title = action;
+  }
+  if (this._cockpitRadioPlayBtn) {
+    const action = activePlayback
+      ? 'Pause'
+      : state.audioState === 'paused'
+        ? 'Resume'
+        : 'Play';
+    this._cockpitRadioPlayBtn.disabled = !interactive || !hasStations;
+    this._cockpitRadioPlayBtn.classList.toggle('active', activePlayback);
+    this._cockpitRadioPlayBtn.textContent = activePlayback ? 'Ⅱ' : '▶';
+    this._cockpitRadioPlayBtn.setAttribute(
+      'aria-label',
+      `${action} ${selected ? 'selected' : 'nearest'} radio station`,
+    );
+    this._cockpitRadioPlayBtn.title = action;
+  }
+  if (this._radioStopBtn)
+    this._radioStopBtn.disabled =
+      !interactive || state.audioState === 'stopped';
+  if (this._radioVolume) this._radioVolume.disabled = !interactive;
+  if (this._radioVolume && document.activeElement !== this._radioVolume) {
+    this._radioVolume.value = String(Math.round(state.volume * 100));
+    if (this._radioVolumeValue)
+      this._radioVolumeValue.textContent = `${Math.round(state.volume * 100)}%`;
+  }
+  if (
+    this._contextRadioMiniVolume &&
+    document.activeElement !== this._contextRadioMiniVolume
+  ) {
+    this._contextRadioMiniVolume.value = String(Math.round(state.volume * 100));
+  }
+  if (this._contextRadioMiniVolume)
+    this._contextRadioMiniVolume.disabled = !interactive;
+  if (this._contextRadioMiniVolumeValue) {
+    this._contextRadioMiniVolumeValue.textContent = `${Math.round(state.volume * 100)}%`;
+  }
+  if (
+    this._cockpitRadioVolume &&
+    document.activeElement !== this._cockpitRadioVolume
+  ) {
+    this._cockpitRadioVolume.value = String(Math.round(state.volume * 100));
+  }
+  if (this._cockpitRadioVolume)
+    this._cockpitRadioVolume.disabled = !interactive;
+  if (this._cockpitRadioVolumeValue) {
+    this._cockpitRadioVolumeValue.textContent = `${Math.round(state.volume * 100)}%`;
+  }
+  if (this._contextRadioMiniStation) {
+    this._contextRadioMiniStation.textContent = uncertain
+      ? 'RADIO STATE UNCERTAIN'
+      : selected?.name || (state.loading ? 'SYNCING DIRECTORY' : 'RADIO READY');
+  }
+  if (this._cockpitRadioStation) {
+    this._cockpitRadioStation.textContent = uncertain
+      ? 'UNCERTAIN'
+      : selected?.name || (state.loading ? 'SYNCING' : 'READY');
+  }
+  if (this._radioPlaybackState) {
+    const catalogSuffix = state.degraded
+      ? state.stale
+        ? ' · stale/degraded directory'
+        : ' · degraded directory'
+      : state.stale
+        ? ' · stale directory'
+        : '';
+    const outsideFilter =
+      selected && state.selectedIndex < 0 ? ' · outside current filter' : '';
+    const messages = {
+      stopped: enabled
+        ? 'Ready — playback starts only from your action'
+        : 'Radio off',
+      loading: 'Connecting directly to broadcaster…',
+      buffering: 'Buffering broadcaster stream…',
+      playing: `Playing ${selected?.name || 'station'}`,
+      paused: `Paused ${selected?.name || 'station'}`,
+      error: state.audioError || 'Broadcaster stream unavailable',
+    };
+    const voiceSuffix = state.voiceDucked
+      ? ' · muted during voice interaction'
+      : state.voiceRestoring
+        ? ' · restoring volume after voice'
+        : '';
+    const tuningSuffix = state.tuningAwaitingStationId
+      ? state.audioState === 'error'
+        ? ' · static indicates no broadcaster audio'
+        : ' · tuning static until broadcaster starts'
+      : '';
+    const unavailable = state.tuningUnavailableStationId
+      ? 'Station unavailable after directory refresh — choose another channel'
+      : null;
+    const lifecycleMessage = transitioning
+      ? lifecycleState === 'enabling'
+        ? 'Radio is enabling…'
+        : 'Radio is disabling…'
+      : null;
+    const uncertainMessage = uncertain
+      ? 'Radio lifecycle is uncertain — use Enable or Disable to reconcile'
+      : null;
+    this._radioPlaybackState.textContent = `${uncertainMessage || unavailable || lifecycleMessage || state.error || messages[state.audioState] || 'Ready'}${tuningSuffix}${voiceSuffix}${catalogSuffix}${outsideFilter}`;
+    this._radioPlaybackState.classList.toggle(
+      'error',
+      Boolean(
+        uncertainMessage ||
+        unavailable ||
+        state.error ||
+        state.audioState === 'error',
+      ),
+    );
+  }
+  if (
+    !enabled &&
+    !transitioning &&
+    !this.actions.preservePanelStateDuringClear() &&
+    !this._radioPanel.classList.contains('collapsed')
+  ) {
+    this.actions.setPanelCollapsed('radio-panel', true);
+  }
+  this.actions.scheduleLayout();
+}

src/ui/radioTunerModel.js

@@ -1,7 +1,15 @@
 /** Map an integer tuner slot directly to one available directory station. */
 export function radioTunerSlot(value, stationCount) {
   const count = Math.max(0, Math.floor(Number(stationCount) || 0));
-  if (!count) return { slot: 0, max: 0, locked: false, stationIndex: -1, leftIndex: -1, rightIndex: -1 };
+  if (!count)
+    return {
+      slot: 0,
+      max: 0,
+      locked: false,
+      stationIndex: -1,
+      leftIndex: -1,
+      rightIndex: -1,
+    };
   const max = Math.max(0, count - 1);
   const slot = Math.min(max, Math.max(0, Math.round(Number(value) || 0)));
   return {
@@ -20,29 +28,49 @@ export function radioTunerCommitSlot(value, stationCount) {
 }
 
 /** Map one pointer coordinate to continuous absolute directory progress. */
-export function radioTunerPointerPosition(clientX, left, width, stationCount, insetPx = 7) {
+export function radioTunerPointerPosition(
+  clientX,
+  left,
+  width,
+  stationCount,
+  insetPx = 7,
+) {
   const count = Math.max(0, Math.floor(Number(stationCount) || 0));
   if (!count) return { ratio: 0, coordinate: 0, stationIndex: -1 };
   if (count === 1) return { ratio: 0.5, coordinate: 0, stationIndex: 0 };
   const inset = Math.max(0, Number(insetPx) || 0);
   const usableWidth = Math.max(1, (Number(width) || 0) - inset * 2);
-  const ratio = Math.min(1, Math.max(0, ((Number(clientX) || 0) - (Number(left) || 0) - inset) / usableWidth));
+  const ratio = Math.min(
+    1,
+    Math.max(
+      0,
+      ((Number(clientX) || 0) - (Number(left) || 0) - inset) / usableWidth,
+    ),
+  );
   const coordinate = ratio * (count - 1);
   return {
     ratio,
     coordinate,
-    stationIndex: Math.min(count - 1, Math.max(0, Math.floor(coordinate + 0.5))),
+    stationIndex: Math.min(
+      count - 1,
+      Math.max(0, Math.floor(coordinate + 0.5)),
+    ),
   };
 }
 
 /** Build a bounded virtual tuner tape around one continuous directory coordinate. */
-export function buildRadioTunerTicks(coordinate, stationCount, width, {
+export function buildRadioTunerTicks(
-  insetPx = 7,
+  coordinate,
-  minPitchPx = 14,
+  stationCount,
-  speedFactor = 5,
+  width,
-  overscan = 2,
+  {
-  labelStep = 6,
+    insetPx = 7,
-} = {}) {
+    minPitchPx = 14,
+    speedFactor = 5,
+    overscan = 2,
+    labelStep = 6,
+  } = {},
+) {
   const count = Math.max(0, Math.floor(Number(stationCount) || 0));
   const dialWidth = Math.max(0, Number(width) || 0);
   const inset = Math.max(0, Number(insetPx) || 0);
@@ -51,7 +79,15 @@ export function buildRadioTunerTicks(coordinate, stationCount, width, {
   const value = Math.min(count - 1, Math.max(0, Number(coordinate) || 0));
   if (count === 1) {
     return {
-      ticks: [{ stationIndex: 0, channel: 1, xPx: inset + usableWidth / 2, current: true, label: '01' }],
+      ticks: [
+        {
+          stationIndex: 0,
+          channel: 1,
+          xPx: inset + usableWidth / 2,
+          current: true,
+          label: '01',
+        },
+      ],
       needleX: inset + usableWidth / 2,
       pitchPx: Math.max(1, Number(minPitchPx) || 14),
       ratio: 0.5,
@@ -64,16 +100,29 @@ export function buildRadioTunerTicks(coordinate, stationCount, width, {
   );
   const needleX = inset + directoryStep * value;
   const overscanPx = pitchPx * Math.max(0, Number(overscan) || 0);
-  const first = Math.max(0, Math.ceil(value + (-overscanPx - needleX) / pitchPx));
+  const first = Math.max(
-  const last = Math.min(count - 1, Math.floor(value + (dialWidth + overscanPx - needleX) / pitchPx));
+    0,
-  const currentIndex = Math.min(count - 1, Math.max(0, Math.floor(value + 0.5)));
+    Math.ceil(value + (-overscanPx - needleX) / pitchPx),
+  );
+  const last = Math.min(
+    count - 1,
+    Math.floor(value + (dialWidth + overscanPx - needleX) / pitchPx),
+  );
+  const currentIndex = Math.min(
+    count - 1,
+    Math.max(0, Math.floor(value + 0.5)),
+  );
   const majorEvery = Math.max(1, Math.floor(Number(labelStep) || 6));
   const labelWidth = Math.max(2, String(count).length);
   const ticks = [];
   for (let stationIndex = first; stationIndex <= last; stationIndex += 1) {
     const channel = stationIndex + 1;
     const current = stationIndex === currentIndex;
-    const labelled = current || stationIndex === 0 || stationIndex === count - 1 || channel % majorEvery === 0;
+    const labelled =
+      current ||
+      stationIndex === 0 ||
+      stationIndex === count - 1 ||
+      channel % majorEvery === 0;
     ticks.push({
       stationIndex,
       channel,
@@ -84,4 +133,3 @@ export function buildRadioTunerTicks(coordinate, stationCount, width, {
   }
   return { ticks, needleX, pitchPx, ratio: value / (count - 1) };
 }
-