From f966276217cecf12cd12a25624960217458b73fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=90=D0=BD=D1=82=D0=BE=D0=BD=20=D0=A2=D1=80=D0=BE=D1=88?=
 =?UTF-8?q?=D0=B8=D0=BD?= <i@atroshin.ru>
Date: Sun, 20 Sep 2026 23:37:37 +0300
Subject: [PATCH] ui: put the decoded FCI in a named bordered block (v2.7.12)

The file manager's decoded FCI rows now sit in a fieldset matching the
phone-simulator containers, with the symbolic file name as its legend
(pysimFsInfoHtml(sel, name)); the metadata line stays above the border.
Without a name the fieldset renders without a legend, and without
fci_hex no block is shown at all.

- tests: fieldset/legend markup, metadata line before the border, no
  legend without a name, escaped legend text, no fieldset without FCI.
- help EN/RU mention the named FCI block.
---
 frontend/help-ru.html           |  2 +-
 frontend/help.html              |  2 +-
 frontend/index.html             | 12 ++++++++----
 frontend/sw.js                  |  2 +-
 frontend/tests/html.test.js     |  2 +-
 frontend/tests/profiler.test.js | 24 ++++++++++++++++++++++--
 pyproject.toml                  |  2 +-
 pysim_simple_server/server.py   |  2 +-
 8 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/frontend/help-ru.html b/frontend/help-ru.html
