pgkiln 0.35.0 → 0.36.0

package/src/runtime/report-views.ts

@@ -11,10 +11,12 @@ import { aggregateFormat, AGGREGATES, cell, columnFormats, filtered, headingOf,
 // chosen with ?r<id>_v=group|pivot|chart. Each runs one aggregate query
 // over all filtered rows (search, filters, facets and computed columns
 // included). Column names come from the result of the report's own query;
-// functions from the AGGREGATES whitelist.
+// functions from the AGGREGATES whitelist. An interactive grid has the
+// group by and chart views too, and its own single row view (grid.ts).
 
-export type View = 'report' | 'group' | 'pivot' | 'chart';
+export type View = 'report' | 'group' | 'pivot' | 'chart' | 'row';
 export const VIEWS: View[] = ['report', 'group', 'pivot', 'chart'];
+export const GRID_VIEWS: View[] = ['report', 'row', 'group', 'chart'];
 
 const MAX_GROUPS = 1000;
 const MAX_PIVOT_VALUES = 30;

package/src/runtime/report.ts

@@ -14,7 +14,7 @@ import type { Formatter } from './format.ts';
 import { XlsxWriter, xlsxWidths, type XlsxCell } from '../xlsx.ts';
 import { REPORT_CHART_KINDS } from './charts.ts';
 import { ComputeError, computeNameOk, computeSql, type Computation } from './compute.ts';
-import { renderView, VIEWS, type View } from './report-views.ts';
+import { GRID_VIEWS, renderView, VIEWS, type View } from './report-views.ts';
 import { columnTemplates } from './template-components.ts';
 import { facetFilterSql, facetFilters, hidesColumns, reportFacetDefs, searchSql, userColumnNames } from './facet-state.ts';
 import { resolveRestRegion } from './rest-sources.ts';
@@ -259,7 +259,7 @@ export function reportState(ctx: PageContext, r: Region): ReportState {
       const [name, ...rest] = raw.split('|');
       return name && computeNameOk(name) && rest.length ? [{ name, expr: rest.join('|'), raw }] : [];
     }),
