@inetafrica/open-claudia 3.5.14 → 3.5.17

package/web.js

@@ -373,6 +373,8 @@ async function liveChannels() {
 
 // ── API routes ─────────────────────────────────────────────────────
 
+const USER_ACCESS_ROUTES = new Set(["/api/auth/approve", "/api/auth/deny", "/api/auth/remove"]);
+
 async function handleAPI(req, res, body, dependencies = {}) {
   const url = req.url;
 
@@ -406,7 +408,9 @@ async function handleAPI(req, res, body, dependencies = {}) {
   }
 
   // ── Authentication (Claude / Codex) ──
-  if (url.startsWith("/api/auth/")) {
+  // /api/auth/approve|deny|remove are user access (the Users tab), handled further down; they
+  // must not fall into this provider sign-in block, whose catch-all answers 404.
+  if (url.startsWith("/api/auth/") && !USER_ACCESS_ROUTES.has(url)) {
     const webAuth = require("./core/web-auth");
     const json = (obj, c = 200) => { res.writeHead(c, { "Content-Type": "application/json" }); return res.end(JSON.stringify(obj)); };
     const post = req.method === "POST";
@@ -639,9 +643,21 @@ async function handleAPI(req, res, body, dependencies = {}) {
     return res.end(JSON.stringify({ content: loadLogs() }));
   }
 
+  // Live view of the bot's own browser, watch-only (core/browser-view.js): the running
+  // agent-browser sessions, and one session's screen as server-sent events.
+  if (url.split("?")[0] === "/api/browser/sessions" && req.method === "GET") {
+    res.writeHead(200, { "Content-Type": "application/json", "Cache-Control": "no-store" });
+    return res.end(JSON.stringify({ sessions: require("./core/browser-view").describeSessions() }));
+  }
+  if (url.split("?")[0] === "/api/browser/stream" && req.method === "GET") {
+    const query = new URL(url, "http://localhost").searchParams;
+    return require("./core/browser-view").serveStream(res, query.get("session") || "", { fps: query.get("fps") });
+  }
+
   // Token usage history (for the Usage dashboard)
   if (url === "/api/usage") {
-    const records = loadUsageHistory();
+    // Turn records only: compaction records (kind "compaction") carry no turn.
+    const records = loadUsageHistory().filter((r) => r.kind !== "compaction");
     const pkg = JSON.parse(fs.readFileSync(path.join(__dirname, "package.json"), "utf-8"));
     const env = loadEnv();
     const alertPolicy = usageAlertPolicy(env);
@@ -799,8 +815,14 @@ function botDisplayName() {
   return "Open Claudia";
 }
 
+// BOT_NAME lands inside the page's HTML and inside JS template literals in
+// the page script, so it is escaped for both (entities decode back to text).
+function pageEsc(s) {
+  return String(s).replace(/[&<>"'`$\\]/g, (c) => "&#" + c.charCodeAt(0) + ";");
+}
+
 function getHTML() {
-  const botName = botDisplayName();
+  const botName = pageEsc(botDisplayName());
   return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -911,13 +933,14 @@ async function doLogin() {
   const pw = $("#pw").value;
   const r = await api("/api/login", { method: "POST", body: { password: pw } });
   if (r?.ok) init();
-  else $("#login-msg").innerHTML = '<div class="msg err">' + (r?.error || "Wrong password") + '</div>';
+  else $("#login-msg").innerHTML = '<div class="msg err">' + esc(r?.error || "Wrong password") + '</div>';
 }
 
 function render() {
   const tabs = [
     { id: "dashboard", label: "Dashboard" },
     { id: "chat", label: "Chat" },
+    { id: "browser", label: "Browser" },
     { id: "usage", label: "Usage" },
     { id: "auth", label: "Users" },
     { id: "credentials", label: "Credentials" },
@@ -934,7 +957,7 @@ function render() {
   $("#app").innerHTML = \`
     <div class="container">
       <h1>${botName}</h1>
-      <p class="subtitle">v\${status.version}</p>
+      <p class="subtitle">v\${esc(status.version)}</p>
       <div class="tabs">
         \${tabs.map(t => \`<div class="tab \${currentTab===t.id?'active':''}" onclick="switchTab('\${t.id}')">\${t.label}</div>\`).join("")}
       </div>
@@ -945,31 +968,39 @@ function render() {
 
 function switchTab(tab) {
   if (tab !== "chat" && window.chatES) { try { window.chatES.close(); } catch (e) {} window.chatES = null; }
+  if (tab !== "browser" && window.browserES) { try { window.browserES.close(); } catch (e) {} window.browserES = null; }
   currentTab = tab;
   render();
 }
 
-// ── Chat tab ──
-function chatEsc(s) {
-  return String(s == null ? "" : s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+// Every server-provided string that goes into innerHTML passes through esc.
+function esc(s) {
+  return String(s == null ? "" : s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
+// A value passed as an argument in an inline onclick="...": a JS string
+// literal, then escaped for the attribute.
+function jsArg(v) { return esc(JSON.stringify(String(v == null ? "" : v))); }
+// Only http(s) links are clickable.
+function safeUrl(u) { return /^https?:\\/\\//i.test(String(u || "")) ? esc(u) : "#"; }
+
+// ── Chat tab ──
 
 function chatFrameHTML(f) {
   if (f.kind === "message") {
     const cls = f.role === "user" ? "user" : "bot";
-    let inner = chatEsc(f.text);
+    let inner = esc(f.text);
     if (f.buttons && f.buttons.length) {
       inner += '<div class="chat-btns">' + f.buttons.map(function (b) {
-        return '<button onclick="chatAction(\\'' + chatEsc(b.id) + '\\',\\'' + chatEsc(b.payload || b.id) + '\\',\\'' + chatEsc(f.messageId) + '\\')">' + chatEsc(b.label) + '</button>';
+        return '<button onclick="chatAction(' + jsArg(b.id) + ',' + jsArg(b.payload || b.id) + ',' + jsArg(f.messageId) + ')">' + esc(b.label) + '</button>';
       }).join("") + '</div>';
     }
-    return '<div class="chat-bubble ' + cls + '" data-mid="' + chatEsc(f.messageId) + '">' + inner + '</div>';
+    return '<div class="chat-bubble ' + cls + '" data-mid="' + esc(f.messageId) + '">' + inner + '</div>';
   }
   if (f.kind === "file") {
-    return '<div class="chat-bubble bot" data-mid="' + chatEsc(f.messageId) + '">📎 <a href="' + chatEsc(f.url) + '" target="_blank" rel="noopener">' + chatEsc(f.fileName || "file") + '</a>' + (f.caption ? '<br>' + chatEsc(f.caption) : '') + '</div>';
+    return '<div class="chat-bubble bot" data-mid="' + esc(f.messageId) + '">📎 <a href="' + safeUrl(f.url) + '" target="_blank" rel="noopener">' + esc(f.fileName || "file") + '</a>' + (f.caption ? '<br>' + esc(f.caption) : '') + '</div>';
   }
   if (f.kind === "voice") {
-    return '<div class="chat-bubble bot" data-mid="' + chatEsc(f.messageId) + '"><audio controls src="' + chatEsc(f.url) + '"></audio></div>';
+    return '<div class="chat-bubble bot" data-mid="' + esc(f.messageId) + '"><audio controls src="' + esc(f.url) + '"></audio></div>';
   }
   return "";
 }
@@ -1058,13 +1089,13 @@ async function loadTab() {
       <div class="card">
         <div class="status-bar">
           <span><span class="status-dot green"></span> Bot configured</span>
-          <span>v\${status.version}</span>
+          <span>v\${esc(status.version)}</span>
         </div>
-        <div class="list-item"><span>Workspace</span><span>\${status.workspace}</span></div>
-        <div class="list-item"><span>Bot Token</span><span>\${status.botToken}</span></div>
-        <div class="list-item"><span>Chat ID</span><span>\${status.chatId}</span></div>
-        <div class="list-item"><span>Default provider</span><span>\${status.defaultProvider?.label || "None (model turns unavailable)"}</span></div>
-        \${(status.providers || []).map(p => '<div class="list-item"><span>' + p.label + '</span><span>' + p.availability.state + ' · ' + p.compatibility.state + ' · auth ' + p.auth.state + '</span></div>').join("")}
+        <div class="list-item"><span>Workspace</span><span>\${esc(status.workspace)}</span></div>
+        <div class="list-item"><span>Bot Token</span><span>\${esc(status.botToken)}</span></div>
+        <div class="list-item"><span>Chat ID</span><span>\${esc(status.chatId)}</span></div>
+        <div class="list-item"><span>Default provider</span><span>\${esc(status.defaultProvider?.label || "None (model turns unavailable)")}</span></div>
+        \${(status.providers || []).map(providerRowHTML).join("")}
       </div>\`;
   }
   else if (currentTab === "usage") {
@@ -1081,7 +1112,7 @@ async function loadTab() {
     el.innerHTML =
       '<div class="card">' +
         '<h2>Token Rate</h2>' +
-        '<p style="color:#888;font-size:13px;">Current: v' + u.currentVersion + ' · ' + u.totalRecords + ' turns logged</p>' +
+        '<p style="color:#888;font-size:13px;">Current: v' + esc(u.currentVersion) + ' · ' + esc(u.totalRecords) + ' turns logged</p>' +
         '<div class="metric-grid">' +
           '<div class="metric"><div class="label">Latest context</div><div class="value">' + fmtK(latestCtx) + '</div></div>' +
           '<div class="metric"><div class="label">Recent baseline</div><div class="value">' + fmtK(baselineCtx) + '</div></div>' +
@@ -1110,8 +1141,8 @@ async function loadTab() {
         <h2>Authorized Users</h2>
         \${auth.authorized.map(a => \`
           <div class="list-item">
-            <span>\${a.name || a.chatId} \${a.username ? "@"+a.username : ""} \${a.isOwner ? "(owner)" : ""}</span>
-            \${!a.isOwner ? \`<button class="danger" onclick="removeAuth('\${a.chatId}')">Remove</button>\` : ""}
+            <span>\${esc(a.name || a.chatId)} \${a.username ? "@"+esc(a.username) : ""} \${a.isOwner ? "(owner)" : ""}</span>
+            \${!a.isOwner ? \`<button class="danger" onclick="removeAuth(\${jsArg(a.chatId)})">Remove</button>\` : ""}
           </div>\`).join("") || "<p>None</p>"}
       </div>
       \${auth.pending.length > 0 ? \`
@@ -1119,10 +1150,10 @@ async function loadTab() {
         <h2>Pending Requests</h2>
         \${auth.pending.map(p => \`
           <div class="list-item">
-            <span>\${p.name} \${p.username ? "@"+p.username : ""}</span>
+            <span>\${esc(p.name)} \${p.username ? "@"+esc(p.username) : ""}</span>
             <span>
-              <button onclick="approveAuth('\${p.chatId}')">Approve</button>
-              <button class="danger" onclick="denyAuth('\${p.chatId}')">Deny</button>
+              <button onclick="approveAuth(\${jsArg(p.chatId)})">Approve</button>
+              <button class="danger" onclick="denyAuth(\${jsArg(p.chatId)})">Deny</button>
             </span>
           </div>\`).join("")}
       </div>\` : ""}\`;
@@ -1162,7 +1193,7 @@ async function loadTab() {
       <div class="card">
         <div class="form-group">
           <label>Assistant Identity & Personality</label>
-          <textarea id="soul-content" rows="15">\${soul.content}</textarea>
+          <textarea id="soul-content" rows="15">\${esc(soul.content)}</textarea>
         </div>
         <button onclick="saveSoul()">Save</button>
         <span id="soul-msg" style="margin-left:12px;font-size:13px;color:#888;"></span>
@@ -1176,7 +1207,7 @@ async function loadTab() {
         <h2>Scheduled Tasks</h2>
         \${crons.map((c, i) => \`
           <div class="list-item">
-            <span>\${c.label || c.prompt.slice(0,40)} — \${c.schedule} — \${c.project}</span>
+            <span>\${esc(c.label || String(c.prompt || "").slice(0,40))} — \${esc(c.schedule)} — \${esc(c.project)}</span>
           </div>\`).join("") || "<p>No cron jobs. Use /cron in Telegram to add them.</p>"}
       </div>\`;
   }
@@ -1188,11 +1219,43 @@ async function loadTab() {
         <h2>Conversation History</h2>
         \${sessions.slice().reverse().slice(0,25).map(s => \`
           <div class="list-item">
-            <span>\${s.title || s.id} · \${s.provider || "legacy"} · \${s.project}</span>
+            <span>\${esc(s.title || s.id)} · \${esc(s.provider || "legacy")} · \${esc(s.project)}</span>
             <span style="color:#666;font-size:12px;">\${s.lastUsed ? new Date(s.lastUsed).toLocaleDateString() : "unknown"}</span>
           </div>\`).join("") || "<p>No sessions yet.</p>"}
       </div>\`;
   }
+  else if (currentTab === "browser") {
+    // Watch-only live view of the bot's own browser (GET /api/browser/sessions + /api/browser/stream).
+    const r = await api("/api/browser/sessions");
+    if (!r) return;
+    const list = r.sessions || [];
+    if (window.browserES) { try { window.browserES.close(); } catch (e) {} window.browserES = null; }
+    if (!list.length) {
+      el.innerHTML = '<div class="card"><h2>Browser</h2><p style="color:#888">The browser is not running. It shows here while the bot is using it.</p><button class="secondary" onclick="loadTab()">Check again</button></div>';
+      return;
+    }
+    const pick = list.some(x => x.name === window.browserPick) ? window.browserPick : list[0].name;
+    el.innerHTML = '<div class="card">' +
+      '<div style="display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;">' +
+      '<h2 style="margin:0">Browser</h2>' +
+      (list.length > 1 ? '<select onchange="window.browserPick=this.value;loadTab()">' + list.map(x => '<option value="' + esc(x.name) + '"' + (x.name === pick ? ' selected' : '') + '>' + esc(x.name) + '</option>').join('') + '</select>' : '') +
+      '</div>' +
+      '<div id="bv-url" style="color:#888;font-size:12px;margin-bottom:8px;word-break:break-all"></div>' +
+      '<img id="bv-img" alt="" style="width:100%;border-radius:8px;background:#000;min-height:120px">' +
+      '<div id="bv-state" style="color:#888;font-size:12px;margin-top:6px">Connecting...</div></div>';
+    const es = new EventSource('/api/browser/stream?session=' + encodeURIComponent(pick) + '&fps=5');
+    window.browserES = es;
+    es.addEventListener('frame', (ev) => {
+      const m = JSON.parse(ev.data);
+      const img = $('#bv-img'); if (img) img.src = 'data:image/jpeg;base64,' + m.data;
+      const st = $('#bv-state'); if (st) st.textContent = 'Live - watch only';
+    });
+    es.addEventListener('url', (ev) => { const u = $('#bv-url'); if (u) u.textContent = JSON.parse(ev.data).url || ''; });
+    es.addEventListener('end', () => {
+      es.close(); window.browserES = null;
+      const st = $('#bv-state'); if (st) st.textContent = 'The browser closed.';
+    });
+  }
   else if (currentTab === "logs") {
     const logs = await api("/api/logs");
     if (!logs) return;
@@ -1202,7 +1265,7 @@ async function loadTab() {
           <h2 style="margin:0">Logs</h2>
           <button class="secondary" onclick="loadTab()">Refresh</button>
         </div>
-        <pre>\${logs.content}</pre>
+        <pre>\${esc(logs.content)}</pre>
       </div>\`;
   }
   else if (currentTab === "settings") {
@@ -1262,7 +1325,7 @@ async function loadTab() {
           <div class="form-group">
             <label>\${f.label}</label>
             <div style="color:#777;font-size:11px;margin:2px 0 6px;">\${f.desc}</div>
-            <input id="cfg-\${f.k}" value="\${config[f.k] || ""}" placeholder="\${f.ph || ""}">
+            <input id="cfg-\${f.k}" value="\${esc(config[f.k] || "")}" placeholder="\${f.ph || ""}">
           </div>\`).join("")}
       </div>\`).join("");
   }
@@ -1278,12 +1341,12 @@ function usagePolicyHTML(policy, trend) {
   const parts = [];
   if (policy.absoluteContextTokens > 0) parts.push('absolute ceiling ' + fmtK(policy.absoluteContextTokens));
   if (policy.rateMultiplier > 0) {
-    parts.push('rate ceiling ' + policy.rateMultiplier + 'x after ' + policy.minBaselineTurns + ' baseline turns');
+    parts.push('rate ceiling ' + esc(policy.rateMultiplier) + 'x after ' + esc(policy.minBaselineTurns) + ' baseline turns');
   }
   const baseline = trend && trend.baselineTurns ? trend.baselineTurns : 0;
   return '<div class="policy">Alert policy: ' + parts.join(' · ') +
     ' · cooldown ' + Math.round((policy.cooldownMs || 0) / 60000) + ' min' +
-    ' · baseline sample ' + baseline + '/' + policy.baselineTurns + ' turns</div>';
+    ' · baseline sample ' + esc(baseline) + '/' + esc(policy.baselineTurns) + ' turns</div>';
 }
 
 function usageTableHTML(rows, keyName) {
@@ -1292,9 +1355,9 @@ function usageTableHTML(rows, keyName) {
     '</th><th>turns</th><th>avg ctx/turn</th><th>avg in</th><th>avg out</th><th>cost</th></tr></thead><tbody>';
   const body = rows.map(function (r) {
     const name = r[keyName] || "—";
-    return '<tr><td>' + name + '</td><td>' + r.turns + '</td><td>' + fmtK(r.avgContextTokens) +
+    return '<tr><td>' + esc(name) + '</td><td>' + esc(r.turns) + '</td><td>' + fmtK(r.avgContextTokens) +
       '</td><td>' + fmtK(r.avgInputTokens) + '</td><td>' + fmtK(r.avgOutputTokens) +
-      '</td><td>$' + (r.totalCostUsd || 0).toFixed(3) + '</td></tr>';
+      '</td><td>$' + Number(r.totalCostUsd || 0).toFixed(3) + '</td></tr>';
   }).join("");
   return head + body + "</tbody></table>";
 }
@@ -1365,7 +1428,7 @@ async function pollClaudeAuth() {
   }
   if (st.url) {
     box.innerHTML = \`<p style="font-size:13px;">Open this URL, sign in, then paste the code Claude gives you:</p>
-      <p style="word-break:break-all;"><a href="\${st.url}" target="_blank">\${st.url}</a></p>
+      <p style="word-break:break-all;"><a href="\${safeUrl(st.url)}" target="_blank" rel="noopener">\${esc(st.url)}</a></p>
       <input id="claude-code" placeholder="Paste code here">
       <button onclick="submitClaudeCodeWeb()" style="margin-top:8px;">Submit code</button>\`;
   } else {
@@ -1388,7 +1451,7 @@ async function saveClaudeTokenWeb() {
 async function startCodexAuth() {
   $("#codex-flow").innerHTML = "<p class='subtitle'>Starting…</p>";
   const r = await api("/api/auth/codex/start", { method: "POST" });
-  if (r && r.error) { $("#codex-flow").innerHTML = "<div class='msg err'>" + r.error + "</div>"; return; }
+  if (r && r.error) { $("#codex-flow").innerHTML = "<div class='msg err'>" + esc(r.error) + "</div>"; return; }
   pollCodexAuth();
 }
 async function pollCodexAuth() {
@@ -1404,8 +1467,8 @@ async function pollCodexAuth() {
   }
   if (st.url) {
     box.innerHTML = \`<p style="font-size:13px;">Open this URL and enter the code:</p>
-      <p style="word-break:break-all;"><a href="\${st.url}" target="_blank">\${st.url}</a></p>
-      \${st.code ? "<p>Device code: <b>" + st.code + "</b></p>" : ""}
+      <p style="word-break:break-all;"><a href="\${safeUrl(st.url)}" target="_blank" rel="noopener">\${esc(st.url)}</a></p>
+      \${st.code ? "<p>Device code: <b>" + esc(st.code) + "</b></p>" : ""}
       <p class='subtitle'>Waiting for you to finish in the browser…</p>\`;
   } else {
     box.innerHTML = "<p class='subtitle'>Starting…</p>";
@@ -1441,10 +1504,14 @@ async function saveConfig() {
   setTimeout(() => $("#config-msg").textContent = "", 3000);
 }
 
+function providerRowHTML(p) {
+  return '<div class="list-item"><span>' + esc(p.label) + '</span><span>' + esc(p.availability.state) + ' · ' + esc(p.compatibility.state) + ' · auth ' + esc(p.auth.state) + '</span></div>';
+}
+
 function renderSetup() {
   const providerRows = (status.providers || []).map(p =>
-    '<div class="list-item"><span>' + p.label + '</span><span>' + p.availability.state + ' · ' + p.compatibility.state + ' · auth ' + p.auth.state + '</span></div>' +
-    (p.recovery ? '<div style="color:#888;font-size:11px;margin:-8px 0 10px;">' + p.recovery.split("\\n")[0] + '</div>' : "")
+    providerRowHTML(p) +
+    (p.recovery ? '<div style="color:#888;font-size:11px;margin:-8px 0 10px;">' + esc(String(p.recovery).split("\\n")[0]) + '</div>' : "")
   ).join("");
   $("#app").innerHTML = \`
     <div class="container">
@@ -1484,7 +1551,7 @@ async function doSetup() {
     currentTab = "dashboard";
     await init();
   } else {
-    $("#setup-msg").innerHTML = \`<div class="msg err">\${r?.error || "Setup failed"}</div>\`;
+    $("#setup-msg").innerHTML = \`<div class="msg err">\${esc(r?.error || "Setup failed")}</div>\`;
   }
 }
 
@@ -1496,23 +1563,55 @@ init();
 
 // ── Server ─────────────────────────────────────────────────────────
 
+// A failing handler answers 500 and is logged here. It must never become an
+// unhandled rejection: bot.js reports those to the owner, and some routes
+// (/otp/) need no sign-in, so anyone could make the bot message its owner.
+function answerFailure(res, err) {
+  console.error("web: request failed:", err?.message || err);
+  if (res.headersSent) { res.destroy(); return; }
+  res.writeHead(500, { "Content-Type": "text/plain; charset=utf-8" });
+  res.end("Server error\n");
+}
+
 let webServer = null;
 
 function startWebServer(options = {}) {
   if (webServer) return webServer;
   ensureConfigDir(CONFIG_DIR);
 
-  const server = http.createServer(async (req, res) => {
+  const server = http.createServer((req, res) => {
+    handleRequest(req, res).catch((e) => answerFailure(res, e));
+  });
+  async function handleRequest(req, res) {
     // CORS for local dev
     res.setHeader("Access-Control-Allow-Origin", "*");
     res.setHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
     res.setHeader("Access-Control-Allow-Headers", "Content-Type");
     if (req.method === "OPTIONS") { res.writeHead(204); return res.end(); }
 
-    // One-time magic-link login: /otp/<token> from the bot's /dashboard
-    // command. Burns the token, sets the session cookie, redirects to /.
-    if (req.method === "GET" && req.url.startsWith("/otp/")) {
-      const token = decodeURIComponent(req.url.slice(5).split("?")[0].split("/")[0]);
+    // One-time magic-link login: /otp/<token> from the bot's /dashboard command. Opening the
+    // link (GET) only shows a page that posts it back; the POST burns the token, sets the
+    // session cookie and redirects to /. Link previews and scanners only fetch (Kazee Chat
+    // fetches every link in a message, the bot's own replies included: HEAD, then GET), so they
+    // can no longer use the link up before the person opens it. A malformed link answers 400.
+    if (req.url.startsWith("/otp/") && ["GET", "HEAD", "POST"].includes(req.method)) {
+      let token;
+      try { token = decodeURIComponent(req.url.slice(5).split("?")[0].split("/")[0]); }
+      catch (e) {
+        res.writeHead(400, { "Content-Type": "text/plain; charset=utf-8" });
+        return res.end("Bad link. Send /dashboard in the bot for a fresh one.\n");
+      }
+      const page = (status, inner, extra = "") => {
+        res.writeHead(status, { "Content-Type": "text/html; charset=utf-8", "Cache-Control": "no-store", "Referrer-Policy": "same-origin", "X-Robots-Tag": "noindex" });
+        if (req.method === "HEAD") return res.end();
+        return res.end(`<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>body{font-family:-apple-system,sans-serif;background:#0f0f0f;color:#e0e0e0;display:flex;align-items:center;justify-content:center;min-height:100vh;text-align:center;padding:20px}button{font-size:16px;padding:10px 18px;border-radius:8px;border:0;background:#6366f1;color:#fff}</style></head><body><div>${inner}</div>${extra}</body></html>`);
+      };
+      const expired = () => page(401, '<h2>Link expired or already used</h2><p style="color:#888">Send /dashboard in the bot for a fresh link.</p>');
+      if (!/^[0-9a-f]{64}$/.test(token)) return expired();
+      if (req.method !== "POST") {
+        return page(200, `<form method="post" action="/otp/${token}"><h2>Opening your dashboard…</h2><button type="submit">Open dashboard</button></form>`, "<script>document.forms[0].submit()</script>");
+      }
+      req.resume();
       const { consume } = require("./core/web-otp");
       if (consume(token)) {
         res.writeHead(302, {
@@ -1521,21 +1620,20 @@ function startWebServer(options = {}) {
         });
         return res.end();
       }
-      res.writeHead(401, { "Content-Type": "text/html" });
-      return res.end('<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>body{font-family:-apple-system,sans-serif;background:#0f0f0f;color:#e0e0e0;display:flex;align-items:center;justify-content:center;min-height:100vh;text-align:center;padding:20px}</style></head><body><div><h2>Link expired or already used</h2><p style="color:#888">Send /dashboard in the bot for a fresh link.</p></div></body></html>');
+      return expired();
     }
 
     if (req.url.startsWith("/api/")) {
       let body = "";
       req.on("data", (d) => { body += d; });
-      req.on("end", () => handleAPI(req, res, body, options));
+      req.on("end", () => handleAPI(req, res, body, options).catch((e) => answerFailure(res, e)));
       return;
     }
 
     // Serve HTML
     res.writeHead(200, { "Content-Type": "text/html" });
     res.end(getHTML());
-  });
+  }
 
   server.listen(PORT, () => {
     console.log(`Web UI running on http://localhost:${PORT}`);