@jant/core 0.5.4 → 0.6.1

package/src/lib/image-dimensions.ts

@@ -0,0 +1,258 @@
+/**
+ * Parse intrinsic pixel dimensions from a raw image header buffer.
+ *
+ * Used as a server-side fallback when an upload client does not provide
+ * `width` / `height`. Only the file header is needed — typically the first
+ * few hundred bytes for PNG/JPEG/GIF/WebP, and up to ~64 KB for AVIF where
+ * the `ispe` property can be nested inside a larger `meta` box.
+ *
+ * Returns `null` when the bytes are too short, the format is unsupported,
+ * or the header is malformed.
+ *
+ * @param mimeType MIME type the upload was declared as (e.g. `image/png`).
+ * @param bytes Bytes from the start of the file. Pass at least
+ *   {@link IMAGE_DIMENSION_PEEK_BYTES} for AVIF reliability; smaller is fine
+ *   for other formats.
+ */
+export function parseImageDimensions(
+  mimeType: string,
+  bytes: Uint8Array,
+): { width: number; height: number } | null {
+  const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
+  switch (mimeType) {
+    case "image/png":
+      return parsePng(view);
+    case "image/jpeg":
+    case "image/jpg":
+      return parseJpeg(view);
+    case "image/gif":
+      return parseGif(view);
+    case "image/webp":
+      return parseWebp(view);
+    case "image/avif":
+      return parseIsoBmff(view, new Set(["avif", "avis"]));
+    default:
+      return null;
+  }
+}
+
+/**
+ * Recommended number of header bytes to feed into {@link parseImageDimensions}.
+ *
+ * Covers AVIF files with EXIF/ICC properties placed before the `ispe` box.
+ * Smaller formats only inspect the first ~30 bytes.
+ */
+export const IMAGE_DIMENSION_PEEK_BYTES = 64 * 1024;
+
+function readChars(view: DataView, offset: number, length: number): string {
+  let out = "";
+  for (let i = 0; i < length; i += 1) {
+    out += String.fromCharCode(view.getUint8(offset + i));
+  }
+  return out;
+}
+
+function parsePng(view: DataView): { width: number; height: number } | null {
+  if (view.byteLength < 24) return null;
+  const signature = [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a];
+  for (let i = 0; i < 8; i += 1) {
+    if (view.getUint8(i) !== signature[i]) return null;
+  }
+  const width = view.getUint32(16, false);
+  const height = view.getUint32(20, false);
+  if (width === 0 || height === 0) return null;
+  return { width, height };
+}
+
+function parseGif(view: DataView): { width: number; height: number } | null {
+  if (view.byteLength < 10) return null;
+  if (
+    view.getUint8(0) !== 0x47 ||
+    view.getUint8(1) !== 0x49 ||
+    view.getUint8(2) !== 0x46
+  ) {
+    return null;
+  }
+  const width = view.getUint16(6, true);
+  const height = view.getUint16(8, true);
+  if (width === 0 || height === 0) return null;
+  return { width, height };
+}
+
+function parseWebp(view: DataView): { width: number; height: number } | null {
+  if (view.byteLength < 16) return null;
+  if (readChars(view, 0, 4) !== "RIFF") return null;
+  if (readChars(view, 8, 4) !== "WEBP") return null;
+  const chunk = readChars(view, 12, 4);
+
+  if (chunk === "VP8 ") {
+    if (view.byteLength < 30) return null;
+    if (
+      view.getUint8(23) !== 0x9d ||
+      view.getUint8(24) !== 0x01 ||
+      view.getUint8(25) !== 0x2a
+    ) {
+      return null;
+    }
+    const width = view.getUint16(26, true) & 0x3fff;
+    const height = view.getUint16(28, true) & 0x3fff;
+    if (width === 0 || height === 0) return null;
+    return { width, height };
+  }
+
+  if (chunk === "VP8L") {
+    if (view.byteLength < 25) return null;
+    if (view.getUint8(20) !== 0x2f) return null;
+    const b0 = view.getUint8(21);
+    const b1 = view.getUint8(22);
+    const b2 = view.getUint8(23);
+    const b3 = view.getUint8(24);
+    const width = 1 + (((b1 & 0x3f) << 8) | b0);
+    const height = 1 + (((b3 & 0x0f) << 10) | (b2 << 2) | ((b1 & 0xc0) >> 6));
+    return { width, height };
+  }
+
+  if (chunk === "VP8X") {
+    if (view.byteLength < 30) return null;
+    const width =
+      1 +
+      (view.getUint8(24) |
+        (view.getUint8(25) << 8) |
+        (view.getUint8(26) << 16));
+    const height =
+      1 +
+      (view.getUint8(27) |
+        (view.getUint8(28) << 8) |
+        (view.getUint8(29) << 16));
+    return { width, height };
+  }
+
+  return null;
+}
+
+function parseJpeg(view: DataView): { width: number; height: number } | null {
+  const length = view.byteLength;
+  if (length < 4) return null;
+  if (view.getUint8(0) !== 0xff || view.getUint8(1) !== 0xd8) return null;
+
+  let i = 2;
+  while (i < length) {
+    while (i < length && view.getUint8(i) !== 0xff) i += 1;
+    while (i < length && view.getUint8(i) === 0xff) i += 1;
+    if (i >= length) return null;
+    const marker = view.getUint8(i);
+    i += 1;
+
+    // Standalone markers without a payload length: 0x00 (escaped FF),
+    // 0x01 (TEM), 0xD0–0xD9 (RSTn / SOI / EOI).
+    if (marker === 0x00 || marker === 0x01) continue;
+    if (marker >= 0xd0 && marker <= 0xd9) continue;
+
+    if (i + 2 > length) return null;
+    const segLen = view.getUint16(i, false);
+    if (segLen < 2) return null;
+
+    const isStartOfFrame =
+      (marker >= 0xc0 && marker <= 0xc3) ||
+      (marker >= 0xc5 && marker <= 0xc7) ||
+      (marker >= 0xc9 && marker <= 0xcb) ||
+      (marker >= 0xcd && marker <= 0xcf);
+
+    if (isStartOfFrame) {
+      // SOF payload: length(2) precision(1) height(2) width(2) components(1)
+      if (i + 7 > length) return null;
+      const height = view.getUint16(i + 3, false);
+      const width = view.getUint16(i + 5, false);
+      if (width === 0 || height === 0) return null;
+      return { width, height };
+    }
+
+    i += segLen;
+  }
+  return null;
+}
+
+interface IsoBox {
+  size: number;
+  type: string;
+  payloadOffset: number;
+  end: number;
+}
+
+function readBox(view: DataView, pos: number): IsoBox | null {
+  if (pos + 8 > view.byteLength) return null;
+  let size = view.getUint32(pos, false);
+  const type = readChars(view, pos + 4, 4);
+  if (size === 1) {
+    // 64-bit largesize: we don't bother — the dimension boxes we need fit in
+    // the first 64 KB of any sane image.
+    return null;
+  }
+  if (size === 0) {
+    size = view.byteLength - pos;
+  }
+  if (size < 8) return null;
+  return { size, type, payloadOffset: pos + 8, end: pos + size };
+}
+
+function findChild(
+  view: DataView,
+  start: number,
+  end: number,
+  type: string,
+): IsoBox | null {
+  let pos = start;
+  while (pos < end) {
+    const box = readBox(view, pos);
+    if (!box) return null;
+    if (box.type === type) return box;
+    pos = box.end;
+  }
+  return null;
+}
+
+function parseIsoBmff(
+  view: DataView,
+  acceptedBrands: Set<string>,
+): { width: number; height: number } | null {
+  const ftyp = readBox(view, 0);
+  if (!ftyp || ftyp.type !== "ftyp") return null;
+
+  // major_brand at payloadOffset, minor_version at +4, compatible_brands from +8
+  let isAccepted = false;
+  if (ftyp.payloadOffset + 4 <= ftyp.end) {
+    isAccepted = acceptedBrands.has(readChars(view, ftyp.payloadOffset, 4));
+  }
+  for (
+    let q = ftyp.payloadOffset + 8;
+    !isAccepted && q + 4 <= ftyp.end;
+    q += 4
+  ) {
+    if (acceptedBrands.has(readChars(view, q, 4))) {
+      isAccepted = true;
+    }
+  }
+  if (!isAccepted) return null;
+
+  const meta = findChild(view, ftyp.end, view.byteLength, "meta");
+  if (!meta) return null;
+
+  // meta is a FullBox: skip the 4-byte version/flags before its children.
+  const iprp = findChild(view, meta.payloadOffset + 4, meta.end, "iprp");
+  if (!iprp) return null;
+
+  const ipco = findChild(view, iprp.payloadOffset, iprp.end, "ipco");
+  if (!ipco) return null;
+
+  // The first ispe inside ipco describes the primary image.
+  const ispe = findChild(view, ipco.payloadOffset, ipco.end, "ispe");
+  if (!ispe) return null;
+
+  // ispe is a FullBox: version(1) flags(3) width(4) height(4)
+  const widthOffset = ispe.payloadOffset + 4;
+  if (widthOffset + 8 > view.byteLength) return null;
+  const width = view.getUint32(widthOffset, false);
+  const height = view.getUint32(widthOffset + 4, false);
+  if (width === 0 || height === 0) return null;
+  return { width, height };
+}

