From 15f93e62275569015c365d095a1faad76b282a23 Mon Sep 17 00:00:00 2001
From: Adica <adica@192.168.1.16>
Date: Fri, 3 Jul 2026 17:34:30 +0300
Subject: [PATCH 1/2] Phase 3: split the DOM glue layer into
 single-responsibility modules
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Pure code movement — no behavior change, proven by the untouched e2e
suite. script.ts (757 lines) becomes:

- dom.ts             el<T>() helper + shared element references
- labels.ts          user-facing texts (single source of truth)
- cloudinary.ts      status image URLs + offline pre-cache
- storage.ts         last-station persistence
- soundEffects.ts    audioInstance (blob preload, warmUp, ensure) + cache
- mediaSession.ts    Now Playing metadata/handlers + iOS re-registration
- serviceWorker.ts   registration + deferred idle-time reload
- theme.ts           prefers-color-scheme theme color
- stationSelector.ts accessible listbox, reports picks via onSelect()
- main.ts            entry point: wiring only, same execution order

Notable seams:
- the core<->mediaSession cycle is resolved by explicit injection
  (initMediaSession before createRadioCore, connectMediaSessionCore
  after) instead of a mutable let;
- mediaSession no longer calls into serviceWorker — main composes
  updateMediaSession + maybeReloadForPendingServiceWorkerUpdate in the
  deps, preserving the original order.

Bundle output unchanged (single js/index.js chunk), so sw.js APP_SHELL
needs no bump. Typecheck clean, 63/63 unit, 37/37 e2e untouched, full
production-preview smoke passing.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 plan.md                   |  42 ++-
 src/index.html            |   2 +-
 src/js/cloudinary.ts      |  27 ++
 src/js/dom.ts             |  28 ++
 src/js/labels.ts          |   6 +
 src/js/main.ts            | 217 +++++++++++
 src/js/mediaSession.ts    | 139 +++++++
 src/js/script.ts          | 757 --------------------------------------
 src/js/serviceWorker.ts   |  64 ++++
 src/js/soundEffects.ts    | 146 ++++++++
 src/js/stationSelector.ts | 190 ++++++++++
 src/js/storage.ts         |  14 +
 src/js/theme.ts           |  18 +
 13 files changed, 891 insertions(+), 759 deletions(-)
 create mode 100644 src/js/cloudinary.ts
 create mode 100644 src/js/dom.ts
 create mode 100644 src/js/labels.ts
 create mode 100644 src/js/main.ts
 create mode 100644 src/js/mediaSession.ts
 delete mode 100644 src/js/script.ts
 create mode 100644 src/js/serviceWorker.ts
 create mode 100644 src/js/soundEffects.ts
 create mode 100644 src/js/stationSelector.ts
 create mode 100644 src/js/storage.ts
 create mode 100644 src/js/theme.ts

diff --git a/plan.md b/plan.md
index 2b85ba7..c9e631d 100644
--- a/plan.md
+++ b/plan.md
@@ -142,6 +142,31 @@ SW-urile NU raman "pe viata": no-cache + reg.update() + skipWaiting/claim +
 stergerea cache-urilor radio-* vechi la activate. Forcarea invalidarii la
 useri = bump la cele 3 constante de versiune (facut: app-v3/images-v3/sounds-v2).
 
+## Episodul handoff/carry (PR #41 — REVERTAT integral, decizia lui Adrian)
+
+S-a construit si VERIFICAT PE IPHONE un mecanism care facea sunetul de eroare
+audibil din prima pe lock screen (handoff cu stop amanat + "carry": elementul
+de loading isi schimba src-ul la tonul de eroare). Revertat pentru ca
+contrazice filozofia proiectului: state machine = precizie, fara sunete
+suprapuse, fara coordonare event-driven estimata in stratul DOM.
+
+Cunostinte castigate (valabile, de refolosit):
+- iOS in background REFUZA orice pornire proaspata de element audio, dar
+  PERMITE unui element care deja canta sa-si schimbe src si sa continue.
+- Web Audio API a fost deja incercat si revertat istoric (69a58f2): iOS
+  pierde sesiunea fara un <audio> activ. Elementele separate loading/error
+  si re-inregistrarea handler-elor MediaSession (d798cc9) sunt deliberate.
+- Evenimentul window 'offline' poate porni pipeline-ul instant (fara ~6s de
+  watchdog) — idee buna, de reintrodus curat candva.
+- Widget-ul Now Playing pe macOS ramane gol la eroare offline (3 fix-uri
+  incercate si revertate) — limitare cunoscuta.
+
+Directia agreata daca se reia: UN SINGUR element <audio> de feedback ("canal")
+cu `tone: 'loading'|'error'|'none'` in STATE_FX — overlap imposibil prin
+constructie, schimbarea de ton = swap de src pe elementul care deja canta
+(exact continuarea permisa de iOS). De facut eventual in Faza 4 (XState),
+cu re-validare completa pe device.
+
 ## Faza 2: TypeScript [gata]
 
 Obiectiv: type safety pe contractul core <-> DOM, fara nicio schimbare de logica.
@@ -178,11 +203,26 @@ Fisiere: `tsconfig.json`, `package.json`, redenumirile din `src/js/`,
 Verificari: `npm run typecheck` curat, `npm test` verde (aceleasi teste),
 `npm run build` verde, e2e 23/23 neatins.
 
-## Faza 3: modularizare script.ts
+## Faza 3: modularizare script.ts [gata]
 
 Obiectiv: spargem glue-ul DOM de 700+ linii in module cu responsabilitate unica.
 Zero schimbare de comportament — doar mutare de cod si import/export.
 
+Note de implementare (branch `faza3-modularizare`):
+- In plus fata de planul initial: `src/js/dom.ts` (helper-ul el<T> + toate
+  referintele DOM partajate) — mediaSession/selector au nevoie de aceleasi
+  elemente ca main, iar importul dintr-un singur loc pastreaza comportamentul
+  (lookup la load) fara parametri plimbati peste tot.
+- `updateMediaSession` NU mai apeleaza maybeReloadForPendingServiceWorkerUpdate
+  (dependenta mediaSession -> serviceWorker taiata): main compune cele doua in
+  deps.updateMediaSession, in aceeasi ordine ca inainte.
+- Ciclul core <-> mediaSession rezolvat prin initMediaSession (inainte de
+  createRadioCore, pentru hasRestoredStation) + connectMediaSessionCore (dupa).
+- Bundle-ul ramane un singur chunk `js/index.js` (importuri statice) — APP_SHELL
+  din sw.js neschimbat, fara bump de cache.
+- Verificat: typecheck curat, 63/63 unit, build identic ca structura, 37/37 e2e
+  NEATINSE, smoke complet pe vite preview.
+
 - `src/js/main.ts` — entry point: DOM refs, `createRadioCore(deps)`, event
   listeners pe butoane/player/online, wiring intre module.
 - `src/js/labels.ts` — `LABELS` (sursa unica pentru textele user-facing).
diff --git a/src/index.html b/src/index.html
index 4737cb7..1696355 100644
--- a/src/index.html
+++ b/src/index.html
@@ -232,7 +232,7 @@ <h1 class="uppercase text-sm text-Brown mt-6">Radio Player Romania
     <p class="mt-2"><a href="./downloads/coji-radio-romania.apk" download>Descarcă aplicația Android (0.9)</a></p>
   </footer>
 
-  <script type="module" src="./js/script.ts"></script>
+  <script type="module" src="./js/main.ts"></script>
 </body>
 
 </html>
