From 65127b8cfefc43b6dee7862b4de7978c08c826c1 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: Fri, 14 Aug 2026 00:18:22 +0300
Subject: [PATCH] Show connect-phase messages in visible slot (was writing to
 hidden #pysim-status)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#pysim-status lives inside the hidden #pysim-connected-row, so 'Checking card…',
version warnings, and the connection-failure hint were never visible. Add
#pysim-connect-msg inside the disconnected info block and route pre-connect
messages to it.
---
 index.html | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 7a8bfe1..d9ebd82 100644
--- a/index.html
+++ b/index.html
@@ -847,6 +847,7 @@
 		<div id="pysim-connect-info" class="mb-3 text-xs text-gray-500 dark:text-slate-400 leading-relaxed">
 			<p data-l10n="To access local card reader, you need pysim-otaman-server running locally.">To access local card reader, you need pysim-otaman-server running locally.</p>
 			<p><span data-l10n="To connect, install">To connect, install</span> <a href="https://github.com/anttro/pysim-otaman-server" target="_blank" class="text-blue-600 dark:text-blue-400 underline">pysim-otaman-server</a>: <code class="font-mono bg-gray-100 dark:bg-slate-700 px-1 rounded">git clone https://github.com/anttro/pysim-otaman-server.git</code> <span data-l10n="and start it.">and start it.</span><br><span data-l10n="Refer to pysim-otaman-server README files for details.">Refer to pysim-otaman-server README files for details.</span> <span data-l10n="Click">Click</span> <b data-l10n="Connect">Connect</b> <span data-l10n="when pysim-otaman-server is ready">when pysim-otaman-server is ready</span></p>
+			<div id="pysim-connect-msg" class="text-xs"></div>
 		</div>
 		<div id="pysim-connected-row" class="mb-3 hidden">
 			<div class="flex gap-3 items-start">
@@ -2721,7 +2722,8 @@ async function pysimConnect() {
 	btn.disabled = true;
 	btn.textContent = t('Connecting...');
 	const statusEl = document.getElementById('pysim-status');
-	statusEl.innerHTML = '<span class="text-gray-500">' + t('Checking card...') + '</span>';
+	const msgEl = document.getElementById('pysim-connect-msg');
+	msgEl.innerHTML = '<span class="text-gray-500">' + t('Checking card...') + '</span>';
 	pysimSetConnected('spin');
 	try {
 		// Version check
@@ -2729,13 +2731,13 @@ async function pysimConnect() {
 		if (!ver.version) throw new Error('No version');
 		const sv = (ver.version || '').split('.').map(Number);
 		if (sv[0] < 1 || (sv[0] === 1 && sv[1] < 0)) {
-			statusEl.innerHTML = '<span class="text-red-500">Server version ' + esc(ver.version) + ' is outdated. Please update pysim-otaman-server.</span>';
+			msgEl.innerHTML = '<span class="text-red-500">Server version ' + esc(ver.version) + ' is outdated. Please update pysim-otaman-server.</span>';
 			btn.textContent = t('Connect');
 			btn.disabled = false;
 			return;
 		}
 		if (sv[0] > 1) {
-			statusEl.innerHTML = '<span class="text-yellow-500">Warning: server version ' + esc(ver.version) + ' is newer than expected. Update OTAMan for full compatibility.</span>';
+			msgEl.innerHTML = '<span class="text-yellow-500">Warning: server version ' + esc(ver.version) + ' is newer than expected. Update OTAMan for full compatibility.</span>';
 		}
 		const status = await pysimFetch('/api/status');
 		if (!status.app_ready) {
@@ -2763,7 +2765,7 @@ async function pysimConnect() {
 		pysimSetConnected(false);
 		const hint = t(pysimIsLikelyBlocked() ? 'pysim-blocked-hint' : 'pysim-unreachable-hint')
 			.replace('{url}', esc(pysimBase));
-		statusEl.innerHTML =
+		msgEl.innerHTML =
 			'<span class="text-red-500">' + t('Connection failed:') + ' ' + esc(e.message) + '</span>' +
 			'<br><span class="text-sm text-gray-600 dark:text-slate-400">' + hint + '</span>';
 		btn.textContent = t('Connect');