ui: bordered header badges and ICCID-labelled card actions (v2.6.2)

- ADM/SCP80/SCP81 header indicators become bordered chips (neutral gray
  border, rounded, px-1.5 py-0.5); SCP80/SCP81 get an even ml-1 gap, so no
  separator glyph is needed
- profiler/snapshot card actions carry the equipped card's ICCID:
  'Profile from card <ICCID>', 'Check card <ICCID>' (row button, arrow
  dropped), 'New snapshot: <ICCID>'; pysimUpdateCardActionLabels() fills
  the spans on every status poll and after a language switch
- these buttons switch to data-needs='card-iccid': disabled without a
  readable ICCID ('Card equipped but its ICCID is not readable' hint)
- profiler rows wrap so the longer button cannot break the layout;
  help EN/RU updated; SW cache simple-v202

frontend/help-ru.html

@@ -408,10 +408,10 @@
 	<h4 class="font-medium mb-1">Список профилей</h4>
 	<ul class="list-disc list-inside text-sm space-y-1 mb-3">
 		<li><strong>Новый профиль</strong> — создаёт пустой набор правил, запросив имя.</li>
-		<li><strong>Профиль с карты</strong> — сканирует подключённую карту и создаёт по одному правилу на каждый существующий файл (см. ниже), затем открывает редактор.</li>
+		<li><strong>Профиль с карты &lt;ICCID&gt;</strong> — сканирует подключённую карту и создаёт по одному правилу на каждый существующий файл (см. ниже), затем открывает редактор. Кнопки, зависящие от карты, содержат ICCID подключённой карты и отключены, пока он не читается.</li>
 		<li><strong>Профиль из снимка</strong> — выбирает сохранённый снимок карты и создаёт по правилу на каждый захваченный файл с теми же опциями сканирования (см. ниже), без картридера; имя профиля подставляется из имени снимка.</li>
 		<li><strong>Импорт профиля</strong> — загружает набор правил из JSON-файла (имя хранится внутри JSON).</li>
-		<li>В каждой строке профиля показаны имя и время создания, а также действия <strong>Проверить карту ▶</strong>, <strong>Проверить снимок карты</strong>, <strong>Редактировать</strong>, <strong>Клонировать</strong>, <strong>Экспорт</strong> (скачать JSON) и <strong>Удалить</strong>. <strong>Клонировать</strong> создаёт копию профиля с именем <em>Копия &lt;профиль&gt;</em> (с суффиксом <code class="font-mono text-sm">(2)</code>, <code class="font-mono text-sm">(3)</code>…, если такое имя уже занято) и открывает копию в редакторе, чтобы изменить имя и содержимое перед сохранением.</li>
+		<li>В каждой строке профиля показаны имя и время создания, а также действия <strong>Проверить карту &lt;ICCID&gt;</strong>, <strong>Проверить снимок карты</strong>, <strong>Редактировать</strong>, <strong>Клонировать</strong>, <strong>Экспорт</strong> (скачать JSON) и <strong>Удалить</strong>. <strong>Клонировать</strong> создаёт копию профиля с именем <em>Копия &lt;профиль&gt;</em> (с суффиксом <code class="font-mono text-sm">(2)</code>, <code class="font-mono text-sm">(3)</code>…, если такое имя уже занято) и открывает копию в редакторе, чтобы изменить имя и содержимое перед сохранением.</li>
 	</ul>
 	<h4 class="font-medium mb-1">Правила файловой системы</h4>
 	<p class="text-sm mb-2">Правила выполняются последовательно. Редактор показывает символьное имя файла pySim (если известно) рядом с путём правила; <strong>Добавить правило</strong> добавляет правило, <strong>Сохранить</strong> сохраняет изменения. Правило файловой системы задаётся:</p>
