hecks 3.10.0 → 3.11.0

data/lib/hecks/projections/site/cms_editor/setting.rb

@@ -4,6 +4,8 @@ require "json"
 require_relative "../root_rows"
 require_relative "../routes_ts"
 require_relative "checks"
+require_relative "preview"
+require_relative "../../../version"
 
 module Hecks
   module Projections
@@ -20,11 +22,14 @@ module Hecks
             "Editor",
             fields:   { domain: String, chapter: String, base_path: String, sso_path: String, session_cookie: String,
                         host_cookie: String, host_env: String, host_default: String, roles: String, login: String,
-                        title: String, skip: String, media_dir: String, media_max_bytes: String },
+                        title: String, brand: String, accent: String, logo: String, skip: String, media: String,
+                        media_dir: String, media_max_bytes: String, chapter_roles: String, page_size: [String, Integer],
+                        preview: String },
             required: %i[domain chapter host_env login],
             defaults: { base_path: "/editor", session_cookie: "hecks_editor", host_cookie: "hecks_session",
-                        host_default: "http://127.0.0.1:4322", roles: "Admin,Owner", title: "Editor", skip: "",
-                        media_dir: "media", media_max_bytes: "5242880" }
+                        host_default: "http://127.0.0.1:4322", roles: "Admin,Owner", title: "Editor", brand: "",
+                        accent: "", logo: "", skip: "", media: "", media_dir: "media", media_max_bytes: "5242880",
+                        chapter_roles: "", page_size: "25", preview: "" }
           )
 
           # @return [Hash{Symbol => String}] the checked row, defaults filled
@@ -45,7 +50,7 @@ module Hecks
           # @param table [Table, nil] the checked route table
           # @raise [Table::Invalid] naming every problem when there is one
           def initialize(row, table: nil)
-            @row = { sso_path: "#{row[:base_path]}/api/sso" }.merge(row)
+            @row = { sso_path: "#{row[:base_path]}/api/sso" }.merge(row, page_size: row[:page_size].to_s)
             problems = Checks.problems(@row, roles, table)
             return if problems.empty?
 
@@ -55,10 +60,40 @@ module Hecks
           # @return [String] the domain's directory, relative to the project
           def domain = row.fetch(:domain)
 
-          # @return [String] the chapter the editor edits
-          def chapter = row.fetch(:chapter)
+          # @return [String] the first chapter the editor edits, which names the generated package
+          def chapter = chapters.first.to_s
 
-          # @return [Array<String>] the aggregates left out
+          # @return [Array<String>] every chapter the editor edits, in the order the row names them:
+          #   `chapter` is one name or several, comma separated
+          def chapters = row.fetch(:chapter).split(",").map(&:strip).reject(&:empty?)
+
+          # @return [Hash{String => Array<String>}] the roles a chapter's aggregates are limited to,
+          #   from `Chapter=Role,Role;Chapter=Role`; a chapter not named is open to every role the
+          #   editor admits
+          def chapter_roles
+            row.fetch(:chapter_roles).split(";").map(&:strip).reject(&:empty?).to_h do |entry|
+              name, roles = entry.split("=", 2)
+              [name.to_s.strip, roles.to_s.split(",").map(&:strip).reject(&:empty?)]
+            end
+          end
+
+          # @return [String, nil] the URL template a record is previewed at, or nil for no preview
+          def preview = row.fetch(:preview).strip.then { |template| template.empty? ? nil : template }
+
+          # @return [Integer] how many instances a list shows to a page
+          def page_size = row.fetch(:page_size).to_i
+
+          # @return [String, nil] the other chapter whose picture aggregate the editor's pictures
+          #   use, or nil when the pictures (if any) are in the editor's own chapter
+          def media_chapter = row.fetch(:media).strip.then { |name| name.empty? ? nil : name }
+
+          # @return [String, nil] the product name the header shows, or nil for the domain's name
+          def brand = row.fetch(:brand).strip.then { |name| name.empty? ? nil : name }
+
+          # @return [String, nil] the accent colour as hex, or nil for the default theme
+          def accent = row.fetch(:accent).strip.then { |hex| hex.empty? ? nil : hex }
+
+          # @return [Array<String>] the aggregates left out: `Name`, or `Chapter::Name`
           def skip = row.fetch(:skip).split(",").map(&:strip).reject(&:empty?)
 
           # @return [Array<String>] the roles that count as an editor