package/src/lib/telegram-entities.ts

@@ -0,0 +1,240 @@
+/**
+ * Telegram message entities → CommonMark.
+ *
+ * Telegram clients ship rich text as a plain `text` string plus an `entities`
+ * array of `{type, offset, length}` spans. Jant stores post bodies as
+ * CommonMark, so the webhook needs to fold the entity styling back into the
+ * text before saving.
+ *
+ * Two design choices worth knowing:
+ *
+ * 1. **Top-level text passes through verbatim**, so anything the user typed as
+ *    literal markdown (`**foo**`, `# Heading`, …) lands in the post unchanged.
+ *    Only text *inside* an entity span is markdown-escaped, because that text
+ *    is then wrapped in delimiters and we don't want stray `*` / `_` / `` ` ``
+ *    to break out of the styled span.
+ * 2. **Unsupported entity types degrade to plain text** rather than throwing.
+ *    Underline, spoiler, custom emoji, and the auto-detected `url` /
+ *    `hashtag` / `mention` family have no CommonMark equivalent that adds
+ *    information beyond the raw text — markdown auto-links bare URLs anyway.
+ *
+ * Telegram offsets are UTF-16 code units, which is exactly what JavaScript
+ * string indexing uses, so no transcoding is needed.
+ */
+
+import type { TelegramMessageEntity } from "./telegram.js";
+
+interface EntityNode {
+  entity: TelegramMessageEntity;
+  children: EntityNode[];
+}
+
+/**
+ * Converts a Telegram message's `text` + `entities` into CommonMark.
+ *
+ * @param text - The raw `message.text` (or `message.caption`)
+ * @param entities - The parallel `message.entities` array, may be empty
+ * @returns The text rewritten as CommonMark; unchanged when `entities` is empty
+ * @example
+ * entitiesToMarkdown("hello world", [
+ *   { type: "bold", offset: 6, length: 5 },
+ * ]); // "hello **world**"
+ */
+export function entitiesToMarkdown(
+  text: string,
+  entities: TelegramMessageEntity[] | undefined,
+): string {
+  if (!entities || entities.length === 0) return text;
+  const roots = buildTree(entities);
+  return renderRoots(text, roots);
+}
+
+/**
+ * Groups entities into a forest by containment.
+ *
+ * Telegram guarantees entities are either nested or disjoint — they never
+ * partially overlap — so a simple "find the nearest enclosing entity" pass is
+ * enough to recover the tree.
+ */
+function buildTree(entities: TelegramMessageEntity[]): EntityNode[] {
+  // Sort parents before children: earlier start first, and for ties the
+  // longer (containing) span first.
+  const sorted = [...entities].sort(
+    (a, b) => a.offset - b.offset || b.length - a.length,
+  );
+  const nodes: EntityNode[] = sorted.map((entity) => ({
+    entity,
+    children: [],
+  }));
+  const roots: EntityNode[] = [];
+  for (const [i, node] of nodes.entries()) {
+    const nodeEnd = node.entity.offset + node.entity.length;
+    let parent: EntityNode | null = null;
+    // Walk previously-processed nodes from latest to earliest so we land on
+    // the smallest ancestor that still strictly contains this entity.
+    for (const cand of nodes.slice(0, i).reverse()) {
+      const candEnd = cand.entity.offset + cand.entity.length;
+      if (cand.entity.offset <= node.entity.offset && candEnd >= nodeEnd) {
+        parent = cand;
+        break;
+      }
+    }
+    if (parent) {
+      parent.children.push(node);
+    } else {
+      roots.push(node);
+    }
+  }
+  return roots;
+}
+
+function renderRoots(text: string, roots: EntityNode[]): string {
+  return renderRange(text, 0, text.length, roots, { escapeGaps: false });
+}
+
+/**
+ * Emits the substring `[start, end)` from `text`, splicing in rendered child
+ * entities and (optionally) escaping the gaps between them.
+ *
+ * @param escapeGaps - True when this range is itself inside an entity span,
+ * so any stray markdown chars would otherwise leak out of the wrapping
+ * delimiters. False at the top level so user-typed markdown is preserved.
+ */
+function renderRange(
+  text: string,
+  start: number,
+  end: number,
+  children: EntityNode[],
+  options: { escapeGaps: boolean },
+): string {
+  const sorted = [...children].sort(
+    (a, b) => a.entity.offset - b.entity.offset,
+  );
+  let out = "";
+  let cursor = start;
+  for (const child of sorted) {
+    if (child.entity.offset > cursor) {
+      const gap = text.slice(cursor, child.entity.offset);
+      out += options.escapeGaps ? escapeInline(gap) : gap;
+    }
+    out += renderNode(text, child);
+    cursor = child.entity.offset + child.entity.length;
+  }
+  if (cursor < end) {
+    const tail = text.slice(cursor, end);
+    out += options.escapeGaps ? escapeInline(tail) : tail;
+  }
+  return out;
+}
+
+function renderNode(text: string, node: EntityNode): string {
+  const { entity, children } = node;
+  const spanStart = entity.offset;
+  const spanEnd = entity.offset + entity.length;
+  const raw = text.slice(spanStart, spanEnd);
+
+  switch (entity.type) {
+    case "bold":
+      return `**${renderInline(text, spanStart, spanEnd, children)}**`;
+    case "italic":
+      // `*` is safer than `_` because underscores inside words don't trigger
+      // emphasis in CommonMark.
+      return `*${renderInline(text, spanStart, spanEnd, children)}*`;
+    case "strikethrough":
+      return `~~${renderInline(text, spanStart, spanEnd, children)}~~`;
+    case "code":
+      return wrapInlineCode(raw);
+    case "pre":
+      return wrapCodeBlock(raw, entity.language);
+    case "text_link":
+      return renderTextLink(text, spanStart, spanEnd, children, entity.url);
+    case "blockquote":
+    case "expandable_blockquote":
+      return renderBlockquote(text, spanStart, spanEnd, children);
+    // Everything else (url, mention, hashtag, cashtag, bot_command, email,
+    // phone_number, text_mention, custom_emoji, underline, spoiler, …) has
+    // no clean CommonMark mapping or adds nothing over the plain text.
+    default:
+      return renderInline(text, spanStart, spanEnd, children);
+  }
+}
+
+function renderInline(
+  text: string,
+  start: number,
+  end: number,
+  children: EntityNode[],
+): string {
+  return renderRange(text, start, end, children, { escapeGaps: true });
+}
+
+function renderTextLink(
+  text: string,
+  start: number,
+  end: number,
+  children: EntityNode[],
+  url: string | undefined,
+): string {
+  const label = renderInline(text, start, end, children);
+  if (!url) return label;
+  return `[${label.replace(/[\\\]]/g, "\\$&")}](${escapeLinkUrl(url)})`;
+}
+
+function renderBlockquote(
+  text: string,
+  start: number,
+  end: number,
+  children: EntityNode[],
+): string {
+  const inner = renderInline(text, start, end, children);
+  return inner
+    .split("\n")
+    .map((line) => `> ${line}`)
+    .join("\n");
+}
+
+/**
+ * Wraps content in the shortest backtick fence that doesn't collide with a
+ * backtick run already present in the content. Required for any `code` span
+ * containing backticks.
+ */
+function wrapInlineCode(content: string): string {
+  const longestRun = longestBacktickRun(content);
+  const fence = "`".repeat(longestRun + 1);
+  // CommonMark: a space pads the content when it would otherwise start or
+  // end with a backtick.
+  const pad = content.startsWith("`") || content.endsWith("`") ? " " : "";
+  return `${fence}${pad}${content}${pad}${fence}`;
+}
+
+function wrapCodeBlock(content: string, language: string | undefined): string {
+  const fenceLen = Math.max(3, longestBacktickRun(content) + 1);
+  const fence = "`".repeat(fenceLen);
+  const lang = language ? language : "";
+  return `${fence}${lang}\n${content}\n${fence}`;
+}
+
+function longestBacktickRun(s: string): number {
+  let max = 0;
+  const matches = s.match(/`+/g);
+  if (!matches) return 0;
+  for (const m of matches) {
+    if (m.length > max) max = m.length;
+  }
+  return max;
+}
+
+/**
+ * Escapes the markdown delimiters that would otherwise let the inner text
+ * break out of a styled span. We deliberately escape only the characters that
+ * carry inline meaning here — `*`, `_`, `` ` ``, `~`, `[`, `]`, `\` — rather
+ * than the full CommonMark punctuation set, so emoji-adjacent punctuation and
+ * other harmless characters stay readable.
+ */
+function escapeInline(s: string): string {
+  return s.replace(/[\\`*_~[\]]/g, "\\$&");
+}
+
+function escapeLinkUrl(url: string): string {
+  return url.replace(/[\\()]/g, "\\$&");
+}