@@ -428,7 +428,7 @@
 		<h4 id="card-snapshots" class="font-medium mb-1">Снимки карт</h4>
 	<p class="text-sm mb-2">Представление списка имеет две вкладки &mdash; <strong>&laquo;Профили&raquo;</strong> и <strong>&laquo;Снимки карт&raquo;</strong>. Снимок карты — неизменяемая фиксация файловой системы карты: для каждого существующего файла сохраняются путь, символьное имя, тип, размер (или длина/число записей), сырой FCI из ответа SELECT и содержимое, если файл читается (без списка игнорирования и без масок). ICCID декодируется из EF.ICCID и показывается рядом с именем снимка. Захваченное содержимое показывается вместе с декодированным представлением, где есть декодер — таблица полей для transparent-файлов и однострочная сводка по каждой записи для record-файлов. При сканировании измеряется время каждой команды карты (SELECT, READ BINARY, READ RECORD) от отправки до ответа; снимок хранит min/сред/max по каждому типу команд и общее время сканирования, а в представлении эти значения показываются в сводке под заголовком, время select/read — для каждого файла и время чтения — для каждой записи. Время носит информационный характер и не используется при проверках и сравнении.</p>
 	<ul class="list-disc list-inside text-sm space-y-1 mb-3">
-		<li><strong>Новый снимок</strong> &mdash; запрашивает имя и сканирует карту, затем возвращает к списку.</li>
+		<li><strong>Новый снимок: &lt;ICCID&gt;</strong> &mdash; запрашивает имя и сканирует карту, затем возвращает к списку.</li>
 		<li><strong>Импорт снимка</strong> &mdash; загружает снимок из JSON-файла.</li>
 		<li>В каждой строке снимка — <strong>Открыть</strong>, <strong>Экспорт</strong> и <strong>Удалить</strong>. <strong>Открыть</strong> показывает все захваченные данные только для чтения (сырой FCI с декодированным FCI, содержимое); редактируется только имя снимка.</li>
 		<li><strong>Проверить снимок карты</strong> в строке профиля выполняет правила профиля на выбранном из списка снимке, без картридера. Отчёт такой же, как при проверке карты: фактическая сторона подписана именем снимка (<em>фактически (имя снимка)</em>), а в заголовке — <em>Результаты проверки профиля: &lt;профиль&gt; &rarr; &lt;имя снимка&gt;</em>; файлы, содержимое которых не было захвачено при сканировании, помечаются как непроверяемые ошибки.</li>

frontend/help.html

@@ -408,10 +408,10 @@
 	<h4 class="font-medium mb-1">Profile list</h4>
 	<ul class="list-disc list-inside text-sm space-y-1 mb-3">
 		<li><strong>New profile</strong> — creates an empty ruleset after prompting for a name.</li>
-		<li><strong>Profile from card</strong> — scans the equipped card and generates one rule per existing file (see below), then opens the editor.</li>
+		<li><strong>Profile from card &lt;ICCID&gt;</strong> — scans the equipped card and generates one rule per existing file (see below), then opens the editor. Card-dependent buttons carry the equipped card's ICCID and are disabled while it is not readable.</li>
 		<li><strong>Profile from snapshot</strong> — picks a saved card snapshot and generates one rule per captured file using the same scan options (see below), without a card reader; the profile name is prefilled with the snapshot name.</li>
 		<li><strong>Import profile</strong> — loads a ruleset from a JSON file (the name is stored inside the JSON).</li>