@@ -70,14 +105,22 @@ module Hecks
           # @return [Hash{String => String}] each placeholder to the text that replaces it
           def tokens
             { "__BANNER__" => RoutesTs::BANNER, "__PACKAGE__" => package, "__ROLES__" => RoutesTs.literal(roles),
-              "__MEDIA_MAX_BYTES__" => row.fetch(:media_max_bytes), **quoted }
+              "__MEDIA_MAX_BYTES__" => row.fetch(:media_max_bytes), "__PAGE_SIZE__" => page_size.to_s,
+              "__CLIENT_VERSION__" => Hecks::VERSION, **preview_tokens, **quoted }
+          end
+
+          # @return [Hash{String => String}] the preview template as a literal, and the policy line
+          #   that lets the editor frame its origin, which is empty when there is no preview
+          def preview_tokens
+            source = Preview.frame_source(row.fetch(:preview).strip)
+            { "__PREVIEW__" => JSON.generate(preview), "__FRAME_POLICY__" => source ? "  \"frame-src #{source}\"," : "" }
           end
 
           # @return [Hash{String => String}] each text field's placeholder to the field as JSON
           def quoted
             { "TITLE" => :title, "BASE_PATH" => :base_path, "SSO_PATH" => :sso_path, "LOGIN" => :login,
               "SESSION_COOKIE" => :session_cookie, "HOST_COOKIE" => :host_cookie, "HOST_ENV" => :host_env,
-              "HOST_DEFAULT" => :host_default, "MEDIA_DIR" => :media_dir }
+              "HOST_DEFAULT" => :host_default, "MEDIA_DIR" => :media_dir, "LOGO" => :logo }
               .to_h { |token, field| ["__#{token}__", JSON.generate(row.fetch(field))] }
           end
         end

data/lib/hecks/projections/site/cms_editor/targets.rb

@@ -0,0 +1,86 @@
+# frozen_string_literal: true
+
+module Hecks
+  module Projections
+    module Site
+      module CmsEditor
+        # The aggregates an attribute can name, found among the aggregates of one editor, and what
+        # a picker needs to know about each: its key, the attribute that labels it and the query
+        # that lists the ones to offer.
+        class Targets
+          # The attribute names that label an instance, in the order they are tried; an aggregate
+          # with none is labelled by its identity.
+          LABELS = %w[title name label].freeze
+
+          # The zero-argument queries that list what is on offer, tried in this order: ones that
+          # list everything, then the one that lists what is in use.
+          LISTINGS = %w[all list listing active].freeze
+
+          # @param aggregates [Array<Hash{String => Object}>] the aggregates as `Schema` shapes them
+          # @param media [Hash{String => Object}, nil] the picture aggregate, as `Media` says
+          def initialize(aggregates, media = nil)
+            @aggregates = aggregates
+            @media = media
+          end
+
+          # @return [Hash{String => Object}, nil] the aggregate named `name`, as a picker names it
+          def named(name, from)
+            pick(@aggregates.select { |agg| agg["name"] == name }, from)
+          end
+
+          # @return [Hash{String => Object}, nil] the aggregate whose identity is of type `stem`, or
+          #   that is named `stem`, as a picker names it
+          def keyed_by(stem, from)
+            pick(@aggregates.select { |agg| identity_type(agg) == stem }, from) || named(stem, from)
+          end
+
+          # @return [Hash{String => Object}, nil] the aggregate that is `word` in snake case
+          def kind(word, from)
+            pick(@aggregates.select { |agg| snake(agg["name"]) == word }, from)
+          end
+
+          # @return [Hash{String => Object}, nil] the picture aggregate, which offers keys and
+          #   accepts any other text as well, since a picture may be named by an address
+          def pictures
+            return nil unless @media
+
+            agg = @media["definition"] || @aggregates.find { |candidate| candidate["name"] == @media["aggregate"] }
+            return nil unless agg
+
+            described = describe(agg, agg["chapter"] || @media["domain"], @media["listing"])
+            described.merge("label" => @media.dig("fields", "alt", "name"), "strict" => false)
+          end
+
+          private
+
+          def pick(found, from)
+            own = found.select { |agg| agg["chapter"] == from["chapter"] }
+            chosen = own.first || (found.first if found.size == 1)
+            chosen && describe(chosen, chosen["chapter"], listing(chosen)).merge("strict" => true)
+          end
+
+          def describe(agg, chapter, listing)
+            { "target" => agg["name"], "chapter" => chapter, "key" => agg["identity"], "label" => label(agg),
+              "listing" => listing }.compact
+          end
+
+          def identity_type(agg)
+            agg["attributes"].find { |attr| attr["name"] == agg["identity"] }&.fetch("type", nil)
+          end
+
+          def label(agg)
+            plain = agg["attributes"].reject { |attr| attr["list"] || attr["widget"] == "body" }.map { |attr| attr["name"] }
+            LABELS.find { |name| plain.include?(name) } || agg["identity"]
+          end
+
+          def listing(agg)
+            named = agg["queries"].select { |query| query["attributes"].empty? }.map { |query| query["name"] }
+            LISTINGS.filter_map { |word| named.find { |name| name.downcase == word } }.first
+          end
+
+          def snake(name) = name.gsub(/([a-z0-9])([A-Z])/, "\\1_\\2").downcase
+        end
+      end
+    end
+  end
+end

