@yaebal/panel 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 neverlane
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,35 @@
+# @yaebal/panel
+
+an operator panel for [yaebal](https://github.com/neverlane/yaebal) bots: view
+incoming private-chat messages and reply from the browser. ships as a
+self-contained `fetch` handler — mount it on any HTTP framework.
+
+## install
+
+```sh
+pnpm add @yaebal/panel
+```
+
+## usage
+
+```ts
+import { Bot } from "@yaebal/core";
+import { MemoryPanelStore, recorder, panelHandler } from "@yaebal/panel";
+
+const bot = new Bot(token);
+const store = new MemoryPanelStore();
+
+bot.install(recorder(store)); // log incoming private messages
+bot.start();
+
+// serve the panel (auth via a required token)
+const handler = panelHandler(bot.api, store, { token: process.env.PANEL_TOKEN! });
+// handler: (Request) => Promise<Response> — open /?token=<PANEL_TOKEN>
+```
+
+implement `PanelStore` (`record` / `chats` / `history`) to persist conversations
+in redis, postgres, etc. instead of the in-memory default.
+
+---
+
+part of [**yaebal**](https://github.com/neverlane/yaebal) — a type-safe, runtime-agnostic Telegram Bot API framework. MIT.

package/lib/index.d.ts

@@ -0,0 +1,48 @@
+import type { Context, Plugin } from "@yaebal/core";
+export { PANEL_HTML } from "./panel-html.js";
+export interface PanelMessage {
+    direction: "in" | "out";
+    text: string;
+    date: number;
+}
+export interface PanelChat {
+    id: number;
+    name: string;
+    lastText: string;
+    lastDate: number;
+}
+/** where conversations are kept for the panel to read. implement for persistence. */
+export interface PanelStore {
+    record(chat: {
+        id: number;
+        name?: string;
+    }, message: PanelMessage): void | Promise<void>;
+    chats(): PanelChat[] | Promise<PanelChat[]>;
+    history(chatId: number): PanelMessage[] | Promise<PanelMessage[]>;
+}
+/** defaults to in-memory store. Lost on restart — swap for a persistent one in production. */
+export declare class MemoryPanelStore implements PanelStore {
+    #private;
+    record(chat: {
+        id: number;
+        name?: string;
+    }, message: PanelMessage): void;
+    chats(): PanelChat[];
+    history(chatId: number): PanelMessage[];
+}
+/** records incoming private-chat text into the store so the panel can show it. */
+export declare function recorder(store: PanelStore): Plugin<Context, Record<never, never>>;
+interface SendApi {
+    sendMessage(params: Record<string, unknown>): Promise<unknown>;
+}
+export interface PanelOptions {
+    /** shared secret required to open the panel and call its api. */
+    token: string;
+}
+/**
+ * a fetch-style handler for the operator panel: serves the ui at `/`, and a small
+ * api to list chats, read a conversation, and send a reply. mount it on any
+ * fetch-compatible server. open it at `/?token=<your token>`.
+ */
+export declare function panelHandler(api: SendApi, store: PanelStore, options: PanelOptions): (request: Request) => Promise<Response>;
+//# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAgBpD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,MAAM,WAAW,YAAY;IAC5B,SAAS,EAAE,IAAI,GAAG,KAAK,CAAC;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,SAAS;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CACjB;AAED,qFAAqF;AACrF,MAAM,WAAW,UAAU;IAC1B,MAAM,CAAC,IAAI,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,OAAO,EAAE,YAAY,GAAG,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACzF,KAAK,IAAI,SAAS,EAAE,GAAG,OAAO,CAAC,SAAS,EAAE,CAAC,CAAC;IAC5C,OAAO,CAAC,MAAM,EAAE,MAAM,GAAG,YAAY,EAAE,GAAG,OAAO,CAAC,YAAY,EAAE,CAAC,CAAC;CAClE;AAED,8FAA8F;AAC9F,qBAAa,gBAAiB,YAAW,UAAU;;IAIlD,MAAM,CAAC,IAAI,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,OAAO,EAAE,YAAY,GAAG,IAAI;IAiBxE,KAAK,IAAI,SAAS,EAAE;IAIpB,OAAO,CAAC,MAAM,EAAE,MAAM,GAAG,YAAY,EAAE;CAGvC;AAED,kFAAkF;AAClF,wBAAgB,QAAQ,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAqBjF;AAED,UAAU,OAAO;IAChB,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;CAC/D;AAED,MAAM,WAAW,YAAY;IAC5B,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAC;CACd;AAQD;;;;GAIG;AACH,wBAAgB,YAAY,CAC3B,GAAG,EAAE,OAAO,EACZ,KAAK,EAAE,UAAU,EACjB,OAAO,EAAE,YAAY,GACnB,CAAC,OAAO,EAAE,OAAO,KAAK,OAAO,CAAC,QAAQ,CAAC,CAuDzC"}

package/lib/index.js

@@ -0,0 +1,106 @@
+import { PANEL_HTML } from "./panel-html.js";
+/** keep at most this many messages per chat in the in-memory store. */
+const MAX_HISTORY = 1000;
+/** constant-time compare (pure js — runs on node, bun, deno and edge/web). */
+function safeEqual(a, b) {
+    if (a.length !== b.length)
+        return false;
+    let diff = 0;
+    for (let i = 0; i < a.length; i++)
+        diff |= a.charCodeAt(i) ^ b.charCodeAt(i);
+    return diff === 0;
+}
+export { PANEL_HTML } from "./panel-html.js";
+/** defaults to in-memory store. Lost on restart — swap for a persistent one in production. */
+export class MemoryPanelStore {
+    #chats = new Map();
+    #messages = new Map();
+    record(chat, message) {
+        const list = this.#messages.get(chat.id) ?? [];
+        list.push(message);
+        if (list.length > MAX_HISTORY)
+            list.shift();
+        this.#messages.set(chat.id, list);
+        const prev = this.#chats.get(chat.id);
+        this.#chats.set(chat.id, {
+            id: chat.id,
+            name: chat.name ?? prev?.name ?? `chat ${chat.id}`,
+            lastText: message.text,
+            lastDate: message.date,
+        });
+    }
+    chats() {
+        return [...this.#chats.values()].sort((a, b) => b.lastDate - a.lastDate);
+    }
+    history(chatId) {
+        return this.#messages.get(chatId) ?? [];
+    }
+}
+/** records incoming private-chat text into the store so the panel can show it. */
+export function recorder(store) {
+    const plugin = (composer) => composer.use(async (ctx, next) => {
+        const text = ctx.text;
+        const chat = ctx.chat;
+        if (text !== undefined && chat?.type === "private") {
+            const name = ctx.from?.username
+                ? `@${ctx.from.username}`
+                : (ctx.from?.first_name ?? `chat ${chat.id}`);
+            await store.record({ id: chat.id, name }, { direction: "in", text, date: Math.floor(Date.now() / 1000) });
+        }
+        await next();
+    });
+    return plugin;
+}
+const json = (data, status = 200) => new Response(JSON.stringify(data), {
+    status,
+    headers: { "content-type": "application/json", "x-content-type-options": "nosniff" },
+});
+/**
+ * a fetch-style handler for the operator panel: serves the ui at `/`, and a small
+ * api to list chats, read a conversation, and send a reply. mount it on any
+ * fetch-compatible server. open it at `/?token=<your token>`.
+ */
+export function panelHandler(api, store, options) {
+    if (!options.token)
+        throw new Error("panelHandler: a non-empty token is required");
+    return async (request) => {
+        const url = new URL(request.url);
+        const provided = url.searchParams.get("token") ??
+            request.headers.get("authorization")?.replace(/^Bearer\s+/i, "") ??
+            "";
+        // fail closed: reject empty/missing tokens and use a constant-time compare
+        if (!provided || !safeEqual(provided, options.token)) {
+            return new Response("unauthorized", { status: 401 });
+        }
+        if (url.pathname === "/" && request.method === "GET") {
+            return new Response(PANEL_HTML, {
+                headers: {
+                    "content-type": "text/html; charset=utf-8",
+                    // the token rides in the URL on this initial load — keep it out of Referer
+                    "referrer-policy": "no-referrer",
+                    "content-security-policy": "default-src 'self'; script-src 'unsafe-inline'; style-src 'unsafe-inline'",
+                    "x-content-type-options": "nosniff",
+                },
+            });
+        }
+        if (url.pathname === "/api/chats" && request.method === "GET") {
+            return json(await store.chats());
+        }
+        const get = url.pathname.match(/^\/api\/chats\/(-?\d+)$/);
+        if (get?.[1] && request.method === "GET") {
+            return json(await store.history(Number(get[1])));
+        }
+        const send = url.pathname.match(/^\/api\/chats\/(-?\d+)\/send$/);
+        if (send?.[1] && request.method === "POST") {
+            const chatId = Number(send[1]);
+            const body = (await request.json().catch(() => ({})));
+            if (!body.text)
+                return json({ error: "text required" }, 400);
+            await api.sendMessage({ chat_id: chatId, text: body.text });
+            await store.record({ id: chatId }, { direction: "out", text: body.text, date: Math.floor(Date.now() / 1000) });
+            return json({ ok: true });
+        }
+        return json({ error: "not found" }, 404);
+    };
+}
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/lib/index.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.test.d.ts.map

package/lib/index.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.test.d.ts","sourceRoot":"","sources":["../src/index.test.ts"],"names":[],"mappings":""}

package/lib/index.test.js

@@ -0,0 +1,87 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { Composer, Context } from "@yaebal/core";
+import { MemoryPanelStore, panelHandler, recorder } from "./index.js";
+const noop = async () => { };
+const entry = (c) => c.toMiddleware();
+test("MemoryPanelStore records, preserves names, sorts and reads history", () => {
+    const s = new MemoryPanelStore();
+    s.record({ id: 1, name: "@a" }, { direction: "in", text: "hi", date: 10 });
+    s.record({ id: 1 }, { direction: "out", text: "yo", date: 20 }); // no name → keep "@a"
+    s.record({ id: 2, name: "@b" }, { direction: "in", text: "hey", date: 30 });
+    assert.equal(s.chats()[0]?.id, 2); // most recent first
+    assert.equal(s.chats().find((c) => c.id === 1)?.name, "@a");
+    assert.equal(s.history(1).length, 2);
+    assert.deepEqual(s.history(2), [{ direction: "in", text: "hey", date: 30 }]);
+});
+test("recorder logs incoming private text into the store", async () => {
+    const store = new MemoryPanelStore();
+    const api = {};
+    const mw = entry(new Composer().install(recorder(store)));
+    const ctx = new Context({
+        api,
+        update: {
+            update_id: 1,
+            message: {
+                message_id: 1,
+                date: 0,
+                chat: { id: 5, type: "private" },
+                from: { id: 5, is_bot: false, first_name: "Sam", username: "sam" },
+                text: "hello",
+            },
+        },
+        updateType: "message",
+    });
+    await mw(ctx, noop);
+    const hist = store.history(5);
+    assert.equal(hist.length, 1);
+    assert.equal(hist[0]?.text, "hello");
+    assert.equal(hist[0]?.direction, "in");
+    assert.equal(store.chats()[0]?.name, "@sam");
+});
+function fakePanel() {
+    const sent = [];
+    const api = {
+        sendMessage: (p) => {
+            sent.push(p);
+            return Promise.resolve({ message_id: 1 });
+        },
+    };
+    const store = new MemoryPanelStore();
+    store.record({ id: 1, name: "@sam" }, { direction: "in", text: "hi", date: 1 });
+    return { handler: panelHandler(api, store, { token: "secret" }), sent, store };
+}
+test("panelHandler refuses to construct with an empty token", () => {
+    const store = new MemoryPanelStore();
+    const api = { sendMessage: () => Promise.resolve({}) };
+    assert.throws(() => panelHandler(api, store, { token: "" }), /non-empty token/);
+});
+test("panel API rejects requests without the token", async () => {
+    const { handler } = fakePanel();
+    const res = await handler(new Request("http://x/api/chats"));
+    assert.equal(res.status, 401);
+});
+test("panel API lists chats and serves the UI with a token", async () => {
+    const { handler } = fakePanel();
+    const chatsRes = await handler(new Request("http://x/api/chats", { headers: { authorization: "Bearer secret" } }));
+    assert.equal(chatsRes.status, 200);
+    const chats = (await chatsRes.json());
+    assert.equal(chats[0]?.name, "@sam");
+    const ui = await handler(new Request("http://x/?token=secret"));
+    assert.equal(ui.headers.get("content-type"), "text/html; charset=utf-8");
+    assert.match(await ui.text(), /yaebal panel/);
+});
+test("panel send posts via the api and logs an outgoing message", async () => {
+    const { handler, sent, store } = fakePanel();
+    const res = await handler(new Request("http://x/api/chats/1/send?token=secret", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ text: "yo" }),
+    }));
+    assert.equal(res.status, 200);
+    assert.deepEqual(sent, [{ chat_id: 1, text: "yo" }]);
+    const last = store.history(1).at(-1);
+    assert.equal(last?.direction, "out");
+    assert.equal(last?.text, "yo");
+});
+//# sourceMappingURL=index.test.js.map

