halbot 1995.1.34 → 1995.1.35

package/index.mjs

@@ -99,6 +99,7 @@ const init = async (options = {}) => {
         provider: 'telegram',
         rerank: _rerank,
         storage: options?.storage,
+        web: options?.web,
     });
     return _hal;
 };

package/lib/hal.mjs

@@ -2,7 +2,8 @@ import { alan, bot, callosum, dbio, storage, utilitas } from 'utilitas';
 import { join } from 'path';
 import { parseArgs as _parseArgs } from 'node:util';
 import { readdirSync } from 'fs';
-import { ignoreErrFunc } from 'utilitas/lib/utilitas.mjs';
+import { webjam } from 'webjam';
+import path from 'node:path';
 
 // 👇 https://core.telegram.org/bots/faq#my-bot-is-hitting-limits-how-do-i-avoid-this
 const [ // https://limits.tginfo.me/en
@@ -15,6 +16,9 @@ const [ // https://limits.tginfo.me/en
         '☑️', { log: true }, 32, 256,
     ];
 
+const { __filename } = utilitas.__(import.meta.url);
+const workdir = path.dirname(__filename);
+const getPath = (subPath) => { return path.join(workdir, subPath || ''); };
 const table = 'utilitas_hal_events';
 const log = (c, o) => utilitas.log(c, import.meta.url, { time: 1, ...o || {} });
 const [end] = [bot.end];
@@ -41,6 +45,7 @@ const initSql = {
             \`collected\`        TEXT            NOT NULL,
             \`distilled\`        TEXT            NOT NULL,
             \`distilled_vector\` TEXT            NOT NULL,
+            \`token\`            VARCHAR(255)    NOT NULL DEFAULT '',
             \`created_at\`       TIMESTAMP       NOT NULL DEFAULT CURRENT_TIMESTAMP,
             \`updated_at\`       TIMESTAMP       NOT NULL DEFAULT CURRENT_TIMESTAMP,
             PRIMARY  KEY                 (\`id\`),
@@ -54,6 +59,7 @@ const initSql = {
             INDEX          response_text (\`response_text\`(768)),
             INDEX          collected     (\`collected\`(768)),
             FULLTEXT INDEX distilled     (\`distilled\`),
+            INDEX          token         (\`token\`),
             INDEX          created_at    (\`created_at\`),
             INDEX          updated_at    (\`updated_at\`)
         ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4`), [table],
@@ -72,6 +78,7 @@ const initSql = {
             collected        TEXT         NOT NULL,
             distilled        TEXT         NOT NULL,
             distilled_vector VECTOR(768)  NOT NULL,
+            token            VARCHAR(255) NOT NULL DEFAULT '',
             created_at       TIMESTAMP    NOT NULL DEFAULT CURRENT_TIMESTAMP,
             updated_at       TIMESTAMP    NOT NULL DEFAULT CURRENT_TIMESTAMP
         )`)
@@ -97,6 +104,8 @@ const initSql = {
         `CREATE INDEX IF NOT EXISTS ${table}_distilled_index ON ${table} USING GIN(to_tsvector('english', distilled))`,
     ], [
         `CREATE INDEX IF NOT EXISTS ${table}_distilled_vector_index ON ${table} USING hnsw(distilled_vector vector_cosine_ops)`,
+    ], [
+        `CREATE INDEX IF NOT EXISTS ${table}_token_index ON ${table} (token)`,
     ], [
         `CREATE INDEX IF NOT EXISTS ${table}_created_at_index ON ${table} (created_at)`,
     ], [
@@ -149,13 +158,18 @@ const parseArgs = async (args, ctx) => {
 
 const subconscious = {
     name: 'Subconscious', run: true, priority: 0,
-    func: async (_, next) => { ignoreErrFunc(next, logOptions) }, // non-blocking
+    func: async (_, next) => { utilitas.ignoreErrFunc(next, logOptions) }, // non-blocking
 };
 
 const init = async (options) => {
     if (options) {
-        const { ais } = await alan.initChat({ sessions: null });
+        const web = options?.web && await webjam.init({
+            port: options?.web?.port || 9000,
+            controllerPath: options?.web?.controllerPath || getPath('../web'),
+            cfTunnel: options?.web?.cfTunnel,
+        });
         if (callosum.isPrimary) {
+            const { ais } = await alan.initChat({ sessions: null });
             const cmds = options?.cmds || [];
             // config multimodal engines
             const supportedMimeTypes = new Set(ais.map(x => {
@@ -182,6 +196,7 @@ const init = async (options) => {
                 rerank: options?.rerank,
                 storage: options?.storage,
                 supportedMimeTypes,
+                web,
             };
             if (_.storage) {
                 assert([
@@ -218,7 +233,7 @@ const init = async (options) => {
             await parseArgs(); // Validate args options.
         }
     }
-    assert(_, 'Bot have not been initialized.', 501);
+    assert(!callosum.isPrimary || _, 'Bot have not been initialized.', 501);
     return _;
 };
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "halbot",
   "description": "Just another AI powered Telegram bot, which is simple design, easy to use, extendable and fun.",
-  "version": "1995.1.34",
+  "version": "1995.1.35",
   "private": false,
   "homepage": "https://github.com/Leask/halbot",
   "type": "module",
@@ -48,7 +48,7 @@
     "telegraf": "^4.16.3",
     "tellegram": "^1.1.4",
     "tesseract.js": "^7.0.0",
-    "utilitas": "^2001.1.117",
+    "webjam": "^1995.3.3",
     "youtube-transcript": "^1.2.1"
   }
 }

package/pipeline/080_history.mjs

@@ -118,7 +118,7 @@ const memorize = async (ctx) => {
         chat_type: ctx._.chatType, message_id: ctx._.messageId,
         received: JSON.stringify(received), received_text,
         response: JSON.stringify(response), response_text,
-        collected: JSON.stringify(collected), distilled,
+        collected: JSON.stringify(collected), distilled, token: ctx._.token,
     };
     await utilitas.ignoreErrFunc(async () => {
         event.distilled_vector = hal._.embed
@@ -173,7 +173,7 @@ const action = async (ctx, next) => {
                         || ctx._.message.message_id,
                 }
             };
-            result.length === hal.SEARCH_LIMIT ? await ctx.resp('___', {
+            result.length === hal.SEARCH_LIMIT ? await ctx.resp('---', {
                 buttons: [{
                     label: '🔍 More',
                     text: `/search@${ctx.botInfo.username} ${keywords} `

package/pipeline/100_chat.mjs

@@ -1,4 +1,5 @@
 import { alan } from '../index.mjs';
+import { token } from 'webjam';
 
 const _name = 'Chat';
 const log = (c, o) => utilitas.log(c, _name, { time: 1, ...o || {} });
@@ -66,11 +67,25 @@ const action = async (ctx, next) => {
         await ctx.timeout();
     }
     // console.log('Finished');
-    await (resp.text.trim() ? ok({ processing: false })
-        : ctx.deleteMessage(ctx._.done[0].message_id));
+    let lastMsg;
+    if (resp.text.trim()) {
+        lastMsg = await ok({ processing: false });
+    } else {
+        await ctx.deleteMessage(ctx._.done[0].message_id);
+    }
     ctx._.request = resp.request;
     ctx._.response = resp.response;
+    ctx._.token = token.newId();
     ctx.memorize && await ctx.memorize();
+    // @todo:
+    // 1: reduce safe page range
+    // 2: adding ctx.append feature
+    // 3: Consider the layout for small screens, such as the footer and other elements.
+    // 4: using webjam config instead of hardcoding the url
+    await ctx.edit(lastMsg.message_id,
+        lastMsg.raw
+        + `\n\n\-\-\-\n\n✨ [View in well-formatted page](https://hal.leaskh.com/turns/${ctx._.token}).`
+    );
     await next();
 };
 