diff --git a/src/js/cloudinary.ts b/src/js/cloudinary.ts
new file mode 100644
index 0000000..8c5a47f
--- /dev/null
+++ b/src/js/cloudinary.ts
@@ -0,0 +1,27 @@
+/** Cloudinary status/poster images + their offline pre-cache. */
+
+export function cloudinaryImageUrl(text: string, live = false) {
+  const url_non_live = 'nndti4oybhdzggf8epvh';
+  const url_live = 'rhz6yy4btbqicjqhsy7a';
+  const encoded = encodeURIComponent(text);
+  return `https://res.cloudinary.com/adrianf/image/upload/c_scale,h_480,w_480/w_400,g_south_west,x_50,y_70,c_fit,l_text:arial_90:${encoded}/${live ? url_live : url_non_live}`;
+}
+
+// Pre-cache status images + station name images into Cache API for offline use
+export function precacheStatusImages(texts: string[]): void {
+  if (!('caches' in window)) return;
+  caches.open('radio-images-v3').then(cache => {
+    texts.forEach(text => {
+      const url = cloudinaryImageUrl(text);
+      cache.match(url)
+        .then(hit => {
+          if (!hit) {
+            return fetch(url, { mode: 'no-cors' }).then(res => {
+              if (res.ok || res.type === 'opaque') return cache.put(url, res);
+            });
+          }
+        })
+        .catch(() => { /* offline or CORS — ignore, SW will cache on next online visit */ });
+    });
+  }).catch(() => { /* cache API unavailable */ });
+}
diff --git a/src/js/dom.ts b/src/js/dom.ts
new file mode 100644
index 0000000..1a4a099
--- /dev/null
+++ b/src/js/dom.ts
@@ -0,0 +1,28 @@
+/**
+ * Shared DOM references.
+ *
+ * The markup is ours (src/index.html), so a missing id is a build-time bug —
+ * fail loudly instead of null-checking every use site.
+ */
+
+export function el<T extends HTMLElement>(id: string): T {
+  const node = document.getElementById(id);
+  if (!node) throw new Error(`Missing element: #${id}`);
+  return node as T;
+}
+
+export const radioSelect = el<HTMLSelectElement>('radioSelect');
+export const player = el<HTMLAudioElement>('player');
+export const loadingNoise = el<HTMLAudioElement>('loadingNoise');
+export const errorNoise = el<HTMLAudioElement>('errorNoise');
+export const loadingMsg = el<HTMLElement>('loadingMsg');
+export const errorMsg = el<HTMLElement>('errorMsg');
+
+export const prevButton = el<HTMLButtonElement>('prevButton');
+export const playButton = el<HTMLButtonElement>('playButton');
+export const pauseButton = el<HTMLButtonElement>('pauseButton');
+export const stopButton = el<HTMLButtonElement>('stopButton');
+export const nextButton = el<HTMLButtonElement>('nextButton');
+
+export const logoButton = el<HTMLButtonElement>('logoButton');
+export const posterImage = el<HTMLButtonElement>('posterImage');
diff --git a/src/js/labels.ts b/src/js/labels.ts
new file mode 100644
index 0000000..0812a24
--- /dev/null
+++ b/src/js/labels.ts
@@ -0,0 +1,6 @@
+/** All user-facing labels (single source of truth). */
+export const LABELS = {
+  appName:  'Coji Radio Player',
+  loading:  'Se încarcă...',
+  error:    'Eroare',
+};
diff --git a/src/js/main.ts b/src/js/main.ts
new file mode 100644
index 0000000..96c399f
--- /dev/null
+++ b/src/js/main.ts
@@ -0,0 +1,217 @@
+/**
+ * Radio Player — entry point: wires the pure core (radioCore) to the DOM
+ * through the feature modules. No business logic lives here, only wiring.
+ */
+
+import { createRadioCore } from './radioCore';
+import {
+  radioSelect, player, loadingNoise, errorNoise, loadingMsg, errorMsg,
+  prevButton, playButton, pauseButton, stopButton, nextButton, logoButton,
+} from './dom';
+import { LABELS } from './labels';
+import { precacheStatusImages } from './cloudinary';
+import { getStoredStationIndex, saveLastIndex } from './storage';
+import { audioInstance } from './soundEffects';
+import { initMediaSession, connectMediaSessionCore, updateMediaSession } from './mediaSession';
+import { initServiceWorker, maybeReloadForPendingServiceWorkerUpdate } from './serviceWorker';
+import { initThemeColor } from './theme';
+import { initStationSelector } from './stationSelector';
+
+declare global {
+  interface Window {
+    electronAPI?: {
+      onMediaControl(callback: (command: string) => void): void;
+      updatePlaybackState(isPlaying: boolean): void;
+    };
+  }
+}
+
+document.addEventListener("touchstart", function () { }, true);
+
+// Pre-cache status images + station name images for offline use
+precacheStatusImages([
+  ...Object.values(LABELS),
+  ...Array.from(radioSelect.options).map(o => o.text),
+]);
+
+// Restore last station before anything reads selectedIndex
+const restoredStationIndex = getStoredStationIndex(radioSelect.options.length);
+const hasRestoredStation = restoredStationIndex !== null;
+if (hasRestoredStation) {
+  radioSelect.selectedIndex = restoredStationIndex;
+}
+initMediaSession({ hasRestoredStation });
+
+// --- Feedback sounds ---
+
+const loadingNoiseInstance = audioInstance(loadingNoise);
+const errorNoiseInstance = audioInstance(errorNoise);
+
+// Preload audio blobs once per page. Re-called from user interactions as a
+// retry if the eager page-load preload failed — fetch() doesn't need a user
+// gesture, only playback does.
+function preloadAudioBlobs() {
+  loadingNoiseInstance.preloadBlob();
+  errorNoiseInstance.preloadBlob();
+}
+preloadAudioBlobs();
+
+// Every playback-starting interaction also warms the sound elements up
+// (plays them for a split second) so iOS blesses them with the user gesture.
+function warmUpFeedbackSounds() {
+  preloadAudioBlobs();
+  loadingNoiseInstance.warmUp();
+  errorNoiseInstance.warmUp();
+}
+
+// --- Playback control buttons ---
+
+function isPlaybackControl(element: Element | null) {
+  return element === playButton || element === pauseButton || element === stopButton;
+}
+
+function focusInitialPlaybackControl() {
+  if (document.activeElement && document.activeElement !== document.body) return;
+  playButton.focus();
+}
+
+const showButton = (which: 'play' | 'pause' | 'stop') => {
+  const shouldPreserveFocus = isPlaybackControl(document.activeElement);
+  const nextControl = which === 'play' ? playButton : which === 'pause' ? pauseButton : stopButton;
+
+  playButton.classList.toggle('hidden', which !== 'play');
+  pauseButton.classList.toggle('hidden', which !== 'pause');
+  stopButton.classList.toggle('hidden', which !== 'stop');
+
+  if (shouldPreserveFocus) nextControl.focus();
+};
+
+// --- Core ---
+
+const core = createRadioCore({
+  getStationUrl:    (i) => radioSelect.options[i].value,
+  getStationCount:  () => radioSelect.options.length,
+  getSelectedIndex: () => radioSelect.selectedIndex,
+  setSelectedIndex: (i) => { radioSelect.selectedIndex = i; },
+  playerPlay:       () => player.play(),
+  playerPause:      () => player.pause(),
+  playerSetSrc:     (url) => { player.src = url; },
+  playerLoad:       () => player.load(),
+  playerIsPaused:   () => player.paused,
+  playerCurrentTime: () => player.currentTime,
+  loadingSound:     loadingNoiseInstance,
+  errorSound:       errorNoiseInstance,
+  showButton,
+  setLoadingMsg:    (v) => loadingMsg.classList.toggle('invisible', !v),
+  setErrorMsg:      (v) => errorMsg.classList.toggle('invisible', !v),
+  updateMediaSession: (s) => {
+    updateMediaSession(s);
+    maybeReloadForPendingServiceWorkerUpdate(s);
+  },
+  saveLastIndex,
+  setTimeout,
+  clearTimeout:  (id) => clearTimeout(id ?? undefined),
+  setInterval,
+  clearInterval: (id) => clearInterval(id ?? undefined),
+  performanceNow:   () => performance.now(),
+  isOnline:          () => navigator.onLine,
+});
+connectMediaSessionCore(core);
+focusInitialPlaybackControl();
+
+// --- Event listeners ---
+
+radioSelect.addEventListener('change', () => {
+  if (radioSelect.value) {
+    core.playRadio(radioSelect.selectedIndex);
+  } else {
+    core.stopRadio();
+  }
+});
+
+// Electron
+const electronAPI = window.electronAPI;
+if (electronAPI) {
+  electronAPI.onMediaControl((command) => {
+    if (command === "playpause") {
+      core.togglePlayPause();
+    } else if (command === "next") {
+      core.nextRadio();
+    } else if (command === "previous") {
+      core.prevRadio();
+    }
+  });
+
+  document.addEventListener("DOMContentLoaded", () => {
+    const updatePlaybackState = () =>
+      electronAPI.updatePlaybackState(core.getState() === 'playing');
+    player.addEventListener("play", updatePlaybackState);
+    player.addEventListener("pause", updatePlaybackState);
+  });
+}
+
+// Buttons
+playButton.addEventListener('click', () => {
+  warmUpFeedbackSounds();
+  core.onPlayButtonClick();
+});
+pauseButton.addEventListener('click', () => core.pauseRadio());
+stopButton.addEventListener('click', () => core.stopRadio());
+
+// Native audio events → core (iOS needs the mediaSession.playbackState override)
+player.addEventListener('play', () => {
+  if ('mediaSession' in navigator) navigator.mediaSession.playbackState = 'playing';
+  core.onPlayerPlay();
+});
+
+player.addEventListener('pause', () => {
+  const s = core.getState();
+  // During loading/retrying/recovering the main player pauses while the loading
+  // sound takes over.  Actively re-assert 'playing' so macOS doesn't flash
+  // "Not Playing" in the gap.  Only signal 'paused' in normal playback states.
+  if ('mediaSession' in navigator) {
+    if (s === 'loading' || s === 'retrying' || s === 'recovering') {
+      navigator.mediaSession.playbackState = 'playing';
+    } else if (s === 'playing') {
+      navigator.mediaSession.playbackState = 'paused';
+    }
+  }
+  core.onPlayerPause();
+});
+
+// Stream failure during playback (lost WiFi, server died, etc.)
+// Silent failures (no 'error' event, audio just stops — common on HLS and
+// flaky wifi) are caught by the core's playback-progress watchdog instead of
+// the unreliable 'stalled' event.
+player.addEventListener('error', () => core.onPlayerError());
+
+// Auto-recovery when network comes back
+window.addEventListener('online', () => core.retryFromError());
+
+// Prev / Next
+prevButton.addEventListener('click', () => {
+  warmUpFeedbackSounds();
+  core.prevRadio();
+});
+nextButton.addEventListener('click', () => {
+  warmUpFeedbackSounds();
+  core.nextRadio();
+});
+
+// Logo reloads the page
+logoButton.addEventListener('click', () => {
+  window.location.reload();
+});
+
+// Keep alive worker
+const worker = new Worker("./js/keepAlive.js");
+worker.onmessage = () => {};
+
+initServiceWorker(core);
+initThemeColor();
+initStationSelector({
+  onSelect(index) {
+    warmUpFeedbackSounds();
+    core.playRadio(index);
+  },
+});
diff --git a/src/js/mediaSession.ts b/src/js/mediaSession.ts
new file mode 100644
index 0000000..9fc7cb5
--- /dev/null
+++ b/src/js/mediaSession.ts
@@ -0,0 +1,139 @@
+/**
+ * MediaSession integration (lock screen / Now Playing widget) + the state
+ * presentation that travels with it (poster image, document title, loading
+ * message text).
+ *
+ * iOS hands the media session to whichever <audio> element is audible and
+ * resets the action handlers when that changes — so handlers are
+ * re-registered on every state transition AND whenever a feedback sound
+ * starts (see git history: d798cc9).
+ */
+
+import type { RadioCore, RadioState } from './radioCore';
+import { LABELS } from './labels';
+import { cloudinaryImageUrl } from './cloudinary';
+import { radioSelect, posterImage, loadingMsg, loadingNoise, errorNoise } from './dom';
+
+// core reference — connected after createRadioCore(); updateMediaSession runs
+// once during creation itself (initial setState('idle')), before the
+// connection lands, and the `if (core)` runtime guards cover that window.
+let core: RadioCore | null = null;
+let hasRestoredStation = false;
+
+/** Called before createRadioCore() so the initial 'idle' render is correct. */
+export function initMediaSession(options: { hasRestoredStation: boolean }): void {
+  hasRestoredStation = options.hasRestoredStation;
+}
+
+/** Called right after createRadioCore() — wires the core into the handlers. */
+export function connectMediaSessionCore(radioCore: RadioCore): void {
+  core = radioCore;
+}
+
+// Shared helper — registers all MediaSession action handlers.
+// Called from both updateMediaSession() (every state transition) and
+// reRegisterMediaSessionHandlers() (after sound-effect playback steals focus).
+function registerMediaSessionHandlers() {
+  navigator.mediaSession.setActionHandler('previoustrack', () => core?.prevRadio());
+  navigator.mediaSession.setActionHandler('nexttrack',     () => core?.nextRadio());
+  navigator.mediaSession.setActionHandler('pause', () => {
+    if (!core) return;
+    const s = core.getState();
+    // During loading/error the sound effects are playing, not the stream.
+    // "Pause" should cancel everything (same as the on-screen stop button).
+    if (s === 'loading' || s === 'retrying' || s === 'error' || s === 'recovering') {
+      core.stopRadio();
+    } else {
+      core.pauseRadio();
+    }
+  });
+  navigator.mediaSession.setActionHandler('play',          () => core?.resumeRadio());
+  navigator.mediaSession.setActionHandler('seekbackward', null);
+  navigator.mediaSession.setActionHandler('seekforward',  null);
+}
+
+// When loading/error sounds start playing, iOS hands media session to that
+// <audio> element and resets all action handlers.  Re-register them here so
+// the lock-screen shows prev/next instead of skip ±10 s.
+// Also force playbackState='playing' so macOS doesn't briefly show "Not Playing"
+// in the gap between pausing the main player and the sound effect producing audio.
+function reRegisterMediaSessionHandlers() {
+  if (!('mediaSession' in navigator) || !core) return;
+  navigator.mediaSession.playbackState = 'playing';
+  registerMediaSessionHandlers();
+  // iOS picks up the sound effect's duration as "now playing" — clear it.
+  try { navigator.mediaSession.setPositionState({}); } catch (_) {}
+}
+loadingNoise.addEventListener('play', reRegisterMediaSessionHandlers);
+loadingNoise.addEventListener('playing', reRegisterMediaSessionHandlers);
+errorNoise.addEventListener('play', reRegisterMediaSessionHandlers);
+errorNoise.addEventListener('playing', reRegisterMediaSessionHandlers);
+
+// Mobile browsers re-read duration from the active <audio> element after our
+// initial setPositionState() clear, causing a countdown timer to appear.
+// Repeatedly clear it on every timeupdate tick so the OS never shows the
+// sound effect's finite duration.
+// Feature-detect once to avoid repeated exceptions on unsupported browsers.
+let canClearPositionState = true;
+try { navigator.mediaSession.setPositionState({}); } catch (_) { canClearPositionState = false; }
+function clearSfxPositionState() {
+  if (canClearPositionState) {
+    try { navigator.mediaSession.setPositionState({}); } catch (_) { canClearPositionState = false; }
+  }
+}
+loadingNoise.addEventListener('timeupdate', clearSfxPositionState);
+errorNoise.addEventListener('timeupdate', clearSfxPositionState);
+
+// When a sound effect pauses (e.g. loadingSound.stop() after stream loaded),
+// macOS briefly shows "Not Playing" because the active audio source just stopped.
+// Re-assert playbackState so the OS doesn't flash "Not Playing" in the gap before
+// it picks up audio from the main player.
+function reassertPlaybackState() {
+  if (!('mediaSession' in navigator) || !core) return;
+  const s = core.getState();
+  if (s === 'playing' || s === 'loading' || s === 'retrying' || s === 'error' || s === 'recovering') {
+    navigator.mediaSession.playbackState = 'playing';
+    try { navigator.mediaSession.setPositionState({}); } catch (_) {}
+  }
+}
+loadingNoise.addEventListener('pause', reassertPlaybackState);
+errorNoise.addEventListener('pause', reassertPlaybackState);
+
+export const updateMediaSession = (newState: RadioState) => {
+  const title = radioSelect.options[radioSelect.selectedIndex].text;
+  const isIdle = newState === 'idle';
+  const isLoading = newState === 'loading' || newState === 'retrying';
+  const hasError = newState === 'error' || newState === 'recovering';
+  const isLive = newState === 'playing';
+
+  const idleText = hasRestoredStation ? title : LABELS.appName;
+  const displayText = isIdle ? idleText : isLoading ? LABELS.loading : hasError ? LABELS.error : title;
+
+  if ('mediaSession' in navigator) {
+    navigator.mediaSession.metadata = new MediaMetadata({
+      title: isLoading ? `${LABELS.loading}${title}` : hasError ? `${LABELS.error} la încărcarea ${title}` : isIdle ? idleText : title,
+      artist: `${LABELS.appName}${isIdle && !hasRestoredStation ? '' : ` | ${title}`}`,
+      artwork: [{ src: cloudinaryImageUrl(displayText, isLive) }]
+    });
+
+    // Re-register ALL action handlers on every state transition.
+    // iOS resets them when a different <audio> element (loading/error sound)
+    // becomes the active "now playing" source.
+    if (core) {
+      registerMediaSessionHandlers();
+    }
+
+    // Keep session alive during loading/error (sounds are playing via <audio>)
+    navigator.mediaSession.playbackState = (isLive || isLoading || hasError) ? 'playing' : newState === 'paused' ? 'paused' : 'none';
+
+    // Clear position state for active/paused states — tells the OS there's no
+    // seekable timeline, so it won't show a finite progress bar.
+    if (isLive || isLoading || hasError || newState === 'paused') {
+      try { navigator.mediaSession.setPositionState({}); } catch (_) {}
+    }
+  }
+
+  posterImage.querySelector('img')!.src = cloudinaryImageUrl(displayText, isLive);
+  document.title = `${isLoading ? "⏳" : ''} ${hasError ? '❤️‍🩹' : ''} ${isLive ? '🔴' : ''} ${isIdle ? idleText : isLoading ? `${LABELS.loading} ${title}` : hasError ? LABELS.error : title}`;
+  loadingMsg.innerText = isLoading ? `${LABELS.loading} ${title}` : '';
+};
diff --git a/src/js/script.ts b/src/js/script.ts
deleted file mode 100644
index ad79156..0000000
--- a/src/js/script.ts
+++ /dev/null
@@ -1,757 +0,0 @@
-/**
- * Radio Player — DOM glue layer (uses the radioCore state machine)
- */
-
-import { createRadioCore, type RadioCore, type RadioState } from './radioCore';
-
-declare global {
-  interface Window {
-    electronAPI?: {
-      onMediaControl(callback: (command: string) => void): void;
-      updatePlaybackState(isPlaying: boolean): void;
-    };
-  }
-}
-
-document.addEventListener("touchstart", function () { }, true);
-
-// --- DOM refs ---
-
-// The markup is ours (src/index.html), so a missing id is a build-time bug —
-// fail loudly instead of null-checking every use site.
-function el<T extends HTMLElement>(id: string): T {
-  const node = document.getElementById(id);
-  if (!node) throw new Error(`Missing element: #${id}`);
-  return node as T;
-}
-
-const radioSelect = el<HTMLSelectElement>('radioSelect');
-const player = el<HTMLAudioElement>('player');
-const loadingNoise = el<HTMLAudioElement>('loadingNoise');
-const errorNoise = el<HTMLAudioElement>('errorNoise');
-const loadingMsg = el<HTMLElement>('loadingMsg');
-const errorMsg = el<HTMLElement>('errorMsg');
-
-const prevButton = el<HTMLButtonElement>('prevButton');
-const playButton = el<HTMLButtonElement>('playButton');
-const pauseButton = el<HTMLButtonElement>('pauseButton');
-const stopButton = el<HTMLButtonElement>('stopButton');
-const nextButton = el<HTMLButtonElement>('nextButton');
-
-const logoButton = el<HTMLButtonElement>('logoButton');
-const posterImage = el<HTMLButtonElement>('posterImage');
-
-// --- Cloudinary ---
-
-// --- All user-facing labels (single source of truth) ---
-const LABELS = {
-  appName:  'Coji Radio Player',
-  loading:  'Se încarcă...',
-  error:    'Eroare',
-};
-
-// Keep in sync with src/sw.js so page-level preloads and SW precache share
-// the same durable sound cache.
-const SOUND_CACHE_NAME = 'radio-sounds-v2';
-
-function cloudinaryImageUrl(text: string, live = false) {
-  const url_non_live = 'nndti4oybhdzggf8epvh';
-  const url_live = 'rhz6yy4btbqicjqhsy7a';
-  const encoded = encodeURIComponent(text);
-  return `https://res.cloudinary.com/adrianf/image/upload/c_scale,h_480,w_480/w_400,g_south_west,x_50,y_70,c_fit,l_text:arial_90:${encoded}/${live ? url_live : url_non_live}`;
-}
-
-// Pre-cache status images + station name images into Cache API for offline use
-const STATUS_IMAGE_TEXTS = [
-  ...Object.values(LABELS),
-  ...Array.from(radioSelect.options).map(o => o.text),
-];
-if ('caches' in window) {
-  caches.open('radio-images-v3').then(cache => {
-    STATUS_IMAGE_TEXTS.forEach(text => {
-      const url = cloudinaryImageUrl(text);
-      cache.match(url)
-        .then(hit => {
-          if (!hit) {
-            return fetch(url, { mode: 'no-cors' }).then(res => {
-              if (res.ok || res.type === 'opaque') return cache.put(url, res);
-            });
-          }
-        })
-        .catch(() => { /* offline or CORS — ignore, SW will cache on next online visit */ });
-    });
-  }).catch(() => { /* cache API unavailable */ });
-}
-
-// Restore last station before anything reads selectedIndex
-function getStoredStationIndex() {
-  const parsed = Number.parseInt(localStorage.getItem('lastRadioIndex') ?? '', 10);
-  if (!Number.isInteger(parsed)) return null;
-  if (parsed < 0 || parsed >= radioSelect.options.length) return null;
-  return parsed;
-}
-
-const restoredStationIndex = getStoredStationIndex();
-const hasRestoredStation = restoredStationIndex !== null;
-if (hasRestoredStation) {
-  radioSelect.selectedIndex = restoredStationIndex;
-}
-
-// --- Sound effects via <audio> elements ---
-// These play through real <audio> elements to keep the iOS MediaSession alive.
-// MediaSession action handlers are re-registered on every state transition to
-// prevent iOS from resetting them when a different <audio> element takes over.
-
-async function openSoundCache() {
-  if (!('caches' in window)) return;
-  try {
-    return await caches.open(SOUND_CACHE_NAME);
-  } catch (_) {
-    return null;
-  }
-}
-
-async function cacheSoundResponse(src: string, response: Response) {
-  try {
-    const cache = await openSoundCache();
-    if (cache) await cache.put(src, response.clone());
-  } catch (_) {
-    // Cache writes are best-effort; the in-memory blob still matters most.
-  }
-}
-
-async function getSoundResponse(src: string): Promise<Response> {
-  const cache = await openSoundCache();
-  try {
-    const cached = await cache?.match(src);
-    if (cached) return cached;
-  } catch (_) {
-    // Cache reads are best-effort; fall back to network.
-  }
-
-  const response = await fetch(src);
-  if (!response.ok) throw new Error(String(response.status));
-  await cacheSoundResponse(src, response);
-  return response;
-}
-
-function audioInstance(htmlElement: HTMLAudioElement) {
-  let initialSrc = htmlElement.querySelector('source')!.src;
-  let isPlaying = false;
-  let blobUrl: string | null = null;
-  let playGeneration = 0;
-  let preloadPromise: Promise<string | null> | null = null;
-  htmlElement.dataset.blobReady = 'false';
-
-  const preloadBlob = () => {
-    if (blobUrl) return Promise.resolve(blobUrl);
-    if (preloadPromise) return preloadPromise;
-
-    htmlElement.dataset.blobReady = 'pending';
-    preloadPromise = getSoundResponse(initialSrc)
-      .then(r => r.blob())
-      .then(blob => {
-        if (blobUrl) URL.revokeObjectURL(blobUrl);
-        blobUrl = URL.createObjectURL(blob);
-        htmlElement.dataset.blobReady = 'true';
-        return blobUrl;
-      })
-      .catch(err => {
-        htmlElement.dataset.blobReady = 'false';
-        console.warn('Audio blob preload failed:', initialSrc, err);
-        return null;
-      })
-      .finally(() => { preloadPromise = null; });
-
-    return preloadPromise;
-  };
-
-  const startPlayback = (gen: number) => {
-    if (gen !== playGeneration || !isPlaying) return;
-    htmlElement.volume = 1;
-    htmlElement.src = blobUrl || initialSrc;
-    htmlElement.currentTime = 0;
-    htmlElement.play().catch((error) => {
-      if (gen !== playGeneration) return;
-      if (error.name !== 'AbortError') console.error('Error playing audio:', error);
-      isPlaying = false;
-    });
-  };
-
-  const play = () => {
-    if (!isPlaying) {
-      const gen = ++playGeneration;
-      isPlaying = true;
-      if (blobUrl) {
-        startPlayback(gen);
-        return;
-      }
-      preloadBlob().then(() => startPlayback(gen));
-    }
-  };
-
-  return {
-    play,
-    stop() {
-      playGeneration++;
-      htmlElement.pause();
-      htmlElement.src = '';
-      isPlaying = false;
-    },
-    // Self-healing: called periodically by the core's sound supervisor while
-    // this sound is supposed to be audible. Restarts playback if a play()
-    // was rejected (background/autoplay policy) or the OS paused the element.
-    ensure() {
-      if (!isPlaying) {
-        play();
-        return;
-      }
-      if (htmlElement.paused) {
-        const gen = playGeneration;
-        htmlElement.play().catch((error) => {
-          if (gen !== playGeneration) return;
-          if (error.name !== 'AbortError') isPlaying = false; // retried next tick
-        });
-      }
-    },
-    warmUp() {
-      if (isPlaying) return;
-      if (!blobUrl) {
-        preloadBlob();
-        return;
-      }
-
-      const gen = playGeneration;
-      htmlElement.src = blobUrl;
-      htmlElement.play().then(() => {
-        if (gen === playGeneration && !isPlaying) {
-          htmlElement.pause();
-          htmlElement.currentTime = 0;
-        }
-      }).catch(() => {});
-    },
-    preloadBlob,
-  };
-}
-
-const loadingNoiseInstance = audioInstance(loadingNoise);
-const errorNoiseInstance = audioInstance(errorNoise);
-
-// Eagerly preload sound blobs so loading/error feedback can start from memory.
-// fetch() doesn't need a user gesture — only playback does.
-preloadAudioBlobs();
-
-// Shared helper — registers all MediaSession action handlers.
-// Called from both updateMediaSession() (every state transition) and
-// reRegisterMediaSessionHandlers() (after sound-effect playback steals focus).
-function registerMediaSessionHandlers() {
-  navigator.mediaSession.setActionHandler('previoustrack', () => core.prevRadio());
-  navigator.mediaSession.setActionHandler('nexttrack',     () => core.nextRadio());
-  navigator.mediaSession.setActionHandler('pause', () => {
-    const s = core.getState();
-    // During loading/error the sound effects are playing, not the stream.
-    // "Pause" should cancel everything (same as the on-screen stop button).
-    if (s === 'loading' || s === 'retrying' || s === 'error' || s === 'recovering') {
-      core.stopRadio();
-    } else {
-      core.pauseRadio();
-    }
-  });
-  navigator.mediaSession.setActionHandler('play',          () => core.resumeRadio());
-  navigator.mediaSession.setActionHandler('seekbackward', null);
-  navigator.mediaSession.setActionHandler('seekforward',  null);
-}
-
-// When loading/error sounds start playing, iOS hands media session to that
-// <audio> element and resets all action handlers.  Re-register them here so
-// the lock-screen shows prev/next instead of skip ±10 s.
-// Also force playbackState='playing' so macOS doesn't briefly show "Not Playing"
-// in the gap between pausing the main player and the sound effect producing audio.
-function reRegisterMediaSessionHandlers() {
-  if (!('mediaSession' in navigator) || !core) return;
-  navigator.mediaSession.playbackState = 'playing';
-  registerMediaSessionHandlers();
-  // iOS picks up the sound effect's duration as "now playing" — clear it.
-  try { navigator.mediaSession.setPositionState({}); } catch (_) {}
-}
-loadingNoise.addEventListener('play', reRegisterMediaSessionHandlers);
-loadingNoise.addEventListener('playing', reRegisterMediaSessionHandlers);
-errorNoise.addEventListener('play', reRegisterMediaSessionHandlers);
-errorNoise.addEventListener('playing', reRegisterMediaSessionHandlers);
-
-// Mobile browsers re-read duration from the active <audio> element after our
-// initial setPositionState() clear, causing a countdown timer to appear.
-// Repeatedly clear it on every timeupdate tick so the OS never shows the
-// sound effect's finite duration.
-// Feature-detect once to avoid repeated exceptions on unsupported browsers.
-let canClearPositionState = true;
-try { navigator.mediaSession.setPositionState({}); } catch (_) { canClearPositionState = false; }
-function clearSfxPositionState() {
-  if (canClearPositionState) {
-    try { navigator.mediaSession.setPositionState({}); } catch (_) { canClearPositionState = false; }
-  }
-}
-loadingNoise.addEventListener('timeupdate', clearSfxPositionState);
-errorNoise.addEventListener('timeupdate', clearSfxPositionState);
-
-// When a sound effect pauses (e.g. loadingSound.stop() after stream loaded),
-// macOS briefly shows "Not Playing" because the active audio source just stopped.
-// Re-assert playbackState so the OS doesn't flash "Not Playing" in the gap before
-// it picks up audio from the main player.
-function reassertPlaybackState() {
-  if (!('mediaSession' in navigator) || !core) return;
-  const s = core.getState();
-  if (s === 'playing' || s === 'loading' || s === 'retrying' || s === 'error' || s === 'recovering') {
-    navigator.mediaSession.playbackState = 'playing';
-    try { navigator.mediaSession.setPositionState({}); } catch (_) {}
-  }
-}
-loadingNoise.addEventListener('pause', reassertPlaybackState);
-errorNoise.addEventListener('pause', reassertPlaybackState);
-
-// Preload audio blobs once per page. Re-called from user interactions as a retry
-// if the eager page-load preload failed.
-function preloadAudioBlobs() {
-  loadingNoiseInstance.preloadBlob();
-  errorNoiseInstance.preloadBlob();
-}
-
-// --- UI helpers ---
-
-function isPlaybackControl(element: Element | null) {
-  return element === playButton || element === pauseButton || element === stopButton;
-}
-
-function focusInitialPlaybackControl() {
-  if (document.activeElement && document.activeElement !== document.body) return;
-  playButton.focus();
-}
-
-const showButton = (which: 'play' | 'pause' | 'stop') => {
-  const shouldPreserveFocus = isPlaybackControl(document.activeElement);
-  const nextButton = which === 'play' ? playButton : which === 'pause' ? pauseButton : stopButton;
-
-  playButton.classList.toggle('hidden', which !== 'play');
-  pauseButton.classList.toggle('hidden', which !== 'pause');
-  stopButton.classList.toggle('hidden', which !== 'stop');
-
-  if (shouldPreserveFocus) nextButton.focus();
-};
-
-// core reference — assigned right below, but updateMediaSession runs once
-// during createRadioCore() itself (initial setState('idle')), before the
-// assignment lands; the `if (core)` runtime guards cover that window.
-let core!: RadioCore;
-
-let pendingServiceWorkerReload = false;
-let serviceWorkerReloaded = false;
-
-function reloadForServiceWorkerUpdate() {
-  if (serviceWorkerReloaded) return;
-  serviceWorkerReloaded = true;
-  pendingServiceWorkerReload = false;
-  window.location.reload();
-}
-
-function maybeReloadForPendingServiceWorkerUpdate(newState: RadioState) {
-  if (pendingServiceWorkerReload && newState === 'idle') reloadForServiceWorkerUpdate();
-}
-
-function requestServiceWorkerReload() {
-  if (serviceWorkerReloaded) return;
-  if (core?.getState() === 'idle') {
-    reloadForServiceWorkerUpdate();
-    return;
-  }
-  pendingServiceWorkerReload = true;
-}
-
-const updateMediaSession = (newState: RadioState) => {
-  const title = radioSelect.options[radioSelect.selectedIndex].text;
-  const isIdle = newState === 'idle';
-  const isLoading = newState === 'loading' || newState === 'retrying';
-  const hasError = newState === 'error' || newState === 'recovering';
-  const isLive = newState === 'playing';
-
-  const idleText = hasRestoredStation ? title : LABELS.appName;
-  const displayText = isIdle ? idleText : isLoading ? LABELS.loading : hasError ? LABELS.error : title;
-
-  if ('mediaSession' in navigator) {
-    navigator.mediaSession.metadata = new MediaMetadata({
-      title: isLoading ? `${LABELS.loading}${title}` : hasError ? `${LABELS.error} la încărcarea ${title}` : isIdle ? idleText : title,
-      artist: `${LABELS.appName}${isIdle && !hasRestoredStation ? '' : ` | ${title}`}`,
-      artwork: [{ src: cloudinaryImageUrl(displayText, isLive) }]
-    });
-
-    // Re-register ALL action handlers on every state transition.
-    // iOS resets them when a different <audio> element (loading/error sound)
-    // becomes the active "now playing" source.
-    if (core) {
-      registerMediaSessionHandlers();
-    }
-
-    // Keep session alive during loading/error (sounds are playing via <audio>)
-    navigator.mediaSession.playbackState = (isLive || isLoading || hasError) ? 'playing' : newState === 'paused' ? 'paused' : 'none';
-
-    // Clear position state for active/paused states — tells the OS there's no
-    // seekable timeline, so it won't show a finite progress bar.
-    if (isLive || isLoading || hasError || newState === 'paused') {
-      try { navigator.mediaSession.setPositionState({}); } catch (_) {}
-    }
-  }
-
-  posterImage.querySelector('img')!.src = cloudinaryImageUrl(displayText, isLive);
-  document.title = `${isLoading ? "⏳" : ''} ${hasError ? '❤️‍🩹' : ''} ${isLive ? '🔴' : ''} ${isIdle ? idleText : isLoading ? `${LABELS.loading} ${title}` : hasError ? LABELS.error : title}`;
-  loadingMsg.innerText = isLoading ? `${LABELS.loading} ${title}` : '';
-  maybeReloadForPendingServiceWorkerUpdate(newState);
-};
-
-core = createRadioCore({
-  getStationUrl:    (i) => radioSelect.options[i].value,
-  getStationCount:  () => radioSelect.options.length,
-  getSelectedIndex: () => radioSelect.selectedIndex,
-  setSelectedIndex: (i) => { radioSelect.selectedIndex = i; },
-  playerPlay:       () => player.play(),
-  playerPause:      () => player.pause(),
-  playerSetSrc:     (url) => { player.src = url; },
-  playerLoad:       () => player.load(),
-  playerIsPaused:   () => player.paused,
-  playerCurrentTime: () => player.currentTime,
-  loadingSound:     loadingNoiseInstance,
-  errorSound:       errorNoiseInstance,
-  showButton,
-  setLoadingMsg:    (v) => loadingMsg.classList.toggle('invisible', !v),
-  setErrorMsg:      (v) => errorMsg.classList.toggle('invisible', !v),
-  updateMediaSession,
-  saveLastIndex:    (i) => localStorage.setItem('lastRadioIndex', String(i)),
-  setTimeout,
-  clearTimeout:  (id) => clearTimeout(id ?? undefined),
-  setInterval,
-  clearInterval: (id) => clearInterval(id ?? undefined),
-  performanceNow:   () => performance.now(),
-  isOnline:          () => navigator.onLine,
-});
-focusInitialPlaybackControl();
-
-// --- Event listeners ---
-
-radioSelect.addEventListener('change', () => {
-  if (radioSelect.value) {
-    core.playRadio(radioSelect.selectedIndex);
-  } else {
-    core.stopRadio();
-  }
-});
-
-// Electron
-const electronAPI = window.electronAPI;
-if (electronAPI) {
-  electronAPI.onMediaControl((command) => {
-    if (command === "playpause") {
-      core.togglePlayPause();
-    } else if (command === "next") {
-      core.nextRadio();
-    } else if (command === "previous") {
-      core.prevRadio();
-    }
-  });
-
-  document.addEventListener("DOMContentLoaded", () => {
-    const updatePlaybackState = () =>
-      electronAPI.updatePlaybackState(core.getState() === 'playing');
-    player.addEventListener("play", updatePlaybackState);
-    player.addEventListener("pause", updatePlaybackState);
-  });
-}
-
-// Buttons
-playButton.addEventListener('click', () => {
-  preloadAudioBlobs();
-  loadingNoiseInstance.warmUp();
-  errorNoiseInstance.warmUp();
-  core.onPlayButtonClick();
-});
-pauseButton.addEventListener('click', () => core.pauseRadio());
-stopButton.addEventListener('click', () => core.stopRadio());
-
-// Native audio events → core (iOS needs the mediaSession.playbackState override)
-player.addEventListener('play', () => {
-  if ('mediaSession' in navigator) navigator.mediaSession.playbackState = 'playing';
-  core.onPlayerPlay();
-});
-
-player.addEventListener('pause', () => {
-  const s = core.getState();
-  // During loading/retrying/recovering the main player pauses while the loading
-  // sound takes over.  Actively re-assert 'playing' so macOS doesn't flash
-  // "Not Playing" in the gap.  Only signal 'paused' in normal playback states.
-  if ('mediaSession' in navigator) {
-    if (s === 'loading' || s === 'retrying' || s === 'recovering') {
-      navigator.mediaSession.playbackState = 'playing';
-    } else if (s === 'playing') {
-      navigator.mediaSession.playbackState = 'paused';
-    }
-  }
-  core.onPlayerPause();
-});
-
-// Stream failure during playback (lost WiFi, server died, etc.)
-// Silent failures (no 'error' event, audio just stops — common on HLS and
-// flaky wifi) are caught by the core's playback-progress watchdog instead of
-// the unreliable 'stalled' event.
-player.addEventListener('error', () => core.onPlayerError());
-
-// Auto-recovery when network comes back
-window.addEventListener('online', () => core.retryFromError());
-
-// Prev / Next
-prevButton.addEventListener('click', () => {
-  preloadAudioBlobs();
-  loadingNoiseInstance.warmUp();
-  errorNoiseInstance.warmUp();
-  core.prevRadio();
-});
-nextButton.addEventListener('click', () => {
-  preloadAudioBlobs();
-  loadingNoiseInstance.warmUp();
-  errorNoiseInstance.warmUp();
-  core.nextRadio();
-});
-
-// Keep alive worker
-const worker = new Worker("./js/keepAlive.js");
-worker.onmessage = () => {};
-
-// Service Worker
-if ('serviceWorker' in navigator) {
-  let hasServiceWorkerController = Boolean(navigator.serviceWorker.controller);
-
-  (async () => {
-    try {
-      const registrations = await navigator.serviceWorker.getRegistrations();
-      await Promise.all(registrations.map(reg => {
-        const swUrl = reg.active?.scriptURL || reg.installing?.scriptURL || reg.waiting?.scriptURL || '';
-        if (!swUrl.endsWith('/sw.js') || swUrl.endsWith('/js/sw.js')) {
-          return reg.unregister();
-        }
-        return Promise.resolve(false);
-      }));
-      const reg = await navigator.serviceWorker.register('./sw.js');
-      reg.update();
-    } catch (err) {
-      console.error('Service Worker registration failed:', err);
-    }
-  })();
-
-  navigator.serviceWorker.addEventListener('controllerchange', () => {
-    if (!hasServiceWorkerController) {
-      hasServiceWorkerController = true;
-      return;
-    }
-    requestServiceWorkerReload();
-  });
-}
-
-// Theme color
-function updateThemeColor() {
-  const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
-  const themeColor = isDarkMode ? '#434238' : '#fffdef';
-  let metaThemeColor = document.querySelector('meta[name="theme-color"]');
-  if (!metaThemeColor) {
-    metaThemeColor = document.createElement('meta');
-    metaThemeColor.setAttribute('name', 'theme-color');
-    document.head.appendChild(metaThemeColor);
-  }
-  metaThemeColor.setAttribute('content', themeColor);
-}
-updateThemeColor();
-window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateThemeColor);
-
-// Custom selector UI
-const new_selector_open_button = el<HTMLButtonElement>('new_selector__button');
-const new_selector_content = el<HTMLElement>('new_selector__content');
-const new_selector_button_example = el<HTMLButtonElement>('new_selector__button_example');
-const new_selector_parent = el<HTMLElement>('new_selector__parent');
-
-const radios = radioSelect.querySelectorAll('option');
-const selectorOptionButtons: HTMLButtonElement[] = [];
-let selectorFocusedIndex = radioSelect.selectedIndex;
-let selectorReturnFocusElement: HTMLElement = new_selector_open_button;
-const selectorTriggerButtons: HTMLElement[] = [new_selector_open_button, posterImage];
-
-logoButton.addEventListener('click', () => {
-  window.location.reload();
-});
-
-function isSelectorOpen() {
-  return !new_selector_content.classList.contains('hidden');
-}
-
-function syncSelectorSelection() {
-  selectorOptionButtons.forEach((button, index) => {
-    const isSelected = radioSelect.selectedIndex === index;
-    const isFocused = selectorFocusedIndex === index;
-    button.classList.toggle('bg-Red', isSelected);
-    button.setAttribute('aria-selected', String(isSelected));
-    button.tabIndex = isSelectorOpen() && isFocused ? 0 : -1;
-  });
-}
-
-function focusOption(index: number) {
-  if (!selectorOptionButtons.length) return;
-
-  const lastIndex = selectorOptionButtons.length - 1;
-  const nextIndex = Math.max(0, Math.min(index, lastIndex));
-
-  selectorFocusedIndex = nextIndex;
-  syncSelectorSelection();
-
-  const button = selectorOptionButtons[selectorFocusedIndex];
-
-  button.focus({
-    preventScroll: true,
-  });
-
-  button.scrollIntoView({
-    behavior: "auto",
-    block: "nearest",
-    inline: "nearest",
-  });
-}
-
-function setSelectorExpanded(isExpanded: boolean) {
-  selectorTriggerButtons.forEach(el => {
-    el.setAttribute('aria-expanded', String(isExpanded));
-  });
-}
-
-function getCurrentSelectorIndex() {
-  const index = radioSelect.selectedIndex;
-  return index >= 0 && index < selectorOptionButtons.length ? index : 0;
-}
-
-function openSelector({ focusSelected = false, trigger = document.activeElement }: { focusSelected?: boolean; trigger?: Element | null } = {}) {
-  if (trigger instanceof HTMLElement && selectorTriggerButtons.includes(trigger)) {
-    selectorReturnFocusElement = trigger;
-  }
-  selectorFocusedIndex = getCurrentSelectorIndex();
-  new_selector_content.classList.remove('hidden');
-  setSelectorExpanded(true);
-  syncSelectorSelection();
-  if (focusSelected) {
-    focusOption(selectorFocusedIndex);
-  } else {
-    selectorOptionButtons[selectorFocusedIndex]?.scrollIntoView({
-      behavior: "auto",
-      block: "nearest",
-      inline: "nearest",
-    });
-  }
-}
-
-function closeSelector({ returnFocus = false, blurHiddenFocus = false }: { returnFocus?: boolean; blurHiddenFocus?: boolean } = {}) {
-  const activeElement = document.activeElement;
-  const shouldBlurHiddenFocus = blurHiddenFocus && activeElement instanceof HTMLElement && new_selector_parent.contains(activeElement);
-  new_selector_content.classList.add('hidden');
-  setSelectorExpanded(false);
-  syncSelectorSelection();
-  if (returnFocus) selectorReturnFocusElement.focus();
-  else if (shouldBlurHiddenFocus) activeElement.blur();
-}
-
-function toggleSelector(trigger: Element) {
-  if (isSelectorOpen()) closeSelector();
-  else openSelector({ focusSelected: true, trigger });
-}
-
-function selectOption(index: number) {
-  preloadAudioBlobs();
-  loadingNoiseInstance.warmUp();
-  errorNoiseInstance.warmUp();
-  core.playRadio(index);
-  selectorFocusedIndex = index;
-  syncSelectorSelection();
-  closeSelector({ returnFocus: true });
-}
-
-radios.forEach((radio, index) => {
-  const new_button = new_selector_button_example.cloneNode(true) as HTMLButtonElement;
-  new_button.id = `new_selector__option_${index}`;
-  new_button.setAttribute('role', 'option');
-  new_button.setAttribute('aria-selected', 'false');
-  new_button.tabIndex = -1;
-  new_button.classList.remove('hidden');
-  new_button.innerText = radio.text;
-
-  new_button.addEventListener('click', () => {
-    selectOption(index);
-  });
-
-  new_selector_content.appendChild(new_button);
-  selectorOptionButtons.push(new_button);
-});
-syncSelectorSelection();
-
-selectorTriggerButtons.forEach(el => el.addEventListener('click', () => toggleSelector(el)));
-
-function handleSelectorTriggerKeydown(e: KeyboardEvent) {
-  if (e.key === 'ArrowDown' && isSelectorOpen()) {
-    e.preventDefault();
-    focusOption(selectorFocusedIndex + 1);
-    return;
-  }
-
-  if (e.key === 'ArrowUp' && isSelectorOpen()) {
-    e.preventDefault();
-    focusOption(selectorFocusedIndex - 1);
-    return;
-  }
-
-  if (!['Enter', ' '].includes(e.key)) return;
-  e.preventDefault();
-  openSelector({ focusSelected: true, trigger: e.currentTarget as Element });
-}
-
-selectorTriggerButtons.forEach(el => el.addEventListener('keydown', handleSelectorTriggerKeydown));
-
-new_selector_content.addEventListener('keydown', (e) => {
-  if (e.key === 'ArrowDown') {
-    e.preventDefault();
-    focusOption(selectorFocusedIndex + 1);
-  } else if (e.key === 'ArrowUp') {
-    e.preventDefault();
-    focusOption(selectorFocusedIndex - 1);
-  } else if (e.key === 'Home') {
-    e.preventDefault();
-    focusOption(0);
-  } else if (e.key === 'End') {
-    e.preventDefault();
-    focusOption(selectorOptionButtons.length - 1);
-  } else if (e.key === 'Enter' || e.key === ' ') {
-    e.preventDefault();
-    selectOption(selectorFocusedIndex);
-  } else if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
-    e.preventDefault();
-    closeSelector({ returnFocus: true });
-  } else if (e.key === 'Escape') {
-    e.preventDefault();
-    closeSelector({ returnFocus: true });
-  }
-});
-
-new_selector_parent.addEventListener('focusout', (e) => {
-  if (!new_selector_parent.contains(e.relatedTarget as Node | null)) closeSelector();
-});
-
-document.addEventListener('keydown', (e) => {
-  if (e.key !== 'Escape' || !isSelectorOpen()) return;
-  e.preventDefault();
-  closeSelector({ returnFocus: true });
-});
-
-document.addEventListener('click', (e) => {
-  const target = e.target as Node | null;
-  if (!new_selector_content.contains(target) && !selectorTriggerButtons.some(el => el.contains(target))) {
-    closeSelector({ blurHiddenFocus: true });
-  }
-});
diff --git a/src/js/serviceWorker.ts b/src/js/serviceWorker.ts
new file mode 100644
index 0000000..0e55adb
--- /dev/null
+++ b/src/js/serviceWorker.ts
@@ -0,0 +1,64 @@
+/**
+ * Service worker registration + the deferred-reload dance: when a new SW
+ * takes control mid-session, reload only once playback is idle so an update
+ * never interrupts what the user is listening to.
+ */
+
+import type { RadioCore, RadioState } from './radioCore';
+
+let core: RadioCore | null = null;
+let pendingServiceWorkerReload = false;
+let serviceWorkerReloaded = false;
+
+function reloadForServiceWorkerUpdate() {
+  if (serviceWorkerReloaded) return;
+  serviceWorkerReloaded = true;
+  pendingServiceWorkerReload = false;
+  window.location.reload();
+}
+
+/** Hooked after every state transition: a pending SW reload runs at idle. */
+export function maybeReloadForPendingServiceWorkerUpdate(newState: RadioState): void {
+  if (pendingServiceWorkerReload && newState === 'idle') reloadForServiceWorkerUpdate();
+}
+
+function requestServiceWorkerReload() {
+  if (serviceWorkerReloaded) return;
+  if (core?.getState() === 'idle') {
+    reloadForServiceWorkerUpdate();
+    return;
+  }
+  pendingServiceWorkerReload = true;
+}
+
+export function initServiceWorker(radioCore: RadioCore): void {
+  core = radioCore;
+  if (!('serviceWorker' in navigator)) return;
+
+  let hasServiceWorkerController = Boolean(navigator.serviceWorker.controller);
+
+  (async () => {
+    try {
+      const registrations = await navigator.serviceWorker.getRegistrations();
+      await Promise.all(registrations.map(reg => {
+        const swUrl = reg.active?.scriptURL || reg.installing?.scriptURL || reg.waiting?.scriptURL || '';
+        if (!swUrl.endsWith('/sw.js') || swUrl.endsWith('/js/sw.js')) {
+          return reg.unregister();
+        }
+        return Promise.resolve(false);
+      }));
+      const reg = await navigator.serviceWorker.register('./sw.js');
+      reg.update();
+    } catch (err) {
+      console.error('Service Worker registration failed:', err);
+    }
+  })();
+
+  navigator.serviceWorker.addEventListener('controllerchange', () => {
+    if (!hasServiceWorkerController) {
+      hasServiceWorkerController = true;
+      return;
+    }
+    requestServiceWorkerReload();
+  });
+}
diff --git a/src/js/soundEffects.ts b/src/js/soundEffects.ts
new file mode 100644
index 0000000..09b8119
--- /dev/null
+++ b/src/js/soundEffects.ts
@@ -0,0 +1,146 @@
+/**
+ * Feedback sounds (loading/error noise) played through real <audio> elements.
+ *
+ * They MUST be real <audio> elements — a Web Audio attempt was reverted
+ * because iOS drops the media session without an active <audio> element
+ * (see git history: 69a58f2). Sounds start from an in-memory blob so they
+ * work offline and without any network round-trip at the critical moment.
+ */
+
+// Keep in sync with src/public/sw.js so page-level preloads and SW precache
+// share the same durable sound cache.
+export const SOUND_CACHE_NAME = 'radio-sounds-v2';
+
+async function openSoundCache() {
+  if (!('caches' in window)) return;
+  try {
+    return await caches.open(SOUND_CACHE_NAME);
+  } catch (_) {
+    return null;
+  }
+}
+
+async function cacheSoundResponse(src: string, response: Response) {
+  try {
+    const cache = await openSoundCache();
+    if (cache) await cache.put(src, response.clone());
+  } catch (_) {
+    // Cache writes are best-effort; the in-memory blob still matters most.
+  }
+}
+
+async function getSoundResponse(src: string): Promise<Response> {
+  const cache = await openSoundCache();
+  try {
+    const cached = await cache?.match(src);
+    if (cached) return cached;
+  } catch (_) {
+    // Cache reads are best-effort; fall back to network.
+  }
+
+  const response = await fetch(src);
+  if (!response.ok) throw new Error(String(response.status));
+  await cacheSoundResponse(src, response);
+  return response;
+}
+
+export type SoundInstance = ReturnType<typeof audioInstance>;
+
+export function audioInstance(htmlElement: HTMLAudioElement) {
+  let initialSrc = htmlElement.querySelector('source')!.src;
+  let isPlaying = false;
+  let blobUrl: string | null = null;
+  let playGeneration = 0;
+  let preloadPromise: Promise<string | null> | null = null;
+  htmlElement.dataset.blobReady = 'false';
+
+  const preloadBlob = () => {
+    if (blobUrl) return Promise.resolve(blobUrl);
+    if (preloadPromise) return preloadPromise;
+
+    htmlElement.dataset.blobReady = 'pending';
+    preloadPromise = getSoundResponse(initialSrc)
+      .then(r => r.blob())
+      .then(blob => {
+        if (blobUrl) URL.revokeObjectURL(blobUrl);
+        blobUrl = URL.createObjectURL(blob);
+        htmlElement.dataset.blobReady = 'true';
+        return blobUrl;
+      })
+      .catch(err => {
+        htmlElement.dataset.blobReady = 'false';
+        console.warn('Audio blob preload failed:', initialSrc, err);
+        return null;
+      })
+      .finally(() => { preloadPromise = null; });
+
+    return preloadPromise;
+  };
+
+  const startPlayback = (gen: number) => {
+    if (gen !== playGeneration || !isPlaying) return;
+    htmlElement.volume = 1;
+    htmlElement.src = blobUrl || initialSrc;
+    htmlElement.currentTime = 0;
+    htmlElement.play().catch((error) => {
+      if (gen !== playGeneration) return;
+      if (error.name !== 'AbortError') console.error('Error playing audio:', error);
+      isPlaying = false;
+    });
+  };
+
+  const play = () => {
+    if (!isPlaying) {
+      const gen = ++playGeneration;
+      isPlaying = true;
+      if (blobUrl) {
+        startPlayback(gen);
+        return;
+      }
+      preloadBlob().then(() => startPlayback(gen));
+    }
+  };
+
+  return {
+    play,
+    stop() {
+      playGeneration++;
+      htmlElement.pause();
+      htmlElement.src = '';
+      isPlaying = false;
+    },
+    // Self-healing: called periodically by the core's sound supervisor while
+    // this sound is supposed to be audible. Restarts playback if a play()
+    // was rejected (background/autoplay policy) or the OS paused the element.
+    ensure() {
+      if (!isPlaying) {
+        play();
+        return;
+      }
+      if (htmlElement.paused) {
+        const gen = playGeneration;
+        htmlElement.play().catch((error) => {
+          if (gen !== playGeneration) return;
+          if (error.name !== 'AbortError') isPlaying = false; // retried next tick
+        });
+      }
+    },
+    warmUp() {
+      if (isPlaying) return;
+      if (!blobUrl) {
+        preloadBlob();
+        return;
+      }
+
+      const gen = playGeneration;
+      htmlElement.src = blobUrl;
+      htmlElement.play().then(() => {
+        if (gen === playGeneration && !isPlaying) {
+          htmlElement.pause();
+          htmlElement.currentTime = 0;
+        }
+      }).catch(() => {});
+    },
+    preloadBlob,
+  };
+}
diff --git a/src/js/stationSelector.ts b/src/js/stationSelector.ts
new file mode 100644
index 0000000..40c3bba
--- /dev/null
+++ b/src/js/stationSelector.ts
@@ -0,0 +1,190 @@
+/**
+ * Custom station selector — an accessible listbox (open/close, focus,
+ * keyboard navigation, ARIA) built from the hidden native <select>.
+ * Station selection is reported through the onSelect callback.
+ */
+
+import { el, radioSelect, posterImage } from './dom';
+
+export function initStationSelector({ onSelect }: { onSelect(index: number): void }): void {
+  const new_selector_open_button = el<HTMLButtonElement>('new_selector__button');
+  const new_selector_content = el<HTMLElement>('new_selector__content');
+  const new_selector_button_example = el<HTMLButtonElement>('new_selector__button_example');
+  const new_selector_parent = el<HTMLElement>('new_selector__parent');
+
+  const radios = radioSelect.querySelectorAll('option');
+  const selectorOptionButtons: HTMLButtonElement[] = [];
+  let selectorFocusedIndex = radioSelect.selectedIndex;
+  let selectorReturnFocusElement: HTMLElement = new_selector_open_button;
+  const selectorTriggerButtons: HTMLElement[] = [new_selector_open_button, posterImage];
+
+  function isSelectorOpen() {
+    return !new_selector_content.classList.contains('hidden');
+  }
+
+  function syncSelectorSelection() {
+    selectorOptionButtons.forEach((button, index) => {
+      const isSelected = radioSelect.selectedIndex === index;
+      const isFocused = selectorFocusedIndex === index;
+      button.classList.toggle('bg-Red', isSelected);
+      button.setAttribute('aria-selected', String(isSelected));
+      button.tabIndex = isSelectorOpen() && isFocused ? 0 : -1;
+    });
+  }
+
+  function focusOption(index: number) {
+    if (!selectorOptionButtons.length) return;
+
+    const lastIndex = selectorOptionButtons.length - 1;
+    const nextIndex = Math.max(0, Math.min(index, lastIndex));
+
+    selectorFocusedIndex = nextIndex;
+    syncSelectorSelection();
+
+    const button = selectorOptionButtons[selectorFocusedIndex];
+
+    button.focus({
+      preventScroll: true,
+    });
+
+    button.scrollIntoView({
+      behavior: "auto",
+      block: "nearest",
+      inline: "nearest",
+    });
+  }
+
+  function setSelectorExpanded(isExpanded: boolean) {
+    selectorTriggerButtons.forEach(el => {
+      el.setAttribute('aria-expanded', String(isExpanded));
+    });
+  }
+
+  function getCurrentSelectorIndex() {
+    const index = radioSelect.selectedIndex;
+    return index >= 0 && index < selectorOptionButtons.length ? index : 0;
+  }
+
+  function openSelector({ focusSelected = false, trigger = document.activeElement }: { focusSelected?: boolean; trigger?: Element | null } = {}) {
+    if (trigger instanceof HTMLElement && selectorTriggerButtons.includes(trigger)) {
+      selectorReturnFocusElement = trigger;
+    }
+    selectorFocusedIndex = getCurrentSelectorIndex();
+    new_selector_content.classList.remove('hidden');
+    setSelectorExpanded(true);
+    syncSelectorSelection();
+    if (focusSelected) {
+      focusOption(selectorFocusedIndex);
+    } else {
+      selectorOptionButtons[selectorFocusedIndex]?.scrollIntoView({
+        behavior: "auto",
+        block: "nearest",
+        inline: "nearest",
+      });
+    }
+  }
+
+  function closeSelector({ returnFocus = false, blurHiddenFocus = false }: { returnFocus?: boolean; blurHiddenFocus?: boolean } = {}) {
+    const activeElement = document.activeElement;
+    const shouldBlurHiddenFocus = blurHiddenFocus && activeElement instanceof HTMLElement && new_selector_parent.contains(activeElement);
+    new_selector_content.classList.add('hidden');
+    setSelectorExpanded(false);
+    syncSelectorSelection();
+    if (returnFocus) selectorReturnFocusElement.focus();
+    else if (shouldBlurHiddenFocus) activeElement.blur();
+  }
+
+  function toggleSelector(trigger: Element) {
+    if (isSelectorOpen()) closeSelector();
+    else openSelector({ focusSelected: true, trigger });
+  }
+
+  function selectOption(index: number) {
+    onSelect(index);
+    selectorFocusedIndex = index;
+    syncSelectorSelection();
+    closeSelector({ returnFocus: true });
+  }
+
+  radios.forEach((radio, index) => {
+    const new_button = new_selector_button_example.cloneNode(true) as HTMLButtonElement;
+    new_button.id = `new_selector__option_${index}`;
+    new_button.setAttribute('role', 'option');
+    new_button.setAttribute('aria-selected', 'false');
+    new_button.tabIndex = -1;
+    new_button.classList.remove('hidden');
+    new_button.innerText = radio.text;
+
+    new_button.addEventListener('click', () => {
+      selectOption(index);
+    });
+
+    new_selector_content.appendChild(new_button);
+    selectorOptionButtons.push(new_button);
+  });
+  syncSelectorSelection();
+
+  selectorTriggerButtons.forEach(el => el.addEventListener('click', () => toggleSelector(el)));
+
+  function handleSelectorTriggerKeydown(e: KeyboardEvent) {
+    if (e.key === 'ArrowDown' && isSelectorOpen()) {
+      e.preventDefault();
+      focusOption(selectorFocusedIndex + 1);
+      return;
+    }
+
+    if (e.key === 'ArrowUp' && isSelectorOpen()) {
+      e.preventDefault();
+      focusOption(selectorFocusedIndex - 1);
+      return;
+    }
+
+    if (!['Enter', ' '].includes(e.key)) return;
+    e.preventDefault();
+    openSelector({ focusSelected: true, trigger: e.currentTarget as Element });
+  }
+
+  selectorTriggerButtons.forEach(el => el.addEventListener('keydown', handleSelectorTriggerKeydown));
+
+  new_selector_content.addEventListener('keydown', (e) => {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      focusOption(selectorFocusedIndex + 1);
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      focusOption(selectorFocusedIndex - 1);
+    } else if (e.key === 'Home') {
+      e.preventDefault();
+      focusOption(0);
+    } else if (e.key === 'End') {
+      e.preventDefault();
+      focusOption(selectorOptionButtons.length - 1);
+    } else if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      selectOption(selectorFocusedIndex);
+    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+      e.preventDefault();
+      closeSelector({ returnFocus: true });
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      closeSelector({ returnFocus: true });
+    }
+  });
+
+  new_selector_parent.addEventListener('focusout', (e) => {
+    if (!new_selector_parent.contains(e.relatedTarget as Node | null)) closeSelector();
+  });
+
+  document.addEventListener('keydown', (e) => {
+    if (e.key !== 'Escape' || !isSelectorOpen()) return;
+    e.preventDefault();
+    closeSelector({ returnFocus: true });
+  });
+
+  document.addEventListener('click', (e) => {
+    const target = e.target as Node | null;
+    if (!new_selector_content.contains(target) && !selectorTriggerButtons.some(el => el.contains(target))) {
+      closeSelector({ blurHiddenFocus: true });
+    }
+  });
+}
diff --git a/src/js/storage.ts b/src/js/storage.ts
new file mode 100644
index 0000000..9b15448
--- /dev/null
+++ b/src/js/storage.ts
@@ -0,0 +1,14 @@
+/** Persistence for the last played station. */
+
+const LAST_INDEX_KEY = 'lastRadioIndex';
+
+export function getStoredStationIndex(stationCount: number): number | null {
+  const parsed = Number.parseInt(localStorage.getItem(LAST_INDEX_KEY) ?? '', 10);
+  if (!Number.isInteger(parsed)) return null;
+  if (parsed < 0 || parsed >= stationCount) return null;
+  return parsed;
+}
+
+export function saveLastIndex(index: number): void {
+  localStorage.setItem(LAST_INDEX_KEY, String(index));
+}
diff --git a/src/js/theme.ts b/src/js/theme.ts
new file mode 100644
index 0000000..3e18d77
--- /dev/null
+++ b/src/js/theme.ts
@@ -0,0 +1,18 @@
+/** Browser theme color, following the OS light/dark preference. */
+
+function updateThemeColor() {
+  const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+  const themeColor = isDarkMode ? '#434238' : '#fffdef';
+  let metaThemeColor = document.querySelector('meta[name="theme-color"]');
+  if (!metaThemeColor) {
+    metaThemeColor = document.createElement('meta');
+    metaThemeColor.setAttribute('name', 'theme-color');
+    document.head.appendChild(metaThemeColor);
+  }
+  metaThemeColor.setAttribute('content', themeColor);
+}
+
+export function initThemeColor(): void {
+  updateThemeColor();
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateThemeColor);
+}