package/lib/index.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.test.js","sourceRoot":"","sources":["../src/index.test.ts"],"names":[],"mappings":"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"}

package/lib/panel-html.d.ts

@@ -0,0 +1,3 @@
+/** the operator panel ui — a single static page that talks to the panel api. */
+export declare const PANEL_HTML = "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\" />\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n<title>yaebal panel</title>\n<style>\n  :root { color-scheme: light dark; --bg:#0f1115; --panel:#171a21; --line:#252a33; --muted:#8b93a1; --accent:#229ED9; --text:#e6e8eb; }\n  * { box-sizing: border-box; }\n  body { margin:0; font:14px/1.5 system-ui,sans-serif; background:var(--bg); color:var(--text); height:100vh; display:flex; }\n  #chats { width:280px; border-right:1px solid var(--line); overflow-y:auto; flex:none; }\n  #chats h1 { font-size:13px; color:var(--muted); padding:14px 16px; margin:0; letter-spacing:.5px; text-transform:lowercase; }\n  .chat { padding:10px 16px; border-bottom:1px solid var(--line); cursor:pointer; }\n  .chat:hover, .chat.on { background:var(--panel); }\n  .chat .n { font-weight:500; }\n  .chat .l { color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }\n  #main { flex:1; display:flex; flex-direction:column; min-width:0; }\n  #log { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:8px; }\n  .msg { max-width:70%; padding:8px 12px; border-radius:12px; white-space:pre-wrap; word-break:break-word; }\n  .msg.in { background:var(--panel); align-self:flex-start; }\n  .msg.out { background:var(--accent); color:#fff; align-self:flex-end; }\n  #composer { display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); }\n  #composer input { flex:1; background:var(--panel); border:1px solid var(--line); color:var(--text); border-radius:8px; padding:9px 12px; font:inherit; }\n  #composer button { background:var(--accent); color:#fff; border:0; border-radius:8px; padding:0 16px; cursor:pointer; font:inherit; }\n  #empty { margin:auto; color:var(--muted); }\n</style>\n</head>\n<body>\n<div id=\"chats\"><h1>chats</h1></div>\n<div id=\"main\"><div id=\"empty\">select a chat</div></div>\n<script>\nconst token = new URLSearchParams(location.search).get(\"token\") || \"\";\nconst api = (p, opt = {}) => fetch(p, { ...opt, headers: { ...(opt.headers||{}), authorization: \"Bearer \" + token } });\nlet active = null;\nconst el = (t, c, x) => { const e = document.createElement(t); if (c) e.className = c; if (x != null) e.textContent = x; return e; };\n\nasync function loadChats() {\n  const chats = await (await api(\"/api/chats\")).json();\n  const box = document.getElementById(\"chats\");\n  box.querySelectorAll(\".chat\").forEach(n => n.remove());\n  for (const c of chats) {\n    const d = el(\"div\", \"chat\" + (c.id === active ? \" on\" : \"\"));\n    d.append(el(\"div\", \"n\", c.name), el(\"div\", \"l\", c.lastText));\n    d.onclick = () => openChat(c.id);\n    box.append(d);\n  }\n}\nasync function openChat(id) {\n  active = id;\n  await loadChats();\n  const msgs = await (await api(\"/api/chats/\" + id)).json();\n  const main = document.getElementById(\"main\");\n  main.innerHTML = \"\";\n  const log = el(\"div\"); log.id = \"log\";\n  for (const m of msgs) log.append(el(\"div\", \"msg \" + m.direction, m.text));\n  const form = el(\"form\"); form.id = \"composer\";\n  const input = el(\"input\"); input.placeholder = \"reply\u2026\"; input.autocomplete = \"off\";\n  const btn = el(\"button\", null, \"send\"); btn.type = \"submit\";\n  form.append(input, btn);\n  form.onsubmit = async (e) => {\n    e.preventDefault();\n    const text = input.value.trim(); if (!text) return;\n    input.value = \"\";\n    await api(\"/api/chats/\" + id + \"/send\", { method:\"POST\", headers:{\"content-type\":\"application/json\"}, body: JSON.stringify({ text }) });\n    openChat(id);\n  };\n  main.append(log, form);\n  log.scrollTop = log.scrollHeight;\n}\nloadChats();\nsetInterval(() => (active ? openChat(active) : loadChats()), 4000);\n</script>\n</body>\n</html>";
+//# sourceMappingURL=panel-html.d.ts.map