-		<li>Each profile row shows its name and creation time, with <strong>Check card ▶</strong>, <strong>Check card snapshot</strong>, <strong>Edit</strong>, <strong>Clone</strong>, <strong>Export</strong> (download JSON), and <strong>Delete</strong> actions. <strong>Clone</strong> copies the profile under the name <em>Copy of &lt;profile&gt;</em> (with a <code class="font-mono text-sm">(2)</code>, <code class="font-mono text-sm">(3)</code>… suffix when that name already exists) and opens the copy in the editor, so both the name and the contents can be adjusted before saving.</li>
+		<li>Each profile row shows its name and creation time, with <strong>Check card &lt;ICCID&gt;</strong>, <strong>Check card snapshot</strong>, <strong>Edit</strong>, <strong>Clone</strong>, <strong>Export</strong> (download JSON), and <strong>Delete</strong> actions. <strong>Clone</strong> copies the profile under the name <em>Copy of &lt;profile&gt;</em> (with a <code class="font-mono text-sm">(2)</code>, <code class="font-mono text-sm">(3)</code>… suffix when that name already exists) and opens the copy in the editor, so both the name and the contents can be adjusted before saving.</li>
 	</ul>
 	<h4 class="font-medium mb-1">Filesystem rules</h4>
 	<p class="text-sm mb-2">Rules run sequentially. The editor shows the symbolic pySim name (when known) next to each rule&rsquo;s path; use <strong>Add rule</strong> to append one and <strong>Save</strong> to keep the changes. A filesystem rule is defined by:</p>
@@ -428,7 +428,7 @@
 		<h4 id="card-snapshots" class="font-medium mb-1">Card snapshots</h4>
 	<p class="text-sm mb-2">The list view has two tabs &mdash; <strong>Profiles</strong> and <strong>Card snapshots</strong>. A card snapshot is an immutable capture of the card filesystem: for every existing file it stores the path, symbolic name, file type, size (or record length/count), the raw FCI from the SELECT response, and the contents whenever the file is readable (no ignore list, no masking). The ICCID is decoded from EF.ICCID and shown next to the snapshot name. Captured contents are shown with their decoded form where a decoder exists — a field table for transparent files and a one-line summary per record for record files. The scan also measures each card command (SELECT, READ BINARY, READ RECORD) from command to response; the snapshot stores min/avg/max per command type and the total scan time, and the view shows these in the summary under the title plus the select/read times per file and the read time per record. Timings are informational only and are not used by checks or comparisons.</p>
 	<ul class="list-disc list-inside text-sm space-y-1 mb-3">
-		<li><strong>New snapshot</strong> &mdash; asks for a name and scans the card, then returns to the list.</li>
+		<li><strong>New snapshot: &lt;ICCID&gt;</strong> &mdash; asks for a name and scans the card, then returns to the list.</li>
 		<li><strong>Import snapshot</strong> &mdash; loads a snapshot from a JSON file.</li>
 		<li>Each snapshot row has <strong>Open</strong>, <strong>Export</strong>, and <strong>Delete</strong>. <strong>Open</strong> shows all captured data read-only (raw FCI with the decoded FCI, contents); only the snapshot name is editable.</li>
 		<li><strong>Check card snapshot</strong> on a profile row runs the profile rules against a snapshot you pick from the list, without a card reader. The report is the same as a live check: the actual side is labelled with the snapshot name (<em>actual (snapshot name)</em>) and the header reads <em>Profile verification results for: &lt;profile&gt; &rarr; &lt;snapshot name&gt;</em>; files whose contents were not captured during the scan are reported as unverifiable errors.</li>

frontend/index.html

@@ -24,9 +24,9 @@
 				<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:30px;height:30px" alt="" src="nosim.svg">
 				<span id="state-indicator-iccid" class="hidden ml-0.5 text-xs font-mono text-gray-500 dark:text-slate-400 whitespace-nowrap"></span>
-				<span id="state-indicator-adm" class="hidden ml-2 text-xs font-mono" title=""></span>
-				<span id="state-indicator-scp80" class="hidden ml-2 text-xs font-mono text-gray-500 dark:text-slate-400" title=""></span>
-				<span id="state-indicator-scp81" class="hidden ml-1 text-xs font-mono text-gray-500 dark:text-slate-400" title=""></span>
+				<span id="state-indicator-adm" class="hidden ml-2 text-xs font-mono border border-gray-300 dark:border-slate-600 rounded px-1.5 py-0.5" title=""></span>
+				<span id="state-indicator-scp80" class="hidden ml-1 text-xs font-mono text-gray-500 dark:text-slate-400 border border-gray-300 dark:border-slate-600 rounded px-1.5 py-0.5" title=""></span>
+				<span id="state-indicator-scp81" class="hidden ml-1 text-xs font-mono text-gray-500 dark:text-slate-400 border border-gray-300 dark:border-slate-600 rounded px-1.5 py-0.5" title=""></span>
 			</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/simple" target="_blank" class="text-xs text-gray-400 hover:text-gray-600 dark:text-slate-500 dark:hover:text-slate-300">github</a>
