@3minapi/cli 0.0.0-stage → 0.22.0

package/dist/modules/dashboard/lock.js

@@ -0,0 +1,93 @@
+import { randomBytes } from 'node:crypto';
+import { readFileSync, rmSync, writeFileSync } from 'node:fs';
+import path from 'node:path';
+import { BIN, CliError, DASHBOARD_LINK_FILE, DASHBOARD_LOCK_FILE, DASHBOARD_STOP_FILE, SECRET_FILE_MODE } from "../../core/domain/index.js";
+import { claimLockFile, heartbeater, readLockFile, readSettled, releaseLockFile, stopFileMatches } from "../../core/host/runner-lock.js";
+import { writeSecretFile } from "../../core/secure-fs.js";
+export function dashboardLockPath(dataDir) {
+    return path.join(dataDir, DASHBOARD_LOCK_FILE);
+}
+function stopPath(dataDir) {
+    return path.join(dataDir, DASHBOARD_STOP_FILE);
+}
+function linkPath(dataDir) {
+    return path.join(dataDir, DASHBOARD_LINK_FILE);
+}
+export function readDashboard(dataDir) {
+    return readLockFile(dashboardLockPath(dataDir));
+}
+export function readDashboardSettled(dataDir) {
+    return readSettled(() => readDashboard(dataDir));
+}
+export function acquireDashboardLock(dataDir, fields, now) {
+    const file = dashboardLockPath(dataDir);
+    let info = {
+        pid: process.pid,
+        nonce: randomBytes(8).toString('hex'),
+        startedAt: now,
+        heartbeat: true,
+        port: null,
+        origins: [],
+        ...fields
+    };
+    claimLockFile(file, info, (cause) => alreadyRunning(dataDir, cause));
+    const beat = heartbeater(file);
+    rmSync(stopPath(dataDir), { force: true });
+    rmSync(linkPath(dataDir), { force: true });
+    let released = false;
+    return {
+        get info() {
+            return info;
+        },
+        listening({ url, lanUrls, port, origins }) {
+            const record = { nonce: info.nonce, url, lanUrls };
+            writeSecretFile(linkPath(dataDir), JSON.stringify(record));
+            info = { ...info, port, origins };
+            writeSecretFile(file, JSON.stringify(info));
+        },
+        stopRequested() {
+            return stopFileMatches(stopPath(dataDir), info.nonce);
+        },
+        heartbeat: beat,
+        release() {
+            if (released)
+                return;
+            released = true;
+            releaseLockFile(file, info.nonce);
+            rmSync(stopPath(dataDir), { force: true });
+            try {
+                const record = JSON.parse(readFileSync(linkPath(dataDir), 'utf8'));
+                if (record.nonce === info.nonce)
+                    rmSync(linkPath(dataDir), { force: true });
+            }
+            catch {
+            }
+        }
+    };
+}
+export function readDashboardLinks(dataDir, info) {
+    try {
+        const record = JSON.parse(readFileSync(linkPath(dataDir), 'utf8'));
+        if (record.nonce !== info.nonce || typeof record.url !== 'string')
+            return null;
+        return { url: record.url, lanUrls: Array.isArray(record.lanUrls) ? record.lanUrls : [] };
+    }
+    catch {
+        return null;
+    }
+}
+export function requestDashboardStop(dataDir, info) {
+    writeFileSync(stopPath(dataDir), info.nonce, { mode: SECRET_FILE_MODE });
+}
+function alreadyRunning(dataDir, cause) {
+    const current = readDashboard(dataDir);
+    if (current.state === 'running') {
+        const where = current.info.detached ? 'in the background' : 'in another terminal';
+        return new CliError(`the dashboard is already running ${where} (pid ${current.info.pid}). Only one can run per host.\n` +
+            `Open it with '${BIN} dashboard url', or stop it with '${BIN} dashboard stop' first.`);
+    }
+    if (current.state === 'starting') {
+        return new CliError(`another '${BIN} dashboard' is starting right now.`);
+    }
+    return new CliError(`cannot create ${dashboardLockPath(dataDir)}: ${cause.message}`);
+}

package/dist/modules/dashboard/server.js