package/src/lib/telegram-pool-webhooks.ts

@@ -0,0 +1,86 @@
+/**
+ * Telegram managed-pool webhook registration.
+ *
+ * In hosted mode the bot pool is platform-owned (`TELEGRAM_BOT_TOKENS`) and
+ * there is no settings-page action that would register its webhooks. Rather
+ * than make the operator run a CLI step, the Node server self-registers on
+ * startup: it derives the webhook URL from `HOSTED_CONTROL_PLANE_BASE_URL`
+ * (the public control-plane host that forwards to core) and points each pool
+ * bot at `<base>/api/telegram/webhook/<botId>`.
+ *
+ * This is gated on `HOSTED_CONTROL_PLANE_BASE_URL` being set, so a local dev
+ * box with `TELEGRAM_BOT_TOKENS` in its env never touches Telegram. It is
+ * idempotent — a `getWebhookInfo` check skips bots already pointed at the
+ * right URL, so a steady-state restart issues only cheap reads. Callers run
+ * it fire-and-forget; it must never block or fail startup.
+ */
+
+import {
+  getHostedControlPlaneBaseUrl,
+  getTelegramBotPool,
+  getTelegramWebhookSecret,
+} from "./env.js";
+import { getWebhookUrl, setMyCommands, setWebhook } from "./telegram.js";
+
+/**
+ * Registers webhooks for every managed-pool bot, skipping those already
+ * pointed at the correct URL. No-ops when the pool is unset, the deployment
+ * is not hosted, or no shared webhook secret is configured.
+ *
+ * @param env - Runtime environment bindings
+ */
+export async function registerTelegramPoolWebhooks(
+  env: object | undefined | null,
+): Promise<void> {
+  const pool = getTelegramBotPool(env);
+  if (pool.length === 0) return;
+
+  const baseUrl = getHostedControlPlaneBaseUrl(env);
+  if (!baseUrl) {
+    // Not a hosted deployment — the pool, if present, is for local testing
+    // and must not have its webhooks touched automatically.
+    return;
+  }
+
+  const secret = getTelegramWebhookSecret(env);
+  if (!secret) {
+    // eslint-disable-next-line no-console -- Misconfiguration must be visible.
+    console.error(
+      "[Jant] TELEGRAM_BOT_TOKENS is set but TELEGRAM_WEBHOOK_SECRET is missing — skipping webhook registration.",
+    );
+    return;
+  }
+
+  const origin = baseUrl.replace(/\/+$/, "");
+  for (const bot of pool) {
+    const webhookUrl = `${origin}/api/telegram/webhook/${bot.botId}`;
+    try {
+      const current = await getWebhookUrl(bot.token);
+      if (current !== webhookUrl) {
+        await setWebhook(bot.token, webhookUrl, secret);
+        // eslint-disable-next-line no-console -- One-line audit trail for a rare write.
+        console.log(`[Jant] Telegram webhook registered: bot=${bot.botId}`);
+      }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      // eslint-disable-next-line no-console -- Registration failures must be visible.
+      console.error(
+        `[Jant] Telegram webhook registration failed: bot=${bot.botId} error=${message}`,
+      );
+      // Webhook failed — skip command sync too; the bot isn't usable anyway.
+      continue;
+    }
+    // Command list is independent of the webhook URL. Re-run unconditionally
+    // so existing deployments pick up command changes without a re-register,
+    // and so the `/` autocomplete reflects the latest list.
+    try {
+      await setMyCommands(bot.token);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      // eslint-disable-next-line no-console -- Polish failure — visible but non-fatal.
+      console.error(
+        `[Jant] Telegram setMyCommands failed: bot=${bot.botId} error=${message}`,
+      );
+    }
+  }
+}

