ui: header indicator shows sim/nosim icons once the server is up

- #state-indicator is now a wrapper with a dot plus an 18px dark:invert
  image; no new compiled Tailwind classes (h-4/w-5 are not in the
  prebuilt CSS), so sizing uses an inline style and the header height
  is unchanged
- gray dot while probing, red dot when the server is unreachable;
  server up -> nosim.svg, animated sim_anim.svg while equipping, and
  sim.svg when the card is equipped (`_pysimEquipping` tracked from
  status.equipping, refreshed on every 2s poll)
- i18n reuses existing strings; tests for all five states, dot color
  transitions and the markup; SW cache v109 -> v110.

frontend/index.html

@@ -20,7 +20,10 @@
 	<div class="flex items-center justify-between mb-3">
 		<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="text-xs text-gray-400" title="">●</span>
+			<span id="state-indicator" class="flex items-center" title="Connecting...">
+				<span id="state-indicator-dot" class="text-xs text-gray-400">●</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>
 			<a href="https://github.com/anttro/otaman" target="_blank" class="text-xs text-gray-400 hover:text-gray-600 dark:text-slate-500 dark:hover:text-slate-300">github</a>
 			<a id="help-link" href="help.html" target="_blank" rel="noopener" class="text-xs text-gray-400 hover:text-gray-600 dark:text-slate-500 dark:hover:text-slate-300" data-l10n="help">help</a>