index 1d7a4c0..52aba7f 100644
--- a/frontend/help-ru.html
+++ b/frontend/help-ru.html
@@ -350,7 +350,7 @@
 	<p class="mb-3">Подключение к локальному <a href="https://github.com/anttro/simple" class="text-blue-600 dark:text-blue-400 hover:underline">pysim-simple-server</a> для работы с картой: введите URL сервера (по умолчанию <code class="font-mono text-sm">http://127.0.0.1:8080</code>) и нажмите <strong>Подключиться</strong>. Область статуса показывает состояние ридера/карты, а <strong>Подключить карту</strong> (пере)инициализирует карту после вставки. Подвкладки: <strong>Файловый менеджер</strong>, <strong>Командная строка pySim</strong> и <strong>Отправка APDU</strong>. <strong>&laquo;Профайлер&raquo;</strong> и <strong>&laquo;Симулятор телефона&raquo;</strong> — отдельные вкладки верхнего уровня.</p>
 
 	<h3 id="file-manager" class="text-lg font-medium mb-2">6.1 Файловый менеджер</h3>
-	<p class="text-sm mb-2">Дерево файловой системы отображается слева; выбор файла открывает панель деталей справа. Элементы сгруппированы: DF выше EF, сортировка по <strong>FID</strong> или символьному <strong>имени</strong> (пиллы и кнопка <strong>«Проверить все файлы»</strong> закреплены над прокручиваемым деревом; выбор сохраняется в <code class="font-mono text-sm">localStorage</code>). При выборе файла над содержимым также показываются FID, тип файла, размер / структура записей и декодированный FCI.</p>
+	<p class="text-sm mb-2">Дерево файловой системы отображается слева; выбор файла открывает панель деталей справа. Элементы сгруппированы: DF выше EF, сортировка по <strong>FID</strong> или символьному <strong>имени</strong> (пиллы и кнопка <strong>«Проверить все файлы»</strong> закреплены над прокручиваемым деревом; выбор сохраняется в <code class="font-mono text-sm">localStorage</code>). При выборе файла над содержимым также показываются FID, тип файла, размер / структура записей и декодированный FCI — в рамке с символьным именем файла.</p>
 	<ul class="list-disc list-inside text-sm space-y-1 mb-3">
 		<li><strong>Читать сырые данные / Декодировать</strong> — чтение выбранного файла в виде hex-дампа или таблицы декодированных полей (клиентские декодеры EF: IMSI, ICCID, SPN, списки PLMN, LOCI/PSLOCI/EPSLOCI, ADN/MSISDN, таблицы сервисов, SUME, …); серверный pySim JSON того же чтения остаётся доступен в свёрнутом блоке <em>pySim JSON (сервер)</em>. Подсвеченная кнопка — текущий вид; нажатие любой из них (пере)читывает файл. «Декодировать» недоступна, если для файла нет клиентского декодера (проверка по имени/FID до чтения).</li>
 		<li><strong>Редактировать сырые данные</strong> — изменение hex-данных, <strong>Сохранить</strong> для записи (или <strong>Отмена</strong>); transparent-файлы редактируются в textarea, record-файлы — по одному полю на запись с флажками выбора. Декодированный вид доступен только для чтения — «Редактировать сырые данные» сначала переключает на hex-вид и при необходимости читает файл.</li>
diff --git a/frontend/help.html b/frontend/help.html
index 692a6b9..acf9da4 100644
--- a/frontend/help.html
+++ b/frontend/help.html
@@ -350,7 +350,7 @@
 	<p class="mb-3">Connects to a local <a href="https://github.com/anttro/simple" class="text-blue-600 dark:text-blue-400 hover:underline">pysim-simple-server</a> for live card operations: enter the server URL (default <code class="font-mono text-sm">http://127.0.0.1:8080</code>) and press <strong>Connect</strong>. The status area shows the reader/card state, and <strong>Equip card</strong> (re)initializes the card after insertion. Sub-tabs: <strong>File manager</strong>, <strong>pySim command line</strong>, and <strong>Raw APDU</strong>. The <strong>Profiler</strong> and <strong>Phone simulator</strong> are separate top-level tabs.</p>
 
 	<h3 id="file-manager" class="text-lg font-medium mb-2">6.1 File manager</h3>
-	<p class="text-sm mb-2">The file system tree is displayed on the left; selecting a file opens its detail pane on the right. Entries are grouped with DFs above EFs and sorted by <strong>FID</strong> or symbolic <strong>Name</strong> (pills pinned above the scrolling tree together with <strong>Probe all files</strong>; the choice is remembered in <code class="font-mono text-sm">localStorage</code>). Selecting a file also shows its FID, file type, size / record layout and the decoded FCI above the content pane.</p>
+	<p class="text-sm mb-2">The file system tree is displayed on the left; selecting a file opens its detail pane on the right. Entries are grouped with DFs above EFs and sorted by <strong>FID</strong> or symbolic <strong>Name</strong> (pills pinned above the scrolling tree together with <strong>Probe all files</strong>; the choice is remembered in <code class="font-mono text-sm">localStorage</code>). Selecting a file also shows its FID, file type, size / record layout and the decoded FCI — in a bordered block labelled with the file&rsquo;s symbolic name — above the content pane.</p>
 	<ul class="list-disc list-inside text-sm space-y-1 mb-3">
 		<li><strong>Read raw / Read decoded</strong> — read the selected file as a hex dump or as a decoded field table (client-side EF decoders: IMSI, ICCID, SPN, PLMN lists, LOCI/PSLOCI/EPSLOCI, ADN/MSISDN, service tables, SUME, …); the server-side pySim JSON of the same read stays available in the collapsed <em>pySim JSON (server)</em> disclosure. The highlighted pill is the current view; clicking either pill (re-)reads the file. <strong>Read decoded</strong> is disabled when the client-side decoders do not cover the file (name/FID check, before reading).</li>
 		<li><strong>Edit raw</strong> — edit the raw hex data, <strong>Save</strong> to write back (or <strong>Cancel</strong>); transparent files use a textarea, record files one input per record with selection checkboxes. The decoded view is read-only — <strong>Edit raw</strong> switches to the hex view first and reads the file if needed.</li>
diff --git a/frontend/index.html b/frontend/index.html
index 8ca9abd..93cf656 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1413,7 +1413,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.7.11';
+const SIMPLE_VERSION = '2.7.12';
 document.getElementById('app-version').textContent = 'v' + SIMPLE_VERSION;
 
 // ===== Tab switching =====
@@ -7152,7 +7152,7 @@ async function pysimFsToggleDir(name) {
 
 let pysimFsSelected = null;
 
-function pysimFsInfoHtml(sel) {
+function pysimFsInfoHtml(sel, name) {
 	if (!sel) return '';
 	const num = v => (v === null || v === undefined) ? null : String(v);
 	const attrs = [];
@@ -7164,7 +7164,11 @@ function pysimFsInfoHtml(sel) {
 	let html = '';
 	if (attrs.length) html += '<div class="text-xs font-mono text-gray-500 dark:text-slate-400">' + attrs.join(' · ') + '</div>';
 	if (sel.fci_hex) {
-		html += '<div class="text-xs font-mono leading-relaxed text-gray-600 dark:text-slate-400 break-all mt-0.5">' + profilerFciPreviewItems(sel.fci_hex, { hideFileSize: num(sel.file_size) !== null }) + '</div>';
+		html += '<fieldset class="border border-gray-200 dark:border-slate-700 rounded p-2 mt-1">' +
+			(name ? '<legend class="px-1 text-xs font-mono font-medium text-gray-500 dark:text-slate-400">' + esc(name) + '</legend>' : '') +
+			'<div class="text-xs font-mono leading-relaxed text-gray-600 dark:text-slate-400 break-all">' +
+			profilerFciPreviewItems(sel.fci_hex, { hideFileSize: num(sel.file_size) !== null }) +
+			'</div></fieldset>';
 	}
 	return html;
 }
@@ -7181,7 +7185,7 @@ async function pysimFsClickFile(name) {
 		pysimFsRenderTree();
 	}
 	pysimFsSelected = name;
-	document.getElementById('pysim-fs-info').innerHTML = exists ? pysimFsInfoHtml(sel) : '';
+	document.getElementById('pysim-fs-info').innerHTML = exists ? pysimFsInfoHtml(sel, name) : '';
 	document.getElementById('pysim-fs-content').innerHTML = '';
 	document.getElementById('pysim-fs-status').textContent = exists ? '' : '✗ File not found on card';
 	if (exists) {
diff --git a/frontend/sw.js b/frontend/sw.js
index 4c31bdc..2cca930 100644
--- a/frontend/sw.js
+++ b/frontend/sw.js
@@ -1,4 +1,4 @@
-const CACHE = 'simple-v214';
+const CACHE = 'simple-v215';
 const URLS = [
   'index.html',
   'help.html',
diff --git a/frontend/tests/html.test.js b/frontend/tests/html.test.js
index f9457a7..7c3495d 100644
--- a/frontend/tests/html.test.js
+++ b/frontend/tests/html.test.js
@@ -205,7 +205,7 @@ test('file manager shows FCI info and keeps the selection in state, not the DOM'
     const content = html.indexOf('id="pysim-fs-content"');
     assert.ok(detail !== -1 && info > detail && info < content, 'pysim-fs-info must sit above the content');
     assert.ok(html.includes('function pysimFsInfoHtml'));
-    assert.ok(html.includes("pysimFsInfoHtml(sel)"));
+    assert.ok(html.includes('pysimFsInfoHtml(sel, name)'));
     assert.ok(!html.includes('pysim-fs-filename'));
     assert.ok(html.includes('let pysimFsSelected = null;'));
     assert.ok(html.includes('pysimFsSelected = name;'));
diff --git a/frontend/tests/profiler.test.js b/frontend/tests/profiler.test.js
index 1013176..7ee2ef6 100644
--- a/frontend/tests/profiler.test.js
+++ b/frontend/tests/profiler.test.js
@@ -762,7 +762,7 @@ test('fcpDiffHtml highlights differing FCI parameters', () => {
 test('pysimFsInfoHtml shows FID, type, size and the decoded FCI', () => {
 	global.t = s => s;
 	const hex = '621A82054221000F0583026F4F8A01058B036F06098002004B8801B0';
-	const out = pysimFsInfoHtml({ fid: '6f4f', file_type: 'linear_fixed', file_size: 75, record_len: 15, num_of_rec: 5, fci_hex: hex });
+	const out = pysimFsInfoHtml({ fid: '6f4f', file_type: 'linear_fixed', file_size: 75, record_len: 15, num_of_rec: 5, fci_hex: hex }, 'EF.SAMPLE');
 	assert.ok(out.includes('FID: 6F4F'), out);
 	assert.ok(out.includes('File type: linear_fixed'), out);
 	assert.ok(out.includes('Size: 75'), out);
@@ -776,6 +776,10 @@ test('pysimFsInfoHtml shows FID, type, size and the decoded FCI', () => {
 	// the short file identifier is merged into the file identifier row
 	assert.ok(out.includes('6F4F · Short file identifier: 22'), out);
 	assert.ok(!out.includes('<div>Short file identifier:'), out);
+	// the FCI sits in a bordered container whose legend is the symbolic name,
+	// below the metadata line
+	assert.ok(out.indexOf('FID: 6F4F') < out.indexOf('<fieldset'), out);
+	assert.ok(out.includes('<legend class="px-1 text-xs font-mono font-medium text-gray-500 dark:text-slate-400">EF.SAMPLE</legend>'), out);
 	delete global.t;
 });
 
@@ -789,14 +793,30 @@ test('pysimFsInfoHtml keeps the FCI File size when the header has none', () => {
 	delete global.t;
 });
 
+test('pysimFsInfoHtml embeds the symbolic name in the FCI border', () => {
+	global.t = s => s;
+	const hex = '6212800200098202412183026F078A0105880110';
+	// no name -> bordered container without a legend
+	const plain = pysimFsInfoHtml({ fid: '6f07', file_type: 'transparent', file_size: 9, fci_hex: hex });
+	assert.ok(plain.includes('<fieldset'), plain);
+	assert.ok(!plain.includes('<legend'), plain);
+	// the legend text is escaped
+	const evil = pysimFsInfoHtml({ fid: '6f07', fci_hex: hex }, '<b>x</b>');
+	assert.ok(evil.includes('&lt;b&gt;x&lt;/b&gt;'), evil);
+	assert.ok(!evil.includes('<b>x</b>'), evil);
+	delete global.t;
+});
+
 test('pysimFsInfoHtml omits the FCI block without fci_hex and skips null fields', () => {
 	global.t = s => s;
-	const out = pysimFsInfoHtml({ fid: '6f07', file_type: 'transparent', file_size: null, record_len: null, num_of_rec: undefined, fci_hex: null });
+	const out = pysimFsInfoHtml({ fid: '6f07', file_type: 'transparent', file_size: null, record_len: null, num_of_rec: undefined, fci_hex: null }, 'EF.IMSI');
 	assert.ok(out.includes('FID: 6F07'), out);
 	assert.ok(!out.includes('Size:'), out);
 	assert.ok(!out.includes('Record length:'), out);
 	assert.ok(!out.includes('Record count:'), out);
 	assert.ok(!out.includes('Decoded FCI'), out);
+	assert.ok(!out.includes('<fieldset'), out);
+	assert.ok(!out.includes('<legend'), out);
 	assert.strictEqual(pysimFsInfoHtml(null), '');
 	delete global.t;
 });
diff --git a/pyproject.toml b/pyproject.toml
index 9c8a882..6748856 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "pysim-simple-server"
-version = "2.7.11"
+version = "2.7.12"
 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.
diff --git a/pysim_simple_server/server.py b/pysim_simple_server/server.py
index 4a159f9..d2accaf 100644
--- a/pysim_simple_server/server.py
+++ b/pysim_simple_server/server.py
@@ -26,7 +26,7 @@ from osmocom.tlv import BER_TLV_IE
 from osmocom.utils import rpad
 
 
-VERSION = '2.7.11'
+VERSION = '2.7.12'
 
 MAX_ENVELOPE_SEGMENTS = 5  # max SMS segments for outgoing C-APDU in ENVELOPE