@@ -722,7 +722,7 @@
 				<div id="profiler-list-profiles">
 					<div class="flex flex-wrap gap-2 mb-3">
 						<button onclick="profilerNew()" class="px-2.5 py-1 text-sm rounded bg-blue-600 text-white hover:bg-blue-700" data-l10n="New profile">New profile</button>
-						<button data-needs="card" onclick="profilerFromCard()" class="px-2.5 py-1 text-sm rounded bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-40 disabled:cursor-not-allowed" data-l10n="Profile from card">Profile from card</button>
+						<button id="profiler-from-card-btn" data-needs="card-iccid" onclick="profilerFromCard()" class="px-2.5 py-1 text-sm rounded bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-40 disabled:cursor-not-allowed"><span data-l10n="Profile from card">Profile from card</span><span class="profiler-iccid-label"></span></button>
 						<button onclick="profilerFromSnapshot()" class="px-2.5 py-1 text-sm rounded bg-blue-600 text-white hover:bg-blue-700" data-l10n="Profile from snapshot">Profile from snapshot</button>
 						<button onclick="document.getElementById('profiler-import-file').click()" class="px-2.5 py-1 text-sm rounded bg-blue-600 text-white hover:bg-blue-700" data-l10n="Import profile">Import profile</button>
 						<input type="file" id="profiler-import-file" accept=".json,application/json" class="hidden" onchange="profilerImportFile(this)">
@@ -731,7 +731,7 @@
 				</div>
 				<div id="profiler-list-snapshots" class="hidden">
 					<div class="flex flex-wrap gap-2 mb-3">
-						<button data-needs="card" onclick="snapshotNew()" class="px-2.5 py-1 text-sm rounded bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-40 disabled:cursor-not-allowed" data-l10n="New snapshot">New snapshot</button>
+						<button id="snapshot-new-btn" data-needs="card-iccid" onclick="snapshotNew()" class="px-2.5 py-1 text-sm rounded bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-40 disabled:cursor-not-allowed"><span data-l10n="New snapshot">New snapshot</span><span class="profiler-iccid-label" data-iccid-sep=": "></span></button>
 						<button onclick="document.getElementById('snapshot-import-file').click()" class="px-2.5 py-1 text-sm rounded bg-blue-600 text-white hover:bg-blue-700" data-l10n="Import snapshot">Import snapshot</button>
 						<button onclick="snapshotCompareOpen()" class="px-2.5 py-1 text-sm rounded bg-emerald-600 text-white hover:bg-emerald-700" data-l10n="Compare snapshots">Compare snapshots</button>
 						<input type="file" id="snapshot-import-file" accept=".json,application/json" class="hidden" onchange="snapshotImportFile(this)">
@@ -1400,7 +1400,7 @@
 // ===== Version =====
 // Single source of truth for the PWA version: shown in the header and used
 // by the server version check in pysimConnect().
-const SIMPLE_VERSION = '2.6.1';
+const SIMPLE_VERSION = '2.6.2';
 document.getElementById('app-version').textContent = 'v' + SIMPLE_VERSION;
 
 // ===== Tab switching =====
@@ -4891,6 +4891,15 @@ function pysimUpdateStateIndicator() {
 	}
 }
 
