pgkiln 0.31.0 → 0.36.0

package/src/runtime/devbar.ts

@@ -0,0 +1,184 @@
+// Developer toolbar (APEX: Runtime Developer Toolbar) and session state
+// viewer (APEX: Session → View session state), migration 079.
+//
+// A builder session hands the browser a second random token in the cookie
+// pgkiln_devbar (path /a, HttpOnly, SameSite=Lax); the database keeps its
+// sha256 on the builder session (meta.session.devbar_hash). A page of an
+// application shows the toolbar when that token belongs to a live builder
+// session of a developer who may open the application (an administrator, or
+// a member of its workspace). The token does nothing else: it is not the
+// builder session's token, and every builder request still needs that one.
+//
+// The toolbar links to the App Builder, the application and the page in the
+// Page Designer, (sprint 59) Quick edit: click a region, item or button of the
+// page to open it in the Page Designer (app.js; GET /builder/pages/:id/quick), shows the session state (GET /a/:alias/:page/devbar/session),
+// clears the page's items, and switches debug messages on for this session
+// only (POST …/devbar/debug; meta.session.state.__DEBUG_LEVEL, read by
+// loadContext).
+import type { FastifyInstance, FastifyReply, FastifyRequest } from 'fastify';
+import { owner, runtime } from '../db.ts';
+import { DEBUG_LEVELS } from '../debug.ts';
+import { html, raw, type Raw } from '../html.ts';
+import { hashToken, newToken } from '../security.ts';
+import { saveState, sessionLimits, type Session } from '../session.ts';
+import { documentShell } from '../layout.ts';
+import type { PageContext } from './context.ts';
+
+export const DEVBAR_COOKIE = 'pgkiln_devbar';
+const COOKIE_PATH = '/a';
+const BUILDER = '/builder';
+/** The session state key of the session's own debug level. */
+export const SESSION_DEBUG = '__DEBUG_LEVEL';
+
+export interface Devbar {
+  username: string;
+}
+
+/** Builder: give the browser a toolbar token for this developer session (when it has none that matches). */
+export async function ensureDevbar(req: FastifyRequest, reply: FastifyReply, s: Session) {
+  if (!s.username) return;
+  const token = req.cookies[DEVBAR_COOKIE];
+  if (token && token.length <= 100 && s.devbar_hash && hashToken(token) === s.devbar_hash) return;
+  const fresh = newToken();
+  s.devbar_hash = hashToken(fresh);
+  await runtime.query('update meta.session set devbar_hash = $2 where id = $1 and app_id is null', [s.id, s.devbar_hash]);
+  reply.setCookie(DEVBAR_COOKIE, fresh, { path: COOKIE_PATH, httpOnly: true, sameSite: 'lax', secure: process.env.COOKIE_SECURE === 'true' });
+}
+
+/** Builder sign-out: the toolbar goes with the session. */
+export function clearDevbar(reply: FastifyReply) {
+  reply.clearCookie(DEVBAR_COOKIE, { path: COOKIE_PATH });
+}
+
+/** The developer whose live builder session the request's toolbar token belongs to, if they may open this application. */
+export async function devbarOf(req: FastifyRequest, appId: number): Promise<Devbar | null> {
+  const token = req.cookies?.[DEVBAR_COOKIE];
+  if (!token || token.length > 100) return null;
+  const { idleMinutes, maxHours } = sessionLimits();
+  const row = await owner.one<{ username: string }>(
+    `select s.username from meta.session s
+      where s.devbar_hash = $1 and s.app_id is null and s.username is not null
+        and s.last_seen > now() - make_interval(mins => $2) and s.created_at > now() - make_interval(hours => $3)
+        and exists (select 1 from meta.developer d where d.username = s.username
+                     and (d.is_admin or exists (select 1 from meta.workspace_member m
+                                                 where m.username = d.username and m.workspace_id = meta.app_workspace($4))))`,
+    [hashToken(token), idleMinutes, maxHours, appId],
+  );
+  return row ? { username: row.username } : null;
+}
+
+/** The session's own debug level (0: none), set from the toolbar. */
+export const sessionDebugLevel = (s: Session) => {
+  const n = Number(s.state[SESSION_DEBUG] ?? 0);
+  return DEBUG_LEVELS.some(([level]) => level === n) ? n : 0;
+};
+
+/** The toolbar at the bottom of a page (not in dialogs). */
+export function devbarHtml(ctx: PageContext): Raw | '' {
+  if (!ctx.devbar || ctx.dialog) return '';
+  const level = sessionDebugLevel(ctx.session);
+  const appLevel = Number(ctx.app.debug_level ?? 0);
+  const page = ctx.page.page_no;
+  return html`<details class="devbar" open>
+    <summary><span>Developer</span></summary>
+    <nav aria-label="Developer toolbar"><ul>
+      <li><a href="${BUILDER}">App Builder</a></li>
+      <li><a href="${BUILDER}/apps/${ctx.app.id}">Application ${ctx.app.id}</a></li>
+      <li><a href="${BUILDER}/pages/${ctx.page.id}">Edit page ${page}</a></li>
+      <li><button type="button" class="devbar-quick" data-quick-edit="${BUILDER}/pages/${ctx.page.id}" aria-pressed="false" hidden>Quick edit</button></li>
+      <li><a href="${ctx.base}/${page}/devbar/session">Session</a></li>
+      <li><form method="post" action="${ctx.base}/${page}/devbar/debug" class="devbar-debug">
+        <input type="hidden" name="__csrf" value="${ctx.session.csrf_token}">
+        <label for="devbar-debug">Debug</label>
+        <select id="devbar-debug" name="level">${DEBUG_LEVELS.map(([n, label]) =>
+          html`<option value="${n}"${n === level ? raw(' selected') : ''}>${n === 0 ? (appLevel ? `Application (${appLevel})` : 'Off') : label}</option>`)}</select>
+        <button>Set</button>
+      </form></li>
+      ${level || appLevel ? html`<li><a href="${BUILDER}/apps/${ctx.app.id}/debug">View debug</a></li>` : ''}
+    </ul></nav>
+  </details>`;
+}
+
+const INTERNAL = /^__/;
+
+/** Session state viewer and the toolbar's actions. */
+export function devbarRoutes(app: FastifyInstance, loadContext: (req: any, reply: FastifyReply) => Promise<PageContext | null>) {
+  const developerContext = async (req: FastifyRequest, reply: FastifyReply) => {
+    const ctx = await loadContext(req, reply);
+    if (!ctx) return null;
+    if (!ctx.devbar) {
+      reply.code(404).type('text/plain').send('Not found');
+      return null;
+    }
+    return ctx;
+  };
+
+  app.get('/a/:alias/:page/devbar/session', async (req, reply) => {
+    const ctx = await developerContext(req, reply);
+    if (!ctx) return;
+    const state = ctx.session.state;
+    const show = (name: string, type?: string) => {
+      const v = state[name];
+      if (v === undefined || v === null) return html`<span class="muted">(null)</span>`;
+      if (type === 'password') return html`<span class="muted">(set, not shown)</span>`;
+      return html`<code>${v.length > 2000 ? `${v.slice(0, 2000)}…` : v}</code>`;
+    };
+    const pageItems = ctx.page.items.map((i) => i.name);
+    const known = new Set([...pageItems, ...ctx.app.app_items]);
+    const others = Object.keys(state).filter((k) => !INTERNAL.test(k) && !known.has(k)).sort();
+    const table = (rows: Raw[], cols: string[]) =>
+      rows.length
+        ? html`<div class="table-wrap"><table class="report"><thead><tr>${cols.map((c) => html`<th scope="col">${c}</th>`)}</tr></thead><tbody>${rows}</tbody></table></div>`
+        : html`<p class="muted">None.</p>`;
+    const body = html`<main class="t-main devbar-session" id="main">
+      <div class="t-titlebar"><h1>Session state</h1></div>
+      <div class="t-content">
+        <p><a href="${ctx.base}/${ctx.page.page_no}">Back to page ${ctx.page.page_no}</a></p>
+        <dl class="devbar-facts">
+          <dt>Application</dt><dd>${ctx.app.name} (${ctx.app.alias}, ${ctx.app.id})</dd>
+          <dt>User</dt><dd>${ctx.user}</dd>
+          <dt>Roles</dt><dd>${ctx.roles.join(', ') || '–'}</dd>
+          <dt>Session</dt><dd><code>${ctx.session.id}</code></dd>
+          <dt>Language</dt><dd>${ctx.locale.lang}</dd>
+          <dt>Time zone</dt><dd>${ctx.locale.timeZone ?? '–'}</dd>
+          <dt>Debug</dt><dd>${sessionDebugLevel(ctx.session) ? `level ${sessionDebugLevel(ctx.session)} for this session` : Number(ctx.app.debug_level) ? `level ${ctx.app.debug_level} (application)` : 'off'}</dd>
+        </dl>
+        <h2>Page ${ctx.page.page_no}: ${ctx.page.name}</h2>
+        ${table(ctx.page.items.map((i) => html`<tr><td><code>${i.name}</code></td><td>${i.type}</td><td>${show(i.name, i.type)}</td></tr>`), ['Item', 'Type', 'Value'])}
+        <form method="post" action="${ctx.base}/${ctx.page.page_no}/devbar/clear">
+          <input type="hidden" name="__csrf" value="${ctx.session.csrf_token}">
+          <button class="btn">Clear the items of page ${ctx.page.page_no}</button>
+        </form>
+        <h2>Application items</h2>
+        ${table(ctx.app.app_items.map((n) => html`<tr><td><code>${n}</code></td><td>${show(n)}</td></tr>`), ['Item', 'Value'])}
+        <h2>Other values (items of other pages)</h2>
+        ${table(others.map((n) => html`<tr><td><code>${n}</code></td><td>${show(n)}</td></tr>`), ['Name', 'Value'])}
+      </div>
+    </main>`;
+    return reply.type('text/html').send(
+      documentShell(`Session state · ${ctx.app.name}`, body, 't-app devbar-page', { 'data-base': ctx.base }, '', {
+        lang: 'en', dir: 'ltr', theme: ctx.locale.theme, style: ctx.locale.style,
+      }),
+    );
+  });
+
+  app.post('/a/:alias/:page/devbar/clear', async (req: any, reply) => {
+    const ctx = await developerContext(req, reply);
+    if (!ctx) return;
+    if (req.body?.__csrf !== ctx.session.csrf_token) return reply.code(403).type('text/plain').send('Invalid CSRF token');
+    for (const i of ctx.page.items) delete ctx.session.state[i.name];
+    await saveState(ctx.session);
+    return reply.redirect(`${ctx.base}/${ctx.page.page_no}/devbar/session`, 303);
+  });
+
+  app.post('/a/:alias/:page/devbar/debug', async (req: any, reply) => {
+    const ctx = await developerContext(req, reply);
+    if (!ctx) return;
+    if (req.body?.__csrf !== ctx.session.csrf_token) return reply.code(403).type('text/plain').send('Invalid CSRF token');
+    const level = Number(req.body?.level);
+    if (level && DEBUG_LEVELS.some(([n]) => n === level)) ctx.session.state[SESSION_DEBUG] = String(level);
+    else delete ctx.session.state[SESSION_DEBUG];
+    await saveState(ctx.session);
+    return reply.redirect(`${ctx.base}/${ctx.page.page_no}`, 303);
+  });
+}

