@inetafrica/open-claudia 3.0.12 → 3.0.13

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## v3.0.13 — chat with the bot from its own dashboard
+
+- **The web dashboard gains a Chat tab — a real channel, not a side door.** A new in-process `WebAdapter` (`channels/web/`) registers as a first-class channel whenever the web UI is up: messages typed in the dashboard flow through the same router, identity, packs, transcripts, and approval pipeline as Telegram/Kazee/voice, and the bot's replies (including inline approval buttons, files, voice notes, live typing) stream back over `/api/chat/stream` (SSE with history replay on connect). New session-gated routes: `GET /api/chat/stream`, `POST /api/chat/send`, `POST /api/chat/action`, `GET /api/chat/media/<id>`. The channel is fixed single-owner (`web-owner`): the dashboard session already gates every call, so `access.js`/`identity.js` authorize it as the owner and — under unified identity — it resolves to the owner's canonical brain like every other owner channel.
+- **Platform SSO: `POST /api/otp/mint` (control-token only).** AgentSpace can mint a one-time magic-link token (`/otp/<token>`, 10-min TTL, single-use — the existing `core/web-otp` machinery behind `/dashboard`) over `BOT_CONTROL_TOKEN`. Dashboard sessions get a 403: they are already logged in and gain nothing, so the surface stays strictly machine-to-machine.
+- **SSE unsubscribe bug fixed before it shipped.** Cleanup was hooked on `req.on("close")`, which in modern Node fires as soon as the GET body completes — every stream subscriber was torn down instantly after the history frame. Cleanup now hooks `res.on("close")` (actual connection teardown), verified by an end-to-end live-frame test.
+- **Agent-space / OpenClaw:** no new deps, no new env, no schema change; Docker image builds identically (FROM the pre-baked `:base`). Existing pods pick this up only on their next approved image upgrade; new pods get it immediately. `channels/` already ships in `files`, so the adapter rides the existing package layout.
+
 ## v3.0.10 — Kazee-only pods are first-class
 
 - **/doctor no longer demands Telegram env on a Kazee-only install.** `health.js` required `TELEGRAM_BOT_TOKEN`/`TELEGRAM_CHAT_ID` unconditionally — a pod provisioned with `CHANNELS=kazee` failed its env check despite being perfectly configured. Required keys are now derived from `CHANNELS` (default `telegram`, preserving legacy behaviour): telegram installs require the Telegram pair, kazee installs require `KAZEE_BOT_TOKEN`, and `WORKSPACE` stays universal.

package/bot.js

