@ultimat3/admin 22.14.0 → 23.0.0

package/src/screen-action.tsx

@@ -0,0 +1,333 @@
+// The two writes an action makes from a screen: ONE row, posted at the row's URL (its form, when
+// it takes input, is that URL asked for the action), and a BATCH, posted at the list's URL whose
+// query string is the filter "all matching" means. Both decide through the gate first and render
+// what it answered — a 422 form with the schema's issues, a 409 for a row the action's `when`
+// excludes, a 403 for a refusal, and an honest count of what a batch did.
+
+import { t } from '@ultimat3/i18n';
+import { Button, Card, ErrorState, Link } from '@ultimat3/ui';
+import { AdminActionForm } from './action-form';
+import { actionButtons } from './action-gate';
+import {
+  ACTION_INPUT_PREFIX,
+  actionInputFields,
+  decodeActionInput,
+  postedActionInput,
+} from './action-input';
+import { actionLabelKey } from './action-label';
+import { invokeRowAction } from './action-row';
+import { BATCH_OPERATION, OPERATION_FIELD } from './actions';
+import type { AdminApp } from './admin';
+import styles from './admin.module.scss';
+import { type AdminBatchResult, type BatchSelection, batchPlan, runAdminBatch } from './batch';
+import { BATCH_IDS_FIELD, BATCH_SELECTION_FIELD } from './batch-bar';
+import { batchEnqueue } from './batch-job';
+import { posted } from './form-decode';
+import { listHref, pageRequestOf } from './list-request';
+import { findRow } from './list-scope';
+import { confirmationToken } from './permissions';
+import type { AdminAction } from './registry';
+import type { AdminResource } from './resource';
+import { type AdminRouteRequest, type AdminRouteResponse, framed, refused } from './screen-frame';
+import type { ValidationIssue } from './validate';
+
+/** Posted by a form that already showed its fields: run now, do not ask again. */
+export const STEP_FIELD = '_step';
+const RUN_STEP = 'run';
+/** Where an "all matching" batch continues from: the last row the previous request reached. */
+export const AFTER_FIELD = 'after';
+
+const rowHref = (app: AdminApp, resource: AdminResource, id: string): string =>
+  `${app.basePath}${resource.path}/${id}`;
+
+/** A posted name repeated once per value — the checked rows. */
+const postedList = (form: Readonly<Record<string, unknown>>, name: string): readonly string[] => {
+  if (!Object.hasOwn(form, name)) return [];
+  const value = form[name];
+  const list: readonly unknown[] = Array.isArray(value) ? value : [value];
+  return list.filter((one): one is string => typeof one === 'string' && one !== '');
+};
+
+/** The 409 a row the action does not apply to is answered with: the error, and the way back. */
+function notApplicable(
+  app: AdminApp,
+  request: AdminRouteRequest,
+  resource: AdminResource,
+  error: Error,
+  back: string,
+): AdminRouteResponse {
+  return framed(
+    app,
+    request,
+    resource.titleKey,
+    <>
+      <ErrorState error={error} />
+      <Link href={back}>{t('admin.actions.back')}</Link>
+    </>,
+    409,
+  );
+}
+
+/** One row's action form: `GET <row>?action=<name>`, and its refused post. */
+export async function rowActionForm(
+  app: AdminApp,
+  request: AdminRouteRequest,
+  resource: AdminResource,
+  action: AdminAction,
+  values: Readonly<Record<string, string>>,
+  issues: readonly ValidationIssue[],
+  status = 200,
+): Promise<AdminRouteResponse> {
+  const id = request.params['id'] ?? '';
+  const href = rowHref(app, resource, id);
+  return framed(
+    app,
+    request,
+    resource.titleKey,
+    <AdminActionForm
+      action={action}
+      href={href}
+      operation="action"
+      values={values}
+      issues={issues}
+      confirmation={action.destructive === true ? confirmationToken(resource.name, id) : null}
+      subject={t('admin.actions.subject.row', { id })}
+      cancelHref={href}
+    />,
+    status,
+  );
+}
+
+/**
+ * The form of `?action=<name>` on a row — only for an action the actor may run on THIS row, so a
+ * link to a form is never a way round a hidden button. Anything else is the row's 404.
+ */
+export async function rowActionFormScreen(
+  app: AdminApp,
+  request: AdminRouteRequest,
+  resource: AdminResource,
+  name: string,
+  missing: () => AdminRouteResponse,
+): Promise<AdminRouteResponse> {
+  const action = resource.actions.find((declared) => declared.name === name);
+  if (action === undefined) return missing();
+  const id = request.params['id'] ?? '';
+  const row = await findRow(resource, request.ctx.actor, id);
+  if (row === null) return missing();
+  // The button's own decision: a form for an action this row would not show is no form at all.
+  const offered = actionButtons({
+    actions: [action],
+    actor: request.ctx.actor,
+    authz: request.ctx.authz,
+    subject: { entity: resource.name, id, row },
+    sealed: resource.secretFields.map((field) => field.name),
+  });
+  if (offered.length === 0) return missing();
+  return rowActionForm(app, request, resource, action, {}, []);
+}
+
+/** A posted action on one row: decided by the same gate that decided whether its button rendered. */
+export async function rowActionWrite(
+  app: AdminApp,
+  request: AdminRouteRequest,
+  resource: AdminResource,
+  form: Readonly<Record<string, unknown>>,
+  missing: () => AdminRouteResponse,
+): Promise<AdminRouteResponse> {
+  const id = request.params['id'] ?? '';
+  // The posted name, resolved against the actions `defineAdmin()` attached to THIS resource —
+  // "which operation is this?" is answered before "may this actor run it?".
+  const action = resource.actions.find((declared) => declared.name === posted(form, 'name'));
+  if (action === undefined) return missing();
+  const result = await invokeRowAction({
+    resource,
+    action,
+    id,
+    ctx: request.ctx,
+    input: decodeActionInput(action, form),
+    confirmation: posted(form, 'confirmation'),
+  });
+  const href = rowHref(app, resource, id);
+  if (result.ok) return { kind: 'redirect', location: href };
+  if (result.kind === 'not-applicable') {
+    return notApplicable(app, request, resource, result.error, href);
+  }
+  if (result.kind === 'invalid') {
+    return rowActionForm(
+      app,
+      request,
+      resource,
+      action,
+      postedActionInput(action, form),
+      result.issues,
+      422,
+    );
+  }
+  // A destructive action with a form, posted with the wrong token: the form again, not a 403 —
+  // the operator holds the grant and mistyped.
+  if (result.confirmationRequired && actionInputFields(action).length > 0) {
+    return rowActionForm(app, request, resource, action, postedActionInput(action, form), [], 422);
+  }
+  return refused(app, request, resource.titleKey, result.decision);
+}
+
+/** What a batch result page says, outcome by outcome. */
+function batchResult(
+  app: AdminApp,
+  request: AdminRouteRequest,
+  resource: AdminResource,
+  action: AdminAction,
+  result: AdminBatchResult,
+  again: readonly (readonly [string, string])[],
+): AdminRouteResponse {
+  const list = listHref(app.basePath, resource);
+  const terms: readonly (readonly [string, number])[] = [
+    ['admin.batch.done', result.done],
+    ['admin.batch.refused', result.refused],
+    ['admin.batch.failed', result.failed],
+    ['admin.batch.queued', result.queued],
+    ['admin.batch.remaining', result.remaining],
+  ];
+  return framed(
+    app,
+    request,
+    resource.titleKey,
+    <Card header={<h2>{t(actionLabelKey(action))}</h2>}>
+      <dl class={styles['counts']}>
+        {terms.map(([key, count]) => (
+          <>
+            <dt>{t(key)}</dt>
+            <dd>{String(count)}</dd>
+          </>
+        ))}
+      </dl>
+      {result.rows.length === 0 ? null : (
+        <ul class={styles['list']}>
+          {result.rows.map((row) => (
+            <li>
+              <a href={rowHref(app, resource, row.id)}>{row.id}</a>{' '}
+              <span data-outcome={row.outcome}>{t(row.reason)}</span>
+            </li>
+          ))}
+        </ul>
+      )}
+      {result.remaining === 0 || (result.after === null && action.matching === undefined) ? null : (
+        // The rest of an "all matching" batch: the same post, from where this one stopped — or,
+        // for a set-based one, the same post again: the set it reads has already shrunk.
+        <form
+          class={styles['actionForm']}
+          method="post"
+          action={new URL(request.url).pathname + new URL(request.url).search}
+        >
+          <input type="hidden" name={OPERATION_FIELD} value={BATCH_OPERATION} />
+          <input type="hidden" name="name" value={action.name} />
+          <input type="hidden" name={BATCH_SELECTION_FIELD} value="all" />
+          {result.after === null ? null : (
+            <input type="hidden" name={AFTER_FIELD} value={result.after} />
+          )}
+          {again.map(([name, value]) => (
+            <input type="hidden" name={name} value={value} />
+          ))}
+          <Button type="submit" size="sm" variant="secondary">
+            {t('admin.batch.continue', { count: result.remaining })}
+          </Button>
+        </form>
+      )}
+      <Link href={list}>{t('admin.batch.back')}</Link>
+    </Card>,
+  );
+}
+
+/**
+ * A batch posted from the list's bar. The first post of an action that takes input, or that is
+ * destructive, answers with its form — the confirmation is a server round trip — and the second,
+ * `_step=run`, runs it.
+ */
+export async function batchWrite(
+  app: AdminApp,
+  request: AdminRouteRequest,
+  resource: AdminResource,
+  form: Readonly<Record<string, unknown>>,
+  missing: () => AdminRouteResponse,
+): Promise<AdminRouteResponse> {
+  const action = resource.actions.find(
+    (declared) => declared.name === posted(form, 'name') && declared.batch !== undefined,
+  );
+  if (action === undefined) return missing();
+  const url = new URL(request.url);
+  const all = posted(form, BATCH_SELECTION_FIELD) === 'all';
+  const after = posted(form, AFTER_FIELD);
+  const ids = postedList(form, BATCH_IDS_FIELD);
+  const selection: BatchSelection = all
+    ? {
+        kind: 'all',
+        // The list's own URL grammar: a parameter it does not derive is refused there, by name.
+        request: pageRequestOf(resource, url),
+        ...(after === undefined ? {} : { after }),
+      }
+    : { kind: 'ids', ids };
+  // What the form posts back: the selection, as it was.
+  const hidden: readonly (readonly [string, string])[] = [
+    [BATCH_SELECTION_FIELD, all ? 'all' : 'checked'],
+    ...(all ? [] : ids.map((id) => [BATCH_IDS_FIELD, id] as const)),
+    ...(after === undefined ? [] : [[AFTER_FIELD, after] as const]),
+    [STEP_FIELD, RUN_STEP],
+  ];
+  const href = url.pathname + url.search;
+  const values = postedActionInput(action, form);
+  const formOf = (
+    token: string | null,
+    count: number | null,
+    issues: readonly ValidationIssue[],
+    status: number,
+  ): AdminRouteResponse =>
+    framed(
+      app,
+      request,
+      resource.titleKey,
+      <AdminActionForm
+        action={action}
+        href={href}
+        operation={BATCH_OPERATION}
+        values={values}
+        issues={issues}
+        confirmation={token}
+        subject={
+          count === null
+            ? t(all ? 'admin.batch.subject.all' : 'admin.batch.subject.checked', {
+                count: ids.length,
+              })
+            : t('admin.batch.subject.count', { count })
+        }
+        hidden={hidden}
+        cancelHref={href}
+      />,
+      status,
+    );
+
+  const run = posted(form, STEP_FIELD) === RUN_STEP;
+  const asks = actionInputFields(action).length > 0;
+  if (!run && asks && action.destructive !== true) return formOf(null, null, [], 200);
+
+  const result = await runAdminBatch({
+    resource,
+    action,
+    ctx: request.ctx,
+    selection,
+    input: decodeActionInput(action, form),
+    confirmation: posted(form, 'confirmation'),
+    ...(batchPlan(action) === null ? {} : { enqueue: batchEnqueue(app.basePath) }),
+  });
+  if (result.ok) {
+    return batchResult(app, request, resource, action, result, [
+      ...Object.entries(values).map(
+        ([name, value]) => [`${ACTION_INPUT_PREFIX}${name}`, value] as const,
+      ),
+    ]);
+  }
+  if (result.kind === 'denied') return refused(app, request, resource.titleKey, result.decision);
+  if (result.kind === 'confirm') {
+    return formOf(result.token, result.count, [], run ? 422 : 200);
+  }
+  return formOf(null, null, result.issues, 422);
+}