@@ -4377,6 +4380,7 @@ async function pysimFetch(path, body) {
 // ===== UI availability (server / card) =====
 let _pysimServerAvailable = null;  // null until probed
 let _pysimCardEquipped = false;
+let _pysimEquipping = false;
 let _pysimAvailabilityTimer = null;
 
 function pysimAvailabilityState() {
@@ -4396,16 +4400,23 @@ function pysimNeedsHint(needs, state) {
 
 function pysimUpdateStateIndicator() {
 	const el = document.getElementById('state-indicator');
-	if (!el) return;
+	const dot = document.getElementById('state-indicator-dot');
-	const state = pysimAvailabilityState();
+	const img = document.getElementById('state-indicator-img');
-	const entry = {
+	if (!el || !dot || !img) return;
-		'server-down': ['text-red-500', t('No server connection')],
+	if (_pysimServerAvailable === true) {
-		'no-card': ['text-yellow-600', t('Server connected, no card equipped')],
+		const state = pysimAvailabilityState();
-		'card': ['text-emerald-600', t('Card equipped')],
+		dot.classList.add('hidden');
-	}[state];
+		img.classList.remove('hidden');
-	['text-red-500', 'text-yellow-600', 'text-emerald-600', 'text-gray-400'].forEach(c => el.classList.remove(c));
+		img.src = _pysimEquipping ? 'sim_anim.svg' : (state === 'card' ? 'sim.svg' : 'nosim.svg');
-	el.classList.add(entry[0]);
+		el.setAttribute('title', _pysimEquipping ? t('Card inserted — initializing...')
-	el.setAttribute('title', entry[1]);
+			: (state === 'card' ? t('Card equipped') : t('Server connected, no card equipped')));
+	} else {
+		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...'));
+	}
 }
 
 function pysimApplyAvailability() {
@@ -6614,6 +6625,7 @@ function pysimCardStateUpdate(status) {
 	if (!status || typeof status.connected !== 'boolean') return;
 	_pysimServerAvailable = true;
 	_pysimCardEquipped = !!status.connected;
+	_pysimEquipping = !!status.equipping;
 	pysimApplyAvailability();
 	const key = [status.connected, !!status.card_present, !!status.equipping, !!status.auto_equip, status.card_session].join('|');
 	if (key === _pysimCardStateKey) return;

frontend/sw.js

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

frontend/tests/indicator.test.js

@@ -0,0 +1,124 @@
+const { test } = require('node:test');
+const assert = require('node:assert');
+const fs = require('node:fs');
+const path = require('node:path');
+
+const html = fs.readFileSync(path.join(__dirname, '..', 'index.html'), 'utf8');
+
+function extractFunc(src, name) {
+	const re = new RegExp('function\\s+' + name + '\\s*\\([^)]*\\)\\s*\\{');
+	const m = re.exec(src);
+	if (!m) throw new Error('function ' + name + ' not found');
+	let i = m.index + m[0].length - 1;
+	let depth = 0;
+	for (; i < src.length; i++) {
+		if (src[i] === '{') depth++;
+		else if (src[i] === '}') {
+			depth--;
+			if (depth === 0) break;
+		}
+	}
+	return src.slice(m.index, i + 1);
+}
+
+let code = 'var _pysimServerAvailable = null;\nvar _pysimCardEquipped = false;\nvar _pysimEquipping = false;\n';
+code += extractFunc(html, 'pysimAvailabilityState') + '\n';
+code += extractFunc(html, 'pysimUpdateStateIndicator') + '\n';
+code += 'globalThis.t = s => s;\n';
+eval(code);
+
+function fakeEl() {
+	const classes = new Set();
+	return {
+		classes,
+		attrs: {},
+		classList: {
+			add: (...cs) => cs.forEach(c => classes.add(c)),
+			remove: (...cs) => cs.forEach(c => classes.delete(c)),
+			contains: c => classes.has(c),
+		},
+		setAttribute(k, v) { this.attrs[k] = v; },
+	};
+}
+
+function setup() {
+	const els = {
+		'state-indicator': fakeEl(),
+		'state-indicator-dot': fakeEl(),
+		'state-indicator-img': fakeEl(),
+	};
+	els['state-indicator-img'].src = '';
+	globalThis.document = { getElementById: id => els[id] || null };
+	_pysimServerAvailable = null;
+	_pysimCardEquipped = false;
+	_pysimEquipping = false;
+	return els;
+}
+
+test('unprobed server shows a gray dot and a Connecting title', () => {
+	const els = setup();
+	pysimUpdateStateIndicator();
+	const { 'state-indicator': wrap, 'state-indicator-dot': dot, 'state-indicator-img': img } = els;
+	assert.ok(dot.classes.has('text-gray-400'));
+	assert.ok(!dot.classes.has('hidden'));
+	assert.ok(img.classes.has('hidden'));
+	assert.strictEqual(wrap.attrs.title, 'Connecting...');
+});
+
+test('unreachable server shows a red dot', () => {
+	const els = setup();
+	_pysimServerAvailable = false;
+	pysimUpdateStateIndicator();
+	const { 'state-indicator': wrap, 'state-indicator-dot': dot, 'state-indicator-img': img } = els;
+	assert.ok(dot.classes.has('text-red-500'));
+	assert.ok(!dot.classes.has('text-gray-400'));
+	assert.ok(img.classes.has('hidden'));
+	assert.strictEqual(wrap.attrs.title, 'No server connection');
+});
+
+test('server up without a card shows nosim.svg', () => {
+	const els = setup();
+	_pysimServerAvailable = true;
+	pysimUpdateStateIndicator();
+	const { 'state-indicator': wrap, 'state-indicator-dot': dot, 'state-indicator-img': img } = els;
+	assert.ok(dot.classes.has('hidden'));
+	assert.ok(!img.classes.has('hidden'));
+	assert.strictEqual(img.src, 'nosim.svg');
+	assert.strictEqual(wrap.attrs.title, 'Server connected, no card equipped');
+});
+
+test('equipped card shows sim.svg', () => {
+	const els = setup();
+	_pysimServerAvailable = true;
+	_pysimCardEquipped = true;
+	pysimUpdateStateIndicator();
+	const { 'state-indicator': wrap, 'state-indicator-img': img } = els;
+	assert.strictEqual(img.src, 'sim.svg');
+	assert.strictEqual(wrap.attrs.title, 'Card equipped');
+});
+
+test('equipping shows the animated sim_anim.svg', () => {
+	const els = setup();
+	_pysimServerAvailable = true;
+	_pysimEquipping = true;
+	pysimUpdateStateIndicator();
+	const { 'state-indicator': wrap, 'state-indicator-img': img } = els;
+	assert.strictEqual(img.src, 'sim_anim.svg');
+	assert.strictEqual(wrap.attrs.title, 'Card inserted — initializing...');
+});
+
+test('dot color transitions do not accumulate', () => {
+	const els = setup();
+	_pysimServerAvailable = false;
+	pysimUpdateStateIndicator();
+	_pysimServerAvailable = null;
+	pysimUpdateStateIndicator();
+	const dot = els['state-indicator-dot'];
+	assert.ok(dot.classes.has('text-gray-400'));
+	assert.ok(!dot.classes.has('text-red-500'));
+});
+
+test('indicator markup carries the dot and image elements', () => {
+	assert.match(html, /id="state-indicator-dot"/);
+	assert.match(html, /id="state-indicator-img"[^>]*src="nosim\.svg"/);
+});