@@ -271,6 +271,10 @@ setInterval(checkForUpdates, 5 * 60 * 1000);
   if (process.env.WEB_UI === "true") {
     try {
       require("./web.js").startWebServer();
+      // Dashboard chat rides a real channel adapter so it gets the full
+      // pipeline (identity, packs, transcripts, approval buttons).
+      const webChat = await registry.addAdapter({ type: "web", id: "web" }, { publicCommands: publicCommands() });
+      if (!webChat.ok) console.error("Web chat adapter failed:", webChat.error);
     } catch (e) {
       console.error("Web UI start failed:", e.message);
     }

package/channels/web/adapter.js

@@ -0,0 +1,263 @@
+// WebAdapter — the dashboard chat channel.
+//
+// Unlike Telegram/Kazee/Voice this adapter owns no transport: web.js runs
+// in the same process and feeds it directly. Inbound: postText/postAction
+// called by the /api/chat endpoints (session- or control-token-gated).
+// Outbound: send/edit/typing broadcast frames to subscribed SSE clients
+// and into a small in-memory history ring so a page reload can replay the
+// conversation since boot. Everything routes through the same core
+// handlers as the other channels, so web chat has the full agent
+// capability set — including approval buttons.
+//
+// Security: single-owner channel. web.js only calls in after its own auth
+// (dashboard session cookie or BOT_CONTROL_TOKEN), so every envelope
+// carries the fixed owner id and access.js authorizes it as the owner.
+
+const fs = require("fs");
+const path = require("path");
+const crypto = require("crypto");
+const { canonicalForChannel } = require("../../core/identity");
+const { inlineKeyboardToPortable } = require("../types");
+
+const HISTORY_LIMIT = 200;
+const MEDIA_TTL_MS = 60 * 60 * 1000;
+
+const WEB_OWNER_ID = "web-owner";
+
+class WebAdapter {
+  constructor({ id = "web" } = {}) {
+    this.id = id;
+    this.type = "web";
+    this.ownerUserId = WEB_OWNER_ID;
+    // Single conversation: the channel id is the owner identity.
+    this.channelId = WEB_OWNER_ID;
+    this._listeners = { message: new Set(), action: new Set() };
+    this._subscribers = new Set();
+    this._history = [];
+    this._media = new Map(); // id -> { path, mime, fileName, keep, expires }
+    this._commands = [];
+    this._sweepTimer = null;
+  }
+
+  on(event, fn) {
+    if (!this._listeners[event]) return () => {};
+    this._listeners[event].add(fn);
+    return () => this._listeners[event].delete(fn);
+  }
+
+  _emit(event, envelope) {
+    for (const fn of this._listeners[event] || []) {
+      try { Promise.resolve(fn(envelope)).catch((e) => console.error(`web ${event} handler:`, e.message)); }
+      catch (e) { console.error(`web ${event} handler:`, e.message); }
+    }
+  }
+
+  async start() {
+    this._sweepTimer = setInterval(() => this._sweepMedia(), 5 * 60 * 1000);
+    if (this._sweepTimer.unref) this._sweepTimer.unref();
+  }
+
+  async stop() {
+    if (this._sweepTimer) clearInterval(this._sweepTimer);
+    this._subscribers.clear();
+  }
+
+  // ── inbound (called by web.js /api/chat routes) ─────────────────
+
+  postText(text) {
+    const body = String(text || "");
+    if (!body.trim()) return null;
+    const messageId = this._mkId("t");
+    // Echo into history/stream so every connected tab sees the user's turn.
+    this._pushFrame({ kind: "message", role: "user", messageId, text: body, ts: Date.now() });
+    this._emit("message", {
+      adapter: this,
+      channelId: this.channelId,
+      canonicalUserId: canonicalForChannel("web", this.channelId),
+      userId: this.ownerUserId,
+      type: body.trim().startsWith("/") ? "command" : "text",
+      text: body,
+      messageId,
+      from: { id: this.ownerUserId, name: "Owner", username: "" },
+      raw: { source: "web" },
+    });
+    return messageId;
+  }
+
+  postAction({ id, payload, messageId } = {}) {
+    const p = String(payload != null ? payload : (id != null ? id : ""));
+    if (!p) return null;
+    const callbackId = this._mkId("cb");
+    this._emit("action", {
+      adapter: this,
+      channelId: this.channelId,
+      canonicalUserId: canonicalForChannel("web", this.channelId),
+      userId: this.ownerUserId,
+      type: "action",
+      messageId,
+      from: { id: this.ownerUserId, name: "Owner", username: "" },
+      action: {
+        buttonId: String(id != null ? id : p),
+        payload: p,
+        sourceMessageId: messageId,
+        callbackId,
+      },
+      raw: { source: "web" },
+    });
+    return callbackId;
+  }
+
+  // ── stream plumbing (web.js SSE endpoint) ───────────────────────
+
+  subscribe(fn) {
+    this._subscribers.add(fn);
+    return () => this._subscribers.delete(fn);
+  }
+
+  history() {
+    return this._history.slice();
+  }
+
+  getMedia(id) {
+    const entry = this._media.get(id);
+    if (!entry || !fs.existsSync(entry.path)) return null;
+    return entry;
+  }
+
+  _pushFrame(frame) {
+    this._history.push(frame);
+    if (this._history.length > HISTORY_LIMIT) this._history.splice(0, this._history.length - HISTORY_LIMIT);
+    for (const fn of this._subscribers) {
+      try { fn(frame); } catch (e) {}
+    }
+  }
+
+  // ── outbound contract (called by core/io.js) ────────────────────
+
+  _normalizeKeyboard(keyboard) {
+    if (!keyboard) return null;
+    if (keyboard.buttons) return keyboard.buttons;
+    if (keyboard.inline_keyboard) return inlineKeyboardToPortable(keyboard.inline_keyboard);
+    return null;
+  }
+
+  async send(channelId, text, opts = {}) {
+    const messageId = this._mkId("a");
+    this._pushFrame({
+      kind: "message",
+      role: "assistant",
+      messageId,
+      text: text || "",
+      buttons: this._normalizeKeyboard(opts.keyboard),
+      replyTo: opts.replyTo || null,
+      ts: Date.now(),
+    });
+    return messageId;
+  }
+
+  async edit(channelId, messageId, text, opts = {}) {
+    const frame = {
+      kind: "edit",
+      messageId,
+      text: text || "",
+      buttons: this._normalizeKeyboard(opts.keyboard),
+      ts: Date.now(),
+    };
+    // Keep history coherent: apply the edit to the stored message so a
+    // reload shows the final text, not the first streamed fragment.
+    const original = this._history.find((f) => f.kind === "message" && f.messageId === messageId);
+    if (original) { original.text = frame.text; original.buttons = frame.buttons; }
+    this._pushFrame(frame);
+  }
+
+  async delete(channelId, messageId) {
+    // Prune the message AND its edit frames so a reload replays nothing stale.
+    this._history = this._history.filter(
+      (f) => !((f.kind === "message" || f.kind === "edit") && f.messageId === messageId)
+    );
+    this._pushFrame({ kind: "delete", messageId, ts: Date.now() });
+  }
+
+  async sendVoice(channelId, audioPath) {
+    try {
+      const id = this._registerMedia(audioPath, this._guessMime(audioPath), path.basename(audioPath));
+      this._pushFrame({ kind: "voice", messageId: this._mkId("v"), url: `/api/chat/media/${id}`, ts: Date.now() });
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+
+  async sendPhoto(channelId, filePath, caption) { return this.sendFile(channelId, filePath, caption); }
+
+  async sendFile(channelId, filePath, caption) {
+    try {
+      const fileName = path.basename(filePath);
+      const id = this._registerMedia(filePath, this._guessMime(fileName), fileName, /* keep */ true);
+      this._pushFrame({
+        kind: "file",
+        messageId: this._mkId("f"),
+        url: `/api/chat/media/${id}`,
+        fileName,
+        caption: caption || "",
+        ts: Date.now(),
+      });
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+
+  async typing(channelId) {
+    // Ephemeral — streamed to live clients but never recorded in history.
+    for (const fn of this._subscribers) {
+      try { fn({ kind: "typing", ts: Date.now() }); } catch (e) {}
+    }
+  }
+
+  async downloadMedia(media) {
+    if (!media) return null;
+    return media.fileId || null;
+  }
+
+  async registerCommands(commands) {
+    this._commands = (commands || [])
+      .filter((c) => c && c.name)
+      .map((c) => ({ name: String(c.name).replace(/^\//, ""), description: String(c.description || ""), args: typeof c.args === "string" ? c.args : "" }));
+  }
+
+  // ── media store ─────────────────────────────────────────────────
+
+  _registerMedia(filePath, mime, fileName, keep = false) {
+    const id = crypto.randomBytes(9).toString("hex");
+    this._media.set(id, { path: filePath, mime, fileName, keep, expires: Date.now() + MEDIA_TTL_MS });
+    return id;
+  }
+
+  _sweepMedia() {
+    const now = Date.now();
+    for (const [id, entry] of this._media) {
+      if (entry.expires <= now) {
+        this._media.delete(id);
+        if (!entry.keep) { try { fs.unlinkSync(entry.path); } catch (e) {} }
+      }
+    }
+  }
+
+  // ── helpers ─────────────────────────────────────────────────────
+
+  _mkId(prefix) { return `${prefix}-${Date.now()}-${crypto.randomBytes(4).toString("hex")}`; }
+
+  _guessMime(fileName) {
+    const ext = path.extname(fileName).toLowerCase();
+    const map = {
+      ".png": "image/png", ".jpg": "image/jpeg", ".jpeg": "image/jpeg", ".gif": "image/gif",
+      ".webp": "image/webp", ".ogg": "audio/ogg", ".mp3": "audio/mpeg", ".m4a": "audio/mp4",
+      ".wav": "audio/wav", ".mp4": "video/mp4", ".pdf": "application/pdf", ".txt": "text/plain",
+      ".json": "application/json", ".csv": "text/csv",
+    };
+    return map[ext] || "application/octet-stream";
+  }
+}
+
+module.exports = { WebAdapter, WEB_OWNER_ID };

package/core/access.js

@@ -17,6 +17,10 @@ function transportOwnerUserId(transport) {
   // The voice channel is single-owner: the bearer token gates the connection,
   // and every envelope carries this fixed owner id, so it authorizes as owner.
   if (transport === "voice") return config.VOICE_OWNER_USER_ID || "voice-owner";
+  // The web channel is single-owner: the dashboard session (password or
+  // magic-link) gates every call into the adapter, so its fixed owner id
+  // authorizes as owner.
+  if (transport === "web") return "web-owner";
   return "";
 }
 

package/core/adapter-registry.js

@@ -13,6 +13,7 @@ const { setAdapters } = require("./scheduler");
 const { TelegramAdapter } = require("../channels/telegram/adapter");
 const { KazeeAdapter } = require("../channels/kazee/adapter");
 const { VoiceAdapter } = require("../channels/voice/adapter");
+const { WebAdapter } = require("../channels/web/adapter");
 
 const adapters = [];
 let messageHandler = null;
@@ -22,6 +23,7 @@ function createAdapter(spec) {
   if (spec.type === "telegram") return new TelegramAdapter({ id: spec.id, ...spec.opts });
   if (spec.type === "kazee") return new KazeeAdapter({ id: spec.id, ...spec.opts });
   if (spec.type === "voice") return new VoiceAdapter({ id: spec.id, ...spec.opts });
+  if (spec.type === "web") return new WebAdapter({ id: spec.id, ...spec.opts });
   console.error(`Unknown adapter type: ${spec.type}`);
   return null;
 }

package/core/identity.js

@@ -47,6 +47,9 @@ function isConfiguredOwnerChannel(transport, channelId) {
   if (t === "telegram") return (cfg.CHAT_IDS || []).map(String).includes(c);
   if (t === "kazee") return !!cfg.config.KAZEE_OWNER_USER_ID && c === String(cfg.config.KAZEE_OWNER_USER_ID);
   if (t === "voice") return c === String(cfg.config.VOICE_OWNER_USER_ID || "voice-owner");
+  // Web dashboard chat: fixed single-owner channel gated by the dashboard
+  // session, so its identity is operator-implied rather than env-declared.
+  if (t === "web") return c === "web-owner";
   return false;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inetafrica/open-claudia",
-  "version": "3.0.12",
+  "version": "3.0.13",
   "description": "An always-on, provider-agnostic coding-agent harness for Claude Code and OpenAI Codex via chat",
   "main": "bot.js",
   "bin": {

package/test-provider-language.js

@@ -32,12 +32,12 @@ assert.doesNotMatch(setup, /Your Claude Code bot is connected|Description=Claude
 
 const pkg = JSON.parse(read("package.json"));
 assert.match(pkg.description, /provider-agnostic coding-agent harness/i);
-// 3.0.12 approved by Sumeet 2026-07-13 ("Yes" to the platform unification
-// epic): dashboard auth hardening (no forced password change, login
-// rate-limiting + lockout, constant-time compares, Secure cookie),
-// channel-less boot with the web UI up, and live `channels` in /api/status
-// for AgentSpace channel chips.
-assert.strictEqual(pkg.version, "3.0.12", "release version must remain unchanged without explicit approval");
+// 3.0.13 approved by Sumeet 2026-07-13 ("ok please proceed... once done
+// please push it out" on the agent-space P0–P3 plan): web chat channel —
+// in-process WebAdapter, /api/chat SSE + send/action/media routes, Chat tab
+// in the dashboard, and a control-token-only /api/otp/mint for AgentSpace
+// magic-link SSO.
+assert.strictEqual(pkg.version, "3.0.13", "release version must remain unchanged without explicit approval");
 for (const keyword of ["claude", "codex", "coding-agent", "provider-agnostic"]) {
   assert.ok(pkg.keywords.includes(keyword), `package keyword missing: ${keyword}`);
 }

package/web.js

@@ -664,6 +664,93 @@ async function handleAPI(req, res, body, dependencies = {}) {
     }));
   }
 
+  // ── Chat (dashboard ↔ bot, via the in-process web channel adapter) ──
+  if (url.startsWith("/api/chat/")) {
+    let webChat = null;
+    try { webChat = require("./core/adapter-registry").findAdapter("web"); } catch (e) {}
+    if (!webChat) {
+      res.writeHead(503, { "Content-Type": "application/json" });
+      return res.end(JSON.stringify({ error: "Chat unavailable — bot not running in this process" }));
+    }
+
+    // Live event stream. Replays history on connect, then pushes frames as
+    // the bot replies (message / edit / delete / typing / file / voice).
+    if (url.startsWith("/api/chat/stream") && req.method === "GET") {
+      res.writeHead(200, {
+        "Content-Type": "text/event-stream",
+        "Cache-Control": "no-cache",
+        "Connection": "keep-alive",
+        "X-Accel-Buffering": "no",
+      });
+      res.write(`data: ${JSON.stringify({ kind: "history", frames: webChat.history() })}\n\n`);
+      const unsubscribe = webChat.subscribe((frame) => {
+        try { res.write(`data: ${JSON.stringify(frame)}\n\n`); } catch (e) {}
+      });
+      const heartbeat = setInterval(() => { try { res.write(": ping\n\n"); } catch (e) {} }, 25000);
+      // res "close" = connection torn down. (req "close" fires as soon as the
+      // GET body completes in modern Node, which would unsubscribe instantly.)
+      res.on("close", () => { clearInterval(heartbeat); unsubscribe(); });
+      return;
+    }
+
+    if (url === "/api/chat/send" && req.method === "POST") {
+      let text = "";
+      try { ({ text } = JSON.parse(body || "{}")); } catch (e) {}
+      if (!text || !String(text).trim()) {
+        res.writeHead(400, { "Content-Type": "application/json" });
+        return res.end(JSON.stringify({ error: "Empty message" }));
+      }
+      const messageId = webChat.postText(String(text));
+      res.writeHead(202, { "Content-Type": "application/json" });
+      return res.end(JSON.stringify({ ok: true, messageId }));
+    }
+
+    if (url === "/api/chat/action" && req.method === "POST") {
+      let parsed = {};
+      try { parsed = JSON.parse(body || "{}"); } catch (e) {}
+      const callbackId = webChat.postAction(parsed);
+      if (!callbackId) {
+        res.writeHead(400, { "Content-Type": "application/json" });
+        return res.end(JSON.stringify({ error: "Missing action payload" }));
+      }
+      res.writeHead(202, { "Content-Type": "application/json" });
+      return res.end(JSON.stringify({ ok: true, callbackId }));
+    }
+
+    if (url.startsWith("/api/chat/media/") && req.method === "GET") {
+      const id = url.slice("/api/chat/media/".length).split("?")[0];
+      const entry = webChat.getMedia(id);
+      if (!entry) {
+        res.writeHead(404, { "Content-Type": "application/json" });
+        return res.end(JSON.stringify({ error: "Expired or unknown media" }));
+      }
+      const stat = fs.statSync(entry.path);
+      res.writeHead(200, {
+        "Content-Type": entry.mime || "application/octet-stream",
+        "Content-Length": stat.size,
+        "Content-Disposition": `inline; filename="${(entry.fileName || "file").replace(/"/g, "")}"`,
+      });
+      return fs.createReadStream(entry.path).pipe(res);
+    }
+
+    res.writeHead(404, { "Content-Type": "application/json" });
+    return res.end(JSON.stringify({ error: "Unknown chat route" }));
+  }
+
+  // Platform SSO: mint a one-time magic-link token. Control-token only —
+  // this is a machine-to-machine surface for AgentSpace, never exposed to
+  // dashboard sessions (they are already logged in and gain nothing).
+  if (url === "/api/otp/mint" && req.method === "POST") {
+    if (!checkBearerAuth(req)) {
+      res.writeHead(403, { "Content-Type": "application/json" });
+      return res.end(JSON.stringify({ error: "Control token required" }));
+    }
+    const { mint } = require("./core/web-otp");
+    const { token, expiresAt } = mint();
+    res.writeHead(200, { "Content-Type": "application/json" });
+    return res.end(JSON.stringify({ ok: true, token, path: `/otp/${token}`, expiresAt }));
+  }
+
   // Change password (voluntary — never forced)
   if (url === "/api/password" && req.method === "POST") {
     const { current, newPassword } = JSON.parse(body);
@@ -764,6 +851,19 @@ function getHTML() {
   table.usage-table th, table.usage-table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid #222; white-space: nowrap; }
   table.usage-table th { color: #888; font-weight: 500; }
   table.usage-table td:first-child { color: #e0e0e0; }
+  .chat-box { display: flex; flex-direction: column; height: calc(100vh - 210px); min-height: 320px; }
+  .chat-log { flex: 1; overflow-y: auto; padding: 4px 2px; display: flex; flex-direction: column; gap: 10px; }
+  .chat-bubble { max-width: 85%; padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
+  .chat-bubble.user { align-self: flex-end; background: #6366f1; color: #fff; border-bottom-right-radius: 4px; }
+  .chat-bubble.bot { align-self: flex-start; background: #1a1a1a; border: 1px solid #2a2a2a; border-bottom-left-radius: 4px; }
+  .chat-bubble .chat-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
+  .chat-bubble .chat-btns button { padding: 6px 12px; font-size: 13px; background: #333; }
+  .chat-bubble .chat-btns button:hover { background: #444; }
+  .chat-bubble a { color: #a5b4fc; }
+  .chat-typing { align-self: flex-start; color: #888; font-size: 13px; padding: 4px 8px; }
+  .chat-input-row { display: flex; gap: 8px; margin-top: 12px; }
+  .chat-input-row textarea { min-height: 44px; max-height: 140px; resize: none; flex: 1; }
+  .chat-input-row button { align-self: flex-end; }
 </style>
 <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
 </head>
@@ -814,6 +914,7 @@ async function doLogin() {
 function render() {
   const tabs = [
     { id: "dashboard", label: "Dashboard" },
+    { id: "chat", label: "Chat" },
     { id: "usage", label: "Usage" },
     { id: "auth", label: "Users" },
     { id: "credentials", label: "Credentials" },
@@ -839,10 +940,116 @@ function render() {
   loadTab();
 }
 
-function switchTab(tab) { currentTab = tab; render(); }
+function switchTab(tab) {
+  if (tab !== "chat" && window.chatES) { try { window.chatES.close(); } catch (e) {} window.chatES = 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;");
+}
+
+function chatFrameHTML(f) {
+  if (f.kind === "message") {
+    const cls = f.role === "user" ? "user" : "bot";
+    let inner = chatEsc(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>';
+      }).join("") + '</div>';
+    }
+    return '<div class="chat-bubble ' + cls + '" data-mid="' + chatEsc(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>';
+  }
+  if (f.kind === "voice") {
+    return '<div class="chat-bubble bot" data-mid="' + chatEsc(f.messageId) + '"><audio controls src="' + chatEsc(f.url) + '"></audio></div>';
+  }
+  return "";
+}
+
+function chatApplyFrame(f) {
+  const log = $("#chat-log");
+  if (!log) return;
+  const typingEl = $("#chat-typing");
+  if (f.kind === "typing") {
+    if (typingEl) typingEl.classList.remove("hidden");
+    clearTimeout(window.chatTypingTimer);
+    window.chatTypingTimer = setTimeout(function () { if ($("#chat-typing")) $("#chat-typing").classList.add("hidden"); }, 8000);
+    return;
+  }
+  if (typingEl && (f.kind === "message" || f.kind === "edit")) typingEl.classList.add("hidden");
+  if (f.kind === "edit" || f.kind === "delete") {
+    const target = log.querySelector('[data-mid="' + (window.CSS && CSS.escape ? CSS.escape(f.messageId) : f.messageId) + '"]');
+    if (f.kind === "delete") { if (target) target.remove(); return; }
+    if (target) {
+      target.outerHTML = chatFrameHTML({ kind: "message", role: "assistant", messageId: f.messageId, text: f.text, buttons: f.buttons });
+    }
+    log.scrollTop = log.scrollHeight;
+    return;
+  }
+  const html = chatFrameHTML(f);
+  if (!html) return;
+  typingEl.insertAdjacentHTML("beforebegin", html);
+  log.scrollTop = log.scrollHeight;
+}
+
+function chatConnect() {
+  if (window.chatES) { try { window.chatES.close(); } catch (e) {} }
+  const es = new EventSource("/api/chat/stream");
+  window.chatES = es;
+  es.onmessage = function (ev) {
+    let f;
+    try { f = JSON.parse(ev.data); } catch (e) { return; }
+    if (f.kind === "history") {
+      const log = $("#chat-log");
+      if (!log) return;
+      log.innerHTML = f.frames.map(chatFrameHTML).join("") + '<div id="chat-typing" class="chat-typing hidden">thinking…</div>';
+      log.scrollTop = log.scrollHeight;
+      return;
+    }
+    chatApplyFrame(f);
+  };
+  es.onerror = function () {
+    // EventSource auto-reconnects; a 401 (expired session) won't, so bounce
+    // through the login screen on persistent failure.
+    setTimeout(function () { if (window.chatES === es && es.readyState === EventSource.CLOSED) api("/api/status"); }, 3000);
+  };
+}
+
+async function chatSend() {
+  const input = $("#chat-input");
+  const text = input.value.trim();
+  if (!text) return;
+  input.value = "";
+  input.style.height = "";
+  await api("/api/chat/send", { method: "POST", body: { text: text } });
+}
+
+async function chatAction(id, payload, messageId) {
+  await api("/api/chat/action", { method: "POST", body: { id: id, payload: payload, messageId: messageId } });
+}
 
 async function loadTab() {
   const el = $("#content");
+  if (currentTab === "chat") {
+    el.innerHTML =
+      '<div class="chat-box">' +
+        '<div id="chat-log" class="chat-log"><div id="chat-typing" class="chat-typing hidden">thinking…</div></div>' +
+        '<div class="chat-input-row">' +
+          '<textarea id="chat-input" placeholder="Message ${botName}…" rows="1"' +
+            ' onkeydown="if(event.key===\\'Enter\\'&&!event.shiftKey){event.preventDefault();chatSend();}"' +
+            ' oninput="this.style.height=\\'\\';this.style.height=Math.min(this.scrollHeight,140)+\\'px\\';"></textarea>' +
+          '<button onclick="chatSend()">Send</button>' +
+        '</div>' +
+      '</div>';
+    chatConnect();
+    setTimeout(function () { $("#chat-input") && $("#chat-input").focus(); }, 100);
+    return;
+  }
   if (currentTab === "dashboard") {
     el.innerHTML = \`
       <div class="card">