+// Card-dependent action labels carry the equipped card's ICCID; the buttons
+// themselves are disabled without a readable ICCID (data-needs="card-iccid").
+function pysimUpdateCardActionLabels() {
+	document.querySelectorAll('.profiler-iccid-label').forEach(el => {
+		const sep = el.getAttribute('data-iccid-sep') || ' ';
+		el.textContent = _pysimCardIccid ? sep + _pysimCardIccid : '';
+	});
+}
+
 function pysimApplyAvailability() {
 	const state = pysimAvailabilityState();
 	document.querySelectorAll('[data-needs]').forEach(el => {
@@ -4904,6 +4913,7 @@ function pysimApplyAvailability() {
 		if (disabled) el.setAttribute('title', pysimNeedsHint(needs, state));
 		else el.removeAttribute('title');
 	});
+	pysimUpdateCardActionLabels();
 	pysimUpdateStateIndicator();
 }
 
@@ -9920,12 +9930,12 @@ function profilerRenderList() {
 	let html = '';
 	for (let i = 0; i < profiles.length; i++) {
 		const p = profiles[i];
-		html += '<div class="flex items-center gap-2 py-1.5 border-b border-gray-200 dark:border-slate-700">';
+		html += '<div class="flex flex-wrap items-center gap-2 py-1.5 border-b border-gray-200 dark:border-slate-700">';
 		html += '<b>' + esc(p.name) + '</b>';
 		html += '<span class="text-xs text-gray-400 dark:text-slate-500">' + esc(new Date(p.created).toLocaleString()) + '</span>';
 		html += '<span class="text-xs text-gray-400 dark:text-slate-500">(' + p.rules.length + ' ' + esc(t('rules')) + ')</span>';
 		html += '<span class="ml-auto flex gap-1">';
-		html += '<button data-needs="card" onclick="profilerCheck(' + i + ')" class="px-2 py-0.5 text-xs rounded bg-emerald-600 text-white hover:bg-emerald-700 disabled:opacity-40 disabled:cursor-not-allowed">' + esc(t('Check card')) + ' ▶</button>';
+		html += '<button data-needs="card-iccid" onclick="profilerCheck(' + i + ')" class="px-2 py-0.5 text-xs rounded bg-emerald-600 text-white hover:bg-emerald-700 disabled:opacity-40 disabled:cursor-not-allowed">' + esc(t('Check card')) + '<span class="profiler-iccid-label"></span></button>';
 		html += '<button onclick="profilerCheckSnapshotPick(' + i + ')" class="px-2 py-0.5 text-xs rounded bg-emerald-600 text-white hover:bg-emerald-700">' + esc(t('Check card snapshot')) + '</button>';
 		html += '<button onclick="profilerEdit(' + i + ')" class="px-2 py-0.5 text-xs rounded bg-blue-600 text-white hover:bg-blue-700">' + esc(t('Edit')) + '</button>';
 		html += '<button onclick="profilerClone(' + i + ')" class="px-2 py-0.5 text-xs rounded bg-gray-600 text-white hover:bg-gray-700">' + esc(t('Clone')) + '</button>';
@@ -13198,6 +13208,7 @@ function refreshDynamicI18n() {
 		else if (profilerView === 'snapshot') profilerRenderSnapshotData();
 	}
 	if (isViewVisible('profiler-scan-modal')) profilerScanRefreshOptions();
+	pysimUpdateCardActionLabels();
 	pysimUpdateStateIndicator();
 	if (isViewVisible('tab-cards')) { cardsRender(); cardsSetFormMode(); }
 	if (isViewVisible('scp81-sub-scripts')) { scriptsRender(); scriptsRebuildSelect(); }

frontend/sw.js

@@ -1,4 +1,4 @@
-const CACHE = 'simple-v201';
+const CACHE = 'simple-v202';
 const URLS = [
   'index.html',
   'help.html',

frontend/tests/html.test.js

@@ -61,6 +61,15 @@ test('the ADM field sits between From card and Add, outside the card fieldsets',
         'ADM input must sit between the From card and Add buttons');
 });
 
+test('card-dependent profiler buttons show the ICCID and need a readable one', () => {
+    assert.match(html, /id="profiler-from-card-btn" data-needs="card-iccid"/);
+    assert.match(html, /id="snapshot-new-btn" data-needs="card-iccid"/);
+    assert.match(html, /data-needs="card-iccid" onclick="profilerCheck/);
+    // both static buttons carry the dynamic ICCID span
+    assert.match(html, /id="profiler-from-card-btn"[\s\S]*?<span class="profiler-iccid-label"><\/span><\/button>/);
+    assert.match(html, /id="snapshot-new-btn"[\s\S]*?<span class="profiler-iccid-label" data-iccid-sep=": "><\/span><\/button>/);
+});
+
 test('labelled containers use fieldsets with embedded legends', () => {
     const legendCls = '<legend class="px-1 text-xs font-medium text-gray-500 dark:text-slate-400"';
     for (const label of ['STK menu', 'STATUS and Polling', 'TERMINAL PROFILE',

frontend/tests/indicator.test.js

@@ -26,6 +26,7 @@ code += extractFunc(html, 'pysimAvailabilityState') + '\n';
 code += extractFunc(html, 'pysimControlDisabled') + '\n';
 code += extractFunc(html, 'pysimNeedsHint') + '\n';
 code += extractFunc(html, 'pysimApplyAvailability') + '\n';
+code += extractFunc(html, 'pysimUpdateCardActionLabels') + '\n';
 code += extractFunc(html, 'pysimUpdateStateIndicator') + '\n';
 code += extractFunc(html, 'pysimUpdateIccidIndicator') + '\n';
 code += extractFunc(html, 'pysimUpdatePresetIndicator') + '\n';
@@ -231,3 +232,30 @@ test('indicator image stays within the 32px header row budget', () => {
 	const size = Number(m[1]);
 	assert.ok(size >= 24 && size <= 32, 'size ' + size + 'px would change the header height');
 });
+
+test('header badges are bordered chips with even spacing', () => {
+	for (const id of ['state-indicator-adm', 'state-indicator-scp80', 'state-indicator-scp81']) {
+		const m = new RegExp('id="' + id + '"[^>]*class="([^"]*)"').exec(html);
+		assert.ok(m, id + ' markup not found');
+		assert.match(m[1], /\bborder\b/);
+		assert.match(m[1], /\brounded\b/);
+	}
+	assert.match(html, /id="state-indicator-scp80"[^>]*class="[^"]*ml-1/);
+	assert.match(html, /id="state-indicator-scp81"[^>]*class="[^"]*ml-1/);
+});
+
+test('card action labels carry the equipped ICCID', () => {
+	setup();
+	const plain = fakeEl();
+	const colon = fakeEl();
+	colon.attrs['data-iccid-sep'] = ': ';
+	globalThis.document.querySelectorAll = sel => sel === '.profiler-iccid-label' ? [plain, colon] : [];
+	_pysimCardIccid = '89701450001700031958';
+	pysimUpdateCardActionLabels();
+	assert.strictEqual(plain.textContent, ' 89701450001700031958');
+	assert.strictEqual(colon.textContent, ': 89701450001700031958');
+	_pysimCardIccid = null;
+	pysimUpdateCardActionLabels();
+	assert.strictEqual(plain.textContent, '');
+	assert.strictEqual(colon.textContent, '');
+});

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "pysim-simple-server"
-version = "2.6.1"
+version = "2.6.2"
 description = "HTTP REST server wrapping pysim for the SIMple PWA"
 requires-python = ">=3.8"
 # pysim is a git-only dependency installed explicitly by setup.bat/setup.sh.

pysim_simple_server/server.py

@@ -24,7 +24,7 @@ from osmocom.construct import GsmOrUcs2Adapter
 from osmocom.tlv import BER_TLV_IE
 
 
-VERSION = '2.6.1'
+VERSION = '2.6.2'
 
 MAX_ENVELOPE_SEGMENTS = 5  # max SMS segments for outgoing C-APDU in ENVELOPE