From 044903beda58627095d60eb1c6e599587572c1e9 Mon Sep 17 00:00:00 2001
From: Adica <adica@192.168.1.16>
Date: Fri, 3 Jul 2026 17:42:28 +0300
Subject: [PATCH 2/2] Plan: mark audioInstance for the Phase 4 redesign
 (reconciler + tone channel)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 plan.md | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/plan.md b/plan.md
index c9e631d..f025576 100644
--- a/plan.md
+++ b/plan.md
@@ -277,6 +277,22 @@ cu paritate 100% de comportament.
   ramana testabil fara browser. `radioCore.ts` devine un adaptor subtire:
   acelasi API public (`playRadio`, `stopRadio`, `togglePlayPause`, `onPlayerPause`
   etc.) tradus in events -> `main.ts` si celelalte module nu se ating.
+- Redesign `audioInstance` (soundEffects.ts) — punctul cel mai slab actual:
+  - `isPlaying` e INTENTIE, nu realitate (adevarul e in element: paused,
+    rejected play); ensure() re-impaca periodic cele doua = eventual
+    consistency. warmUp() se bazeaza pe curse cu playGeneration. Netestat
+    direct, desi are cea mai delicata logica async din stratul DOM.
+  - Modelul corect: instanta tine o singura stare de dorinta
+    (`desired: 'playing' | 'stopped'`), elementul e singura sursa de realitate,
+    si UN reconcile() le aliniaza — play/stop/ensure devin declansatoare.
+    Testabil unit cu un element fals injectat.
+  - Se leaga natural de ideea "canal de feedback": `tone: 'loading'|'error'|
+    'none'` in STATE_FX + un singur element <audio> real (NU Web Audio — vezi
+    episodul handoff si 69a58f2) — overlap imposibil prin constructie, iar
+    schimbarea de ton = swap de src pe elementul care deja canta (continuarea
+    permisa de iOS in background). Rezolva si lock screen-ul iOS, curat.
+  - Orice schimbare aici cere re-validare completa pe device (lock screen,
+    prev/next, offline) — zona cea mai empirica a aplicatiei.
 - Capcane cunoscute de tratat explicit (comportament calit in productie):
   - ordinea `setState('loading')` INAINTE de `playerPause()` (nativul 'pause' e
     ignorat in loading/retrying — vezi comentariul din radioCore si logica din