ui: tooltip on the status dot shows the server state

- the dot carries its own title (Connecting... / No server connection),
  matching the wrapper tooltip; it is cleared when the sim icons replace
  the dot
- tests assert the dot title in both server states and its removal once
  the server is up; SW cache v110 -> v111.

frontend/index.html

@@ -21,7 +21,7 @@
 		<h1 class="text-2xl font-bold text-heading">OTAMan <span id="slogan" class="text-sm font-normal text-gray-500 dark:text-slate-400 ml-2" data-l10n="SIM OTA with a Human Face">SIM OTA with a Human Face</span> <span class="text-xs text-gray-400 dark:text-slate-500 ml-1">v2.0.0</span></h1>
 		<div class="flex items-center gap-4">
 			<span id="state-indicator" class="flex items-center" title="Connecting...">
-				<span id="state-indicator-dot" class="text-xs text-gray-400">●</span>
+				<span id="state-indicator-dot" class="text-xs text-gray-400" title="Connecting...">●</span>
 				<img id="state-indicator-img" class="hidden dark:invert" style="width:18px;height:18px" alt="" src="nosim.svg">
 			</span>
 			<button id="install-btn" class="px-2 py-1 text-xs rounded border border-gray-300 dark:border-slate-600 hover:bg-gray-200 dark:hover:bg-slate-700" style="display:none">INSTALL PWA [for offline use]</button>
@@ -4406,16 +4406,19 @@ function pysimUpdateStateIndicator() {
 	if (_pysimServerAvailable === true) {
 		const state = pysimAvailabilityState();
 		dot.classList.add('hidden');
+		dot.removeAttribute('title');
 		img.classList.remove('hidden');
 		img.src = _pysimEquipping ? 'sim_anim.svg' : (state === 'card' ? 'sim.svg' : 'nosim.svg');
 		el.setAttribute('title', _pysimEquipping ? t('Card inserted — initializing...')
 			: (state === 'card' ? t('Card equipped') : t('Server connected, no card equipped')));
 	} else {
+		const serverState = _pysimServerAvailable === false ? t('No server connection') : t('Connecting...');
 		img.classList.add('hidden');
 		dot.classList.remove('hidden');
 		dot.classList.remove('text-red-500', 'text-gray-400');
 		dot.classList.add(_pysimServerAvailable === false ? 'text-red-500' : 'text-gray-400');
-		el.setAttribute('title', _pysimServerAvailable === false ? t('No server connection') : t('Connecting...'));
+		dot.setAttribute('title', serverState);
+		el.setAttribute('title', serverState);
 	}
 }
 

frontend/sw.js

@@ -1,4 +1,4 @@
-const CACHE = 'otaman-v110';
+const CACHE = 'otaman-v111';
 const URLS = [
   'index.html',
   'help.html',

frontend/tests/indicator.test.js

@@ -38,6 +38,7 @@ function fakeEl() {
 			contains: c => classes.has(c),
 		},
 		setAttribute(k, v) { this.attrs[k] = v; },
+		removeAttribute(k) { delete this.attrs[k]; },
 	};
 }
 
@@ -63,6 +64,7 @@ test('unprobed server shows a gray dot and a Connecting title', () => {
 	assert.ok(!dot.classes.has('hidden'));
 	assert.ok(img.classes.has('hidden'));
 	assert.strictEqual(wrap.attrs.title, 'Connecting...');
+	assert.strictEqual(dot.attrs.title, 'Connecting...');
 });
 
 test('unreachable server shows a red dot', () => {
@@ -74,6 +76,7 @@ test('unreachable server shows a red dot', () => {
 	assert.ok(!dot.classes.has('text-gray-400'));
 	assert.ok(img.classes.has('hidden'));
 	assert.strictEqual(wrap.attrs.title, 'No server connection');
+	assert.strictEqual(dot.attrs.title, 'No server connection');
 });
 
 test('server up without a card shows nosim.svg', () => {
@@ -85,6 +88,7 @@ test('server up without a card shows nosim.svg', () => {
 	assert.ok(!img.classes.has('hidden'));
 	assert.strictEqual(img.src, 'nosim.svg');
 	assert.strictEqual(wrap.attrs.title, 'Server connected, no card equipped');
+	assert.strictEqual(dot.attrs.title, undefined);
 });
 
 test('equipped card shows sim.svg', () => {