-    view: (VIEWS as string[]).includes(p.get(key(r, 'v')) ?? '') ? (p.get(key(r, 'v')) as View) : 'report',
+    view: ((r.type === 'grid' ? GRID_VIEWS : VIEWS) as string[]).includes(p.get(key(r, 'v')) ?? '') ? (p.get(key(r, 'v')) as View) : 'report',
     groupBy: {
       columns: p.getAll(key(r, 'g')).filter(Boolean).slice(0, MAX_GROUP_COLUMNS),
       functions: p.getAll(key(r, 'ga')).slice(0, MAX_GROUP_FUNCTIONS).flatMap((raw) => {
@@ -501,6 +501,38 @@ export function pageInfo(r: Region, st: { page: number; size: number }, rows: un
 }
 export type PageInfo = ReturnType<typeof pageInfo>;
 
+/** Actions → Group by of a report or grid: up to three columns and a function to add (r<id>_gb1… → r<id>_g, r<id>_ga). */
+export function groupBySection(ctx: PageContext, r: Region, st: ReportState, names: string[], form: string) {
+  const t = ctx.locale.t;
+  const options = (selected: string | undefined) => names.map((n) => html`<option value="${n}"${n === selected ? raw(' selected') : ''}>${headingOf(r, n, ctx.locale.tr)}</option>`);
+  return html`<div class="menu-section">
+      <strong>${t('report.group_by')}</strong>
+      <div class="filter-row">
+        ${[1, 2, 3].map((n) => html`<select name="${key(r, `gb${n}`)}" form="${form}" aria-label="${t('report.group_by')} ${n}">
+          <option value="">${t('report.none')}</option>${options(st.groupBy.columns[n - 1])}</select>`)}
+        <select name="${key(r, 'gbf')}" form="${form}" aria-label="${t('report.function')}"><option value="">${t('report.none')}</option>${Object.keys(AGGREGATES).map((fn) => html`<option value="${fn}">${t(`agg.${fn}`)}</option>`)}</select>
+        <select name="${key(r, 'gbc')}" form="${form}" aria-label="${t('report.column')}">${options(undefined)}</select>
+        <button class="btn" form="${form}">${t('report.apply')}</button>
+      </div>
+    </div>`;
+}
+
+/** Actions → Chart of a report or grid: kind, label column, function, value column (r<id>_ck… → r<id>_ch). */
+export function chartSection(ctx: PageContext, r: Region, st: ReportState, names: string[], form: string) {
+  const t = ctx.locale.t;
+  const options = (selected: string | undefined) => names.map((n) => html`<option value="${n}"${n === selected ? raw(' selected') : ''}>${headingOf(r, n, ctx.locale.tr)}</option>`);
+  return html`<div class="menu-section">
+      <strong>${t('report.chart')}</strong>
+      <div class="filter-row">
+        <select name="${key(r, 'ck')}" form="${form}" aria-label="${t('report.chart_type')}">${REPORT_CHART_KINDS.map((k) => html`<option value="${k}"${k === st.chart?.kind ? raw(' selected') : ''}>${t(`chart.${k}`)}</option>`)}</select>
+        <select name="${key(r, 'cl')}" form="${form}" aria-label="${t('report.label_column')}">${options(st.chart?.label)}</select>
+        <select name="${key(r, 'cf')}" form="${form}" aria-label="${t('report.function')}">${Object.keys(AGGREGATES).map((fn) => html`<option value="${fn}"${fn === (st.chart?.fn ?? 'count') ? raw(' selected') : ''}>${t(`agg.${fn}`)}</option>`)}</select>
+        <select name="${key(r, 'cv')}" form="${form}" aria-label="${t('report.value_column')}">${options(st.chart?.value)}</select>
+        <button class="btn" form="${form}">${t('report.apply')}</button>
+      </div>
+    </div>`;
+}
+
 /** The pager under a report or grid: "X–Y of N" (or "Rows X–Y"), Previous and Next. */
 export function pagerNav(ctx: PageContext, r: Region, info: PageInfo, linkAttr: Raw | '' = '') {
   const t = ctx.locale.t;
@@ -1003,16 +1035,7 @@ export async function renderReport(ctx: PageContext, r: Region, filterItems: Raw
             </div>
             <small class="help">${t('report.compute_help')}</small>
           </div>
-          <div class="menu-section">
-            <strong>${t('report.group_by')}</strong>
-            <div class="filter-row">
-              ${[1, 2, 3].map((n) => html`<select name="${key(r, `gb${n}`)}" form="${groupForm}" aria-label="${t('report.group_by')} ${n}">
-                <option value="">${t('report.none')}</option>${allCols.map(({ f }) => html`<option value="${f.name}"${f.name === st.groupBy.columns[n - 1] ? raw(' selected') : ''}>${headingOf(r, f.name, ctx.locale.tr)}</option>`)}</select>`)}
-              <select name="${key(r, 'gbf')}" form="${groupForm}" aria-label="${t('report.function')}"><option value="">${t('report.none')}</option>${Object.keys(AGGREGATES).map((fn) => html`<option value="${fn}">${t(`agg.${fn}`)}</option>`)}</select>
-              <select name="${key(r, 'gbc')}" form="${groupForm}" aria-label="${t('report.column')}">${allCols.map(({ f }) => html`<option value="${f.name}"${f.name === '' ? raw(' selected') : ''}>${headingOf(r, f.name, ctx.locale.tr)}</option>`)}</select>
-              <button class="btn" form="${groupForm}">${t('report.apply')}</button>
-            </div>
-          </div>
+          ${groupBySection(ctx, r, st, allCols.map(({ f }) => f.name), groupForm)}
           <div class="menu-section">
             <strong>${t('report.pivot')}</strong>
             <div class="filter-row">
@@ -1023,16 +1046,7 @@ export async function renderReport(ctx: PageContext, r: Region, filterItems: Raw
               <button class="btn" form="${pivotForm}">${t('report.apply')}</button>
             </div>
           </div>
-          <div class="menu-section">
-            <strong>${t('report.chart')}</strong>
-            <div class="filter-row">
-              <select name="${key(r, 'ck')}" form="${chartForm}" aria-label="${t('report.chart_type')}">${REPORT_CHART_KINDS.map((k) => html`<option value="${k}"${k === st.chart?.kind ? raw(' selected') : ''}>${t(`chart.${k}`)}</option>`)}</select>
-              <select name="${key(r, 'cl')}" form="${chartForm}" aria-label="${t('report.label_column')}">${allCols.map(({ f }) => html`<option value="${f.name}"${f.name === st.chart?.label ? raw(' selected') : ''}>${headingOf(r, f.name, ctx.locale.tr)}</option>`)}</select>
-              <select name="${key(r, 'cf')}" form="${chartForm}" aria-label="${t('report.function')}">${Object.keys(AGGREGATES).map((fn) => html`<option value="${fn}"${fn === (st.chart?.fn ?? 'count') ? raw(' selected') : ''}>${t(`agg.${fn}`)}</option>`)}</select>
-              <select name="${key(r, 'cv')}" form="${chartForm}" aria-label="${t('report.value_column')}">${allCols.map(({ f }) => html`<option value="${f.name}"${f.name === st.chart?.value ? raw(' selected') : ''}>${headingOf(r, f.name, ctx.locale.tr)}</option>`)}</select>
-              <button class="btn" form="${chartForm}">${t('report.apply')}</button>
-            </div>
-          </div>
+          ${chartSection(ctx, r, st, allCols.map(({ f }) => f.name), chartForm)}
           ${saved ?? ''}
           <div class="menu-section"><strong>${t('report.rows_per_page')}</strong>
             <div class="seg">${PAGE_SIZES.map((n) =>

package/src/runtime/routes.ts

@@ -36,13 +36,15 @@ import { applyRowSelection, mastersOf } from './master-detail.ts';
 import { layerInArea, layerTile, parseTile, servedLayer } from './maps.ts';
 import { parseArea } from './spatial.ts';
 import { currentLayout, layoutJson, layoutParam, parseLayout, storeLayout } from './grid-layout.ts';
-import { layoutFromForm, statePart } from './grid.ts';
+import { gridReturn, layoutFromForm, statePart } from './grid.ts';
 import { PassThrough } from 'node:stream';
 import { reportPdf } from './pdf.ts';
 import { renderDocument } from './documents.ts';
 import { pwaHead } from './pwa.ts';
 import { resolveLocale, THEME_COOKIE, translateApp, translatePage, validTimeZone, type Locale } from './locale.ts';
 import { chrome, dialogClosePage, languagePicker, renderPage } from './render.ts';
+import { LOGIN_ERROR, LOGIN_USER, safeNext, signInForm } from './signin.ts';
+import { passwordResetRoutes } from './password-reset.ts';
 import { devbarOf, devbarRoutes, sessionDebugLevel } from './devbar.ts';
 import { availabilityRefusal } from './availability.ts';
 import { feedbackRoutes } from './feedback.ts';
@@ -85,8 +87,7 @@ export async function appWithLocale(req: FastifyRequest, alias: string, session?
   return { app, locale };
 }
 
-export const safeNext = (app: App, next: string | undefined) =>
-  next && next.startsWith(`/a/${app.alias}/`) && !/[\\\r\n]/.test(next) && !next.includes('//') ? next : `/a/${app.alias}/${app.home_page}`;
+export { safeNext };
 
 /**
  * Finish a successful sign-in (password or SSO): replace the session (no
@@ -598,11 +599,15 @@ export async function runtimeRoutes(app: FastifyInstance) {
     if (messages.length) ctx.session.state.__FLASH = messages.join(' ');
     await saveState(ctx.session);
     if (ctx.dialog) return reply.type('text/html').send(dialogClosePage(ctx));
-    return reply.redirect(branchTo ?? (button.target_page ? `${ctx.base}/${button.target_page}` : self), 303);
+    // (sprint 54) a grid's Save comes back to the grid's search, page, sort and view
+    const back = branchTo || button.target_page ? '' : gridReturn(ctx, button.name);
+    return reply.redirect(branchTo ?? (button.target_page ? `${ctx.base}/${button.target_page}` : back ? `${self}${self.includes('?') ? '&' : '?'}${back}` : self), 303);
   });
 
   // ---------------------------------------------------------------- file downloads
   fileRoutes(app, loadContext, txContext, forbidden);
+  // (087) "Forgot password?"
+  passwordResetRoutes(app);
   // (079) the developer toolbar's session state viewer and actions
   devbarRoutes(app, loadContext);
   // (084) users' feedback
@@ -1035,34 +1040,13 @@ export async function runtimeRoutes(app: FastifyInstance) {
   // ---------------------------------------------------------------- login / logout
   const loginPage = async (app: App, locale: Locale, session: Session, next: string, error?: string) => {
     const t = locale.t;
-    // database accounts and custom authentication: the user name and password form only
-    const dbAuth = app.authentication === 'database' || app.authentication === 'custom';
-    if (dbAuth) app = { ...app, local_login: true, remember_me_days: null };
-    const providers = dbAuth ? [] : await enabledProviders(app.sso_providers ?? []);
     const nextQs = next ? `?next=${encodeURIComponent(next)}` : '';
     return documentShell(
       `${t('login.title')} · ${app.name}`,
       html`<main class="login">
         <div class="card login-card">
           <h1>${app.name}</h1>
-          ${error ? html`<div class="alert alert-error" role="alert">${error}</div>` : ''}
-          ${((f) => (f ? html`<div class="alert alert-success" role="status">${f}</div>` : ''))(takeFlash(session))}
-          ${providers.length
-            ? html`<div class="sso-buttons">${providers.map(
-                (pr) => html`<a class="btn${app.local_login ? '' : ' btn-hot'}" href="/a/${app.alias}/sso/${pr.name}${nextQs}">${t('login.with', { provider: pr.display_name })}</a>`,
-              )}</div>${app.local_login ? html`<div class="or" role="separator"><span>${t('login.or')}</span></div>` : ''}`
-            : ''}
-          ${app.local_login
-            ? html`<form method="post" class="login-form">
-                <input type="hidden" name="__csrf" value="${session.csrf_token}">
-                <input type="hidden" name="next" value="${next}">
-                ${app.time_zone_auto ? html`<input type="hidden" name="__tz" value="">` : ''}
-                <div class="field"><label class="label" for="username">${t('login.username')}</label><input id="username" name="username" autocomplete="username" autofocus required maxlength="100"></div>
-                <div class="field"><label class="label" for="password">${t('login.password')}</label><input id="password" name="password" type="password" autocomplete="current-password" required maxlength="200"></div>
-                ${app.remember_me_days ? html`<label class="check"><input type="checkbox" name="remember" value="true"> ${t('login.remember', { days: app.remember_me_days })}</label>` : ''}
-                <button class="btn btn-hot">${t('login.submit')}</button>
-              </form>`
-            : providers.length ? '' : html`<p>${t('login.none')}</p>`}
+          ${await signInForm(app, locale, session, next, { error })}
           ${languagePicker(app, locale, `/a/${app.alias}/login${nextQs}`)}
         </div>
       </main>`,
@@ -1100,6 +1084,12 @@ export async function runtimeRoutes(app: FastifyInstance) {
     );
   };
 
+  /** (087) The application's own login page: a page that exists and needs no sign-in, else null (the built-in page). */
+  const ownLoginPage = (a: App) => {
+    const p = a.login_page ? a.pages.find((x) => x.page_no === a.login_page) : undefined;
+    return p && !p.requires_auth && a.authentication !== 'header' ? p.page_no : null;
+  };
+
   /** Common start of the sign-in POST handlers: app, session, CSRF, throttling. */
   const loginRequest = async (req: Req, reply: FastifyReply) => {
     const loaded = await appWithLocale(req, req.params.alias);
@@ -1108,20 +1098,30 @@ export async function runtimeRoutes(app: FastifyInstance) {
     const session = await getSession(req, reply, a.id, `/a/${a.alias}`);
     const { username = '', next } = req.body ?? {};
     const ip = clientIp(req);
-    const fail = async (msg: string, code = 401) => reply.code(code).type('text/html').send(await loginPage(a, locale, session, safeNext(a, next), msg));
-    if (req.body?.__csrf !== session.csrf_token) return fail(locale.t('login.expired_session'), 403), null;
+    const fail = async (msg: string, code = 401) => {
+      // (087) the application's own login page: back there with the message and user name, shown once
+      const own = ownLoginPage(a);
+      if (own) {
+        session.state[LOGIN_ERROR] = msg;
+        session.state[LOGIN_USER] = username.slice(0, 100);
+        await saveState(session);
+        return reply.redirect(`/a/${a.alias}/${own}${next ? `?next=${encodeURIComponent(safeNext(a, next))}` : ''}`, 303);
+      }
+      return reply.code(code).type('text/html').send(await loginPage(a, locale, session, safeNext(a, next), msg));
+    };
+    if (req.body?.__csrf !== session.csrf_token) return (await fail(locale.t('login.expired_session'), 403), null);
     // automatic time zone: app.js filled in the browser's (signIn() keeps it for the new session)
     if (a.time_zone_auto) {
       const zone = await validTimeZone(req.body?.__tz);
       if (zone) session.state.__TZ = zone;
     }
-    if (a.authentication === 'header') return fail(locale.t('login.method_unavailable'), 403), null;
-    if (!a.local_login && a.authentication !== 'database' && a.authentication !== 'custom') return fail(locale.t('login.password_disabled'), 403), null;
+    if (a.authentication === 'header') return (await fail(locale.t('login.method_unavailable'), 403), null);
+    if (!a.local_login && a.authentication !== 'database' && a.authentication !== 'custom') return (await fail(locale.t('login.password_disabled'), 403), null);
     // a NUL byte can't be a user name (and PostgreSQL text refuses it)
-    if (username.includes('\0')) return fail(locale.t('login.invalid'), 400), null;
+    if (username.includes('\0')) return (await fail(locale.t('login.invalid'), 400), null);
     if (await loginThrottled(a.id, username, ip)) {
       logActivity({ appId: a.id, username, event: 'login_locked', ip });
-      return fail(locale.t('login.throttled', { minutes: loginWindowMinutes() }), 429), null;
+      return (await fail(locale.t('login.throttled', { minutes: loginWindowMinutes() }), 429), null);
     }
     return { a, locale, session, username: username.slice(0, 100), next, ip, fail };
   };
@@ -1135,6 +1135,9 @@ export async function runtimeRoutes(app: FastifyInstance) {
     if (closed && closed.status === 503) return simplePage(reply, 503, english('app.unavailable_title'), closed.message ?? english(closed.key));
     // header authentication has no sign-in form: the proxy signs the user in on any page
     if (a0.authentication === 'header') return reply.redirect(safeNext(a0, req.query.next));
+    // (087) the application's own login page
+    const own = ownLoginPage(a0);
+    if (own) return reply.redirect(`/a/${a0.alias}/${own}${req.query.next ? `?next=${encodeURIComponent(safeNext(a0, req.query.next))}` : ''}`);
     const session = await getSession(req, reply, a0.id, `/a/${a0.alias}`);
     const { app: a, locale } = (await appWithLocale(req, req.params.alias, session))!;
     const body = await loginPage(a, locale, session, safeNext(a, req.query.next));

package/src/runtime/signin.ts

@@ -0,0 +1,80 @@
+import { runtime } from '../db.ts';
+import { html, raw, type Raw } from '../html.ts';
+import type { App } from '../metadata.ts';
+import { takeFlash, type Session } from '../session.ts';
+import { enabledProviders } from '../sso.ts';
+import type { PageContext } from './context.ts';
+import type { Locale } from './locale.ts';
+import { languagePicker } from './render.ts';
+
+// The sign-in form: the identity providers' buttons, user name and password,
+// "Keep me signed in" and "Forgot password?". The built-in sign-in page
+// (routes.ts) and the "login" region of an application's own login page
+// (migration 087, meta.app.login_page) both show it; it always posts to
+// /a/<alias>/login, whose checks (CSRF, throttling, every sign-in method)
+// are the same either way.
+//
+// On a login page the form's fields sit inside the page's own form, so they
+// name a separate, detached <form> with the form attribute (formId).
+
+/** Where to go after signing in: a path of this application, else its home page. */
+export const safeNext = (app: App, next: string | undefined) =>
+  next && next.startsWith(`/a/${app.alias}/`) && !/[\\\r\n]/.test(next) && !next.includes('//') ? next : `/a/${app.alias}/${app.home_page}`;
+
+/** "Forgot password?" is offered: turned on, app users with passwords, an enabled mail service. */
+export async function passwordResetAvailable(app: App) {
+  if (!app.password_reset) return false;
+  return !!(await runtime.one<{ ok: boolean }>('select meta.password_reset_available($1) as ok', [app.id]))?.ok;
+}
+
+/** A failed sign-in on an application's own login page: the message and user name, shown once. */
+export const LOGIN_ERROR = '__LOGIN_ERROR';
+export const LOGIN_USER = '__LOGIN_USER';
+
+export async function signInForm(
+  app: App, locale: Locale, session: Session, next: string,
+  o: { error?: string; username?: string; formId?: string } = {},
+): Promise<Raw> {
+  const t = locale.t;
+  // database accounts and custom authentication: the user name and password form only
+  const dbAuth = app.authentication === 'database' || app.authentication === 'custom';
+  const local = dbAuth || app.local_login;
+  const remember = dbAuth ? null : app.remember_me_days;
+  const providers = dbAuth ? [] : await enabledProviders(app.sso_providers ?? []);
+  const nextQs = next ? `?next=${encodeURIComponent(next)}` : '';
+  const forgot = !dbAuth && local && (await passwordResetAvailable(app));
+  const fa = o.formId ? raw(` form="${o.formId}"`) : '';
+  const fields = html`<input type="hidden" name="__csrf" value="${session.csrf_token}"${fa}>
+    <input type="hidden" name="next" value="${next}"${fa}>
+    ${app.time_zone_auto ? html`<input type="hidden" name="__tz" value=""${fa}>` : ''}
+    <div class="field"><label class="label" for="username">${t('login.username')}</label><input id="username" name="username" value="${o.username ?? ''}" autocomplete="username" autofocus required maxlength="100"${fa}></div>
+    <div class="field"><label class="label" for="password">${t('login.password')}</label><input id="password" name="password" type="password" autocomplete="current-password" required maxlength="200"${fa}></div>
+    ${remember ? html`<label class="check"><input type="checkbox" name="remember" value="true"${fa}> ${t('login.remember', { days: remember })}</label>` : ''}
+    <button class="btn btn-hot"${fa}>${t('login.submit')}</button>
+    ${forgot ? html`<a class="login-forgot" href="/a/${app.alias}/password/forgot">${t('reset.link')}</a>` : ''}`;
+  return html`${o.error ? html`<div class="alert alert-error" role="alert">${o.error}</div>` : ''}
+    ${((f) => (f ? html`<div class="alert alert-success" role="status">${f}</div>` : ''))(takeFlash(session))}
+    ${providers.length
+      ? html`<div class="sso-buttons">${providers.map(
+          (pr) => html`<a class="btn${local ? '' : ' btn-hot'}" href="/a/${app.alias}/sso/${pr.name}${nextQs}">${t('login.with', { provider: pr.display_name })}</a>`,
+        )}</div>${local ? html`<div class="or" role="separator"><span>${t('login.or')}</span></div>` : ''}`
+      : ''}
+    ${local
+      ? o.formId ? html`<div class="login-form">${fields}</div>` : html`<form method="post" action="/a/${app.alias}/login" class="login-form">${fields}</form>`
+      : providers.length ? '' : html`<p>${t('login.none')}</p>`}`;
+}
+
+/** The "login" region of an application's own login page. */
+export async function renderLoginRegion(ctx: PageContext): Promise<Raw> {
+  const s = ctx.session.state;
+  const error = s[LOGIN_ERROR] ?? undefined;
+  const username = s[LOGIN_USER] ?? undefined;
+  delete s[LOGIN_ERROR];
+  delete s[LOGIN_USER];
+  const formId = 'pgkiln-login';
+  ctx.detached.push(html`<form id="${formId}" method="post" action="/a/${ctx.app.alias}/login"></form>`);
+  const next = safeNext(ctx.app, ctx.params.get('next') ?? undefined);
+  const here = `${ctx.base}/${ctx.page.page_no}${ctx.params.get('next') ? `?next=${encodeURIComponent(next)}` : ''}`;
+  return html`<div class="login-region">${await signInForm(ctx.app, ctx.locale, ctx.session, next, { error, username, formId })}
+    ${languagePicker(ctx.app, ctx.locale, here)}</div>`;
+}

package/src/static-version.ts

@@ -0,0 +1,34 @@
+import { readFileSync, statSync } from 'node:fs';
+import { join } from 'node:path';
+import { root } from './env.ts';
+
+// The version of pgkiln's own static files (app.css, app.js, icons.svg, sw.js): a hash of
+// their contents, in their URLs (?v=…) and in each application's service worker. The files'
+// sizes and modification times are looked at again at most once a second, so a changed file
+// gets a new URL and a new service worker even when the server wasn't restarted; a browser
+// (or a service worker cache) never keeps an old copy under the new URL.
+
+const FILES = ['app.css', 'app.js', 'icons.svg', 'sw.js'].map((f) => join(root, 'public', f));
+let checked = 0;
+let stamp = '';
+let version = '';
+
+export function staticVersion() {
+  const now = Date.now();
+  if (version && now - checked < 1000) return version;
+  checked = now;
+  const s = FILES.map((f) => {
+    const st = statSync(f);
+    return `${st.size}:${st.mtimeMs}`;
+  }).join('|');
+  if (s !== stamp) {
+    let h = 0;
+    for (const f of FILES) for (const ch of readFileSync(f, 'utf8')) h = (Math.imul(h, 31) + ch.charCodeAt(0)) | 0;
+    stamp = s;
+    version = (h >>> 0).toString(36);
+  }
+  return version;
+}
+
+/** /static/<file>?v=<version> for app.css, app.js and icons.svg. */
+export const staticUrl = (file: 'app.css' | 'app.js' | 'icons.svg') => `/static/${file}?v=${staticVersion()}`;