feat(community): manage Telegram MTProto proxy from FREE UI

Docker pull/run/remove/restart via host socket (no SSH), optional
secrets and tg:// links when MTPRO_PUBLIC_HOST or CLIENT_CONFIG_ENDPOINT set.
Expose MTPRO_* and UI_HIDE_MTPROTO through install.sh.

Co-authored-by: Cursor <cursoragent@cursor.com>

public/app.js

@@ -21,6 +21,14 @@ const warpActionsEl = document.querySelector("#warp-actions");
 const warpClientListEl = document.querySelector("#warp-client-list");
 const warpWgShowEl = document.querySelector("#warp-wg-show");
 
+const mtprotoPanel = document.querySelector("#mtproto-panel");
+const mtprotoStatusLine = document.querySelector("#mtproto-status-line");
+const mtprotoActionsEl = document.querySelector("#mtproto-actions");
+const mtprotoLogsTailEl = document.querySelector("#mtproto-logs-tail");
+const mtprotoBanner = document.querySelector("#mtproto-banner");
+const mtprotoHostPortInput = document.querySelector("#mtproto-host-port");
+const mtprotoSecretInput = document.querySelector("#mtproto-secret-opt");
+
 const cascadePanel = document.querySelector("#cascade-panel");
 const usersPanel = document.querySelector("#users-panel");
 const wgRawDetails = document.querySelector("#wg-raw-details");
@@ -58,7 +66,7 @@ const warpSshErr = document.querySelector("#warp-ssh-err");
 let warpSshPendingCmd = null;
 
 /** Какие панели скрыты настройкой сервера (`UI_HIDE_SECTIONS`). */
-let uiHidden = { users: false, warp: false, cascade: false };
+let uiHidden = { users: false, warp: false, cascade: false, mtproto: false };
 
 const editionBanner = document.querySelector("#edition-banner");
 const DEFAULT_HEADER_SUB = document.querySelector(".top .sub")?.textContent?.trim() || "";
