Merge pull request 'Поднять dev-стек в Docker (фронт + observability) и починить подключение Telegram' (#24) from t23_dev_stack_telegram into main

Reviewed-on: #24

src/core/Deal.Api/Telegram/TgStatusService.cs

@@ -22,6 +22,7 @@ public sealed class TgStatusService(
     TelegramKeysService keys)
 {
     private const string IdlePhase = "idle";
+    private const string ReadyPhase = "ready";
 
     // Опции JSON KV-значений статуса: camelCase (как пишет ингресс) + терпимость регистра.
     private static readonly JsonSerializerOptions KvJsonOptions = new()
@@ -37,13 +38,19 @@ public sealed class TgStatusService(
     public async Task<TgStatusDto> GetAsync(CancellationToken ct)
     {
         TelegramAccountStatusDto live = await ReadLiveAsync(ct).ConfigureAwait(false);
-        string account = await ReadAccountAsync(ct).ConfigureAwait(false);
+        // «Подключён» для UI = авторизован (phase ready). Транспортный connected сервиса
+        // означает лишь живость соединения и не гарантирует вход — в UI он даёт «зависание».
+        bool authorized = string.Equals(live.Phase, ReadyPhase, StringComparison.Ordinal);
+        // Живой account (имя из Telegram) приоритетнее KV: при QR-входе KV ещё не заполнен.
+        string account = string.IsNullOrEmpty(live.Account)
+            ? await ReadAccountAsync(ct).ConfigureAwait(false)
+            : live.Account;
         int monitored = (await dialogs.ListMonitoredIdsAsync(ct).ConfigureAwait(false)).Count;
         TgKeysSnapshot snapshot = await keys.GetAsync(ct).ConfigureAwait(false);
 
         return new TgStatusDto(
             Phase: live.Phase,
-            Connected: live.Connected,
+            Connected: authorized,
             Listener: live.Listener,
             Account: account,
             Monitored: monitored,

src/core/tests/Deal.Tests.Unit/Api/TgStatusServiceTests.cs

@@ -67,21 +67,22 @@ public sealed class TgStatusServiceTests
     /// Готовый аккаунт
     /// </summary>
     [Fact]
-    public async Task GetAsync_ReadyGateway_ComposesLiveFieldsWithKvAccountMonitoredAndKeys()
+    public async Task GetAsync_ReadyGateway_PrefersLiveAccountOverKvAndComputesConnected()
     {
         (TgStatusService service, TestTelegramStore store, TestSettingsStore settings, TestTelegramGateway gateway, _, TestGlobalSettingsStore globalSettings) = Create();
         store.Seed(Dialog("d_1", "Канал", "channel", Monitor: true));
         settings.Preload(SettingsKeys.TgAccount, "\"@realuser\"");
         PreloadKeys(globalSettings, "123456", "abcdefghijklmnop");
+        // Транспортный Connected=false, но phase ready → UI должен считать аккаунт подключённым.
         gateway.Status = new TelegramAccountStatusDto(
-            Phase: "ready", Connected: true, Listener: true, Account: "gateway-account", Error: null, QrUrl: null);
+            Phase: "ready", Connected: false, Listener: true, Account: "@liveuser", Error: null, QrUrl: null);
 
         TgStatusDto status = await service.GetAsync(CancellationToken.None);
 
         Assert.Equal("ready", status.Phase);
-        Assert.True(status.Connected);
+        Assert.True(status.Connected); // connected = авторизация (phase ready), не транспорт
         Assert.True(status.Listener);
-        Assert.Equal("@realuser", status.Account); // KV tgAccount перекрывает справочное поле гейта (Ruling 8)
+        Assert.Equal("@liveuser", status.Account); // живой account приоритетнее KV
         Assert.Equal(1, status.Monitored);
         Assert.True(status.KeysSet);
     }

src/frontend/Dockerfile

@@ -0,0 +1,14 @@
+# Фронтенд Deal: сборка SPA (Vite) и отдача статики через Caddy.
+# Контекст сборки — корень репозитория (см. deploy/compose.dev.yml: build.context ..).
+# /api/* проксируется на core:5080 (см. deploy/caddy/Caddyfile.dev).
+
+FROM node:24-alpine AS build
+WORKDIR /app
+COPY src/frontend/package.json src/frontend/package-lock.json ./
+RUN npm ci
+COPY src/frontend/ ./
+RUN npm run build
+
+FROM caddy:2.9.1
+COPY --from=build /app/dist /srv
+COPY deploy/caddy/Caddyfile.dev /etc/caddy/Caddyfile

src/frontend/src/components/settings/TelegramTab.vue

@@ -2,10 +2,9 @@
 // Вкладка «Telegram» настроек: подключение аккаунта (QR / номер / код /
 // облачный пароль) и авто-мониторинг новых чатов. Ключи приложения
 // (api_id/api_hash) задаёт оператор глобально — у тенанта их нет.
-// Опрос статуса при QR-входе живёт в SettingsView (watch на state.tgState),
-// чтобы поведение при переключении вкладок осталось прежним.
-import { ref } from 'vue'
-import { state, connectTgStep, tgStart, disconnectTg } from '../../store.js'
+// Пока идёт QR-вход, вкладка сама опрашивает статус и обновляет картинку.
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { state, connectTgStep, tgStart, disconnectTg, refreshTgStatus } from '../../store.js'
 import Icon from '../Icon.vue'
 import UiToggle from '../ui/ToggleSwitch.vue'
 
@@ -14,6 +13,58 @@ const code = ref('')
 const tgPass = ref('')
 const qrTick = ref(0)
 
+// QR-ссылка приходит после старта: перезагружаем картинку, когда она появилась/сменилась.
+watch(
+  () => state.tgQrUrl,
+  () => {
+    if (state.tgState === 'qr') qrTick.value++
+  },
+)
+
+// Таймер QR: пока идёт вход — периодически обновляем статус и саму картинку
+// (токен Telegram меняется); при подключении показываем учётку и останавливаемся.
+const QR_POLL_MS = 5000
+let qrTimer = null
+
+function stopQrTimer() {
+  if (qrTimer) {
+    clearInterval(qrTimer)
+    qrTimer = null
+  }
+}
+
+function startQrTimer() {
+  stopQrTimer()
+  qrTimer = setInterval(async () => {
+    await refreshTgStatus()
+    // Продолжаем опрос, пока не авторизованы: переходной статус (phase ready до
+    // подтверждения транспорта) не должен останавливать обновление.
+    if (state.tgConnected) {
+      stopQrTimer()
+      return
+    }
+    if (state.tgState === 'idle') {
+      stopQrTimer()
+      return
+    }
+    qrTick.value++
+  }, QR_POLL_MS)
+}
+
+// Таймер стартует при входе в режим QR и сам останавливается при подключении/сбросе.
+watch(
+  () => state.tgState,
+  (s) => {
+    if (s === 'qr') startQrTimer()
+  },
+)
+
+onMounted(async () => {
+  await refreshTgStatus()
+  if (state.tgState === 'qr') startQrTimer()
+})
+onBeforeUnmount(stopQrTimer)
+
 async function submitCode() {
   await connectTgStep(code.value)
   if (state.tgState === 'done') code.value = ''

src/frontend/src/store/telegram.js

@@ -5,11 +5,12 @@ import { state, toast, errMsg, fmtMsgTime } from './core.js'
 
 export function mapTgStatus(st) {
   if (!st) return
-  state.tgConnected = !!st.connected
+  const phase = st.phase || 'idle'
+  // «Подключён» = авторизован (phase ready); транспортный connected ненадёжен для UI.
+  state.tgConnected = phase === 'ready' || !!st.connected
   state.tgAccount = st.account || ''
   state.tgKeysSet = !!st.keysSet
   if (st.error) state.tgError = st.error
-  const phase = st.phase || 'idle'
   if (phase === 'ready') {
     state.tgState = 'done'
   } else if (['phone', 'code', 'password', 'qr'].includes(phase)) {
@@ -147,10 +148,12 @@ export async function refreshTgStatus() {
 export async function tgStart() {
   state.tgError = ''
   if (state.tgQrMode) {
-    state.tgState = 'qr'
     try {
+      // Сначала стартуем QR на бэке, затем показываем картинку: иначе <img> успевает запросить
+      // /api/tg/qr-image до готовности QR и остаётся пустым.
       const r = await api.post('/api/tg/start-qr')
       state.tgQrUrl = r.qrUrl || ''
+      state.tgState = 'qr'
       toast(t('settings.ssylka-dlya-vhoda-sgenerirovana-otkrojte'), { icon: 'send' })
     } catch (e) {
       state.tgError = errMsg(e)

src/frontend/src/views/SettingsView.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { t } from '@/i18n/index.js'
-import { onBeforeUnmount, watch } from 'vue'
-import { state, refreshTgStatus } from '../store.js'
+import { state } from '../store.js'
 import Icon from '../components/Icon.vue'
 import TelegramTab from '../components/settings/TelegramTab.vue'
 import AiTab from '../components/settings/AiTab.vue'
@@ -26,32 +25,6 @@ const TABS = [
   { id: 'appearance', name: t('settings.vneshnij-vid'), icon: 'palette' },
   { id: 'profile', name: t('settings.profil'), icon: 'key' },
 ]
-
-// пока идёт QR-вход (вкладка Telegram) — опрашиваем статус, чтобы поймать
-// момент подтверждения. Watch живёт на уровне экрана настроек: при
-// переключении вкладок опрос не прерывается (как в исходном SettingsView).
-let qrTimer = null
-watch(
-  () => state.tgState,
-  (s) => {
-    if (s === 'qr') {
-      stopQrPoll()
-      qrTimer = setInterval(async () => {
-        await refreshTgStatus()
-        if (state.tgState === 'done') stopQrPoll()
-      }, 4000)
-    } else {
-      stopQrPoll()
-    }
-  },
-)
-function stopQrPoll() {
-  if (qrTimer) {
-    clearInterval(qrTimer)
-    qrTimer = null
-  }
-}
-onBeforeUnmount(stopQrPoll)
 </script>
 
 <template>