@deadragdoll/tellymcp 0.0.12 → 0.0.14

package/dist/services/features/telegram-mcp/src/app/webapp/assets.js

@@ -5,6 +5,7 @@ exports.renderWebAppHtml = renderWebAppHtml;
 const node_fs_1 = require("node:fs");
 const XTERM_WEBAPP_CSS = (0, node_fs_1.readFileSync)(require.resolve("@xterm/xterm/css/xterm.css"), "utf8");
 const XTERM_WEBAPP_JS = (0, node_fs_1.readFileSync)(require.resolve("@xterm/xterm/lib/xterm.js"), "utf8");
+const XTERM_FIT_WEBAPP_JS = (0, node_fs_1.readFileSync)(require.resolve("@xterm/addon-fit/lib/addon-fit.js"), "utf8");
 exports.WEBAPP_STYLES_CSS = `
 :root {
   color-scheme: dark;
@@ -258,18 +259,19 @@ const config = window.__TELEGRAM_MCP_WEBAPP__;
 const state = {
   token: null,
   sessionId: null,
-  timer: null,
   actionBusy: false,
-  pollIntervalMs: 2000,
   wrapEnabled: true,
   recoverPromise: null,
   xterm: null,
+  xtermFitAddon: null,
   xtermInputBound: false,
   liveSocket: null,
   liveSocketConnected: false,
+  liveConnectPromise: null,
+  liveReconnectTimer: null,
+  liveReconnectAttempt: 0,
   lastRenderSignature: null,
   resizeObserver: null,
-  fittedRows: null,
 };
 
 const elements = {
@@ -302,7 +304,10 @@ function setUpdated(text) {
 }
 
 function setLiveModeStatus(mode) {
-  setStatus(mode === "stream" ? "Live (stream)" : "Live (poll)");
+  setStatus(
+    mode === "stream" ? "Live (stream)" : "Reconnecting live stream...",
+    mode !== "stream",
+  );
 }
 
 function createHttpError(message, status) {
@@ -372,47 +377,29 @@ function getXtermCtor() {
   return window.Terminal || window.XtermTerminal || null;
 }
 
-function getTerminalCellHeight(terminal) {
-  const cell =
-    terminal &&
-    terminal._core &&
-    terminal._core._renderService &&
-    terminal._core._renderService.dimensions &&
-    terminal._core._renderService.dimensions.css &&
-    terminal._core._renderService.dimensions.css.cell;
-
-  if (!cell || !cell.height) {
-    return null;
-  }
-
-  return cell.height;
+function getXtermFitAddonCtor() {
+  return window.FitAddon?.FitAddon || null;
 }
 
-function fitTerminalRows(notifyServer = true) {
+function fitTerminal(notifyServer = true) {
   const terminal = state.xterm;
-  if (!terminal || !elements.terminal) {
+  const fitAddon = state.xtermFitAddon;
+  if (!terminal || !fitAddon) {
     return;
   }
 
-  const cellHeight = getTerminalCellHeight(terminal);
-  if (!cellHeight) {
-    return;
-  }
-
-  const nextRows = Math.max(5, Math.floor(elements.terminal.clientHeight / cellHeight));
-  if (!Number.isFinite(nextRows) || nextRows <= 0) {
+  const previousCols = terminal.cols;
+  const previousRows = terminal.rows;
+  try {
+    fitAddon.fit();
+  } catch (_error) {
     return;
   }
 
-  if (state.fittedRows === nextRows) {
+  if (terminal.cols === previousCols && terminal.rows === previousRows) {
     return;
   }
 
-  state.fittedRows = nextRows;
-  const currentCols =
-    typeof terminal.cols === "number" && terminal.cols > 0 ? terminal.cols : 80;
-  terminal.resize(currentCols, nextRows);
-
   if (
     notifyServer &&
     state.liveSocketConnected &&
@@ -420,7 +407,7 @@ function fitTerminalRows(notifyServer = true) {
     state.liveSocket.readyState === WebSocket.OPEN
   ) {
     state.liveSocket.send(
-      JSON.stringify({ type: "resize", cols: currentCols, rows: nextRows }),
+      JSON.stringify({ type: "resize", cols: terminal.cols, rows: terminal.rows }),
     );
   }
 }
@@ -431,7 +418,8 @@ function ensureXterm() {
   }
 
   const TerminalCtor = getXtermCtor();
-  if (!TerminalCtor || !elements.terminal) {
+  const FitAddonCtor = getXtermFitAddonCtor();
+  if (!TerminalCtor || !FitAddonCtor || !elements.terminal) {
     return null;
   }
 
@@ -453,6 +441,8 @@ function ensureXterm() {
       allowTransparency: true,
       scrollback: 4000,
   });
+  const fitAddon = new FitAddonCtor();
+  terminal.loadAddon(fitAddon);
   terminal.open(elements.terminal);
   terminal.onData((data) => {
     if (!state.liveSocketConnected || !state.liveSocket) {
@@ -470,52 +460,27 @@ function ensureXterm() {
   });
   if (!state.resizeObserver && typeof ResizeObserver !== "undefined") {
     state.resizeObserver = new ResizeObserver(() => {
-      fitTerminalRows();
+      fitTerminal();
     });
     state.resizeObserver.observe(elements.terminal);
   }
   window.addEventListener("resize", () => {
-    fitTerminalRows();
+    fitTerminal();
   });
   state.xterm = terminal;
+  state.xtermFitAddon = fitAddon;
   window.setTimeout(() => {
-    fitTerminalRows(false);
+    fitTerminal();
   }, 0);
   return terminal;
 }
 
-function estimateTerminalSizeFromPayload(payload, options = {}) {
-  const text = payload.ansi || payload.content || "";
-  const lines = text.split("\\n");
-  const useViewportRows =
-    options.preferViewportRows === true &&
-    Number.isFinite(payload.rows) &&
-    payload.rows > 0;
-  const rows = useViewportRows
-    ? Math.max(2, Math.min(120, payload.rows))
-    : Math.max(2, Math.min(400, lines.length || payload.rows || 24));
-  const baseCols = Number.isFinite(payload.cols) && payload.cols > 0
-      ? payload.cols
-      : 40;
-  const cols = Math.max(
-    baseCols,
-    Math.min(
-      240,
-      Number.isFinite(payload.cols) && payload.cols > 0
-        ? payload.cols
-        : lines.reduce((max, line) => Math.max(max, line.replace(/\\u001b\\[[0-9;]*m/g, "").length), 0) || 80,
-    ),
-  );
-  return { cols, rows };
-}
-
 function renderTerminalPayload(payload, options = {}) {
   const signature = JSON.stringify({
     ansi: payload.ansi || "",
     content: payload.content || "",
     cols: payload.cols || null,
     rows: payload.rows || null,
-    preferViewportRows: options.preferViewportRows === true,
   });
   if (state.lastRenderSignature === signature) {
     return;
@@ -529,14 +494,13 @@ function renderTerminalPayload(payload, options = {}) {
     return;
   }
 
-  const size = estimateTerminalSizeFromPayload(payload, options);
   const previousViewportY = terminal.buffer.active.viewportY;
   const previousBaseY = terminal.buffer.active.baseY;
   const wasNearBottom =
     previousBaseY <= 0 ||
     previousViewportY >= Math.max(0, previousBaseY - 2);
   terminal.reset();
-  terminal.resize(size.cols, size.rows);
+  fitTerminal();
   terminal.write(payload.ansi || payload.content || "");
   if (options.forceScrollBottom === true || wasNearBottom) {
     terminal.scrollToBottom();
@@ -544,7 +508,7 @@ function renderTerminalPayload(payload, options = {}) {
     terminal.scrollToLine(Math.min(previousViewportY, terminal.buffer.active.baseY));
   }
   window.setTimeout(() => {
-    fitTerminalRows(false);
+    fitTerminal();
   }, 0);
   state.lastRenderSignature = signature;
 }
@@ -888,7 +852,6 @@ async function bootstrap() {
 function applyBootstrapPayload(bootstrapPayload) {
   state.token = bootstrapPayload.token;
   state.sessionId = bootstrapPayload.session_id;
-  state.pollIntervalMs = bootstrapPayload.poll_interval_ms || state.pollIntervalMs;
   elements.session.textContent =
     bootstrapPayload.session_label || bootstrapPayload.session_id;
   elements.session.hidden = false;
@@ -928,22 +891,6 @@ async function withRecoveredSession(operation) {
   }
 }
 
-async function fetchVisibleBuffer() {
-  const response = await fetch(config.basePath + "/api/view", {
-    method: "GET",
-    headers: {
-      authorization: "Bearer " + state.token,
-    },
-  });
-
-  if (!response.ok) {
-    const text = await response.text();
-    throw createHttpError(text || "Failed to fetch visible buffer.", response.status);
-  }
-
-  return response.json();
-}
-
 async function sendAction(action) {
   if (state.actionBusy || !state.token) {
     return;
@@ -1036,74 +983,132 @@ function closeLiveSocket() {
   }
 }
 
-async function connectLiveSocket() {
-  closeLiveSocket();
-  if (!state.token) {
-    throw new Error("WebApp token is missing");
+function clearLiveReconnectTimer() {
+  if (state.liveReconnectTimer) {
+    clearTimeout(state.liveReconnectTimer);
+    state.liveReconnectTimer = null;
   }
+}
 
-  const socket = new WebSocket(getLiveWsUrl());
-  state.liveSocket = socket;
+function scheduleLiveReconnect() {
+  if (
+    state.liveSocketConnected ||
+    state.liveReconnectTimer ||
+    !state.token
+  ) {
+    return;
+  }
+
+  const delay = Math.min(
+    30000,
+    1000 * 2 ** Math.min(state.liveReconnectAttempt, 5),
+  );
+  state.liveReconnectAttempt += 1;
+  state.liveReconnectTimer = setTimeout(async () => {
+    state.liveReconnectTimer = null;
+    try {
+      await connectLiveSocket();
+    } catch (_error) {
+      setLiveModeStatus("reconnect");
+      scheduleLiveReconnect();
+    }
+  }, delay);
+}
+
+function connectLiveSocket() {
+  if (
+    state.liveSocketConnected &&
+    state.liveSocket?.readyState === WebSocket.OPEN
+  ) {
+    return Promise.resolve();
+  }
+  if (state.liveConnectPromise) {
+    return state.liveConnectPromise;
+  }
 
-  await new Promise((resolve, reject) => {
-    let settled = false;
+  state.liveConnectPromise = (async () => {
+    closeLiveSocket();
+    if (!state.token) {
+      throw new Error("WebApp token is missing");
+    }
 
-    socket.addEventListener("open", () => {
-      state.liveSocketConnected = true;
-      settled = true;
-      stopPolling();
-      resolve();
-    }, { once: true });
+    const socket = new WebSocket(getLiveWsUrl());
+    state.liveSocket = socket;
 
-    socket.addEventListener("error", () => {
-      if (settled) {
+    socket.addEventListener("message", (event) => {
+      if (state.liveSocket !== socket) {
         return;
       }
-      settled = true;
-      reject(new Error("Live stream connection failed"));
-    }, { once: true });
-  });
-
-  socket.addEventListener("message", (event) => {
-    const payload = JSON.parse(String(event.data));
-    if (payload.type === "snapshot") {
-      renderTerminalPayload(payload, {
-        preferViewportRows: true,
-        forceScrollBottom: true,
-      });
-      setUpdated(formatCapturedAt(payload.captured_at));
-      setLiveModeStatus("stream");
-      return;
-    }
-    if (payload.type === "data") {
-      const terminal = ensureXterm();
-      if (terminal && typeof payload.data === "string") {
-        const previousViewportY = terminal.buffer.active.viewportY;
-        const previousBaseY = terminal.buffer.active.baseY;
-        const wasNearBottom =
-          previousBaseY <= 0 ||
-          previousViewportY >= Math.max(0, previousBaseY - 2);
-        terminal.write(payload.data);
-        if (wasNearBottom) {
-          terminal.scrollToBottom();
+      const payload = JSON.parse(String(event.data));
+      if (payload.type === "snapshot") {
+        state.liveReconnectAttempt = 0;
+        renderTerminalPayload(payload, {
+          forceScrollBottom: true,
+        });
+        setUpdated(formatCapturedAt(payload.captured_at));
+        setLiveModeStatus("stream");
+        return;
+      }
+      if (payload.type === "data") {
+        const terminal = ensureXterm();
+        if (terminal && typeof payload.data === "string") {
+          const previousViewportY = terminal.buffer.active.viewportY;
+          const previousBaseY = terminal.buffer.active.baseY;
+          const wasNearBottom =
+            previousBaseY <= 0 ||
+            previousViewportY >= Math.max(0, previousBaseY - 2);
+          terminal.write(payload.data);
+          if (wasNearBottom) {
+            terminal.scrollToBottom();
+          }
         }
+        return;
       }
-      return;
-    }
-    if (payload.type === "exit") {
-      setStatus("Terminal exited", true);
-      return;
-    }
-  });
+      if (payload.type === "exit") {
+        setStatus("Terminal exited", true);
+      }
+    });
 
-  socket.addEventListener("close", () => {
-    state.liveSocketConnected = false;
-    if (state.liveSocket === socket) {
-      state.liveSocket = null;
-    }
-    setLiveModeStatus("poll");
-    startPolling();
+    await new Promise((resolve, reject) => {
+      let settled = false;
+
+      socket.addEventListener("open", () => {
+        if (state.liveSocket !== socket) {
+          return;
+        }
+        state.liveSocketConnected = true;
+        clearLiveReconnectTimer();
+        settled = true;
+        resolve();
+      }, { once: true });
+
+      socket.addEventListener("error", () => {
+        if (settled) {
+          return;
+        }
+        settled = true;
+        reject(new Error("Live stream connection failed"));
+      }, { once: true });
+
+      socket.addEventListener("close", () => {
+        if (state.liveSocket !== socket) {
+          return;
+        }
+        state.liveSocket = null;
+        state.liveSocketConnected = false;
+        if (!settled) {
+          settled = true;
+          reject(new Error("Live stream connection closed"));
+        }
+        setLiveModeStatus("reconnect");
+        scheduleLiveReconnect();
+      });
+    });
+  })().finally(() => {
+    state.liveConnectPromise = null;
   });
+
+  return state.liveConnectPromise;
 }
 
 function confirmInterrupt() {
@@ -1119,33 +1124,6 @@ function confirmInterrupt() {
   });
 }
 
-async function refreshVisibleBuffer() {
-  const payload = await withRecoveredSession(fetchVisibleBuffer);
-  renderTerminalPayload(payload);
-  setUpdated(formatCapturedAt(payload.captured_at));
-  setLiveModeStatus("poll");
-}
-
-function stopPolling() {
-  if (state.timer) {
-    clearTimeout(state.timer);
-    state.timer = null;
-  }
-}
-
-function startPolling() {
-  stopPolling();
-  state.timer = setTimeout(async () => {
-    try {
-      await refreshVisibleBuffer();
-    } catch (error) {
-      setStatus(error.message || String(error), true);
-    } finally {
-      startPolling();
-    }
-  }, state.pollIntervalMs);
-}
-
 function bindUi() {
   elements.wrap.addEventListener("click", () => {
     toggleWrapMode();
@@ -1235,8 +1213,8 @@ async function main() {
     try {
       await connectLiveSocket();
     } catch (_error) {
-      await refreshVisibleBuffer();
-      startPolling();
+      setLiveModeStatus("reconnect");
+      scheduleLiveReconnect();
     }
   } catch (error) {
     const message = error instanceof Error ? error.message : String(error);
@@ -1298,6 +1276,9 @@ ${XTERM_WEBAPP_CSS}</style>
 ${XTERM_WEBAPP_JS}
     </script>
     <script>
+${XTERM_FIT_WEBAPP_JS}
+    </script>
+    <script>
       (() => {
         const source = ${JSON.stringify(exports.WEBAPP_APP_JS)};
         (0, eval)(source);