package/src/runtime/display-selector.ts

@@ -8,7 +8,12 @@ import type { Region } from '../metadata.ts';
 // named after the region), or "display_selector": "Tab name" (regions with
 // the same name share one tab, e.g. a smart filters region and its report).
 // They stay where the page puts them.
-//   config: {"style": "tabs" | "select", "show_all": true, "remember": true}
+//   config: {"style": "tabs" | "select" | "carousel", "show_all": true, "remember": true, "interval": 6}
+//
+// (088) "carousel" (APEX: the Carousel region template): one region at a
+// time with Previous and Next buttons and a dot per region; "interval"
+// seconds turn to the next one by themselves (not while the pointer or the
+// focus is in it, nor for users who prefer reduced motion). No "Show all".
 //
 // Without JavaScript the bar is a list of links to the regions (#R<id>) and
 // every region shows. app.js turns it into ARIA tabs (arrow keys, Home,
@@ -40,12 +45,14 @@ export function renderDisplaySelector(ctx: PageContext, r: Region): Raw {
   const t = ctx.locale.t;
   const tabs = selectorTabs(ctx, (x) => `${t('rds.region')} ${x.id}`);
   if (!tabs.length) return html`<p class="muted">${t('rds.empty')}</p>`;
-  const style = r.config.style === 'select' ? 'select' : 'tabs';
-  const showAll = r.config.show_all !== false;
+  const style = r.config.style === 'select' ? 'select' : r.config.style === 'carousel' ? 'carousel' : 'tabs';
+  const showAll = style !== 'carousel' && r.config.show_all !== false;
+  const interval = style === 'carousel' ? Math.max(0, Math.min(120, Number(r.config.interval) || 0)) : 0;
   const id = `rds${r.id}`;
   const label = r.title || t('rds.label');
   const targets = (x: SelectorTab) => x.regions.map((n) => `R${n}`).join(' ');
-  return html`<nav class="rds rds-${style}" id="${id}" aria-label="${label}" data-rds="${r.id}"${r.config.remember !== false ? html` data-rds-remember` : ''}>
+  return html`<nav class="rds rds-${style}" id="${id}" aria-label="${label}" data-rds="${r.id}"${r.config.remember !== false ? html` data-rds-remember` : ''}${interval ? html` data-rds-interval="${interval}"` : ''}${style === 'carousel' ? html` aria-roledescription="carousel"` : ''}>
+    ${style === 'carousel' ? html`<button type="button" class="btn rds-prev" data-rds-step="-1" aria-label="${t('report.previous')}" hidden>‹</button>` : ''}
     <ul class="rds-list">
       ${showAll ? html`<li><a class="rds-tab" id="${id}_all" href="#${id}" data-rds-all>${t('rds.show_all')}</a></li>` : ''}
       ${tabs.map((x, i) => html`<li><a class="rds-tab" id="${id}_${i}" href="#R${x.regions[0]}" data-rds-target="${targets(x)}">${x.label}</a></li>`)}
@@ -57,5 +64,6 @@ export function renderDisplaySelector(ctx: PageContext, r: Region): Raw {
             ${tabs.map((x, i) => html`<option value="${i}">${x.label}</option>`)}
           </select></label>`
       : ''}
+    ${style === 'carousel' ? html`<button type="button" class="btn rds-next" data-rds-step="1" aria-label="${t('report.next')}" hidden>›</button>` : ''}
   </nav>`;
 }

package/src/runtime/engine.ts

@@ -16,7 +16,7 @@ import { itemMask, LOV_CHECKED, lovContains, MULTI_VALUE, ratingMax, splitValues
 import { formatNumber, isPlainNumber } from '../numformat.ts';
 import { conditionHolds } from './logic.ts';
 import { runPluginProcess } from './plugins.ts';
-import { BACKGROUND_TYPES, downloadFile, sendPushProcess, workflowProcess, type ChainConfig } from './processes.ts';
+import { BACKGROUND_TYPES, downloadFile, sendEmailProcess, sendPushProcess, workflowProcess, type ChainConfig } from './processes.ts';
 import { bindValues, dbg, publicError, stripSemicolon, substitute, timed, toState, type Errors, type PageContext } from './context.ts';
 
 const ident = pg.escapeIdentifier;
@@ -35,6 +35,16 @@ export async function resolveTable(c: Client, name: string) {
 
 const formItems = (ctx: PageContext, r: Region) => ctx.page.items.filter((i) => i.region_id === r.id && i.source_column);
 
+/**
+ * (076) Lost update detection: on unless the form's attributes say
+ * {"lost_update": false}. The checksum covers the form's columns except files.
+ */
+const detectsLostUpdates = (r: Region) => (r.config as { lost_update?: unknown } | null)?.lost_update !== false;
+const versionColumns = (ctx: PageContext, r: Region) =>
+  [...new Set(formItems(ctx, r).filter((i) => i.type !== 'file').map((i) => i.source_column!))].sort();
+const rowVersion = async (c: Client, table: string, r: Region, columns: string[], pk: string, lock: boolean) =>
+  ((await c.query('select meta.row_version($1::regclass, $2, $3, $4, $5) as v', [table, r.pk_column, String(pk), columns, lock])).rows[0]?.v as string | null) ?? null;
+
 export function clearPageItems(ctx: PageContext) {
   for (const i of ctx.page.items) delete ctx.session.state[i.name];
 }
@@ -90,6 +100,10 @@ export async function fetchForms(ctx: PageContext) {
         continue;
       }
       items.forEach((item, idx) => (ctx.session.state[item.name] = toState(res.rows[0][idx])));
+      if (detectsLostUpdates(r)) {
+        const v = await savepoint(c, () => rowVersion(c, table, r, versionColumns(ctx, r), pk, false));
+        if (v) (ctx.rowVersions ??= new Map()).set(r.id, v);
+      }
     } catch (e) {
       ctx.errors.page.push(await publicError(ctx, e, `fetch of ${r.title ?? 'form'}`));
     }
@@ -305,6 +319,16 @@ async function formDml(ctx: PageContext, p: Process): Promise<string | null> {
   }
 
   if (pk === null) throw new Error(ctx.locale.t('form.no_record'));
+  // (076) the row is locked, and refused when someone changed it since the page was shown
+  const shown = ctx.rowVersions?.get(r.id);
+  if (shown && detectsLostUpdates(r)) {
+    const now = await rowVersion(c, table, r, versionColumns(ctx, r), pk, true);
+    if (now === null) throw new ProcessFailed(ctx.locale.t('form.changed'), null);
+    if (now !== shown) {
+      dbg(ctx, 2, 'process', `lost update prevented: the row of "${r.title ?? 'form'}" changed since the page was shown`);
+      throw new ProcessFailed(ctx.locale.t('form.lost_update'), null);
+    }
+  }
   if (op === 'update') {
     if (assignments.length) {
       const res = await c.query(`update ${table} set ${assignments.map(([col, v]) => `${col} = ${v}`).join(', ')} where ${pkCol} = ${literal(pk)}`);
@@ -511,6 +535,7 @@ async function runOneStep(ctx: PageContext, p: Process, names: Set<string>, dept
       case 'invoke_api': return await invokeApi(ctx, p, names);
       case 'workflow': return await workflowProcess(ctx, p, names);
       case 'send_push': return await sendPushProcess(ctx, p);
+      case 'send_email': return await sendEmailProcess(ctx, p);
       case 'ai_generate': return (await runAiProcess(ctx, p, names)).message;
       case 'plugin': return await runPluginProcess(ctx, p.config, p.name);
       case 'download':

package/src/runtime/feedback.ts

@@ -0,0 +1,128 @@
+// Feedback (APEX: Feedback), migration 084. With the application's feedback
+// setting on, the navigation bar links to GET /a/:alias/:page/feedback: a
+// form for a comment, an idea or a problem about that page (an optional
+// rating), and the user's own earlier feedback with the developers' answers.
+// Developers answer in the builder (src/builder/feedback.ts).
+//
+// The page's own access rules apply (no feedback about a page the user may
+// not open). Feedback is stored with the user, page, session and browser
+// name; at most FEEDBACK_PER_HOUR per session. Everything shown is escaped.
+import type { FastifyInstance, FastifyReply } from 'fastify';
+import { appTx, runtime } from '../db.ts';
+import { html, raw } from '../html.ts';
+import { icon } from '../icons.ts';
+import { saveState } from '../session.ts';
+import { checkPageAccess, Forbidden } from './authz.ts';
+import type { PageContext } from './context.ts';
+import type { ListNode } from './lists.ts';
+import { chrome } from './render.ts';
+
+type Loader = (req: any, reply: FastifyReply) => Promise<PageContext | null>;
+type Tx = (ctx: PageContext) => Parameters<typeof appTx>[0];
+
+const KINDS = ['comment', 'idea', 'problem'] as const;
+export const FEEDBACK_PER_HOUR = 10;
+const MAX_TEXT = 4000;
+
+/** The navigation bar's Feedback entry (when the application asks for it). */
+export function feedbackNode(ctx: PageContext): ListNode | null {
+  if (!ctx.app.feedback || ctx.dialog) return null;
+  return {
+    label: ctx.locale.t('feedback.link'), href: `${ctx.base}/${ctx.page.page_no}/feedback`, modal: false, external: false,
+    icon: 'chat', badge: null, description: null, current: false, inTrail: false, children: [],
+  };
+}
+
+const when = (d: string | Date) => new Date(d).toISOString().slice(0, 16).replace('T', ' ');
+
+export function feedbackRoutes(app: FastifyInstance, loadContext: Loader, txContext: Tx) {
+  const page = async (ctx: PageContext, reply: FastifyReply, status: number, notice: { ok: boolean; text: string } | null, draft: { kind?: string; rating?: string; body?: string } = {}) => {
+    const t = ctx.locale.t;
+    const mine = ctx.user === 'nobody' ? [] : (await runtime.query(
+      `select page_no, kind, rating, body, status, response, responded_at, created_at from meta.feedback
+        where app_id = $1 and lower(username) = lower($2) order by created_at desc limit 50`, [ctx.app.id, ctx.user])).rows;
+    const status_ = (s: string) => t(`feedback.status.${s}` as never);
+    const main = html`<div class="t-titlebar"><h1>${t('feedback.title')}</h1></div>
+      <div class="t-content feedback-page">
+        <div class="messages" aria-live="polite">${notice ? html`<div class="alert ${notice.ok ? 'alert-success' : 'alert-error'}" role="${notice.ok ? 'status' : 'alert'}">${notice.text}</div>` : ''}</div>
+        <section class="region region-standard"><div class="region-body">
+          <p class="u-mt0">${t('feedback.intro', { page: ctx.page.title ?? ctx.page.name })}</p>
+          <form method="post" action="${ctx.base}/${ctx.page.page_no}/feedback" class="feedback-form">
+            <input type="hidden" name="__csrf" value="${ctx.session.csrf_token}">
+            <fieldset class="field"><legend class="label">${t('feedback.kind')}</legend>
+              <div class="choices">${KINDS.map((k) => html`<label class="check"><input type="radio" name="kind" value="${k}"${(draft.kind ?? 'comment') === k ? raw(' checked') : ''}> ${t(`feedback.kind.${k}` as never)}</label>`)}</div>
+            </fieldset>
+            <div class="field"><label class="label" for="feedback_rating">${t('feedback.rating')}</label>
+              <select id="feedback_rating" name="rating"><option value="">–</option>${[5, 4, 3, 2, 1].map((n) =>
+                html`<option value="${n}"${draft.rating === String(n) ? raw(' selected') : ''}>${'★'.repeat(n)}</option>`)}</select></div>
+            <div class="field" data-wide><label class="label" for="feedback_body">${t('feedback.text')}<span class="req" aria-hidden="true">*</span></label>
+              <textarea id="feedback_body" name="body" rows="6" maxlength="${MAX_TEXT}" required>${draft.body ?? ''}</textarea></div>
+            <div class="buttons"><a class="btn" href="${ctx.base}/${ctx.page.page_no}">${t('feedback.back')}</a><button class="btn btn-hot">${icon('send')} ${t('feedback.send')}</button></div>
+          </form>
+        </div></section>
+        ${ctx.user === 'nobody' ? '' : html`<section class="region region-standard"><header class="region-header"><h2>${t('feedback.mine')}</h2></header><div class="region-body">
+          ${mine.length ? html`<ul class="feedback-list">${mine.map((f) => html`<li>
+            <div class="feedback-meta"><span class="tag">${t(`feedback.kind.${f.kind}` as never)}</span> <span class="tag${f.status === 'done' ? ' tag-ok' : ''}">${status_(f.status)}</span>
+              <span class="muted">${when(f.created_at)}${f.page_no ? ` · ${t('feedback.page', { page: String(f.page_no) })}` : ''}${f.rating ? ` · ${'★'.repeat(f.rating)}` : ''}</span></div>
+            <p class="feedback-body">${f.body}</p>
+            ${f.response ? html`<div class="feedback-response"><strong>${t('feedback.response')}</strong><p>${f.response}</p></div>` : ''}
+          </li>`)}</ul>` : html`<p class="muted">${t('feedback.none')}</p>`}
+        </div></section>`}
+      </div>`;
+    ctx.vis = { regions: new Set(), items: new Set(), editable: new Set(), buttons: new Map(), dynamicActions: new Set() };
+    const body = await appTx(txContext(ctx), async (c) => {
+      ctx.client = c;
+      return chrome(ctx, main, t('feedback.title'));
+    });
+    await saveState(ctx.session);
+    return reply.code(status).type('text/html').send(body);
+  };
+
+  /** The context of a feedback request: the application allows feedback and the user may open the page. */
+  const context = async (req: any, reply: FastifyReply) => {
+    const ctx = await loadContext(req, reply);
+    if (!ctx) return null;
+    if (!ctx.app.feedback) {
+      reply.code(404).type('text/plain').send('Not found');
+      return null;
+    }
+    try {
+      await appTx(txContext(ctx), async (c) => {
+        ctx.client = c;
+        await checkPageAccess(ctx);
+      });
+    } catch (e) {
+      if (e instanceof Forbidden) {
+        reply.code(403).type('text/plain').send(e.message);
+        return null;
+      }
+      throw e;
+    }
+    return ctx;
+  };
+
+  app.get('/a/:alias/:page/feedback', async (req, reply) => {
+    const ctx = await context(req, reply);
+    if (!ctx) return;
+    return page(ctx, reply, 200, null);
+  });
+
+  app.post('/a/:alias/:page/feedback', async (req: any, reply) => {
+    const ctx = await context(req, reply);
+    if (!ctx) return;
+    const t = ctx.locale.t;
+    const b = req.body ?? {};
+    if (b.__csrf !== ctx.session.csrf_token) return page(ctx, reply, 403, { ok: false, text: t('error.session_reload') });
+    const kind = (KINDS as readonly string[]).includes(b.kind) ? b.kind : 'comment';
+    const rating = /^[1-5]$/.test(String(b.rating ?? '')) ? Number(b.rating) : null;
+    const text = String(b.body ?? '').replace(/\r\n?/g, '\n').trim();
+    if (!text || text.length > MAX_TEXT) return page(ctx, reply, 422, { ok: false, text: t('feedback.required') }, { kind, rating: b.rating, body: text.slice(0, MAX_TEXT) });
+    const recent = (await runtime.one<{ n: number }>(
+      `select count(*)::int as n from meta.feedback where app_id = $1 and session_id = $2 and created_at > now() - interval '1 hour'`, [ctx.app.id, ctx.session.id]))!.n;
+    if (recent >= FEEDBACK_PER_HOUR) return page(ctx, reply, 429, { ok: false, text: t('feedback.too_many') }, { kind, rating: b.rating, body: text });
+    await runtime.query(
+      `insert into meta.feedback (app_id, page_no, username, session_id, kind, rating, body, user_agent) values ($1, $2, $3, $4, $5, $6, $7, $8)`,
+      [ctx.app.id, ctx.page.page_no, ctx.user, ctx.session.id, kind, rating, text, String(req.headers['user-agent'] ?? '').slice(0, 300) || null]);
+    return page(ctx, reply, 200, { ok: true, text: t('feedback.thanks') });
+  });
+}