package/src/screen-frame.tsx

@@ -0,0 +1,167 @@
+// What every mounted screen shares: the shape of its request and its answer, the shell it is
+// framed in, and the refusal it renders. A screen DECIDES first — through `crud.ts`,
+// `action-gate.ts` or `page-guard.tsx` — and only then builds a body, so the frame is the one
+// place a status meets a document.
+
+import { localeConfig, t } from '@ultimat3/i18n';
+import { ErrorState } from '@ultimat3/ui';
+import type { JSX } from 'solid-js';
+import type { AdminApp, AdminRoute } from './admin';
+import { type AdminDecision, decideAll } from './authz';
+import { type CrudCtx, canOperate } from './crud';
+import { AdminFilterInvalidError } from './errors';
+import { AdminLayout } from './layout';
+import { AdminPageDenied, auditRefusal } from './page-guard';
+import type { AdminPageProps } from './pages';
+import type { RelationData } from './relations';
+import type { AdminResource } from './resource';
+import { LOOKUP_SEGMENT } from './resource-list';
+import type { WidgetContext } from './widget-value';
+
+/** One request to one admin route: a GET, or the form a screen posted back at itself. */
+export interface AdminRouteRequest extends AdminPageProps {
+  readonly method: 'GET' | 'POST';
+  /** The parsed form. `null` on a GET; a POST with no fields is `{}`. */
+  readonly form: Readonly<Record<string, unknown>> | null;
+}
+
+export type AdminRouteResponse =
+  | {
+      readonly kind: 'document';
+      readonly status: number;
+      /** The framed screen: shell, nav for this actor, and the body. */
+      readonly body: JSX.Element;
+    }
+  /** A write that worked: the browser is sent to the row or the list it changed. Always a 303. */
+  | { readonly kind: 'redirect'; readonly location: string };
+
+/** A mounted screen. `routes.ts` is the only thing that hands one to a host. */
+export type AdminScreen = (request: AdminRouteRequest) => Promise<AdminRouteResponse>;
+
+/**
+ * The zone and locale every formatter on a screen reads — the ACTOR's, never the server's — and
+ * what the page read of the resources it references. `relations` is the whole of it: a widget
+ * shows a label or an option list the page already holds, and never reads a row of its own.
+ */
+export function widgetContextOf(
+  app: AdminApp,
+  ctx: CrudCtx,
+  relations: ReadonlyMap<string, RelationData> = new Map(),
+): WidgetContext {
+  const target = (entity: string): AdminResource | undefined =>
+    app.resources.find((resource) => resource.name === entity);
+  return {
+    timeZone: ctx.actor.timeZone ?? 'UTC',
+    // The app's declared default, read back off the framework — never a second literal.
+    locale: ctx.actor.locale ?? localeConfig().fallback,
+    // The route table is the app's; a widget three layers down gets a link or no link.
+    hrefFor: (entity, id) => {
+      const found = target(entity);
+      return found === undefined ? null : `${app.basePath}${found.path}/${id}`;
+    },
+    labelFor: (entity, id) => relations.get(entity)?.labels.get(id),
+    optionsFor: (entity) => relations.get(entity)?.options ?? null,
+    lookupHref: (entity) => {
+      const found = target(entity);
+      // Only a resource whose list this actor may read has a lookup to send them to.
+      return found === undefined || !canOperate(found, 'list', ctx)
+        ? null
+        : lookupHref(app.basePath, found);
+    },
+  };
+}
+
+/** Where a resource's lookup screen lives. One spelling, read by the route table and every link. */
+export const lookupHref = (basePath: string, resource: Pick<AdminResource, 'path'>): string =>
+  `${basePath}${resource.path}/${LOOKUP_SEGMENT}`;
+
+export function framed(
+  app: AdminApp,
+  request: AdminRouteRequest,
+  /** The screen's `<h1>`. `null` when the body carries its own — a refusal does. */
+  titleKey: string | null,
+  body: JSX.Element,
+  status = 200,
+): AdminRouteResponse {
+  return {
+    kind: 'document',
+    status,
+    body: (
+      <AdminLayout
+        app={app}
+        nav={app.navFor(request.ctx)}
+        currentPath={new URL(request.url).pathname}
+        actor={request.ctx.actor}
+        {...(titleKey === null ? {} : { title: t(titleKey) })}
+      >
+        {body}
+      </AdminLayout>
+    ),
+  };
+}
+
+/** A refusal the gate already audited: the page names the permission, and the status is 403. */
+export function refused(
+  app: AdminApp,
+  request: AdminRouteRequest,
+  titleKey: string,
+  decision: AdminDecision,
+): AdminRouteResponse {
+  return framed(
+    app,
+    request,
+    null,
+    <AdminPageDenied titleKey={titleKey} decision={decision} />,
+    403,
+  );
+}
+
+/**
+ * A refusal decided HERE rather than inside a crud call — a form's GET, a page — so the audit
+ * entry is written here too. The page is the subject: its path is what the row names.
+ */
+export async function refusedPage(
+  app: AdminApp,
+  request: AdminRouteRequest,
+  route: AdminRoute,
+  decision: AdminDecision,
+): Promise<AdminRouteResponse> {
+  await auditRefusal(request.ctx, route.path, decision);
+  return refused(app, request, route.titleKey, decision);
+}
+
+/** A URL the admin serves and a thing it does not have: a row that is gone, an unknown action. */
+export function missing(
+  app: AdminApp,
+  request: AdminRouteRequest,
+  titleKey: string,
+  body: JSX.Element,
+): AdminRouteResponse {
+  return framed(app, request, titleKey, body, 404);
+}
+
+/**
+ * The wrapper that makes a screen's authz unskippable: a custom page, the dashboard, jobs, audit
+ * and search are all built through it, so "the screen that forgot its policy line" has nowhere to
+ * exist. It asks the SAME `decideAll` every CRUD call and every nav item asks, audits the
+ * refusal, answers it 403, and only then calls the body. A resource screen is the one thing not
+ * built here — `crud.ts` decides those, because only it holds the row a row-level rule reads.
+ */
+export function guardedScreen(
+  app: AdminApp,
+  route: AdminRoute,
+  body: (request: AdminRouteRequest) => JSX.Element | Promise<JSX.Element>,
+): AdminScreen {
+  return async (request) => {
+    const decision = decideAll(request.ctx.authz, route.permissions, request.ctx.actor);
+    if (!decision.allowed) return refusedPage(app, request, route, decision);
+    try {
+      return framed(app, request, route.titleKey, await body(request));
+    } catch (error) {
+      // A body that refuses its URL — a parameter it does not answer — is the list's 400: the
+      // error, naming what the screen does answer. Anything else is not this frame's to render.
+      if (!(error instanceof AdminFilterInvalidError)) throw error;
+      return framed(app, request, route.titleKey, <ErrorState error={error} />, 400);
+    }
+  };
+}