package/lib/panel-html.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel-html.d.ts","sourceRoot":"","sources":["../src/panel-html.ts"],"names":[],"mappings":"AAAA,gFAAgF;AAChF,eAAO,MAAM,UAAU,uxHAyEf,CAAC"}

package/lib/panel-html.js

@@ -0,0 +1,76 @@
+/** the operator panel ui — a single static page that talks to the panel api. */
+export const PANEL_HTML = `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>yaebal panel</title>
+<style>
+  :root { color-scheme: light dark; --bg:#0f1115; --panel:#171a21; --line:#252a33; --muted:#8b93a1; --accent:#229ED9; --text:#e6e8eb; }
+  * { box-sizing: border-box; }
+  body { margin:0; font:14px/1.5 system-ui,sans-serif; background:var(--bg); color:var(--text); height:100vh; display:flex; }
+  #chats { width:280px; border-right:1px solid var(--line); overflow-y:auto; flex:none; }
+  #chats h1 { font-size:13px; color:var(--muted); padding:14px 16px; margin:0; letter-spacing:.5px; text-transform:lowercase; }
+  .chat { padding:10px 16px; border-bottom:1px solid var(--line); cursor:pointer; }
+  .chat:hover, .chat.on { background:var(--panel); }
+  .chat .n { font-weight:500; }
+  .chat .l { color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+  #main { flex:1; display:flex; flex-direction:column; min-width:0; }
+  #log { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:8px; }
+  .msg { max-width:70%; padding:8px 12px; border-radius:12px; white-space:pre-wrap; word-break:break-word; }
+  .msg.in { background:var(--panel); align-self:flex-start; }
+  .msg.out { background:var(--accent); color:#fff; align-self:flex-end; }
+  #composer { display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); }
+  #composer input { flex:1; background:var(--panel); border:1px solid var(--line); color:var(--text); border-radius:8px; padding:9px 12px; font:inherit; }
+  #composer button { background:var(--accent); color:#fff; border:0; border-radius:8px; padding:0 16px; cursor:pointer; font:inherit; }
+  #empty { margin:auto; color:var(--muted); }
+</style>
+</head>
+<body>
+<div id="chats"><h1>chats</h1></div>
+<div id="main"><div id="empty">select a chat</div></div>
+<script>
+const token = new URLSearchParams(location.search).get("token") || "";
+const api = (p, opt = {}) => fetch(p, { ...opt, headers: { ...(opt.headers||{}), authorization: "Bearer " + token } });
+let active = null;
+const el = (t, c, x) => { const e = document.createElement(t); if (c) e.className = c; if (x != null) e.textContent = x; return e; };
+
+async function loadChats() {
+  const chats = await (await api("/api/chats")).json();
+  const box = document.getElementById("chats");
+  box.querySelectorAll(".chat").forEach(n => n.remove());
+  for (const c of chats) {
+    const d = el("div", "chat" + (c.id === active ? " on" : ""));
+    d.append(el("div", "n", c.name), el("div", "l", c.lastText));
+    d.onclick = () => openChat(c.id);
+    box.append(d);
+  }
+}
+async function openChat(id) {
+  active = id;
+  await loadChats();
+  const msgs = await (await api("/api/chats/" + id)).json();
+  const main = document.getElementById("main");
+  main.innerHTML = "";
+  const log = el("div"); log.id = "log";
+  for (const m of msgs) log.append(el("div", "msg " + m.direction, m.text));
+  const form = el("form"); form.id = "composer";
+  const input = el("input"); input.placeholder = "reply…"; input.autocomplete = "off";
+  const btn = el("button", null, "send"); btn.type = "submit";
+  form.append(input, btn);
+  form.onsubmit = async (e) => {
+    e.preventDefault();
+    const text = input.value.trim(); if (!text) return;
+    input.value = "";
+    await api("/api/chats/" + id + "/send", { method:"POST", headers:{"content-type":"application/json"}, body: JSON.stringify({ text }) });
+    openChat(id);
+  };
+  main.append(log, form);
+  log.scrollTop = log.scrollHeight;
+}
+loadChats();
+setInterval(() => (active ? openChat(active) : loadChats()), 4000);
+</script>
+</body>
+</html>`;
+//# sourceMappingURL=panel-html.js.map