package/web/turn.html

@@ -0,0 +1,587 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HAL9000 Chat</title>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Inter:wght@300;400;600&display=swap"
+        rel="stylesheet">
+    <style>
+        :root {
+            --bg-color: #0a0a0c;
+            --header-bg: rgba(255, 255, 255, 0.4);
+            --footer-bg: rgba(255, 255, 255, 0.4);
+            --border-color: rgba(0, 0, 0, 0.1);
+            /* Lighter border */
+            --primary-color: #00f0ff;
+            /* Sci-fi Cyan */
+            --text-color: #333;
+            /* Dark text for light background */
+            --robot-bg: #1a1a1f;
+            --human-bg: #003340;
+            --robot-border: #00f0ff;
+            --human-border: #ff0055;
+            --font-display: 'Orbitron', sans-serif;
+            --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+        }
+
+        /* Abstract Fluid Background */
+        #neural-canvas {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -2;
+            background: #f0f0f0;
+            /* Key to the liquid effect: heavy blur and high saturation */
+            filter: blur(80px) saturate(150%) contrast(120%);
+            opacity: 0.8;
+        }
+
+
+        body,
+        html {
+            margin: 0;
+            padding: 0;
+            background-color: transparent;
+            color: var(--text-color);
+            font-family: var(--font-body);
+            height: 100%;
+            overflow: hidden;
+        }
+
+
+        /* Header */
+        header {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 70px;
+            background-color: var(--header-bg);
+            border-bottom: 1px solid var(--border-color);
+            display: block;
+            /* Changed from flex */
+            padding: 0;
+            /* Removed padding */
+            z-index: 1000;
+            backdrop-filter: blur(5px);
+            box-shadow: 0 2px 20px rgba(0, 240, 255, 0.1);
+        }
+
+        .header-content {
+            width: 100%;
+            max-width: 900px;
+            margin: 0 auto;
+            padding: 0 20px;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            box-sizing: border-box;
+        }
+
+        .brand {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+        }
+
+        .brand-link {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            text-decoration: none;
+            color: inherit;
+        }
+
+        .logo {
+            width: 32px;
+            height: 32px;
+            fill: var(--primary-color);
+            /* Removed drop-shadow */
+        }
+
+        .brand-name {
+            font-family: var(--font-body);
+            font-size: 1.5rem;
+            font-weight: 700;
+            letter-spacing: 2px;
+            color: #333;
+            /* Dark gray */
+            /* Removed text-shadow */
+        }
+
+        .session-info {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-end;
+            gap: 2px;
+        }
+
+        .chat-id {
+            font-family: var(--font-body);
+            font-size: 0.9rem;
+            color: #888;
+        }
+
+        /* Main Content */
+        main {
+            height: 100vh;
+            /* Fallback */
+            height: 100dvh;
+            /* Mobile viewport fix */
+            padding-top: calc(70px + 1rem);
+            /* Header height + Gap (same as gap between bubbles) */
+            padding-bottom: 80px;
+            /* Footer height + gap */
+            padding-left: 20px;
+            padding-right: 20px;
+            box-sizing: border-box;
+            overflow-y: auto;
+            -webkit-overflow-scrolling: touch;
+            /* iOS Momentum Scrolling */
+            scroll-behavior: smooth;
+            overscroll-behavior-y: contain;
+            /* Prevent pull-to-refresh on body */
+            max-width: 900px;
+            margin: 0 auto;
+            width: 100%;
+        }
+
+        .chat-container {
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+        }
+
+        .message-row {
+            display: flex;
+            width: 100%;
+            opacity: 0;
+            animation: fadeIn 0.3s forwards;
+        }
+
+        @keyframes fadeIn {
+            to {
+                opacity: 1;
+            }
+        }
+
+        .message-row.robot {
+            justify-content: flex-start;
+        }
+
+        .message-row.human {
+            justify-content: flex-start;
+        }
+
+        .message-group {
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+        }
+
+        .sender-name-inside {
+            font-family: var(--font-body);
+            font-size: 13px;
+            font-weight: 600;
+            padding: 8px 16px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            /* Push time to right */
+            gap: 6px;
+            /* Header background darker than bubble */
+            background: rgba(0, 0, 0, 0.05);
+            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+            border-radius: 8px 8px 0 0;
+            color: #333;
+            /* Dark gray for all */
+        }
+
+        .message-time {
+            font-weight: 400;
+            opacity: 0.6;
+            font-size: 0.85em;
+        }
+
+
+        .message-bubble {
+            padding: 0;
+            /* Removed padding from container */
+            border-radius: 8px;
+            font-size: 16px;
+            line-height: 1.5;
+            position: relative;
+            background: rgba(255, 255, 255, 0.6);
+            /* Removed border-left */
+            color: #333;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
+            backdrop-filter: blur(5px);
+            display: flex;
+            flex-direction: column;
+        }
+
+        .message-content {
+            padding: 1rem;
+        }
+
+        .human .message-bubble {
+            border-left: none;
+            border-right: none;
+            color: #333;
+        }
+
+        /* Markdown Styles */
+        .message-bubble h1,
+        .message-bubble h2,
+        .message-bubble h3 {
+            margin-top: 0;
+            font-family: var(--font-display);
+            color: #333;
+        }
+
+        .message-bubble code {
+            background: rgba(0, 0, 0, 0.05);
+            /* Light gray */
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-family: 'Courier New', Courier, monospace;
+            font-size: 0.9em;
+            color: #d63384;
+            /* Pinkish code color */
+        }
+
+        .message-bubble pre {
+            background: #f4f4f4;
+            /* Light background */
+            padding: 1rem;
+            border-radius: 4px;
+            overflow-x: auto;
+            border: 1px solid #ddd;
+            color: #333;
+        }
+
+        .message-bubble pre code {
+            background: transparent;
+            padding: 0;
+            color: inherit;
+        }
+
+        /* Table Styles */
+        .message-bubble table {
+            width: 100%;
+            border-collapse: collapse;
+            margin: 1rem 0;
+            font-size: 0.95em;
+        }
+
+        .message-bubble th,
+        .message-bubble td {
+            padding: 8px 12px;
+            border: 1px solid #ddd;
+            text-align: left;
+        }
+
+        .message-bubble th {
+            background-color: rgba(0, 0, 0, 0.05);
+            font-weight: 600;
+        }
+
+        .message-bubble p {
+            margin: 0 0 1rem 0;
+        }
+
+        .message-bubble p:last-child {
+            margin: 0;
+        }
+
+        /* Footer */
+        footer {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: 60px;
+            background-color: var(--footer-bg);
+            border-top: 1px solid var(--border-color);
+            display: block;
+            padding: 0;
+            color: #444;
+            font-family: var(--font-body);
+            font-size: 0.8rem;
+            z-index: 1000;
+            backdrop-filter: blur(5px);
+        }
+
+        footer a {
+            color: #666;
+            text-decoration: none;
+            transition: color 0.2s;
+        }
+
+        footer a:hover {
+            color: var(--primary-color);
+        }
+
+        .footer-content {
+            width: 100%;
+            max-width: 900px;
+            margin: 0 auto;
+            padding: 0 20px;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            box-sizing: border-box;
+        }
+
+    </style>
+</head>
+
+<body>
+
+    <canvas id="neural-canvas"></canvas>
+
+    <header>
+        <div class="header-content">
+            <div class="brand">
+                <a href="https://github.com/Leask/halbot" target="_blank" class="brand-link">
+                    <!-- HAL9000 Eye Logo -->
+                    <svg class="logo" viewBox="0 0 100 100">
+                        <defs>
+                            <radialGradient id="lens-glow" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
+                                <stop offset="0%" style="stop-color:#ffeb3b;stop-opacity:1" />
+                                <stop offset="20%" style="stop-color:#ff9800;stop-opacity:1" />
+                                <stop offset="60%" style="stop-color:#f44336;stop-opacity:1" />
+                                <stop offset="100%" style="stop-color:#b71c1c;stop-opacity:1" />
+                            </radialGradient>
+                            <linearGradient id="metal-rim" x1="0%" y1="0%" x2="100%" y2="100%">
+                                <stop offset="0%" style="stop-color:#e0e0e0;stop-opacity:1" />
+                                <stop offset="50%" style="stop-color:#9e9e9e;stop-opacity:1" />
+                                <stop offset="100%" style="stop-color:#616161;stop-opacity:1" />
+                            </linearGradient>
+                        </defs>
+                        <!-- Outer Rim -->
+                        <circle cx="50" cy="50" r="48" style="fill:url(#metal-rim);stroke:#333;stroke-width:2" />
+                        <!-- Inner Housing -->
+                        <circle cx="50" cy="50" r="42" style="fill:#111" />
+                        <!-- The Lens -->
+                        <circle cx="50" cy="50" r="28" style="fill:url(#lens-glow);stroke:#800000;stroke-width:1" />
+                        <!-- Reflection highlight for realism -->
+                        <circle cx="35" cy="35" r="5" style="fill:#fff;opacity:0.6;filter:blur(2px)" />
+                    </svg>
+                    <div class="brand-name">HAL9000</div>
+                </a>
+            </div>
+            <div class="session-info">
+                <div class="chat-id" id="chatId">Chat ID: XXXXXX</div>
+            </div>
+        </div>
+    </header>
+
+    <main id="chatMain">
+        <div class="chat-container" id="chatContainer">
+            <!-- Messages will be injected here -->
+        </div>
+    </main>
+
+    <footer>
+        <div class="footer-content">
+            <span id="servedTurns">Served ... turns of conversations.</span>
+            <span id="copyright">
+                &copy; 2023-<span id="currentYear"></span> <a href="https://LeaskH.com" target="_blank">LeaskH.com</a> |
+                <a href="https://twitter.com/LeaskH" target="_blank">@LeaskH</a>
+            </span>
+        </div>
+    </footer>
+
+    <script>
+        // Injected Data
+        const chatData = '{{data}}';
+
+        const chatId = document.getElementById('chatId');
+        const currentYear = document.getElementById('currentYear');
+
+        // Set session time and ID
+        const now = new Date();
+        currentYear.textContent = now.getFullYear(); // Copyright year
+
+        // Set Chat ID from data
+        if (chatData.chat_id) {
+            chatId.textContent = `Chat ID: ${chatData.chat_id}`;
+        } else {
+            chatId.textContent = `Chat ID: UNKNOWN`;
+        }
+
+        // Served Turns (Mock logic or could be from data if available)
+        const servedTurns = document.getElementById('servedTurns');
+        let totalTurns = 0;
+        if (chatData.prompt_count) {
+            totalTurns = chatData.prompt_count;
+        } else {
+            // If the server provides a total count, use it. Otherwise mock.
+            totalTurns = Math.floor(Math.random() * 5000) + 1000;
+        }
+        servedTurns.textContent = `Processed ${Number(totalTurns).toLocaleString()} prompts.`;
+
+        function renderMessage(msg) {
+            const row = document.createElement('div');
+            // Determine role class based on specific role string
+            // "HAL9000" -> robot
+            // Anything else -> human
+            const roleClass = msg.role === 'HAL9000' ? 'robot' : 'human';
+            row.className = `message-row ${roleClass}`;
+
+            const group = document.createElement('div');
+            group.className = 'message-group';
+
+            // Mapping sender name
+            const senderName = msg.role === 'HAL9000' ? '🤖 HAL9000' : `😺 ${msg.role}`;
+
+            const bubble = document.createElement('div');
+            bubble.className = 'message-bubble';
+
+            // Name inside the bubble
+            const nameDiv = document.createElement('div');
+            nameDiv.className = 'sender-name-inside';
+
+            const nameSpan = document.createElement('span');
+            nameSpan.textContent = senderName;
+
+            const timeSpan = document.createElement('span');
+            timeSpan.className = 'message-time';
+
+            // Parse time from msg.time (ISO string)
+            let msgTime = '';
+            if (msg.time) {
+                msgTime = new Date(msg.time).toLocaleString();
+            } else {
+                msgTime = new Date().toLocaleString();
+            }
+            timeSpan.textContent = msgTime;
+
+            nameDiv.appendChild(nameSpan);
+            nameDiv.appendChild(timeSpan);
+
+            bubble.appendChild(nameDiv);
+
+            // Content
+            const contentDiv = document.createElement('div');
+            contentDiv.className = 'message-content';
+            contentDiv.innerHTML = marked.parse(msg.text || ''); // Use msg.text from JSON
+            bubble.appendChild(contentDiv);
+
+            group.appendChild(bubble);
+            row.appendChild(group);
+            chatContainer.appendChild(row);
+        }
+
+        // Render loop
+        let delay = 0;
+        if (chatData.messages && Array.isArray(chatData.messages)) {
+            chatData.messages.forEach(msg => {
+                setTimeout(() => {
+                    renderMessage(msg);
+                    // Scroll to bottom
+                    const main = document.getElementById('chatMain');
+                    main.scrollTop = main.scrollHeight;
+                }, delay);
+                delay += 800; // Keep delay effect
+            });
+        }
+
+        // Abstract Fluid Background Animation
+        const canvas = document.getElementById('neural-canvas');
+        if (canvas) {
+            const ctx = canvas.getContext('2d');
+            let width, height;
+            let blobs = [];
+
+            // Configuration
+            const blobCount = 12;
+            const baseRadius = 250; // Large blobs
+
+            function resize() {
+                width = canvas.width = window.innerWidth;
+                height = canvas.height = window.innerHeight;
+            }
+
+            class Blob {
+                constructor() {
+                    this.x = Math.random() * width;
+                    this.y = Math.random() * height;
+                    this.vx = (Math.random() - 0.5) * 1.5; // Smooth slow movement
+                    this.vy = (Math.random() - 0.5) * 1.5;
+                    this.radius = baseRadius + Math.random() * 150;
+                    // Vibrant colors: High Saturation, Medium Lightness
+                    this.hue = Math.random() * 360;
+                    this.hueSpeed = 0.2 + Math.random() * 0.3;
+                }
+
+                update() {
+                    this.x += this.vx;
+                    this.y += this.vy;
+                    this.hue += this.hueSpeed; // Color shift
+
+                    // Soft bounce off edges
+                    if (this.x < -this.radius || this.x > width + this.radius) this.vx *= -1;
+                    if (this.y < -this.radius || this.y > height + this.radius) this.vy *= -1;
+                }
+
+                draw() {
+                    ctx.beginPath();
+                    // Radial gradient for soft edges
+                    const gradient = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.radius);
+                    gradient.addColorStop(0, `hsla(${this.hue}, 85%, 60%, 0.8)`);
+                    gradient.addColorStop(0.6, `hsla(${this.hue}, 85%, 60%, 0.4)`);
+                    gradient.addColorStop(1, `hsla(${this.hue}, 85%, 60%, 0)`);
+
+                    ctx.fillStyle = gradient;
+                    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
+                    ctx.fill();
+                }
+            }
+
+            function initBlobs() {
+                blobs = [];
+                for (let i = 0; i < blobCount; i++) {
+                    blobs.push(new Blob());
+                }
+            }
+
+            function animate() {
+                ctx.clearRect(0, 0, width, height);
+
+                // 'screen' blend mode makes colors vibrant and additive where they overlap
+                ctx.globalCompositeOperation = 'screen';
+
+                for (let i = 0; i < blobs.length; i++) {
+                    blobs[i].update();
+                    blobs[i].draw();
+                }
+                requestAnimationFrame(animate);
+            }
+
+            window.addEventListener('resize', () => {
+                resize();
+                initBlobs();
+            });
+
+            resize();
+            initBlobs();
+            animate();
+        }
+
+    </script>
+</body>
+
+</html>