@@ -234,7 +242,7 @@ function applyEditionPayload(data) {
   if (subEl) {
     if (editionState.tier === "community") {
       subEl.textContent =
-        "Базовая панель amnezia_web: просмотр клиентов и статусов, а также удаление клиента с сервера. Включение/выключение туннеля, даты, переименование, экспорт .conf, каскад, Cloudflare WARP и синхронизация времени хоста — в версии PRO.";
+        "Базовая панель amnezia_web: просмотр клиентов и статусов, удаление клиента с сервера, установка Telegram MTProto‑прокси (Docker) в этом интерфейсе. Включение/выключение туннеля, даты, переименование, экспорт .conf, каскад, Cloudflare WARP и синхронизация времени хоста — в версии PRO.";
     } else {
       subEl.textContent = DEFAULT_HEADER_SUB;
     }
@@ -345,6 +353,141 @@ function applyEditionPayload(data) {
   if (wgRawDetails) wgRawDetails.hidden = uiHidden.users || !editionState.showDebugWg;
 }
 
+async function refreshMtprotoPanel() {
+  if (!mtprotoPanel || !mtprotoStatusLine || !mtprotoActionsEl) return;
+  if (uiHidden.mtproto) {
+    mtprotoPanel.hidden = true;
+    return;
+  }
+  mtprotoPanel.hidden = false;
+  mtprotoActionsEl.innerHTML = "";
+  if (mtprotoBanner) {
+    mtprotoBanner.classList.add("hidden");
+    mtprotoBanner.textContent = "";
+  }
+  try {
+    if (mtprotoLogsTailEl) mtprotoLogsTailEl.textContent = typeof s.logsTail === "string" ? s.logsTail : "";
+
+    const parts = [];
+    if (s.exists) parts.push("контейнер есть");
+    if (s.running) parts.push("запущен");
+    mtprotoStatusLine.textContent =
+      parts.length > 0
+        ? parts.join(" · ") +
+          (s.hostPort ? ` · порт хоста :${String(s.hostPort)}` : "") +
+          (s.secretMasked ? ` · секрет ${s.secretMasked}` : "")
+        : "не установлен";
+
+    if (typeof s.hint === "string" && s.hint.trim()) {
+      const hintEl = document.createElement("p");
+      hintEl.className = "muted warp-muted";
+      hintEl.textContent = s.hint.trim();
+      mtprotoActionsEl.appendChild(hintEl);
+    } else if (s.exists && !s.running && typeof s.image === "string" && s.image.trim()) {
+      const imgHint = document.createElement("p");
+      imgHint.className = "muted warp-muted";
+      imgHint.textContent = `После установки образ будет доступен здесь (${s.image.trim()} при актуальной конфигурации).`;
+      mtprotoActionsEl.appendChild(imgHint);
+    }
+
+    if (s.tgLink) {
+      const link = document.createElement("div");
+      link.className = "mtproto-deep-link muted warp-muted";
+      const lab = document.createElement("strong");
+      lab.textContent = "Ссылка в Telegram: ";
+      const a = document.createElement("a");
+      a.href = s.tgLink;
+      a.textContent = s.tgLink;
+      a.target = "_blank";
+      a.rel = "noopener noreferrer";
+      link.append(lab, a);
+      mtprotoActionsEl.appendChild(link);
+    }
+
+    const row = document.createElement("div");
+    row.className = "warp-actions";
+
+    row.appendChild(
+      btn("Установить / пересоздать", "btn small primary", async () => {
+        try {
+          setStatus("MTProto: docker pull/run…", false);
+          const hp = mtprotoHostPortInput?.value?.trim();
+          const sec = mtprotoSecretInput?.value?.trim()?.toLowerCase();
+          const body = {};
+          if (hp !== "" && hp !== undefined) {
+            const n = Number.parseInt(String(hp), 10);
+            if (Number.isFinite(n)) body.hostPort = n;
+          }
+          if (/^[a-f0-9]{32}$/.test(sec)) body.secret = sec;
+          const j = await api("/api/mtproto/install", { method: "POST", body: JSON.stringify(body) });
+          const lines = [];
+          if (typeof j.secretHex === "string") lines.push(`Секрет (сохраните): ${j.secretHex}`);
+          if (typeof j.tgLink === "string" && j.tgLink) lines.push(`Ссылка: ${j.tgLink}`);
+          if (typeof j.advertiseHint === "string" && j.advertiseHint) lines.push(j.advertiseHint);
+          if (mtprotoBanner) {
+            mtprotoBanner.textContent = lines.join("\n");
+            mtprotoBanner.classList.remove("hidden");
+          }
+          if (typeof j.secretHex === "string" && mtprotoSecretInput) mtprotoSecretInput.value = "";
+          await refreshMtprotoPanel();
+          setStatus("MTProto: готово", false);
+        } catch (e) {
+          setStatus(String(e?.message || e), true);
+        }
+      }),
+    );
+
+    row.appendChild(
+      btn("Перезапустить", "btn small ghost", async () => {
+        try {
+          setStatus("MTProto: перезапуск…", false);
+          await api("/api/mtproto/restart", { method: "POST", body: JSON.stringify({}) });
+          await refreshMtprotoPanel();
+          setStatus("", false);
+        } catch (e) {
+          setStatus(String(e?.message || e), true);
+        }
+      }),
+    );
+
+    row.appendChild(
+      btn("Удалить прокси", "btn small warn", async () => {
+        try {
+          if (!confirm("Удалить контейнер MTProto? Секрет в Telegram сохранять не нужно — он пересоздастся заново при установке.")) return;
+          setStatus("MTProto: удаление…", false);
+          await api("/api/mtproto/remove", { method: "POST", body: JSON.stringify({}) });
+          if (mtprotoBanner) {
+            mtprotoBanner.classList.add("hidden");
+            mtprotoBanner.textContent = "";
+          }
+          await refreshMtprotoPanel();
+          setStatus("", false);
+        } catch (e) {
+          setStatus(String(e?.message || e), true);
+        }
+      }),
+    );
+
+    row.appendChild(
+      btn("Обновить статус", "btn small ghost", async () => {
+        try {
+          setStatus("", false);
+          await refreshMtprotoPanel();
+        } catch (e) {
+          setStatus(String(e?.message || e), true);
+        }
+      }),
+    );
+
+    mtprotoActionsEl.appendChild(row);
+  } catch (e) {
+    const err = document.createElement("p");
+    err.className = "muted warp-muted err";
+    err.textContent = String(e.message || e);
+    mtprotoActionsEl.appendChild(err);
+  }
+}
+
 function applyUiHiddenFromPayload(data) {
   const u = data?.uiHidden;
   if (u && typeof u === "object") {
@@ -352,11 +495,15 @@ function applyUiHiddenFromPayload(data) {
       users: Boolean(u.users),
       warp: Boolean(u.warp),
       cascade: Boolean(u.cascade),
+      mtproto: Boolean(u.mtproto),
     };
   }
   if (usersPanel) usersPanel.hidden = uiHidden.users;
   if (wgRawDetails) wgRawDetails.hidden = uiHidden.users || !editionState.showDebugWg;
   if (cascadePanel) cascadePanel.hidden = uiHidden.cascade;
+  if (warpPanel) warpPanel.hidden = uiHidden.warp;
+  if (mtprotoPanel) mtprotoPanel.hidden = uiHidden.mtproto;
+  void refreshMtprotoPanel();
 }
 
 let dtMode = "disable";
@@ -1412,6 +1559,7 @@ async function loadClients() {
     wgShowEl.textContent = "";
     peerCountEl.textContent = "";
     if (warpPanel) warpPanel.hidden = true;
+    if (mtprotoPanel) mtprotoPanel.hidden = true;
   }
 }
 

public/index.html

@@ -29,7 +29,7 @@
       <div>
         <p class="eyebrow">Панель сервера</p>
         <h1>Пользователи AmneziaWG FREE</h1>
-        <p class="sub">Базовая открытая панель: просмотр клиентов и статусов туннеля. Управление peer, экспорт .conf, каскад, Cloudflare WARP и синхронизация времени хоста доступны в версии PRO (ссылка в жёлтой плашке после входа).</p>
+        <p class="sub">Базовая открытая панель: просмотр клиентов AmneziaWG и (после входа) установка Telegram MTProto‑прокси в Docker без PRO. Полное управление peer, экспорт .conf, каскад, Cloudflare WARP и синхронизация времени хоста — в версии PRO.</p>
       </div>
       <div class="token-box">
         <div class="session-actions">
@@ -116,6 +116,37 @@
       </div>
     </details>
 
+    <details class="panel-fold mtproto-panel" id="mtproto-panel" hidden>
+      <summary class="fold-summary">
+        <span class="fold-arrow" aria-hidden="true"></span>
+        <span class="fold-titles">
+          <span class="fold-h">Telegram MTProto‑прокси</span>
+          <span class="muted fold-meta" id="mtproto-status-line"></span>
+        </span>
+      </summary>
+      <div class="panel-fold-body">
+        <p class="muted warp-intro mtproto-intro">
+          <strong>В базовой панели (FREE).</strong> Отдельный Docker‑контейнер (образ Telegram), публикация порта на хосте VPS.
+          Ссылка вида <code class="inline">tg://proxy?…</code> появляется, если задан <code class="inline">MTPRO_PUBLIC_HOST</code> или <code class="inline">CLIENT_CONFIG_ENDPOINT</code>
+          (переменные контейнера панели, см. install.sh README).
+          Сохраните <strong>секрет</strong>, который показывается один раз после установки — в интерфейсе он маскируется.
+        </p>
+        <div class="mtproto-fields">
+          <label for="mtproto-host-port">Порт хоста (необязательно — по умолчанию см. MTPRO_PUBLISH_PORT, обычно 8443)</label>
+          <input id="mtproto-host-port" type="number" min="512" max="65535" autocomplete="off" placeholder="8443 или другой свободный порт">
+
+          <label for="mtproto-secret-opt">Кастомный секрет hex (32 символа, необязательно)</label>
+          <input id="mtproto-secret-opt" type="text" maxlength="32" autocomplete="off" placeholder="Пусто — сгенерируется">
+        </div>
+        <div id="mtproto-actions" class="warp-actions"></div>
+        <p id="mtproto-banner" class="status ok hidden" role="status"></p>
+        <details class="raw warp-raw">
+          <summary>Хвост логов контейнера mtproto‑proxy</summary>
+          <pre id="mtproto-logs-tail"></pre>
+        </details>
+      </div>
+    </details>
+
     <details class="panel-fold cascade-panel" id="cascade-panel" open>
       <summary class="fold-summary">
         <span class="fold-arrow" aria-hidden="true"></span>
@@ -198,7 +229,7 @@
       <a href="https://t.me/lot_andrey" target="_blank" rel="noopener noreferrer">✉️ Telegram&nbsp;@lot_andrey</a>
     </div>
     <p class="support-blurb">
-      Открытая базовая сборка — просмотр клиентов и удаление записи с сервера. Полная панель PRO (приватный репозиторий) и доступ по подписке — см. Boosty и плашку в интерфейсе после входа.
+      Открытая базовая сборка — AWG клиентов, удаление с сервера, MTProto‑прокси Telegram (Docker). Остальной PRO доступ — см. Boosty и плашку в интерфейсе.
     </p>
   </footer>
 

public/styles.css

@@ -917,7 +917,44 @@ tr:last-child td {
   overflow: auto;
 }
 
-.edition-banner {
+/* --- Telegram MTProto (FREE) --- */
+.mtproto-panel .warp-intro.mtproto-intro {
+  margin-top: 0;
+}
+
+.mtproto-fields {
+  display: grid;
+  gap: 0.35rem 0.85rem;
+  max-width: 28rem;
+  margin: 0.5rem 0 1rem;
+}
+
+.mtproto-fields label {
+  font-size: 0.82rem;
+  color: var(--muted);
+}
+
+.mtproto-fields input {
+  padding: 0.45rem 0.65rem;
+  border-radius: 8px;
+  border: 1px solid var(--line);
+  background: rgba(0, 0, 0, 0.35);
+}
+
+.mtproto-deep-link strong {
+  display: inline-block;
+  margin-right: 0.35rem;
+}
+
+.mtproto-deep-link a {
+  word-break: break-all;
+}
+
+#mtproto-banner {
+  margin: 0.75rem 0 0;
+  white-space: pre-wrap;
+  font-size: 0.82rem;
+}
   margin: 0 0 1rem;
   padding: 0.85rem 1rem;
   border-radius: 14px;