data/lib/hecks/projections/site/cms_editor/templates/package.json.tmpl

@@ -6,14 +6,31 @@
     "node": ">=22.18"
   },
   "scripts": {
+    "clean": "node -e \"fs.rmSync('dist', { recursive: true, force: true })\"",
+    "build": "npm run clean && npm run build:css && npm run build:js",
+    "build:css": "tailwindcss --input src/browser/app.css --output dist/editor.css --minify",
+    "build:js": "esbuild src/browser/main.js --bundle --splitting --format=esm --target=es2022 --minify --outdir=dist --entry-names=editor --chunk-names=[name]-[hash]",
+    "prestart": "npm run build",
     "start": "node src/server.ts",
     "check": "tsc -p tsconfig.json"
   },
   "dependencies": {
-    "@hecks/client": "^3.8.0"
+    "@hecks/client": "^__CLIENT_VERSION__",
+    "@tiptap/core": "3.31.4",
+    "@tiptap/extension-blockquote": "3.31.4",
+    "@tiptap/extension-image": "3.31.4",
+    "@tiptap/extensions": "3.31.4",
+    "@tiptap/pm": "3.31.4",
+    "@tiptap/starter-kit": "3.31.4",
+    "tiptap-extension-flat-list": "0.4.0"
   },
   "devDependencies": {
+    "@tailwindcss/cli": "4.3.3",
+    "@tailwindcss/typography": "0.5.20",
     "@types/node": "^22.10.0",
+    "daisyui": "5.7.47",
+    "esbuild": "0.28.2",
+    "tailwindcss": "4.3.3",
     "typescript": "^5.8.0"
   }
 }

data/lib/hecks/projections/site/cms_editor/templates/src/app.ts.tmpl

@@ -7,25 +7,40 @@ __BANNER__
 // (auth/membership.ts). A visitor with neither is sent to the site's login page; nothing in the
 // domain is read or changed before that. Posts must come from this site (the cookie is SameSite=Lax
 // and the Origin header is checked too).
-import { readFileSync } from "node:fs";
+import { randomUUID } from "node:crypto";
 
-import { DomainRefusal, DomainUnavailable, rowsOf } from "@hecks/client";
-import type { HostClient } from "@hecks/client";
+import { DomainRefusal, DomainUnavailable } from "@hecks/client";
+import type { Answer, HostClient } from "@hecks/client";
 
+import { serveAsset } from "./assets.ts";
 import { authSecret, membershipCheck } from "./auth/membership.ts";
 import type { Membership } from "./auth/membership.ts";
-import { readSession } from "./auth/session.ts";
+import { clearedCookie, readSession } from "./auth/session.ts";
 import { signIn } from "./auth/sso.ts";
-import { idOf, instanceIn, runCommand } from "./commands.ts";
+import { choicesFor, unknownKey } from "./choices.ts";
+import { idOf, instanceIn, reading, runCommand } from "./commands.ts";
 import type { State } from "./commands.ts";
 import { EDITOR } from "./config.ts";
-import { hostClient } from "./host.ts";
+import { flashCookie, readFlash, spentFlash } from "./flash.ts";
+import type { Flash } from "./flash.ts";
+import { hostClient, rowsAnswered } from "./host.ts";
+import { at, keyOf, locate, mayEdit, qualified } from "./names.ts";
 import { SCHEMA } from "./schema.ts";
 import type { Aggregate, Command } from "./schema.ts";
+import { available, needsPage } from "./ui/detail.ts";
+import { href } from "./ui/html.ts";
 import { commandArguments, parseForm } from "./ui/input.ts";
-import { commandPage, detailPage, home, listPage, notFound } from "./ui/pages.ts";
+import { backOf, plainValue } from "./ui/links.ts";
+import type { Back } from "./ui/links.ts";
+import { commandPage, detailPage, home, instanceCommandPage, listPage, notFound, scheduledPage } from "./ui/pages.ts";
 import type { Submitted } from "./ui/pages.ts";