@@ -0,0 +1,295 @@
+import { randomBytes } from 'node:crypto';
+import { createServer } from 'node:http';
+import { CliError, UsageError } from "../../core/domain/index.js";
+import { APP_CSS, APP_JS } from "./assets.js";
+import { LOG_LEVELS, RANGES, RUN_RANGES, RUN_STATES, decodeCursor, hostName, knownWorkers, listRuns, logChannels, overview, isRepeat, readLog, repeatRuns, runDetail, runLog, runOfTask, taskLog, workerSource, workersView } from "./data.js";
+import { checkRequest, cookieName, isRemoteViewer, lanNames, readCookie, tokenMatches } from "./guard.js";
+import { shortTaskId } from "./views/html.js";
+import { layout, message } from "./views/layout.js";
+import { LOG_LINE_CHOICES, logsPage } from "./views/logs.js";
+import { overviewPage } from "./views/overview.js";
+import { repeatPage, runOfTaskPage, runPage, runsPage } from "./views/runs.js";
+import { workerCodePage, workersPage } from "./views/workers.js";
+export const RUNS_PAGE_LIMIT = 100;
+export const REFRESH_MS = 5_000;
+export const OVERVIEW_REFRESH_MS = 15_000;
+const SECURITY_HEADERS = {
+    'Content-Security-Policy': "default-src 'none'; script-src 'self'; style-src 'self'; img-src 'self'; connect-src 'self'; form-action 'self'; base-uri 'none'; frame-ancestors 'none'",
+    'X-Content-Type-Options': 'nosniff',
+    'X-Frame-Options': 'DENY',
+    'Referrer-Policy': 'no-referrer',
+    'Cross-Origin-Opener-Policy': 'same-origin',
+    'Cross-Origin-Resource-Policy': 'same-origin',
+    'Cache-Control': 'no-store'
+};
+export async function startDashboard(opts) {
+    const token = opts.token ?? randomBytes(32).toString('hex');
+    const bindAddress = opts.listenHost ?? (opts.lan ? '0.0.0.0' : '127.0.0.1');
+    let port = 0;
+    const server = createServer((req, res) => {
+        let reply;
+        const ctx = { host: null, remote: true, lan: opts.lan === true };
+        try {
+            reply = handle(opts, token, port, req, ctx);
+        }
+        catch (err) {
+            opts.onError?.(err, req.url ?? '/');
+            reply = page(ctx, opts, 500, 'Error', null, err instanceof CliError
+                ? message('Something went wrong', err.message)
+                : message('Unexpected error', `This is a bug in the CLI — the details are in the terminal running 3minapi dashboard${terminalWhere(ctx)}.`));
+        }
+        send(req, res, reply);
+    });
+    await new Promise((resolve, reject) => {
+        server.once('error', reject);
+        server.listen(opts.port, bindAddress, () => {
+            server.off('error', reject);
+            resolve();
+        });
+    }).catch((err) => {
+        if (err.code === 'EADDRINUSE') {
+            throw new UsageError(`port ${opts.port} is already in use — pick another with --port`);
+        }
+        if (err.code === 'EACCES') {
+            throw new UsageError(`cannot listen on port ${opts.port}: permission denied — pick a port above 1023 with --port`);
+        }
+        throw new CliError(`cannot start the dashboard on ${bindAddress}:${opts.port}: ${err.message}`);
+    });
+    port = server.address().port;
+    const origin = `http://127.0.0.1:${port}`;
+    const lanOrigins = opts.lan
+        ? (opts.lanNames ?? lanNames)()
+            .filter((name) => /^\d+\.\d+\.\d+\.\d+$/.test(name) || name.endsWith('.local'))
+            .map((name) => `http://${name}:${port}`)
+        : [];
+    return {
+        url: `${origin}/?token=${token}`,
+        origin,
+        lanUrls: lanOrigins.map((o) => `${o}/?token=${token}`),
+        lanOrigins,
+        port,
+        close: () => new Promise((resolve) => {
+            server.closeAllConnections();
+            server.close(() => resolve());
+        })
+    };
+}
+function handle(opts, token, port, req, pageCtx) {
+    const access = (kind, status) => {
+        let path = '/';
+        try {
+            path = new URL(req.url ?? '/', 'http://127.0.0.1').pathname;
+        }
+        catch {
+        }
+        opts.onAccess?.({
+            kind,
+            status,
+            remote: req.socket.remoteAddress,
+            host: req.headers.host,
+            path
+        });
+    };
+    const denied = checkRequest({
+        method: req.method,
+        host: req.headers.host,
+        origin: req.headers.origin,
+        secFetchSite: header(req, 'sec-fetch-site')
+    }, port, { lan: opts.lan, lanNames: opts.lanNames });
+    if (denied) {
+        if (denied.status === 403)
+            access('denied', 403);
+        return text(denied.status, denied.message);
+    }
+    pageCtx.remote = isRemoteViewer({ host: req.headers.host, remoteAddress: req.socket.remoteAddress }, port);
+    const url = new URL(req.url ?? '/', 'http://127.0.0.1');
+    const cookie = cookieName(port);
+    if (url.pathname === '/favicon.ico')
+        return { status: 204, type: 'text/plain; charset=utf-8', body: '' };
+    const given = url.searchParams.get('token');
+    if (given !== null) {
+        if (!tokenMatches(given, token)) {
+            access('denied', 401);
+            return unauthorized(pageCtx, opts);
+        }
+        access('granted', 303);
+        url.searchParams.delete('token');
+        return {
+            status: 303,
+            type: 'text/plain; charset=utf-8',
+            body: '',
+            headers: {
+                Location: `${url.pathname}${url.search}`,
+                'Set-Cookie': `${cookie}=${token}; Path=/; HttpOnly; SameSite=Strict`
+            }
+        };
+    }
+    if (!tokenMatches(readCookie(req.headers.cookie, cookie), token)) {
+        access('denied', 401);
+        return unauthorized(pageCtx, opts);
+    }
+    const path = url.pathname;
+    const q = url.searchParams;
+    if (path === '/assets/app.css')
+        return { status: 200, type: 'text/css; charset=utf-8', body: APP_CSS };
+    if (path === '/assets/app.js')
+        return { status: 200, type: 'text/javascript; charset=utf-8', body: APP_JS };
+    const ctx = { ...pageCtx, host: hostName(opts) };
+    pageCtx.host = ctx.host;
+    if (path === '/') {
+        const range = pick(q.get('range'), RANGES, '7d');
+        return page(ctx, opts, 200, 'Overview', 'overview', overviewPage(overview(opts, range), opts.now(), ctx), true);
+    }
+    if (path === '/runs') {
+        const range = pick(q.get('range'), RUN_RANGES, '7d');
+        const state = pick(q.get('state'), RUN_STATES, undefined);
+        const worker = q.get('worker') || undefined;
+        const after = decodeCursor(q.get('after'));
+        const filter = { range, ...(state ? { state } : {}), ...(worker ? { worker } : {}) };
+        const { runs, next } = listRuns(opts, filter, RUNS_PAGE_LIMIT, after);
+        const workers = knownWorkers(opts);
+        if (worker && !workers.includes(worker))
+            workers.push(worker);
+        return page(ctx, opts, 200, 'Runs', 'runs', runsPage({ runs, next, paged: after !== null, firstNo: after ? firstNo(q.get('no')) : 1 }, filter, workers, ctx), after === null);
+    }
+    const run = /^\/runs\/([^/]+)(?:\/(\d+))?$/.exec(path);
+    if (run && decodePart(run[1]) !== null) {
+        const taskId = decodePart(run[1]);
+        const base = `/runs/${encodeURIComponent(taskId)}`;
+        const runNo = run[2] !== undefined ? positive(run[2]) : undefined;
+        if (run[2] !== undefined) {
+            if (runNo === undefined)
+                return notFound(ctx, opts);
+            if (run[2] !== String(runNo))
+                return redirect(`${base}/${runNo}${q.size > 0 ? `?${q}` : ''}`);
+        }
+        const legacy = runNo === undefined ? positive(q.get('run')) : undefined;
+        if (legacy !== undefined) {
+            q.delete('run');
+            q.delete('runs_before');
+            return redirect(`${base}/${legacy}${q.size > 0 ? `?${q}` : ''}`);
+        }
+        const detail = runDetail(opts, taskId);
+        if (!detail) {
+            return page(ctx, opts, 404, 'Not found', 'runs', message('Run not found', `No task ${taskId} in the history or saved results on host ${ctx.host}.`));
+        }
+        const offset = Number(q.get('offset') ?? 0);
+        const view = {
+            path: q.get('path') || '$',
+            offset: Number.isInteger(offset) && offset >= 0 ? offset : 0
+        };
+        const repeat = isRepeat(detail.run);
+        if (!repeat) {
+            if (runNo !== undefined)
+                return redirect(base);
+            return page(ctx, opts, 200, `Run ${shortTaskId(taskId)}`, 'runs', runPage(detail, view, taskLogSection(opts, detail.run, () => taskLog(opts, detail.run)), ctx));
+        }
+        if (runNo !== undefined) {
+            const one = runOfTask(opts, detail.run, runNo);
+            const log = one.result
+                ? taskLogSection(opts, detail.run, () => runLog(opts, detail.run, runNo, one.from, Date.parse(one.result.created_at)))
+                : null;
+            return page(ctx, opts, 200, `Run ${shortTaskId(taskId)} · ${runNo}`, 'runs', runOfTaskPage(detail.run, runNo, one, view, log, ctx));
+        }
+        const runsBefore = positive(q.get('runs_before'));
+        return page(ctx, opts, 200, `Run ${shortTaskId(taskId)}`, 'runs', repeatPage(detail.run, repeatRuns(opts, taskId, runsBefore), runsBefore !== undefined, ctx), runsBefore === undefined && detail.run.state === 'running');
+    }
+    if (path === '/workers') {
+        return page(ctx, opts, 200, 'Workers', 'workers', workersPage(workersView(opts), ctx), true);
+    }
+    const worker = /^\/workers\/([^/]+)$/.exec(path);
+    if (worker && decodePart(worker[1]) !== null) {
+        const name = decodePart(worker[1]);
+        const files = workerSource(opts, name);
+        if (!files) {
+            return page(ctx, opts, 404, 'Not found', 'workers', message('Worker not found', `No worker file named ${name} in the workers folder.`));
+        }
+        return page(ctx, opts, 200, name, 'workers', workerCodePage(name, files, ctx));
+    }
+    if (path === '/logs') {
+        const channels = logChannels(opts);
+        const raw = q.get('channel') || null;
+        const unknown = raw !== null && !channels.includes(raw) ? raw : null;
+        const channel = unknown === null ? raw : null;
+        const level = pick(q.get('level'), LOG_LEVELS, 'debug');
+        const count = pick(Number(q.get('n')), LOG_LINE_CHOICES, LOG_LINE_CHOICES[0]);
+        const read = readLog(opts, channel, { lines: count, minLevel: level });
+        return page(ctx, opts, 200, 'Logs', 'logs', unknown === null
+            ? logsPage(read, { channel, channels, level, count }, ctx)
+            : message('No such log', `No log for worker ${unknown} on host ${ctx.host}.`), true);
+    }
+    return notFound(ctx, opts);
+}
+function notFound(ctx, opts) {
+    return page(ctx, opts, 404, 'Not found', null, message('Not found', 'There is no page here.'));
+}
+function redirect(location) {
+    return {
+        status: 303,
+        type: 'text/plain; charset=utf-8',
+        body: '',
+        headers: { Location: location }
+    };
+}
+function decodePart(raw) {
+    try {
+        return decodeURIComponent(raw);
+    }
+    catch {
+        return null;
+    }
+}
+function positive(raw) {
+    if (raw === null || raw === '')
+        return undefined;
+    const n = Number(raw);
+    return Number.isSafeInteger(n) && n >= 1 ? n : undefined;
+}
+function firstNo(raw) {
+    const n = Number(raw);
+    return Number.isInteger(n) && n >= 1 ? n : 1;
+}
+function taskLogSection(opts, run, read) {
+    try {
+        return read();
+    }
+    catch (err) {
+        opts.onError?.(err, `/runs/${run.task_id} (log)`);
+        return { lines: [], deleted: false, error: err?.message ?? String(err) };
+    }
+}
+function pick(value, choices, fallback) {
+    return choices.includes(value) ? value : fallback;
+}
+function header(req, name) {
+    const v = req.headers[name];
+    return Array.isArray(v) ? v[0] : v;
+}
+function page(ctx, opts, status, title, section, body, refresh = false) {
+    const refreshMs = section === 'overview' ? OVERVIEW_REFRESH_MS : REFRESH_MS;
+    return {
+        status,
+        type: 'text/html; charset=utf-8',
+        body: layout({ title, section, version: opts.version, refresh, refreshMs, ctx }, body).value
+    };
+}
+function terminalWhere(ctx) {
+    if (!ctx.remote)
+        return '';
+    return ctx.host !== null ? ` on host ${ctx.host}` : ' on the computer running the dashboard';
+}
+function unauthorized(ctx, opts) {
+    return page(ctx, opts, 401, 'Sign in', null, message('Open the link from the terminal', `This dashboard needs the link that 3minapi dashboard printed — it works for that run only. Each run makes a new link; ${ctx.remote ? 'on the computer running the dashboard, ' : ''}3minapi dashboard url prints it again.`));
+}
+function text(status, body) {
+    return { status, type: 'text/plain; charset=utf-8', body };
+}
+function send(req, res, reply) {
+    res.writeHead(reply.status, {
+        ...SECURITY_HEADERS,
+        'Content-Type': reply.type,
+        'Content-Length': Buffer.byteLength(reply.body),
+        ...reply.headers
+    });
+    res.end(req.method === 'HEAD' ? undefined : reply.body);
+}