package/lib/panel-html.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel-html.js","sourceRoot":"","sources":["../src/panel-html.ts"],"names":[],"mappings":"AAAA,gFAAgF;AAChF,MAAM,CAAC,MAAM,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAyElB,CAAC"}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@yaebal/panel",
+  "version": "0.0.1",
+  "description": "yaebal panel — an operator panel: view chats and reply from the browser.",
+  "type": "module",
+  "main": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.js"
+    }
+  },
+  "files": [
+    "lib",
+    "src"
+  ],
+  "dependencies": {
+    "@yaebal/core": "0.0.1"
+  },
+  "devDependencies": {
+    "@types/node": "latest"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "keywords": [
+    "telegram",
+    "telegram-bot",
+    "yaebal",
+    "panel",
+    "dashboard",
+    "live-chat"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/neverlane/yaebal",
+    "directory": "packages/panel"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "node --test lib"
+  }
+}

package/src/index.test.ts

@@ -0,0 +1,115 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { Composer, Context, type Middleware } from "@yaebal/core";
+import { MemoryPanelStore, panelHandler, recorder } from "./index.js";
+
+const noop = async () => {};
+const entry = <C extends Context>(c: Composer<C>) =>
+	c.toMiddleware() as unknown as Middleware<Context>;
+
+test("MemoryPanelStore records, preserves names, sorts and reads history", () => {
+	const s = new MemoryPanelStore();
+
+	s.record({ id: 1, name: "@a" }, { direction: "in", text: "hi", date: 10 });
+	s.record({ id: 1 }, { direction: "out", text: "yo", date: 20 }); // no name → keep "@a"
+	s.record({ id: 2, name: "@b" }, { direction: "in", text: "hey", date: 30 });
+
+	assert.equal(s.chats()[0]?.id, 2); // most recent first
+	assert.equal(s.chats().find((c) => c.id === 1)?.name, "@a");
+	assert.equal(s.history(1).length, 2);
+	assert.deepEqual(s.history(2), [{ direction: "in", text: "hey", date: 30 }]);
+});
+
+test("recorder logs incoming private text into the store", async () => {
+	const store = new MemoryPanelStore();
+
+	const api = {} as never;
+	const mw = entry(new Composer<Context>().install(recorder(store)));
+
+	const ctx = new Context({
+		api,
+		update: {
+			update_id: 1,
+			message: {
+				message_id: 1,
+				date: 0,
+				chat: { id: 5, type: "private" },
+				from: { id: 5, is_bot: false, first_name: "Sam", username: "sam" },
+				text: "hello",
+			},
+		} as never,
+		updateType: "message",
+	});
+
+	await mw(ctx, noop);
+
+	const hist = store.history(5);
+
+	assert.equal(hist.length, 1);
+	assert.equal(hist[0]?.text, "hello");
+	assert.equal(hist[0]?.direction, "in");
+	assert.equal(store.chats()[0]?.name, "@sam");
+});
+
+function fakePanel() {
+	const sent: Array<Record<string, unknown>> = [];
+	const api = {
+		sendMessage: (p: Record<string, unknown>) => {
+			sent.push(p);
+			return Promise.resolve({ message_id: 1 });
+		},
+	};
+
+	const store = new MemoryPanelStore();
+	store.record({ id: 1, name: "@sam" }, { direction: "in", text: "hi", date: 1 });
+
+	return { handler: panelHandler(api, store, { token: "secret" }), sent, store };
+}
+
+test("panelHandler refuses to construct with an empty token", () => {
+	const store = new MemoryPanelStore();
+	const api = { sendMessage: () => Promise.resolve({}) };
+
+	assert.throws(() => panelHandler(api, store, { token: "" }), /non-empty token/);
+});
+
+test("panel API rejects requests without the token", async () => {
+	const { handler } = fakePanel();
+	const res = await handler(new Request("http://x/api/chats"));
+
+	assert.equal(res.status, 401);
+});
+
+test("panel API lists chats and serves the UI with a token", async () => {
+	const { handler } = fakePanel();
+
+	const chatsRes = await handler(
+		new Request("http://x/api/chats", { headers: { authorization: "Bearer secret" } }),
+	);
+	assert.equal(chatsRes.status, 200);
+
+	const chats = (await chatsRes.json()) as Array<{ name: string }>;
+	assert.equal(chats[0]?.name, "@sam");
+
+	const ui = await handler(new Request("http://x/?token=secret"));
+	assert.equal(ui.headers.get("content-type"), "text/html; charset=utf-8");
+	assert.match(await ui.text(), /yaebal panel/);
+});
+
+test("panel send posts via the api and logs an outgoing message", async () => {
+	const { handler, sent, store } = fakePanel();
+
+	const res = await handler(
+		new Request("http://x/api/chats/1/send?token=secret", {
+			method: "POST",
+			headers: { "content-type": "application/json" },
+			body: JSON.stringify({ text: "yo" }),
+		}),
+	);
+	assert.equal(res.status, 200);
+	assert.deepEqual(sent, [{ chat_id: 1, text: "yo" }]);
+	
+	const last = store.history(1).at(-1);
+	assert.equal(last?.direction, "out");
+	assert.equal(last?.text, "yo");
+});

