bosun 0.28.0 → 0.28.2

package/telegram-bot.mjs

@@ -132,6 +132,18 @@ const statusBoardStatePath = resolve(
 const fwCooldownPath = resolve(repoRoot, ".cache", "ve-fw-cooldown.json");
 const FW_COOLDOWN_MS = 24 * 60 * 60 * 1000; // 24 hours
 
+// ── Message History Auto-Cleanup ──────────────────────────────────────────
+const msgHistoryPath = resolve(repoRoot, ".cache", "ve-message-history.json");
+// Days to keep bot messages in chat. 0 = disabled. Default: 3 days.
+const HISTORY_RETENTION_DAYS = (() => {
+  const v = Number(process.env.TELEGRAM_HISTORY_RETENTION_DAYS ?? "3");
+  return Number.isFinite(v) && v > 0 ? v : 0;
+})();
+const HISTORY_RETENTION_MS = HISTORY_RETENTION_DAYS * 24 * 60 * 60 * 1000;
+const HISTORY_CLEANUP_INTERVAL_MS = 6 * 60 * 60 * 1000; // run every 6 hours
+const HISTORY_INITIAL_DELAY_MS = 2 * 60 * 1000;         // wait 2 min after boot
+const HISTORY_MAX_TRACKED = 10_000;                      // safety cap
+
 function resolveVeKanbanPs1Path() {
   const modulePath = resolve(BosunDir, "ve-kanban.ps1");
   if (existsSync(modulePath)) return modulePath;
@@ -799,7 +811,7 @@ let agentChatId = null; // chat where agent is running
 // ── Sticky UI menu state (keep /menu accessible at bottom) ─────────────────
 const stickyMenuState = new Map();
 const stickyMenuTimers = new Map();
-const STICKY_MENU_BUMP_MS = 200;
+const STICKY_MENU_BUMP_MS = 600;
 
 // ── Queues ──────────────────────────────────────────────────────────────────
 
@@ -1017,7 +1029,10 @@ function scheduleStickyMenuBump(chatId, lastMessageId) {
   if (!state?.enabled || !state?.screenId) return;
   if (lastMessageId && state.messageId && lastMessageId === state.messageId)
     return;
-  if (stickyMenuTimers.has(chatId)) return;
+  // Debounce: cancel existing timer and schedule a fresh one so rapid
+  // messages don't cause multiple bumps (reduces flicker)
+  const existing = stickyMenuTimers.get(chatId);
+  if (existing) clearTimeout(existing);
   const timer = setTimeout(() => {
     stickyMenuTimers.delete(chatId);
     bumpStickyMenu(chatId).catch(() => {});
@@ -1028,6 +1043,8 @@ function scheduleStickyMenuBump(chatId, lastMessageId) {
 async function bumpStickyMenu(chatId) {
   const state = stickyMenuState.get(chatId);
   if (!state?.enabled || !state?.screenId) return;
+  // On bump (new messages pushed menu up), clear any inline result
+  // so the menu shows clean navigation when it reappears at the bottom
   await showUiScreen(chatId, null, state.screenId, state.params || {}, {
     sticky: true,
   });
@@ -1112,6 +1129,7 @@ async function sendDirect(chatId, text, options = {}) {
         const data = await res.json();
         if (data.ok && data.result?.message_id) {
           lastMessageId = data.result.message_id;
+          recordSentMessage(chatId, lastMessageId);
         }
       } catch (err) {
         console.warn(`[telegram-bot] send JSON parse error: ${err.message}`);
@@ -1210,6 +1228,85 @@ async function deleteDirect(chatId, messageId) {
   }
 }
 
+// ── Message History Helpers ───────────────────────────────────────────────────
+
+/** Lazy-loaded in-memory list of sent message records. */
+let _msgHistory = null;
+let _msgHistoryDirty = false;
+
+function _loadMsgHistory() {
+  if (_msgHistory !== null) return;
+  try {
+    const raw = readFileSync(msgHistoryPath, "utf8");
+    const data = JSON.parse(raw);
+    _msgHistory = Array.isArray(data.messages) ? data.messages : [];
+  } catch {
+    _msgHistory = [];
+  }
+}
+
+function _saveMsgHistory() {
+  if (!_msgHistory) return;
+  try {
+    mkdirSync(resolve(repoRoot, ".cache"), { recursive: true });
+    writeFileSync(
+      msgHistoryPath,
+      JSON.stringify({ messages: _msgHistory }, null, 2),
+      "utf8",
+    );
+    _msgHistoryDirty = false;
+  } catch {
+    /* best effort */
+  }
+}
+
+/**
+ * Record a newly sent message ID so it can be cleaned up later.
+ * No-op when HISTORY_RETENTION_MS is 0 (feature disabled).
+ */
+function recordSentMessage(chatId, messageId) {
+  if (!HISTORY_RETENTION_MS || !messageId) return;
+  _loadMsgHistory();
+  _msgHistory.push({ chat_id: chatId, message_id: messageId, sent_at: Date.now() });
+  if (_msgHistory.length > HISTORY_MAX_TRACKED) {
+    _msgHistory = _msgHistory.slice(-HISTORY_MAX_TRACKED);
+  }
+  _msgHistoryDirty = true;
+}
+
+/**
+ * Delete all tracked bot messages older than HISTORY_RETENTION_MS.
+ * Failures are silently swallowed — Telegram may refuse deletes for messages
+ * older than 48 h in private chats; we just skip those gracefully.
+ */
+async function pruneMessageHistory() {
+  if (!HISTORY_RETENTION_MS) return;
+  _loadMsgHistory();
+  if (_msgHistoryDirty) _saveMsgHistory();
+
+  const cutoff = Date.now() - HISTORY_RETENTION_MS;
+  const toDelete = _msgHistory.filter((m) => m.sent_at < cutoff);
+  if (toDelete.length === 0) return;
+
+  console.log(
+    `[telegram-bot] auto-cleanup: deleting ${toDelete.length} message(s) older than ${HISTORY_RETENTION_DAYS}d`,
+  );
+
+  let i = 0;
+  for (const m of toDelete) {
+    await deleteDirect(m.chat_id, m.message_id);
+    i++;
+    // Pace at ~20 deletes/s to stay well under Telegram’s 30 msg/s limit
+    if (i % 20 === 0) await new Promise((r) => setTimeout(r, 1000));
+  }
+
+  _msgHistory = _msgHistory.filter((m) => m.sent_at >= cutoff);
+  _saveMsgHistory();
+  console.log(
+    `[telegram-bot] auto-cleanup: done. ${_msgHistory.length} messages remaining in history.`,
+  );
+}
+
 /**
  * Answer a Telegram callback query (required to dismiss the "loading" indicator).
  * @param {string} callbackQueryId - The callback_query.id from the update
@@ -2586,6 +2683,10 @@ const COMMANDS = {
     desc: "Show all active monitor/task/review/conflict agents",
   },
   "/logs": { handler: cmdLogs, desc: "Recent monitor logs" },
+  "/telemetry": {
+    handler: cmdTelemetry,
+    desc: "Telemetry summary: /telemetry [errors|executors|alerts]",
+  },
   "/agentlogs": {
     handler: cmdAgentLogs,
     desc: "Agent output for branch: /agentlogs <branch>",
@@ -3354,6 +3455,39 @@ function parseUiAction(data) {
   return { type, rest, raw: payload };
 }
 
+// ── Set of commands whose output can be captured and rendered inline ─────────
+const INLINE_CAPTURABLE_COMMANDS = new Set([
+  "/status", "/health", "/tasks", "/logs", "/agents",
+  "/branches", "/diff", "/threads", "/sdk", "/kanban",
+  "/executor", "/hooks", "/sentinel", "/anomalies",
+  "/worktrees", "/region", "/presence", "/coordinator",
+  "/history", "/metrics", "/repos", "/container",
+  "/whatsapp", "/model",
+]);
+
+/**
+ * Capture the text output of a command without sending it to Telegram.
+ * Returns the captured text (joined with double-newline) or null on failure.
+ */
+async function captureCommandOutput(command) {
+  const parts = command.split(/\s+/);
+  const cmd = parts[0].toLowerCase().replace(/@\w+/, "");
+  const cmdArgs = parts.slice(1).join(" ");
+  const entry = COMMANDS[cmd] || COMMANDS[cmd.replace(/-/g, "_")];
+  if (!entry?.handler) return null;
+  _uiCaptureBuffer = [];
+  try {
+    await entry.handler("__ui_capture__", cmdArgs);
+  } catch {
+    _uiCaptureBuffer = null;
+    return null;
+  }
+  const captured = _uiCaptureBuffer;
+  _uiCaptureBuffer = null;
+  const content = captured.join("\n\n").trim();
+  return content || null;
+}
+
 async function dispatchUiCommand(chatId, command) {
   const cmd = command.split(/\s+/)[0].toLowerCase().replace(/@\w+/, "");
   if (FAST_COMMANDS.has(cmd)) {
@@ -3975,7 +4109,7 @@ Object.assign(UI_SCREENS, {
         // Monitoring & Tools
         [
           uiButton("📁 Logs & Git", uiGoAction("logs")),
-          uiButton("🔌 Integrations", uiGoAction("integrations")),
+          uiButton("📈 Telemetry", uiGoAction("telemetry")),
           uiButton("🧠 Session", uiGoAction("session")),
         ],
         // Quick Actions
@@ -4026,6 +4160,27 @@ Object.assign(UI_SCREENS, {
           uiButton("🎯 Coordinator", uiCmdAction("/coordinator")),
           uiButton("📝 Logs", uiCmdAction("/logs 50")),
         ],
+        [
+          uiButton("📈 Telemetry", uiGoAction("telemetry")),
+        ],
+        uiNavRow("home"),
+      ]),
+  },
+  telemetry: {
+    title: "Telemetry",
+    parent: "home",
+    body: () =>
+      "Analytics and quality signals from recent agent runs.",
+    keyboard: () =>
+      buildKeyboard([
+        [
+          uiButton("📈 Summary", uiCmdAction("/telemetry")),
+          uiButton("🧯 Errors", uiCmdAction("/telemetry errors")),
+        ],
+        [
+          uiButton("🧪 Executors", uiCmdAction("/telemetry executors")),
+          uiButton("🚨 Alerts", uiCmdAction("/telemetry alerts")),
+        ],
         uiNavRow("home"),
       ]),
   },
@@ -5286,7 +5441,22 @@ async function showUiScreen(chatId, messageId, screenId, params = {}, opts = {})
       ? await screen.body(ctx)
       : screen.body || "";
   const title = screen.title ? `*${screen.title}*` : "";
-  const text = [title, body].filter(Boolean).join("\n\n");
+
+  // Support inline result rendering — show command output above the keyboard
+  const inlineResult = opts.result || "";
+  const textParts = [title, body];
+  if (inlineResult) {
+    // Truncate result to leave room for title/body/keyboard in 4096 char limit
+    const maxResultLen = 3200 - title.length - body.length;
+    const trimmedResult = inlineResult.length > maxResultLen
+      ? inlineResult.slice(0, maxResultLen - 20) + "\n…(truncated)"
+      : inlineResult;
+    textParts.push("━━━━━━━━━━━━━━━━━━━━━━━━");
+    textParts.push(trimmedResult);
+    textParts.push("━━━━━━━━━━━━━━━━━━━━━━━━");
+  }
+  const text = textParts.filter(Boolean).join("\n\n");
+
   const keyboard =
     typeof screen.keyboard === "function"
       ? await screen.keyboard(ctx)
@@ -5357,10 +5527,35 @@ async function handleUiAction({ chatId, messageId, data }) {
     return;
   }
   if (type === "cmd") {
+    const command = raw.slice(4);
+    const cmd = command.split(/\s+/)[0].toLowerCase().replace(/@\w+/, "");
+
+    // For capturable read-only commands, render output inline in the menu message
+    // instead of sending a separate message (eliminates menu disappear/reappear)
+    if (INLINE_CAPTURABLE_COMMANDS.has(cmd)) {
+      try {
+        const captured = await captureCommandOutput(command);
+        if (captured) {
+          // Determine which screen to render the result in
+          const state = stickyMenuState.get(chatId);
+          const parentScreen = state?.screenId || "home";
+          const resolvedMessageId =
+            staleSticky ? null : (isStickyMenuMessage(chatId, messageId) ? messageId : null);
+          await showUiScreen(chatId, resolvedMessageId || messageId, parentScreen, state?.params || {}, {
+            sticky: stickyEnabled,
+            result: captured,
+          });
+          return;
+        }
+      } catch {
+        // Fall through to regular dispatch on capture failure
+      }
+    }
+
+    // For action commands (restart, cleanup, etc.), dispatch normally
     if (staleSticky && messageId) {
       await deleteDirect(chatId, messageId);
     }
-    const command = raw.slice(4);
     await dispatchUiCommand(chatId, command);
     return;
   }
@@ -5401,6 +5596,26 @@ async function handleUiAction({ chatId, messageId, data }) {
       return;
     }
     if (payload.type === "cmd") {
+      const tokenCmd = payload.command?.split(/\s+/)[0]?.toLowerCase()?.replace(/@\w+/, "") || "";
+      // Try inline rendering for capturable commands
+      if (INLINE_CAPTURABLE_COMMANDS.has(tokenCmd)) {
+        try {
+          const captured = await captureCommandOutput(payload.command);
+          if (captured) {
+            const state = stickyMenuState.get(chatId);
+            const parentScreen = state?.screenId || "home";
+            const resolvedMessageId =
+              staleSticky ? null : (isStickyMenuMessage(chatId, messageId) ? messageId : null);
+            await showUiScreen(chatId, resolvedMessageId || messageId, parentScreen, state?.params || {}, {
+              sticky: stickyEnabled,
+              result: captured,
+            });
+            return;
+          }
+        } catch {
+          // Fall through
+        }
+      }
       if (staleSticky && messageId) {
         await deleteDirect(chatId, messageId);
       }
@@ -5803,6 +6018,155 @@ async function cmdHelpFull(chatId) {
   await sendReply(chatId, lines.join("\n"));
 }
 
+async function readJsonlTail(path, maxLines = 2000) {
+  try {
+    const raw = await readFile(path, "utf8");
+    if (!raw) return [];
+    const lines = raw.split(/\r?\n/).filter(Boolean);
+    const tail = lines.slice(-maxLines);
+    return tail
+      .map((line) => {
+        try {
+          return JSON.parse(line);
+        } catch {
+          return null;
+        }
+      })
+      .filter(Boolean);
+  } catch {
+    return [];
+  }
+}
+
+function withinDays(entry, days) {
+  if (!days) return true;
+  const ts = Date.parse(entry?.timestamp || "");
+  if (!Number.isFinite(ts)) return true;
+  return ts >= Date.now() - days * 24 * 60 * 60 * 1000;
+}
+
+function summarizeTelemetry(metrics, days) {
+  const filtered = metrics.filter((m) => withinDays(m, days));
+  if (filtered.length === 0) return null;
+  const total = filtered.length;
+  const success = filtered.filter(
+    (m) => m.outcome?.status === "completed" || m.metrics?.success === true,
+  ).length;
+  const durations = filtered.map((m) => m.metrics?.duration_ms || 0);
+  const avgDuration =
+    durations.length > 0
+      ? Math.round(
+          durations.reduce((a, b) => a + b, 0) / durations.length / 1000,
+        )
+      : 0;
+  const totalErrors = filtered.reduce(
+    (sum, m) => sum + (m.error_summary?.total_errors || m.metrics?.errors || 0),
+    0,
+  );
+  const executors = {};
+  for (const m of filtered) {
+    const exec = m.executor || "unknown";
+    executors[exec] = (executors[exec] || 0) + 1;
+  }
+  return {
+    total,
+    success,
+    successRate: total > 0 ? Math.round((success / total) * 100) : 0,
+    avgDuration,
+    totalErrors,
+    executors,
+  };
+}
+
+async function cmdTelemetry(chatId, args = "") {
+  const mode = String(args || "").trim().toLowerCase();
+  const days = Number(process.env.TELEMETRY_DAYS || 7);
+  const logDir = resolve(repoRoot, ".cache", "agent-work-logs");
+  const metricsPath = resolve(logDir, "agent-metrics.jsonl");
+  const errorsPath = resolve(logDir, "agent-errors.jsonl");
+  const alertsPath = resolve(logDir, "agent-alerts.jsonl");
+
+  if (mode === "errors") {
+    const errors = (await readJsonlTail(errorsPath, 1000)).filter((e) =>
+      withinDays(e, days),
+    );
+    if (errors.length === 0) {
+      return sendReply(chatId, "No error telemetry found.");
+    }
+    const byFingerprint = new Map();
+    for (const e of errors) {
+      const fp = e.data?.error_fingerprint || e.data?.error_message || "unknown";
+      byFingerprint.set(fp, (byFingerprint.get(fp) || 0) + 1);
+    }
+    const top = [...byFingerprint.entries()]
+      .sort((a, b) => b[1] - a[1])
+      .slice(0, 8);
+    const lines = [
+      "🧯 Telemetry — Top Errors",
+      `Window: last ${days}d`,
+      "",
+    ];
+    for (const [fp, count] of top) {
+      lines.push(`• ${fp.slice(0, 80)} (${count})`);
+    }
+    return sendReply(chatId, lines.join("\n"));
+  }
+
+  if (mode === "executors") {
+    const metrics = await readJsonlTail(metricsPath, 2000);
+    const summary = summarizeTelemetry(metrics, days);
+    if (!summary) return sendReply(chatId, "No telemetry metrics found.");
+    const lines = [
+      "🧪 Telemetry — Executor Mix",
+      `Window: last ${days}d`,
+      "",
+    ];
+    for (const [exec, count] of Object.entries(summary.executors)) {
+      lines.push(`• ${exec}: ${count}`);
+    }
+    return sendReply(chatId, lines.join("\n"));
+  }
+
+  if (mode === "alerts") {
+    const alerts = (await readJsonlTail(alertsPath, 200)).filter((a) =>
+      withinDays(a, days),
+    );
+    if (alerts.length === 0) {
+      return sendReply(chatId, "No analyzer alerts found.");
+    }
+    const lines = [
+      "🚨 Telemetry — Recent Alerts",
+      `Window: last ${days}d`,
+      "",
+      ...alerts.slice(-10).map((a) => {
+        const sev = (a.severity || "medium").toUpperCase();
+        const attempt = a.attempt_id || "unknown";
+        const type = a.type || "alert";
+        return `• ${sev} ${type} (${attempt})`;
+      }),
+    ];
+    return sendReply(chatId, lines.join("\n"));
+  }
+
+  const metrics = await readJsonlTail(metricsPath, 2000);
+  const summary = summarizeTelemetry(metrics, days);
+  if (!summary) {
+    return sendReply(chatId, "No telemetry metrics found.");
+  }
+  const lines = [
+    "📈 Telemetry Summary",
+    `Window: last ${days}d`,
+    "",
+    `Sessions: ${summary.total}`,
+    `Success: ${summary.success}/${summary.total} (${summary.successRate}%)`,
+    `Avg duration: ${summary.avgDuration}s`,
+    `Total errors: ${summary.totalErrors}`,
+    "",
+    "Use /telemetry errors | executors | alerts for drill‑down.",
+  ];
+  return sendReply(chatId, lines.join("\n"));
+}
+
 async function cmdAsk(chatId, args) {
   const prompt = String(args || "").trim();
   if (!prompt) {
@@ -10073,6 +10437,30 @@ export async function startTelegramBot() {
       telegramChatId,
       `🤖 Bosun primary agent online (${getPrimaryAgentName()}).\n\nType /menu for the control center or send any message to chat with the agent.`,
     );
+
+    // ── SECURITY: Alert when ALLOW_UNSAFE is enabled (especially with tunnel) ──
+    const _isUnsafe = ["1", "true", "yes"].includes(
+      String(process.env.TELEGRAM_UI_ALLOW_UNSAFE || "").toLowerCase(),
+    );
+    if (_isUnsafe) {
+      const _tunnelMode = (process.env.TELEGRAM_UI_TUNNEL || "auto").toLowerCase();
+      const _tunnelActive = _tunnelMode !== "disabled" && _tunnelMode !== "off" && _tunnelMode !== "0";
+      const severity = _tunnelActive
+        ? "⛔ *CRITICAL SECURITY WARNING*"
+        : "⚠️ *Security Warning*";
+      const tunnelNote = _tunnelActive
+        ? "\n\n🔴 *Tunnel is active* — your UI is exposed to the *public internet*. Anyone who discovers the URL can control your machine, execute code, and read secrets."
+        : "";
+      await sendDirect(
+        telegramChatId,
+        `${severity}\n\n` +
+          "`TELEGRAM_UI_ALLOW_UNSAFE=true` — authentication is *completely disabled* on the web UI. " +
+          "Anyone with the URL can send commands to agents, modify settings, and access API keys." +
+          tunnelNote +
+          "\n\nTo fix: set `TELEGRAM_UI_ALLOW_UNSAFE=false` in your .env and restart.",
+        { parse_mode: "Markdown" },
+      );
+    }
   }
 
   console.log("[telegram-bot] started — listening for messages");
@@ -10082,6 +10470,32 @@ export async function startTelegramBot() {
     console.error(`[telegram-bot] fatal poll loop error: ${err.message}`);
     polling = false;
   });
+
+  // ── Message history auto-cleanup ──
+  if (HISTORY_RETENTION_MS) {
+    // Flush in-memory buffer to disk every 5 minutes
+    const flushTimer = setInterval(() => {
+      if (_msgHistoryDirty) _saveMsgHistory();
+    }, 5 * 60 * 1000);
+    flushTimer.unref();
+
+    // Run first prune after HISTORY_INITIAL_DELAY_MS (2 min), then every 6 h
+    setTimeout(() => {
+      pruneMessageHistory().catch((err) =>
+        console.warn(`[telegram-bot] message history cleanup error: ${err.message}`),
+      );
+      const cleanupTimer = setInterval(
+        () =>
+          pruneMessageHistory().catch((err) =>
+            console.warn(
+              `[telegram-bot] message history cleanup error: ${err.message}`,
+            ),
+          ),
+        HISTORY_CLEANUP_INTERVAL_MS,
+      );
+      cleanupTimer.unref();
+    }, HISTORY_INITIAL_DELAY_MS);
+  }
 }
 
 /**

package/ui/app.js

@@ -82,6 +82,7 @@ import { AgentsTab } from "./tabs/agents.js";
 import { InfraTab } from "./tabs/infra.js";
 import { ControlTab } from "./tabs/control.js";
 import { LogsTab } from "./tabs/logs.js";
+import { TelemetryTab } from "./tabs/telemetry.js";
 import { SettingsTab } from "./tabs/settings.js";
 
 /* ── Placeholder signals for connection quality (may be provided by api.js) ── */
@@ -203,6 +204,7 @@ const TAB_COMPONENTS = {
   infra: InfraTab,
   control: ControlTab,
   logs: LogsTab,
+  telemetry: TelemetryTab,
   settings: SettingsTab,
 };
 

package/ui/components/shared.js

@@ -128,7 +128,7 @@ export function SkeletonCard({ height = "80px", className = "" }) {
  * Bottom-sheet modal with drag handle, title, swipe-to-dismiss, and TG BackButton integration.
  * @param {{title?: string, open?: boolean, onClose: () => void, children?: any, contentClassName?: string}} props
  */
-export function Modal({ title, open = true, onClose, children, contentClassName = "" }) {
+export function Modal({ title, open = true, onClose, children, contentClassName = "", footer }) {
   const [visible, setVisible] = useState(false);
   const contentRef = useRef(null);
   const dragState = useRef({ startY: 0, startRect: 0, dragging: false });
@@ -179,6 +179,32 @@ export function Modal({ title, open = true, onClose, children, contentClassName
     }
   });
 
+  // Visual viewport (software keyboard) awareness
+  // Sets --keyboard-height on :root so the modal can lift above the keyboard
+  useEffect(() => {
+    if (!open) return;
+    const vv = window.visualViewport;
+    if (!vv) return;
+    const update = () => {
+      // keyboard height = amount the visual viewport has shrunk from the layout viewport
+      const kh = Math.max(0, window.innerHeight - vv.height - vv.offsetTop);
+      document.documentElement.style.setProperty("--keyboard-height", `${kh}px`);
+    };
+    vv.addEventListener("resize", update);
+    vv.addEventListener("scroll", update);
+    update();
+    return () => {
+      vv.removeEventListener("resize", update);
+      vv.removeEventListener("scroll", update);
+      document.documentElement.style.setProperty("--keyboard-height", "0px");
+    };
+  }, [open]);
+
+  // Prevent touches on the scrollable body from triggering swipe-to-dismiss
+  const handleBodyTouchStart = useCallback((e) => {
+    e.stopPropagation();
+  }, []);
+
   const handleTouchStart = useCallback((e) => {
     const el = contentRef.current;
     if (!el) return;
@@ -317,7 +343,10 @@ export function Modal({ title, open = true, onClose, children, contentClassName
             ${ICONS.close}
           </button>
         </div>
-        ${children}
+        <div class="modal-body" onTouchStart=${handleBodyTouchStart}>
+          ${children}
+        </div>
+        ${footer ? html`<div class="modal-footer">${footer}</div>` : null}
       </div>
     </div>
   `;

package/ui/demo.html

@@ -669,6 +669,14 @@
         return { data: STATE.status };
       if (route === '/api/executor')
         return { data: { ...STATE.status, maxParallel: STATE.maxParallel, paused: STATE.paused, executors: STATE.executors } };
+      if (route === '/api/telemetry/summary')
+        return { data: { status: 'ok', updatedAt: Date.now(), totals: { tasks: STATE.tasks.length, executors: STATE.executors.length } } };
+      if (route === '/api/telemetry/errors')
+        return { data: [] };
+      if (route === '/api/telemetry/executors')
+        return { data: STATE.executors.map((e) => ({ ...e, status: e.enabled ? 'active' : 'disabled' })) };
+      if (route === '/api/telemetry/alerts')
+        return { data: [] };
       if (route === '/api/executor/pause') {
         STATE.paused = true; addLog('info', 'executor', 'Executor paused');
         return { ok: true, paused: true };

package/ui/modules/icons.js

@@ -88,6 +88,20 @@ export const ICONS = {
     <circle cx="19" cy="12" r="1.6" />
   </svg>`,
 
+  chart: html`<svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <line x1="4" y1="19" x2="20" y2="19" />
+    <rect x="6" y="10" width="3" height="9" />
+    <rect x="11" y="6" width="3" height="13" />
+    <rect x="16" y="13" width="3" height="6" />
+  </svg>`,
+
   /* ── Status / Feedback ── */
   check: html`<svg
     viewBox="0 0 24 24"

package/ui/modules/router.js

@@ -82,5 +82,6 @@ export const TAB_CONFIG = [
   { id: "chat", label: "Chat", icon: "chat" },
   { id: "infra", label: "Infra", icon: "server" },
   { id: "logs", label: "Logs", icon: "terminal" },
+  { id: "telemetry", label: "Telemetry", icon: "chart" },
   { id: "settings", label: "Settings", icon: "settings" },
 ];