-import { href } from "./ui/html.ts";
+import { knownStatus, narrow, slice, viewOf } from "./ui/paging.ts";
+import type { View } from "./ui/paging.ts";
+import { schedules, subjectQuery } from "./ui/schedule.ts";
+import { decorate } from "./ui/shell.ts";
+import type { World } from "./ui/world.ts";
+import { schedulingAggregate } from "./ui/world.ts";
+import { done, commandLabel, plural } from "./ui/words.ts";
 __MEDIA_IMPORT__
 
 export interface AppOptions {
@@ -38,12 +53,39 @@ export interface AppOptions {
 __MEDIA_OPTION__
 }
 
-const html = (body: string, status = 200): Response =>
-  new Response(body, { status, headers: { "Content-Type": "text/html; charset=utf-8", "Cache-Control": "no-store" } });
+/**
+ * What every page is sent with. The editor loads its own script, stylesheet, pictures and icons and
+ * nothing else, so the policy names no other origin and allows no inline script and no inline style
+ * (no `style` attribute, no style element: the stylesheet is a file, and the writing surface is told
+ * to inject none). `data:` in `img-src` is for the sprite-free case of a picture drawn from a data
+ * address; `blob:` shows a picture chosen for upload before it is sent. Script may still set styles
+ * through the page's object model, which the policy allows.
+ */
+const POLICY = [
+  "default-src 'none'",
+  "script-src 'self'",
+  "style-src 'self'",
+  "img-src 'self' data: blob:",
+  "connect-src 'self'",
+  "form-action 'self'",
+__FRAME_POLICY__
+  "base-uri 'none'",
+  "frame-ancestors 'none'",
+].join("; ");
+
+const PAGE_HEADERS = {
+  "Content-Type": "text/html; charset=utf-8",
+  "Cache-Control": "no-store",
+  "Content-Security-Policy": POLICY,
+  "Referrer-Policy": "same-origin",
+  "X-Content-Type-Options": "nosniff",
+};
+
+const plain = (body: string, status: number): Response => new Response(body, { status, headers: { "Content-Type": "text/plain; charset=utf-8" } });
 
-const redirect = (location: string, status = 303, cookie?: string): Response => {
+const redirect = (location: string, status = 303, ...cookies: string[]): Response => {
   const headers = new Headers({ Location: location });
-  if (cookie) headers.append("Set-Cookie", cookie);
+  for (const cookie of cookies) headers.append("Set-Cookie", cookie);
   return new Response(null, { status, headers });
 };
 
@@ -54,6 +96,14 @@ function sameSite(request: Request): boolean {
   return (request.headers.get("sec-fetch-site") ?? "same-origin") !== "cross-site";
 }
 
+/** What a route needs to answer: show a page for this person, or send them on with a notice. */
+interface Scene {
+  /** The person's role, which decides the chapters they may edit. */
+  role: string | null;
+  show(body: string, status?: number, notice?: Flash): Promise<Response>;
+  sent(location: string, message: string): Response;
+}
+
 /** The editor, as a handler. */
 export function createApp(options: AppOptions = {}): (request: Request) => Promise<Response> {
   const secret = options.secret ?? authSecret();
@@ -62,94 +112,193 @@ export function createApp(options: AppOptions = {}): (request: Request) => Promi
   const client = hostClient({ url: options.url, fetch: options.fetch });
 __MEDIA_SETUP__
 
+  /**
+   * The instances each aggregate holds, for the navigation; a host that cannot say shows no counts.
+   * The host has no count to ask for, so they are the lengths of what one read answers, the same
+   * read a page of a list is made from.
+   */
+  async function counts(from: HostClient): Promise<Record<string, number>> {
+    try {
+      const answer = await from.read();
+      return Object.fromEntries(SCHEMA.aggregates.map((agg) => [keyOf(agg), from.instancesOf(answer, qualified(agg)).length]));
+    } catch {
+      return {};
+    }
+  }
+
+  function sceneFor(email: string, role: string | null, flash: Flash | null, from: HostClient): Scene {
+    return {
+      role,
+      async show(body, status = 200, notice) {
+        const text = decorate(body, { email, role, counts: await counts(from), flash: notice ?? flash });
+        const response = new Response(text, { status, headers: PAGE_HEADERS });
+        if (flash) response.headers.append("Set-Cookie", spentFlash());
+        return response;
+      },
+      sent: (location, message) => redirect(location, 303, flashCookie({ kind: "success", message }, secret, now)),
+    };
+  }
+
   async function handle(request: Request): Promise<Response> {
     const url = new URL(request.url);
     const path = url.pathname.replace(/\/+$/, "") || "/";
     if (path === EDITOR.ssoPath) return enter(url, secret, membership, now);
-    if (path !== EDITOR.basePath && !path.startsWith(`${EDITOR.basePath}/`)) return html(notFound(path), 404);
+    if (path !== EDITOR.basePath && !path.startsWith(`${EDITOR.basePath}/`)) return anonymous(notFound(path), 404);
+    if (path === href("logout") && request.method === "POST") return signOut(request);
 
     const email = readSession(request.headers.get("cookie"), secret, now);
     if (!email || !(await membership.isAdmitted(email))) {
-      return request.method === "GET" ? redirect(EDITOR.login, 302) : new Response("Sign in again.", { status: 403 });
+      return request.method === "GET" ? redirect(EDITOR.login, 302) : plain("Sign in again.", 403);
     }
-    if (request.method === "POST" && !sameSite(request)) return new Response("Cross-site post refused.", { status: 403 });
+    if (request.method === "POST" && !sameSite(request)) return plain("Cross-site post refused.", 403);
     const segments = path.slice(EDITOR.basePath.length).split("/").filter(Boolean).map(decodeURIComponent);
+    const role = membership.roleOf ? await membership.roleOf(email) : null;
 __MEDIA_ROUTE__
-    return route(client, request, url, segments);
+    const reader = request.method === "GET" ? reading(client) : client;
+    const scene = sceneFor(email, role, readFlash(request.headers.get("cookie"), secret, now), reader);
+    return route(reader, request, url, segments, scene);
   }
 
   return async (request) => {
     try {
       return await handle(request);
     } catch (err) {
-      if (err instanceof DomainUnavailable) return html(notFound(`The domain could not be reached: ${err.message}`), 502);
+      if (err instanceof DomainUnavailable) return anonymous(notFound(`The domain could not be reached: ${err.message}`, "The domain is not answering"), 502);
       throw err;
     }
   };
 }
 
-/** The browser modules the rich-text widget loads (with the picture picker when there are pictures), for signed-in editors only. */
-const ASSETS = __ASSETS__;
+/** A page for someone with no session to show, such as a path the editor does not serve. */
+function anonymous(body: string, status: number): Response {
+  return new Response(decorate(body, { email: "", role: null, counts: {}, flash: null }), { status, headers: PAGE_HEADERS });
+}
 
-function asset(name: string): Response {
-  if (!ASSETS.includes(name)) return html(notFound(`No asset ${name}.`), 404);
-  const text = readFileSync(new URL(`./ui/${name}`, import.meta.url), "utf8");
-  return new Response(text, { headers: { "Content-Type": "text/javascript; charset=utf-8", "Cache-Control": "private, max-age=300" } });
+/** Ends the session: the cookie is cleared and the person is sent to the site's login page. */
+function signOut(request: Request): Response {
+  if (!sameSite(request)) return plain("Cross-site post refused.", 403);
+  return redirect(EDITOR.login, 303, clearedCookie());
 }
 
 async function enter(url: URL, secret: string, membership: Membership, now: () => number): Promise<Response> {
   const result = await signIn(url.searchParams.get("token"), secret, membership, now);
-  if (!result.ok) return new Response(result.message, { status: result.status });
+  if (!result.ok) return plain(result.message, result.status);
   return redirect(result.location, 302, result.cookie);
 }
 
-function route(client: HostClient, request: Request, url: URL, segments: string[]): Promise<Response> | Response {
-  const [name, verb, ...rest] = segments;
-  if (segments.length === 0) return html(home());
-  if (name === "assets" && segments.length === 2 && request.method === "GET") return asset(verb);
-  const agg = SCHEMA.aggregates.find((candidate) => candidate.name === name);
-  if (!agg) return html(notFound(`No aggregate ${name}.`), 404);
-  if (verb === undefined) return list(client, agg, url);
-  if (verb === "id" && rest.length === 1 && request.method === "GET") return detail(client, agg, rest[0], null);
-  if (request.method === "POST") return post(client, request, agg, verb, rest);
-  if ((verb === "new" || verb === "run") && rest.length === 1) return commandView(agg, verb, rest[0]);
-  return html(notFound(`No page ${segments.join("/")}.`), 404);
+function route(client: HostClient, request: Request, url: URL, segments: string[], scene: Scene): Promise<Response> | Response {
+  if (segments.length === 0) return scene.show(home());
+  if (segments[0] === "assets" && segments.length === 2 && request.method === "GET") return serveAsset(segments[1], request);
+  if (segments[0] === "scheduled" && segments.length === 1 && request.method === "GET" && SCHEMA.scheduling) return scheduledView(client, scene);
+  const { agg, rest: [verb, ...rest] } = locate(segments);
+  if (!agg) return scene.show(notFound(`No aggregate ${segments.slice(0, SCHEMA.chapters ? 2 : 1).join("/")}.`), 404);
+  if (!mayEdit(agg, scene.role)) return scene.show(notFound(`${plural(agg.name)} are not open to your role.`, "Not open to your role"), 403);
+  if (verb === undefined) return list(client, agg, url, scene);
+  if (verb === "id" && rest.length === 1 && request.method === "GET") return detail(client, agg, rest[0], null, scene);
+  if (verb === "id" && rest.length === 2 && request.method === "GET") return instanceView(client, agg, rest[0], rest[1], url, scene);
+  if (request.method === "POST") return post(client, request, agg, verb, rest, scene);
+  if ((verb === "new" || verb === "run") && rest.length === 1) return commandView(client, agg, verb, rest[0], url, scene);
+  return scene.show(notFound(`No page ${segments.join("/")}.`), 404);
+}
+
+/** The pairs of an address a list keeps on every link: its view and that view's arguments, not the filters or the page. */
+const KEPT = (key: string): boolean => !["_page", "_q", "_status"].includes(key);
+
+/** The filters and the page an address asks for. */
+function asked(url: URL): { q: string; status: string; page: number; size: number; params: [string, string][] } {
+  const page = Number.parseInt(url.searchParams.get("_page") ?? "1", 10);
+  return {
+    q: (url.searchParams.get("_q") ?? "").trim().slice(0, 200),
+    status: url.searchParams.get("_status") ?? "",
+    page: Number.isFinite(page) ? page : 1,
+    size: EDITOR.pageSize,
+    params: [...url.searchParams].filter(([key]) => KEPT(key)),
+  };
 }
 
-async function list(client: HostClient, agg: Aggregate, url: URL): Promise<Response> {
+async function list(client: HostClient, agg: Aggregate, url: URL, scene: Scene): Promise<Response> {
   const query = agg.queries.find((candidate) => candidate.name === url.searchParams.get("query")) ?? null;
   const form = parseForm(url.search.slice(1));
   const args = query ? commandArguments(agg, query.attributes, form) : {};
-  const asked = query !== null && (query.attributes.length === 0 || Object.keys(args).length > 0);
-  if (query && !asked) return html(listPage(agg, [], query, null));
+  const wanted = query !== null && (query.attributes.length === 0 || Object.keys(args).length > 0);
+  const raw = asked(url);
+  const filters = { ...raw, status: knownStatus(agg, raw.status) };
+  const choices = query ? await choicesFor(client, agg, query.attributes) : {};
+  const none = viewOf(0, 0, filters);
+  if (query && !wanted) return scene.show(listPage(agg, [], query, null, false, none, choices));
   try {
-    const rows = await rowsFor(client, agg, asked ? query : null, args);
-    return html(listPage(agg, rows, query, null));
+    const found = await rowsFor(client, agg, wanted ? query : null, args);
+    const matching = narrow(agg, found, filters.q, filters.status);
+    const view: View = viewOf(matching.length, found.length, filters);
+    return scene.show(listPage(agg, slice(matching, view), query, null, true, view, choices));
   } catch (err) {
-    if (err instanceof DomainRefusal) return html(listPage(agg, [], query, err.message), 200);
+    if (err instanceof DomainRefusal) return scene.show(listPage(agg, [], query, err.message, true, none, choices), 200);
     throw err;
   }
 }
 
 async function rowsFor(client: HostClient, agg: Aggregate, query: { name: string } | null, args: State): Promise<[string, State][]> {
-  if (!query) return client.instancesOf(await client.read(), agg.name);
-  const rows = rowsOf(await client.query(`${agg.name}.${query.name}`, args), `${agg.name}.${query.name}`) ?? [];
+  if (!query) return client.instancesOf(await client.read(), qualified(agg));
+  const name = `${qualified(agg)}.${query.name}`;
+  const rows = rowsAnswered(await client.query(name, args), name);
   return rows.flatMap((row): [string, State][] => {
     const id = idOf(agg, row);
     return id === null ? [] : [[id, row]];
   });
 }
 
-async function detail(client: HostClient, agg: Aggregate, id: string, shown: Submitted | null, status = 200): Promise<Response> {
+const refused = (agg: Aggregate, command: Command): Flash => ({ kind: "error", message: `${commandLabel(agg, command)} was not applied. Fix what is marked and try again.` });
+
+/** What a page of one record may read of the rest of the domain, from the read the page already made. */
+async function worldFor(client: HostClient, answer: Answer, role: string | null, record?: { agg: Aggregate; id: string }): Promise<World> {
+  const world: World = { role, lookup: (agg, id) => instanceIn(client, answer, agg, id), rows: (agg) => client.instancesOf(answer, qualified(agg)) };
+  const asked = record && schedules(record.agg, role) ? subjectQuery(record.agg, record.id) : null;
+  const sched = schedulingAggregate();
+  if (!asked || !sched) return world;
+  const name = `${qualified(sched)}.${asked.name}`;
+  try {
+    const rows = rowsAnswered(await client.query(name, asked.args), name);
+    return { ...world, actions: rows.flatMap((row): [string, State][] => (idOf(sched, row) === null ? [] : [[idOf(sched, row) as string, row]])) };
+  } catch (err) {
+    if (err instanceof DomainRefusal || err instanceof DomainUnavailable) return world;
+    throw err;
+  }
+}
+
+/** The screen of every pending action, for those who may edit them. */
+async function scheduledView(client: HostClient, scene: Scene): Promise<Response> {
+  const sched = schedulingAggregate();
+  if (!sched) return scene.show(notFound("Nothing is scheduled here."), 404);
+  if (!mayEdit(sched, scene.role)) return scene.show(notFound("Scheduled actions are not open to your role.", "Not open to your role"), 403);
+  return scene.show(scheduledPage(await worldFor(client, await client.read(), scene.role)));
+}
+
+async function detail(client: HostClient, agg: Aggregate, id: string, shown: Submitted | null, scene: Scene, status = 200): Promise<Response> {
+  const answer = await client.read();
+  const values = instanceIn(client, answer, agg, id);
+  if (!values) return scene.show(notFound(`No ${agg.name} ${id}.`), 404);
+  const command = agg.commands.find((candidate) => candidate.name === shown?.command);
+  const world = await worldFor(client, answer, scene.role, { agg, id });
+  return scene.show(detailPage(agg, id, values, shown, world), status, shown && command ? refused(agg, command) : undefined);
+}
+
+/** The page of a command that acts on one instance, when that instance is in a state it applies to. */
+async function instanceView(client: HostClient, agg: Aggregate, id: string, name: string, url: URL, scene: Scene): Promise<Response> {
   const values = instanceIn(client, await client.read(), agg, id);
-  if (!values) return html(notFound(`No ${agg.name} ${id}.`), 404);
-  return html(detailPage(agg, id, values, shown), status);
+  if (!values) return scene.show(notFound(`No ${agg.name} ${id}.`), 404);
+  const command = commandFor(agg, "id", name);
+  if (!command || !available(agg, command, values)) return scene.show(notFound(`${name} does not apply to ${id} now.`), 404);
+  const choices = await choicesFor(client, agg, command.attributes);
+  return scene.show(instanceCommandPage(agg, id, command, values, null, choices, backOf(url.searchParams.get("_back"))));
 }
 
-function commandView(agg: Aggregate, verb: string, name: string): Response {
+/** A command's page; a link may fill its inputs from the address and name the page to return to. */
+async function commandView(client: HostClient, agg: Aggregate, verb: string, name: string, url: URL, scene: Scene): Promise<Response> {
   const command = commandFor(agg, verb, name);
-  if (!command) return html(notFound(`No command ${name}.`), 404);
-  return html(commandPage(agg, command, href(agg.name, verb, name), null));
+  if (!command) return scene.show(notFound(`No command ${name}.`), 404);
+  const state = commandArguments(agg, command.attributes, parseForm(url.search.slice(1)));
+  const back = backOf(url.searchParams.get("_back"));
+  return scene.show(commandPage(agg, command, href(...at(agg), verb, name), null, await choicesFor(client, agg, command.attributes), { state, back }));
 }
 
 /** The command a `new` (creating) or `run` (acting on another aggregate) path names, or null. */
@@ -161,16 +310,61 @@ function commandFor(agg: Aggregate, verb: string, name: string): Command | null
   return command.on === agg.name ? command : null;
 }
 
-async function post(client: HostClient, request: Request, agg: Aggregate, verb: string, rest: string[]): Promise<Response> {
+/** What a form is refused for before the command is sent: a key a picker names that is not there. */
+async function unchecked(client: HostClient, agg: Aggregate, command: Command, args: State): Promise<{ ok: false; message: string; field: string } | null> {
+  const problem = await unknownKey(client, agg, command.attributes, args);
+  return problem ? { ok: false, message: problem.message, field: problem.field } : null;
+}
+
+/** The scheduled-action record the editor makes itself: a creating command gets an identity nobody typed. */
+function withMadeIdentity(agg: Aggregate, command: Command, args: State): State {
+  const spec = SCHEMA.scheduling;
+  if (!spec?.generated || !command.creates || command.name !== spec.schedule || agg.name !== spec.aggregate || agg.chapter !== spec.chapter) return args;
+  const identity = agg.attributes.find((attr) => attr.name === agg.identity);
+  return identity ? { ...args, [identity.name]: plainValue(agg, identity, randomUUID()) } : args;
+}
+
+/**
+ * A draft saved by the page's script while the person writes. It is answered in plain text, never
+ * with a redirect or a notice, and it only ever runs the aggregate's draft-saving command, so the
+ * live attribute is never written from here.
+ */
+async function autosave(client: HostClient, agg: Aggregate, command: Command, args: State, to: string | undefined): Promise<Response> {
+  if (!to || agg.drafts?.save !== command.name) return plain("Only a draft can be saved this way.", 400);
+  const outcome = (await unchecked(client, agg, command, args)) ?? (await runCommand(client, agg, command, args, to));
+  if (outcome.ok) return plain("Saved.", 200);
+  const refused = plain(outcome.message, 422);
+  if ("problems" in outcome && outcome.problems?.length) refused.headers.set("x-editor-problems", encodeURIComponent(JSON.stringify(outcome.problems)));
+  return refused;
+}
+
+/** Where a command that worked leads: the page the person came from, another blank form, or the instance. */
+function afterwards(agg: Aggregate, command: Command, again: boolean, id: string, back: Back | null): string {
+  if (back) return back.path;
+  return command.creates && again ? href(...at(agg), "new", command.name) : href(...at(agg), "id", id);
+}
+
+async function post(client: HostClient, request: Request, agg: Aggregate, verb: string, rest: string[], scene: Scene): Promise<Response> {
   const onInstance = verb === "id" && rest.length === 2;
   const command = onInstance ? commandFor(agg, "id", rest[1]) : rest.length === 1 ? commandFor(agg, verb, rest[0]) : null;
-  if (!command) return html(notFound("No such command."), 404);
+  if (!command) return scene.show(notFound("No such command."), 404);
   const form = parseForm(await request.text());
-  const args = commandArguments(agg, command.attributes, form);
+  const args = withMadeIdentity(agg, command, commandArguments(agg, command.attributes, form, command.empty));
   const to = onInstance ? rest[0] : command.creates ? undefined : (form.get("__to") ?? "");
-  const outcome = to === "" ? { ok: false as const, message: "Name the instance to act on." } : await runCommand(client, agg, command, args, to);
-  if (outcome.ok) return redirect(href(agg.name, "id", outcome.id));
-  const shown: Submitted = { command: command.name, message: outcome.message, values: { ...args, __to: to } };
-  if (onInstance) return detail(client, agg, rest[0], shown, 422);
-  return html(commandPage(agg, command, href(agg.name, verb, command.name), shown), 422);
+  if (request.headers.get("x-editor-autosave") === "1") return autosave(client, agg, command, args, to);
+  const outcome = to === "" ? { ok: false as const, message: "Name the instance to act on." } : ((await unchecked(client, agg, command, args)) ?? (await runCommand(client, agg, command, args, to)));
+  const back = backOf(form.get("__back"));
+  if (outcome.ok) return scene.sent(afterwards(agg, command, form.get("__again") === "1", outcome.id, back), done(agg, command));
+  const shown: Submitted = { command: command.name, message: outcome.message, values: { ...args, __to: to }, field: outcome.field, problems: "problems" in outcome ? outcome.problems : undefined };
+  if (onInstance) return refusedOnInstance(client, agg, rest[0], command, shown, scene, back);
+  const choices = await choicesFor(client, agg, command.attributes);
+  return scene.show(commandPage(agg, command, href(...at(agg), verb, command.name), shown, choices, { back }), 422, refused(agg, command));
+}
+
+/** The refusal of a command run on one instance: shown on its form, or on the page it was run from. */
+async function refusedOnInstance(client: HostClient, agg: Aggregate, id: string, command: Command, shown: Submitted, scene: Scene, back: Back | null): Promise<Response> {
+  if (!needsPage(command)) return detail(client, agg, id, shown, scene, 422);
+  const values = instanceIn(client, await client.read(), agg, id);
+  if (!values) return scene.show(notFound(`No ${agg.name} ${id}.`), 404);
+  return scene.show(instanceCommandPage(agg, id, command, values, shown, await choicesFor(client, agg, command.attributes), back), 422, refused(agg, command));
 }