package/src/index.ts

@@ -0,0 +1,173 @@
+import type { Context, Plugin } from "@yaebal/core";
+import { PANEL_HTML } from "./panel-html.js";
+
+/** keep at most this many messages per chat in the in-memory store. */
+const MAX_HISTORY = 1000;
+
+/** constant-time compare (pure js — runs on node, bun, deno and edge/web). */
+function safeEqual(a: string, b: string): boolean {
+	if (a.length !== b.length) return false;
+
+	let diff = 0;
+	for (let i = 0; i < a.length; i++) diff |= a.charCodeAt(i) ^ b.charCodeAt(i);
+
+	return diff === 0;
+}
+
+export { PANEL_HTML } from "./panel-html.js";
+
+export interface PanelMessage {
+	direction: "in" | "out";
+	text: string;
+	date: number;
+}
+
+export interface PanelChat {
+	id: number;
+	name: string;
+	lastText: string;
+	lastDate: number;
+}
+
+/** where conversations are kept for the panel to read. implement for persistence. */
+export interface PanelStore {
+	record(chat: { id: number; name?: string }, message: PanelMessage): void | Promise<void>;
+	chats(): PanelChat[] | Promise<PanelChat[]>;
+	history(chatId: number): PanelMessage[] | Promise<PanelMessage[]>;
+}
+
+/** defaults to in-memory store. Lost on restart — swap for a persistent one in production. */
+export class MemoryPanelStore implements PanelStore {
+	#chats = new Map<number, PanelChat>();
+	#messages = new Map<number, PanelMessage[]>();
+
+	record(chat: { id: number; name?: string }, message: PanelMessage): void {
+		const list = this.#messages.get(chat.id) ?? [];
+
+		list.push(message);
+		if (list.length > MAX_HISTORY) list.shift();
+
+		this.#messages.set(chat.id, list);
+
+		const prev = this.#chats.get(chat.id);
+		this.#chats.set(chat.id, {
+			id: chat.id,
+			name: chat.name ?? prev?.name ?? `chat ${chat.id}`,
+			lastText: message.text,
+			lastDate: message.date,
+		});
+	}
+
+	chats(): PanelChat[] {
+		return [...this.#chats.values()].sort((a, b) => b.lastDate - a.lastDate);
+	}
+
+	history(chatId: number): PanelMessage[] {
+		return this.#messages.get(chatId) ?? [];
+	}
+}
+
+/** records incoming private-chat text into the store so the panel can show it. */
+export function recorder(store: PanelStore): Plugin<Context, Record<never, never>> {
+	const plugin: Plugin<Context, Record<never, never>> = (composer) =>
+		composer.use(async (ctx, next) => {
+			const text = ctx.text;
+			const chat = ctx.chat;
+
+			if (text !== undefined && chat?.type === "private") {
+				const name = ctx.from?.username
+					? `@${ctx.from.username}`
+					: (ctx.from?.first_name ?? `chat ${chat.id}`);
+
+				await store.record(
+					{ id: chat.id, name },
+					{ direction: "in", text, date: Math.floor(Date.now() / 1000) },
+				);
+			}
+
+			await next();
+		});
+
+	return plugin;
+}
+
+interface SendApi {
+	sendMessage(params: Record<string, unknown>): Promise<unknown>;
+}
+
+export interface PanelOptions {
+	/** shared secret required to open the panel and call its api. */
+	token: string;
+}
+
+const json = (data: unknown, status = 200): Response =>
+	new Response(JSON.stringify(data), {
+		status,
+		headers: { "content-type": "application/json", "x-content-type-options": "nosniff" },
+	});
+
+/**
+ * a fetch-style handler for the operator panel: serves the ui at `/`, and a small
+ * api to list chats, read a conversation, and send a reply. mount it on any
+ * fetch-compatible server. open it at `/?token=<your token>`.
+ */
+export function panelHandler(
+	api: SendApi,
+	store: PanelStore,
+	options: PanelOptions,
+): (request: Request) => Promise<Response> {
+	if (!options.token) throw new Error("panelHandler: a non-empty token is required");
+
+	return async (request) => {
+		const url = new URL(request.url);
+		const provided =
+			url.searchParams.get("token") ??
+			request.headers.get("authorization")?.replace(/^Bearer\s+/i, "") ??
+			"";
+
+		// fail closed: reject empty/missing tokens and use a constant-time compare
+		if (!provided || !safeEqual(provided, options.token)) {
+			return new Response("unauthorized", { status: 401 });
+		}
+
+		if (url.pathname === "/" && request.method === "GET") {
+			return new Response(PANEL_HTML, {
+				headers: {
+					"content-type": "text/html; charset=utf-8",
+					// the token rides in the URL on this initial load — keep it out of Referer
+					"referrer-policy": "no-referrer",
+					"content-security-policy":
+						"default-src 'self'; script-src 'unsafe-inline'; style-src 'unsafe-inline'",
+					"x-content-type-options": "nosniff",
+				},
+			});
+		}
+
+		if (url.pathname === "/api/chats" && request.method === "GET") {
+			return json(await store.chats());
+		}
+
+		const get = url.pathname.match(/^\/api\/chats\/(-?\d+)$/);
+		if (get?.[1] && request.method === "GET") {
+			return json(await store.history(Number(get[1])));
+		}
+
+		const send = url.pathname.match(/^\/api\/chats\/(-?\d+)\/send$/);
+		if (send?.[1] && request.method === "POST") {
+			const chatId = Number(send[1]);
+			const body = (await request.json().catch(() => ({}))) as { text?: string };
+
+			if (!body.text) return json({ error: "text required" }, 400);
+
+			await api.sendMessage({ chat_id: chatId, text: body.text });
+			await store.record(
+				{ id: chatId },
+				{ direction: "out", text: body.text, date: Math.floor(Date.now() / 1000) },
+			);
+
+			return json({ ok: true });
+		}
+		
+		return json({ error: "not found" }, 404);
+	};
+}