package/src/lib/telegram-settings-status.tsx

@@ -0,0 +1,109 @@
+/**
+ * Shared helpers for reading Telegram settings status and rendering the
+ * settings panel.
+ *
+ * Consumed by:
+ * - GET  /settings/telegram                  — initial page render
+ * - GET  /settings/telegram/status/stream    — live status polling loop that
+ *   swaps the connect view for the connected view the moment a binding lands
+ *
+ * Both call sites render the same `<TelegramContent>` through
+ * `renderTelegramContentHtml`, so any markup change flows to both
+ * automatically.
+ */
+import type { Context } from "hono";
+import { renderSVG } from "uqr";
+import type { Bindings } from "../types.js";
+import type { AppVariables } from "../types/app-context.js";
+import { getTelegramBotPool } from "./env.js";
+import { buildDeepLink, getMe } from "./telegram.js";
+import { toPublicPath } from "./url.js";
+import { I18nProvider } from "../i18n/context.js";
+import {
+  TelegramContent,
+  type TelegramSettingsView,
+} from "../ui/dash/settings/TelegramContent.js";
+
+type Env = { Bindings: Bindings; Variables: AppVariables };
+
+export type { TelegramSettingsView };
+
+/**
+ * Build the `TelegramSettingsView` for the current site. Mirrors what the
+ * `/settings/telegram` GET route does, factored out so the SSE stream can
+ * re-render exactly the same view.
+ */
+export async function readTelegramSettingsView(
+  c: Context<Env>,
+): Promise<TelegramSettingsView> {
+  const pool = getTelegramBotPool(c.env);
+  const managed = pool.length > 0;
+  const status = await c.var.services.telegram.getStatus();
+
+  // Public-facing bot username for the deep link / QR. The managed pool's
+  // first bot is the public face; a bring-your-own bot already has its
+  // username cached from setup.
+  let botUsername = "";
+  const firstBot = pool[0];
+  if (firstBot) {
+    try {
+      const identity = await getMe(firstBot.token);
+      botUsername = identity.username;
+    } catch {
+      botUsername = "";
+    }
+  } else if (status.userBot) {
+    botUsername = status.userBot.username;
+  }
+
+  let connect: TelegramSettingsView["connect"] = null;
+  if (!status.binding && botUsername) {
+    const code = await c.var.services.telegram.getOrCreateCode();
+    const deepLink = buildDeepLink(botUsername, code);
+    connect = { code, deepLink, qrSvg: renderSVG(deepLink), botUsername };
+  }
+
+  return {
+    managed,
+    binding: status.binding
+      ? {
+          telegramUsername: status.binding.telegramUsername,
+          boundAt: status.binding.boundAt,
+        }
+      : null,
+    userBotConfigured: status.userBot !== null,
+    connect,
+  };
+}
+
+/**
+ * Render the Telegram settings panel to an HTML string. The `streamUrl`,
+ * when provided, mounts a Datastar SSE subscription on the connect view so
+ * the page auto-swaps to the connected view the moment a binding lands.
+ */
+export function renderTelegramContentHtml(
+  c: Context<Env>,
+  view: TelegramSettingsView,
+  streamUrl: string,
+): string {
+  // Hono JSX stringifies synchronously when the tree has no async children.
+  // `TelegramContent` is sync, so `String(...)` returns plain HTML. The
+  // I18nProvider binds the per-request i18n instance for `useLingui()`.
+  return String(
+    <I18nProvider c={c}>
+      <TelegramContent
+        view={view}
+        sitePathPrefix={c.var.appConfig.sitePathPrefix}
+        streamUrl={streamUrl}
+      />
+    </I18nProvider>,
+  );
+}
+
+/** URL of the SSE endpoint that streams settings-panel patches. */
+export function getTelegramStatusStreamUrl(c: Context<Env>): string {
+  return toPublicPath(
+    "/settings/telegram/status/stream",
+    c.var.appConfig.sitePathPrefix,
+  );
+}