package/src/screen-home.tsx

@@ -0,0 +1,201 @@
+// `/admin` — the dashboard: every resource this actor may open, the decision behind each of its
+// operations, and the app-wide actions. No row is read here: a dashboard that listed five rows of
+// every resource would be one query per entity on every visit to the front page.
+
+import { t } from '@ultimat3/i18n';
+import { Card } from '@ultimat3/ui';
+import type { JSX } from 'solid-js';
+import { AdminActionForm } from './action-form';
+import { actionButtons, invokeAdminAction } from './action-gate';
+import { decodeActionInput, postedActionInput } from './action-input';
+import { ACTION_OPERATION, ACTION_PARAM, AdminActions, OPERATION_FIELD } from './actions';
+import type { AdminApp, AdminRoute } from './admin';
+import styles from './admin.module.scss';
+import { decideAll } from './authz';
+import type { CrudCtx } from './crud';
+import { canOperate, decideOperation, permissionsForOperation } from './crud';
+import { posted } from './form-decode';
+import { ADMIN_OPERATIONS, type AdminOperation, confirmationToken } from './permissions';
+import type { AdminAction } from './registry';
+import type { AdminResource } from './resource';
+import {
+  type AdminRouteRequest,
+  type AdminRouteResponse,
+  type AdminScreen,
+  framed,
+  refused,
+  refusedPage,
+} from './screen-frame';
+import type { ValidationIssue } from './validate';
+
+/** One row of an operation matrix: the decision the dashboard renders AND the call obeys. */
+export interface OperationDecision {
+  readonly operation: AdminOperation;
+  readonly allowed: boolean;
+  readonly permissions: readonly string[];
+  readonly reason: string;
+}
+
+/**
+ * Every operation the resource OFFERS, with its decision. This IS the view-only proof, rendered
+ * rather than asserted. One it does not offer has no row: "denied" would read as a missing grant
+ * the operator should ask for, when no grant opens it.
+ */
+export const operationMatrix = (
+  resource: AdminResource,
+  ctx: CrudCtx,
+): readonly OperationDecision[] =>
+  ADMIN_OPERATIONS.filter((operation) => resource.operations.includes(operation)).map(
+    (operation) => {
+      const decision = decideOperation(resource, operation, ctx);
+      return {
+        operation,
+        allowed: decision.allowed,
+        permissions: permissionsForOperation(resource.permission, operation),
+        reason: decision.reason,
+      };
+    },
+  );
+
+/**
+ * The permission matrix, rendered. A reader can see that `create`, `update` and `delete` are
+ * refused and WHICH permission refused them — the same decision the call obeys, not a note about
+ * a button that was left out.
+ */
+export function OperationMatrix(props: {
+  readonly rows: readonly OperationDecision[];
+}): JSX.Element {
+  return (
+    <table class={styles['matrix']}>
+      <thead>
+        <tr>
+          <th>{t('admin.matrix.operation')}</th>
+          <th>{t('admin.matrix.permissions')}</th>
+          <th>{t('admin.matrix.verdict')}</th>
+        </tr>
+      </thead>
+      <tbody>
+        {props.rows.map((row) => (
+          <tr class={row.allowed ? styles['allowed'] : styles['denied']}>
+            <td>{t(`admin.operation.${row.operation}`)}</td>
+            <td class={styles['mono']}>{row.permissions.join(' + ')}</td>
+            <td>
+              {row.allowed
+                ? t('admin.matrix.allowed')
+                : `${t('admin.matrix.deniedBy')} ${row.reason}`}
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+/** An app-wide action's POST: the same gate, with no row for a subject. */
+async function globalWrite(
+  app: AdminApp,
+  route: AdminRoute,
+  request: AdminRouteRequest,
+  form: Readonly<Record<string, unknown>>,
+): Promise<AdminRouteResponse> {
+  const name = posted(form, 'name') ?? '';
+  const action =
+    posted(form, OPERATION_FIELD) === ACTION_OPERATION
+      ? app.globalActions.find((declared) => declared.name === name)
+      : undefined;
+  if (action === undefined) {
+    return framed(app, request, route.titleKey, <p>{t('admin.actions.unknown')}</p>, 404);
+  }
+  const confirmation = posted(form, 'confirmation');
+  const result = await invokeAdminAction({
+    action,
+    input: decodeActionInput(action, form),
+    actor: request.ctx.actor,
+    authz: request.ctx.authz,
+    audit: request.ctx.audit,
+    requestId: request.ctx.requestId,
+    ...(confirmation === undefined ? {} : { confirmation }),
+  });
+  if (result.ok) return { kind: 'redirect', location: app.basePath };
+  if (result.kind === 'invalid') {
+    return globalForm(app, route, request, action, postedActionInput(action, form), result.issues);
+  }
+  // A global action has no row, so its `when` is never asked: only a refusal is left.
+  return refused(app, request, route.titleKey, result.decision);
+}
+
+/** An app-wide action's own form: `GET /admin?action=<name>`, and its refused post. */
+function globalForm(
+  app: AdminApp,
+  route: AdminRoute,
+  request: AdminRouteRequest,
+  action: AdminAction,
+  values: Readonly<Record<string, string>>,
+  issues: readonly ValidationIssue[],
+): AdminRouteResponse {
+  return framed(
+    app,
+    request,
+    route.titleKey,
+    <AdminActionForm
+      action={action}
+      href={app.basePath}
+      operation={ACTION_OPERATION}
+      values={values}
+      issues={issues}
+      confirmation={action.destructive === true ? confirmationToken('admin', '') : null}
+      subject={t('admin.actions.subject.app')}
+      cancelHref={app.basePath}
+    />,
+    issues.length === 0 ? 200 : 422,
+  );
+}
+
+export function homeScreen(app: AdminApp, route: AdminRoute): AdminScreen {
+  return async (request) => {
+    const decision = decideAll(request.ctx.authz, route.permissions, request.ctx.actor);
+    if (!decision.allowed) return refusedPage(app, request, route, decision);
+    if (request.method === 'POST') return globalWrite(app, route, request, request.form ?? {});
+    const asked = new URL(request.url).searchParams.get(ACTION_PARAM);
+    if (asked !== null) {
+      // Only an action this actor may run: a link to a form is never a way round a missing button.
+      const offered = actionButtons({
+        actions: app.globalActions,
+        actor: request.ctx.actor,
+        authz: request.ctx.authz,
+      }).some((button) => button.name === asked);
+      const action = app.globalActions.find((declared) => declared.name === asked);
+      if (!offered || action === undefined) {
+        return framed(app, request, route.titleKey, <p>{t('admin.actions.unknown')}</p>, 404);
+      }
+      return globalForm(app, route, request, action, {}, []);
+    }
+
+    const open = app.resources.filter((resource) => canOperate(resource, 'list', request.ctx));
+    return framed(
+      app,
+      request,
+      route.titleKey,
+      <div class={styles['panel']}>
+        <AdminActions
+          actions={app.globalActions}
+          actor={request.ctx.actor}
+          authz={request.ctx.authz}
+          href={app.basePath}
+        />
+        {open.length === 0 ? <p class={styles['note']}>{t('admin.actions.none')}</p> : null}
+        {open.map((resource) => (
+          <Card
+            header={
+              <h2>
+                <a href={`${app.basePath}${resource.path}`}>{t(resource.titleKey)}</a>
+              </h2>
+            }
+          >
+            <OperationMatrix rows={operationMatrix(resource, request.ctx)} />
+          </Card>
+        ))}
+      </div>,
+    );
+  };
+}