@yaebal/panel

pnpm add @yaebal/panel

import { Bot } from "@yaebal/core";
import { MemoryPanelStore, recorder, panelHandler } from "@yaebal/panel";
import { serve } from "@yaebal/panel/serve";

const bot = new Bot(token);
const store = new MemoryPanelStore();

// 1. attach the recorder plugin — logs incoming private messages to the store
bot.install(recorder(store));

bot.start();

// 2. serve the panel — a fetch handler: (Request) => Promise<Response>
const handler = panelHandler(bot.api, store, { token: process.env.PANEL_TOKEN! });
serve(handler, { port: 8080 });

// open http://localhost:8080 and paste your token on the login screen

// node 20+ — `serve` ships in the box (native node:http, no deps)
import { serve } from "@yaebal/panel/serve";
serve(handler, { port: 8080, onListen: ({ port }) => console.log(`panel on :${port}`) });

// bun
Bun.serve({ port: 8080, fetch: handler });

// deno
Deno.serve({ port: 8080 }, handler);

// hono / any fetch framework — pair with basePath: "/panel"
app.all("/panel/*", (c) => handler(c.req.raw));

// cloudflare workers / deno deploy / vercel edge — same handler, no port
export default { fetch: handler };

panelHandler(bot.api, store, {
  token: process.env.PANEL_TOKEN!,           // required shared secret
  basePath: "/panel",                        // mount under a sub-path (default: root)
  cors: "https://ops.example",               // allow a browser origin (or a list, or "*")
  rateLimit: { max: 10, windowMs: 60_000 },  // throttle failed auth (default); false to disable
});

import { SqlitePanelStore } from "@yaebal/panel/sqlite";

// persistent store on node's native node:sqlite — zero extra deps
const store = new SqlitePanelStore({ path: "./panel.db" }); // or ":memory:"

bot.install(recorder(store));
const handler = panelHandler(bot.api, store, { token: process.env.PANEL_TOKEN! });

import type { PanelStore, PanelChat, PanelMessage, HistoryOptions, PanelEvent } from "@yaebal/panel";

// implement PanelStore for persistence (redis, postgres, …)
class MyPersistentStore implements PanelStore {
  async record(chat: { id: number; name?: string }, message: PanelMessage) {
    await db.messages.insert({ chatId: chat.id, ...message });
  }
  async chats(): Promise<PanelChat[]> {
    return db.chats.findAll({ orderBy: "lastDate desc" });
  }
  async history(chatId: number, opts?: HistoryOptions): Promise<PanelMessage[]> {
    return db.messages.page({ chatId, before: opts?.before, limit: opts?.limit });
  }
  // optional — enables the realtime SSE stream; omit it and the UI just polls
  subscribe(listener: (e: PanelEvent) => void) {
    return bus.on("record", listener); // returns an unsubscribe fn
  }
}

import { recordOutgoing } from "@yaebal/panel";

// recorder only sees incoming updates. to also log replies the bot sends elsewhere
// (e.g. ctx.reply(...) in your handlers), hook the api — and stop the panel from
// recording its own sends so they aren't logged twice:
recordOutgoing(bot.api, store);
const handler = panelHandler(bot.api, store, {
  token: process.env.PANEL_TOKEN!,
  recordSends: false,
});

// routes are relative to basePath (default root). all but the page require the token.
GET  /                       → login + chat SPA (public)
GET  /api/chats              → PanelChat[]  (sorted by lastDate desc)
GET  /api/chats/:id          → PanelMessage[]   (?before=&limit= to page)
GET  /api/stream             → text/event-stream of record events
GET  /api/file?id=<file_id>  → proxied file bytes (getFile + stream)
POST /api/chats/:id/send     → json { text, … }        → sendMessage
                               multipart { file, caption? } → sendPhoto / sendDocument / …