package/src/panel-html.ts

@@ -0,0 +1,75 @@
+/** the operator panel ui — a single static page that talks to the panel api. */
+export const PANEL_HTML = `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>yaebal panel</title>
+<style>
+  :root { color-scheme: light dark; --bg:#0f1115; --panel:#171a21; --line:#252a33; --muted:#8b93a1; --accent:#229ED9; --text:#e6e8eb; }
+  * { box-sizing: border-box; }
+  body { margin:0; font:14px/1.5 system-ui,sans-serif; background:var(--bg); color:var(--text); height:100vh; display:flex; }
+  #chats { width:280px; border-right:1px solid var(--line); overflow-y:auto; flex:none; }
+  #chats h1 { font-size:13px; color:var(--muted); padding:14px 16px; margin:0; letter-spacing:.5px; text-transform:lowercase; }
+  .chat { padding:10px 16px; border-bottom:1px solid var(--line); cursor:pointer; }
+  .chat:hover, .chat.on { background:var(--panel); }
+  .chat .n { font-weight:500; }
+  .chat .l { color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+  #main { flex:1; display:flex; flex-direction:column; min-width:0; }
+  #log { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:8px; }
+  .msg { max-width:70%; padding:8px 12px; border-radius:12px; white-space:pre-wrap; word-break:break-word; }
+  .msg.in { background:var(--panel); align-self:flex-start; }
+  .msg.out { background:var(--accent); color:#fff; align-self:flex-end; }
+  #composer { display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); }
+  #composer input { flex:1; background:var(--panel); border:1px solid var(--line); color:var(--text); border-radius:8px; padding:9px 12px; font:inherit; }
+  #composer button { background:var(--accent); color:#fff; border:0; border-radius:8px; padding:0 16px; cursor:pointer; font:inherit; }
+  #empty { margin:auto; color:var(--muted); }
+</style>
+</head>
+<body>
+<div id="chats"><h1>chats</h1></div>
+<div id="main"><div id="empty">select a chat</div></div>
+<script>
+const token = new URLSearchParams(location.search).get("token") || "";
+const api = (p, opt = {}) => fetch(p, { ...opt, headers: { ...(opt.headers||{}), authorization: "Bearer " + token } });
+let active = null;
+const el = (t, c, x) => { const e = document.createElement(t); if (c) e.className = c; if (x != null) e.textContent = x; return e; };
+
+async function loadChats() {
+  const chats = await (await api("/api/chats")).json();
+  const box = document.getElementById("chats");
+  box.querySelectorAll(".chat").forEach(n => n.remove());
+  for (const c of chats) {
+    const d = el("div", "chat" + (c.id === active ? " on" : ""));
+    d.append(el("div", "n", c.name), el("div", "l", c.lastText));
+    d.onclick = () => openChat(c.id);
+    box.append(d);
+  }
+}
+async function openChat(id) {
+  active = id;
+  await loadChats();
+  const msgs = await (await api("/api/chats/" + id)).json();
+  const main = document.getElementById("main");
+  main.innerHTML = "";
+  const log = el("div"); log.id = "log";
+  for (const m of msgs) log.append(el("div", "msg " + m.direction, m.text));
+  const form = el("form"); form.id = "composer";
+  const input = el("input"); input.placeholder = "reply…"; input.autocomplete = "off";
+  const btn = el("button", null, "send"); btn.type = "submit";
+  form.append(input, btn);
+  form.onsubmit = async (e) => {
+    e.preventDefault();
+    const text = input.value.trim(); if (!text) return;
+    input.value = "";
+    await api("/api/chats/" + id + "/send", { method:"POST", headers:{"content-type":"application/json"}, body: JSON.stringify({ text }) });
+    openChat(id);
+  };
+  main.append(log, form);
+  log.scrollTop = log.scrollHeight;
+}
+loadChats();
+setInterval(() => (active ? openChat(active) : loadChats()), 4000);
+</script>
+</body>
+</html>`;