package/dist/modules/dashboard/views/html.js

@@ -0,0 +1,114 @@
+import { BUILTIN_RESULTS_PREFIX } from "../../../core/domain/index.js";
+import { formatLocal } from "../../../core/time.js";
+export class Html {
+    value;
+    constructor(value) {
+        this.value = value;
+    }
+    toString() {
+        return this.value;
+    }
+}
+export function escapeHtml(text) {
+    return text
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+function render(part) {
+    if (part instanceof Html)
+        return part.value;
+    if (Array.isArray(part))
+        return part.map(render).join('');
+    if (part === null || part === undefined || part === false)
+        return '';
+    return escapeHtml(String(part));
+}
+export function html(strings, ...values) {
+    let out = strings[0];
+    for (let i = 0; i < values.length; i++)
+        out += render(values[i]) + strings[i + 1];
+    return new Html(out);
+}
+export function qs(params) {
+    const p = new URLSearchParams();
+    for (const [k, v] of Object.entries(params))
+        if (v !== undefined && v !== null && v !== '')
+            p.set(k, String(v));
+    const s = p.toString();
+    return s ? `?${s}` : '';
+}
+export function time(ms) {
+    if (ms === null || ms === undefined || Number.isNaN(ms))
+        return html `<span class="muted">—</span>`;
+    const text = formatLocal(ms);
+    return html `<time datetime="${new Date(ms).toISOString()}" title="${text}"
+		>${text.slice(0, 19)}</time
+	>`;
+}
+export function duration(ms) {
+    if (ms === null)
+        return '—';
+    if (ms < 1000)
+        return `${ms} ms`;
+    if (ms < 60_000)
+        return `${(ms / 1000).toFixed(ms < 10_000 ? 2 : 1)} s`;
+    const m = Math.floor(ms / 60_000);
+    return `${m}m ${Math.round((ms % 60_000) / 1000)}s`;
+}
+export function stateTone(state) {
+    switch (state) {
+        case 'completed':
+            return 'ok';
+        case 'failed':
+            return 'fail';
+        case 'running':
+        case 'received':
+            return 'progress';
+        default:
+            return 'muted';
+    }
+}
+export function badge(text, tone = stateTone(text)) {
+    return html `<span class="badge badge-${tone}">${text}</span>`;
+}
+export function tag(text, title) {
+    return title
+        ? html `<span class="tag" title="${title}">${text}</span>`
+        : html `<span class="tag">${text}</span>`;
+}
+export function smallButton(label, extra, attrs = html ``) {
+    return html `<button type="button" class="btn-sm ${extra}" ${attrs}>${label}</button>`;
+}
+export function copyButton(text, label = 'Copy') {
+    return smallButton(label, 'copy', html `data-copy="${text}"`);
+}
+export function command(text, ctx) {
+    return html `<span class="cmd"
+		>${ctx.remote
+        ? html `<span class="muted">Run on ${ctx.host}:</span> `
+        : ''}<code>${text}</code>${copyButton(text)}</span
+	>`;
+}
+export function hostPath(file, ctx) {
+    return ctx.remote
+        ? html `<code>${file}</code> <span class="muted">on host ${ctx.host}</span>`
+        : html `<code>${file}</code> ${copyButton(file, 'Copy path')}`;
+}
+export function isBuiltinWorker(name) {
+    return name.startsWith(BUILTIN_RESULTS_PREFIX);
+}
+export const BUILTIN_WORKER_LABEL = 'Results reader';
+export function workerName(name) {
+    return isBuiltinWorker(name)
+        ? html `<span title="${name}">${BUILTIN_WORKER_LABEL} ${tag('built-in')}</span>`
+        : html `${name}`;
+}
+export function workerText(name) {
+    return isBuiltinWorker(name) ? `${BUILTIN_WORKER_LABEL} (built-in)` : name;
+}
+export function shortTaskId(taskId) {
+    return taskId.length <= 8 ? taskId : `…${taskId.slice(-8)}`;
+}

package/dist/modules/dashboard/views/layout.js

@@ -0,0 +1,59 @@
+import { html } from "./html.js";
+const NAV = [
+    ['overview', 'Overview', '/'],
+    ['runs', 'Runs', '/runs'],
+    ['workers', 'Workers', '/workers'],
+    ['logs', 'Logs', '/logs']
+];
+export function layout(opts, body) {
+    return html `<!doctype html>
+		<html lang="en">
+			<head>
+				<meta charset="utf-8" />
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
+				<meta name="color-scheme" content="light dark" />
+				<meta name="referrer" content="no-referrer" />
+				<title>${opts.title} · 3minapi dashboard</title>
+				<link rel="stylesheet" href="/assets/app.css" />
+				<script src="/assets/app.js" defer></script>
+			</head>
+			<body
+				${opts.ctx.host !== null ? html ` data-host="${opts.ctx.host}"` : ''}${opts.ctx.remote
+        ? html ` data-remote`
+        : ''}
+			>
+				<header class="top">
+					<a class="brand" href="/">3minapi <span>dashboard</span></a>
+					<nav aria-label="Sections">
+						${NAV.map(([key, label, href]) => html `<a href="${href}" ${key === opts.section ? html ` aria-current="page"` : ''}
+									>${label}</a
+								>`)}
+					</nav>
+					${opts.refresh
+        ? html `<label class="auto"
+								><input type="checkbox" id="auto-refresh" checked /> Auto refresh</label
+							>`
+        : ''}
+				</header>
+				${opts.refresh ? html `<p id="stale" class="stale" role="status" hidden></p>` : ''}
+				<main id="main" ${opts.refresh ? html ` data-refresh="${opts.refreshMs}"` : ''}>
+					${body}
+				</main>
+				<footer class="foot">
+					<span>3minapi ${opts.version}</span>
+					<span
+						>${opts.ctx.lan
+        ? 'Read-only. LAN mode is on — other devices on the network see these pages over plain HTTP.'
+        : 'Local and read-only — data never leaves this PC.'}
+						Change things with the CLI.</span
+					>
+				</footer>
+			</body>
+		</html> `;
+}
+export function message(title, text) {
+    return html `<section class="empty">
+		<h1>${title}</h1>
+		<p>${text}</p>
+	</section>`;
+}

package/dist/modules/dashboard/views/logs.js

@@ -0,0 +1,122 @@
+import { BIN } from "../../../core/domain/index.js";
+import { stripControl } from "../../../core/log-read.js";
+import { LOG_LEVELS, LOG_SCAN_MAX_BYTES } from "../data.js";
+import { command, html, shortTaskId, smallButton, time, workerName, workerText } from "./html.js";
+export const LOG_LINE_CHOICES = [100, 300, 1000];
+export function logsPage(read, opts, ctx) {
+    return html `
+		<div class="head"><h1>Logs</h1></div>
+		<form class="filters" method="get" action="/logs" data-autosubmit>
+			<label
+				>Log
+				<select name="channel">
+					<option value="" ${opts.channel === null ? html ` selected` : ''}>CLI (app)</option>
+					${opts.channels.map((c) => html `<option value="${c}" ${c === opts.channel ? html ` selected` : ''}>
+								worker: ${workerText(c)}
+							</option>`)}
+				</select>
+			</label>
+			<label
+				>Level
+				<select name="level">
+					${LOG_LEVELS.map((l) => html `<option value="${l}" ${l === opts.level ? html ` selected` : ''}>
+								${l === 'debug' ? 'all' : `${l} and above`}
+							</option>`)}
+				</select>
+			</label>
+			<label
+				>Lines
+				<select name="n">
+					${LOG_LINE_CHOICES.map((n) => html `<option value="${n}" ${n === opts.count ? html ` selected` : ''}>${n}</option>`)}
+				</select>
+			</label>
+			<label
+				>Find
+				<input
+					type="search"
+					id="log-find"
+					placeholder="Text in the message"
+					autocomplete="off"
+					spellcheck="false"
+				/>
+			</label>
+			<noscript><button type="submit">Apply</button></noscript>
+		</form>
+		<p class="note">
+			Follow it in a terminal:
+			${command(opts.channel === null ? `${BIN} logs -f` : `${BIN} worker logs ${opts.channel} -f`, ctx)}
+		</p>
+		${read.lines.length === 0
+        ? html `<p class="muted">No log lines.</p>`
+        : html `<p class="muted" id="log-find-count" hidden></p>
+					${logTable([...read.lines].reverse(), { channel: false, task: true })}`}
+		${read.truncated
+        ? html `<p class="muted">
+					Searched the most recent ${LOG_SCAN_MAX_BYTES / 1024 / 1024} MB of this log. For older
+					lines use
+					${command(opts.channel === null
+            ? `${BIN} logs -n 10000`
+            : `${BIN} worker logs ${opts.channel} -n 10000`, ctx)}
+				</p>`
+        : ''}
+	`;
+}
+export function logTable(lines, cols) {
+    return html `<div class="scroll">
+		<table class="table log">
+			<thead>
+				<tr>
+					<th>Time</th>
+					${cols.channel ? html `<th>Log</th>` : ''}
+					<th>Level</th>
+					${cols.task ? html `<th>Task</th>` : ''}
+					<th>Message</th>
+				</tr>
+			</thead>
+			<tbody>
+				${lines.map((l) => {
+        if (!l.record) {
+            return html `<tr>
+							<td></td>
+							${cols.channel ? html `<td></td>` : ''}
+							<td></td>
+							${cols.task ? html `<td></td>` : ''}
+							<td class="msg-cell">${clamp(html `<code>${stripControl(l.raw ?? '')}</code>`)}</td>
+						</tr>`;
+        }
+        const r = l.record;
+        const taskId = typeof r.attributes?.task_id === 'string' ? r.attributes.task_id : null;
+        const attrs = Object.entries(r.attributes ?? {})
+            .filter(([k]) => !(cols.task && taskId !== null && k === 'task_id'))
+            .map(([k, v]) => `${k}=${typeof v === 'string' ? v : JSON.stringify(v)}`)
+            .join(' ');
+        return html `<tr class="lvl-${r.severity_text}">
+						<td>${time(Date.parse(r.timestamp))}</td>
+						${cols.channel
+            ? html `<td>${l.channel === null ? 'cli' : workerName(l.channel)}</td>`
+            : ''}
+						<td><span class="level">${String(r.severity_text)}</span></td>
+						${cols.task
+            ? html `<td class="task">
+									${taskId
+                ? html `<a href="/runs/${encodeURIComponent(taskId)}" title="${taskId}"
+												><code>${shortTaskId(taskId)}</code></a
+											>`
+                : ''}
+								</td>`
+            : ''}
+						<td class="msg-cell">
+							${clamp(html `<span class="msg">${stripControl(String(r.body))}</span>${attrs
+            ? html ` <span class="attrs">${stripControl(attrs)}</span>`
+            : ''}`)}
+						</td>
+					</tr>`;
+    })}
+			</tbody>
+		</table>
+	</div>`;
+}
+function clamp(content) {
+    return html `<div class="clamp">${content}</div>
+		${smallButton('Show all', 'more', html `hidden`)}`;
+}