package/web/turn.mjs

@@ -0,0 +1,43 @@
+import { dbio, hal, utilitas } from '../index.mjs';
+import { readFile } from 'fs/promises';
+
+const getPath = (subPath) => utilitas.__(import.meta.url, subPath);
+const getHtml = async () => await readFile(getPath('turn.html'), 'utf-8');
+const renderHtml = async (data) => await getHtml().then((html) => html.replace("'{{data}}'", data));
+
+const process = async (ctx, next) => {
+    const result = await dbio.queryOne(
+        `SELECT * FROM ${hal.table} WHERE token = $1`,
+        [ctx.params.token]
+    );
+    const prompt_count = await dbio.countAll(hal.table);
+    result.received = JSON.parse(result.received);
+    result.response = JSON.parse(result.response);
+    // print(result);
+    const messages = [{
+        role: `${result.received.message.from.username} (${result.received.message.from.first_name} ${result.received.message.from.last_name})`,
+        text: result.received_text,
+        time: new Date(result.received.message.date * 1000),
+    }];
+    result.response.forEach(r => {
+        messages.push({
+            role: 'HAL9000',
+            text: r.raw,
+            time: new Date((r.edit_date || r.date) * 1000),
+        });
+    });
+    ctx.body = await renderHtml(JSON.stringify({
+        bot_id: result.bot_id, chat_id: result.chat_id,
+        chat_type: result.chat_type, messages, prompt_count,
+    }));
+};
+
+export const { actions } = {
+    actions: [
+        {
+            path: 'turns/:token',
+            method: 'GET',
+            process,
+        },
+    ]
+};