slotlock 0.6.3 → 0.7.0

package/dashboard.js

@@ -14,8 +14,9 @@
 // keeps these in Postgres, so they hold on every server that shares the database; the resource cap
 // is held in the database too.
 import { createHash, createHmac, randomBytes, timingSafeEqual } from 'node:crypto';
+import { SLOTLOCK_TEST_TENANT_SUFFIX, } from './api-keys.js';
 import { describeSlotlockAgentWrite, invokeSlotlockAgentOperation, slotlockAgentTools, } from './agent-server.js';
-import { SLOTLOCK_ASSISTANT_API_KEY, SLOTLOCK_ASSISTANT_MAX_ACTION_BYTES, SLOTLOCK_ASSISTANT_MAX_MESSAGE, SLOTLOCK_ASSISTANT_MAX_PENDING, SLOTLOCK_ASSISTANT_MODEL_NAME, SLOTLOCK_ASSISTANT_TOOL_USE, boundSlotlockAssistantEntries, createSlotlockAssistantStore, openSlotlockAssistantKey, pendingSlotlockAssistantActions, pruneSlotlockAssistantActions, checkSlotlockAssistantHost, readSlotlockAssistantBaseUrl, slotlockAssistantUrlAllowed, readSlotlockAssistantEntries, runSlotlockAssistantTurn, sealSlotlockAssistantKey, slotlockAssistantProviderMessage, slotlockAssistantSystemPrompt, testSlotlockAssistantModel, } from './assistant.js';
+import { SLOTLOCK_ASSISTANT_API_KEY, SLOTLOCK_ASSISTANT_MAX_ACTION_BYTES, SLOTLOCK_ASSISTANT_MAX_MESSAGE, SLOTLOCK_ASSISTANT_MAX_PENDING, SLOTLOCK_ASSISTANT_MAX_PREVIOUS_SECRETS, SLOTLOCK_ASSISTANT_MODEL_NAME, SLOTLOCK_ASSISTANT_PRESETS, SLOTLOCK_ASSISTANT_TOOL_USE, boundSlotlockAssistantEntries, createSlotlockAssistantStore, openSlotlockAssistantKeyWithAny, pendingSlotlockAssistantActions, pruneSlotlockAssistantActions, checkSlotlockAssistantHost, readSlotlockAssistantBaseUrl, slotlockAssistantUrlAllowed, readSlotlockAssistantEntries, runSlotlockAssistantTurn, sealSlotlockAssistantKey, slotlockAssistantProviderMessage, slotlockAssistantSystemPrompt, testSlotlockAssistantModel, listSlotlockAssistantModels, } from './assistant.js';
 import { SLOTLOCK_DASHBOARD_NAME_PATTERN } from './config.js';
 import { createSlotlockRateLimiter } from './rate-limit.js';
 import { createSlotlockGuardedFetch } from './webhooks.js';
@@ -23,12 +24,27 @@ import { lookup as dnsLookup } from 'node:dns/promises';
 import { SLOTLOCK_DASHBOARD_FORM_LIMIT } from './ddl.js';
 import { ignoreRejection } from './hooks.js';
 import { SLOTLOCK_BOOKING_RULE_LIMITS } from './booking-rules.js';
+import { SLOTLOCK_DASHBOARD_ICON_SVG } from './dashboard-icon.js';
+import { SLOTLOCK_PLAN_LIMITS, SLOTLOCK_PLAN_QUOTAS } from './plans.js';
+import { SLOTLOCK_MAX_GROUPS_PER_RESOURCE, SLOTLOCK_MAX_LOCATION_DEPTH, SLOTLOCK_MAX_LOCATIONS, SLOTLOCK_MAX_RESOURCE_GROUPS, SLOTLOCK_RESOURCE_KINDS, SLOTLOCK_RESOURCE_PROFILE_LIMITS, } from './resource-profile.js';
+import { slotlockQuotaPeriod } from './quotas.js';
+import { slotlockUsageMonthToDate, summarizeSlotlockUsage } from './usage.js';
 import { SLOTLOCK_CHANGE_TYPES, } from './event-feed.js';
+import { SlotlockAgentOperationError } from './agent-server.js';
+import { runSlotlockApprovalGrant } from './agent-store-backend.js';
+import { SLOTLOCK_SANDBOX_SCENARIOS, fastForwardSlotlockSandbox, resetSlotlockSandbox, seedSlotlockSandbox, } from './sandbox.js';
 import { WEEKDAYS, WEEKDAY_NAMES as DAY_NAMES, rulesToWeeklyHours, weeklyHoursToRules, } from './weekly-hours.js';
 /** Resources one dashboard tenant may hold. */
-export const SLOTLOCK_DASHBOARD_MAX_RESOURCES = 100;
+export const SLOTLOCK_DASHBOARD_MAX_RESOURCES = 500;
 const SESSION_TTL_MS = 12 * 3_600_000;
 const SIGN_IN_TTL_MS = 10 * 60_000;
+/**
+ * How recent a sign-in must be to turn an organization on or off: who owns it is read from GitHub
+ * as one signs in, so a change of owners reaches the dashboard by signing in again.
+ */
+const FRESH_SIGN_IN_MS = 15 * 60_000;
+/** How long Google's signing keys are kept when its answer does not say (Cache-Control max-age). */
+const GOOGLE_KEYS_DEFAULT_TTL_MS = 3_600_000;
 const MAX_FORM_BYTES = 8_192;
 /** A message to the assistant: 2,000 characters, each up to 9 bytes as a form encodes it. */
 const MAX_ASSISTANT_FORM_BYTES = 24_576;
@@ -48,27 +64,47 @@ const POST_ROUTES = new Set([
     '/keys',
     '/keys/rotate',
     '/keys/revoke',
+    '/keys/limits',
     '/resources',
     '/resources/rules',
     '/resources/pool',
+    '/resources/profile',
+    '/resources/place',
+    '/resources/parent',
+    '/locations',
+    '/locations/delete',
+    '/groups',
+    '/groups/delete',
     '/webhooks',
     '/webhooks/delete',
     '/webhooks/enable',
     '/waitlist/leave',
+    '/approvals/decide',
+    '/sandbox/seed',
+    '/sandbox/reset',
+    '/sandbox/fast-forward',
     '/hours',
     '/organization',
+    '/environment',
+    '/teams/enable',
+    '/teams/disable',
     '/assistant',
     '/assistant/approve',
     '/assistant/dismiss',
     '/assistant/reset',
     '/settings/assistant',
     '/settings/assistant/test',
+    '/settings/assistant/models',
     '/settings/assistant/remove',
+    '/plan/upgrade',
+    '/plan/manage',
 ]);
 const SIGN_IN_AGAIN = 'That sign-in did not finish here, or took too long. Sign in again.';
 const GITHUB_ERROR_CODE = /^[a-z0-9_]{1,64}$/;
 const MAX_COOKIE_CHARACTERS = 4_096;
 const GITHUB_TIMEOUT_MS = 10_000;
+/** A Google account's subject: ASCII, at most 255 characters (OpenID Connect); Google's are digits. */
+const GOOGLE_SUBJECT = /^[A-Za-z0-9._-]{1,255}$/;
 /** The REST API version GitHub documents for GET /user (docs.github.com, read 2026-10-10). */
 const GITHUB_API_VERSION = '2026-03-10';
 const USER_AGENT = 'slotlock-dashboard';
@@ -97,15 +133,84 @@ const KEY_EXPIRY_DAYS = Object.freeze({
  */
 const REFERRER_POLICY = 'same-origin';
 const CONTENT_SECURITY_POLICY = "default-src 'none'; script-src 'self'; style-src 'self'; img-src 'self'; form-action 'self'; frame-ancestors 'none'; base-uri 'none'";
+/** The policy, with billing's origins allowed as form targets so Upgrade and Manage can redirect. */
+function policyFor(billing) {
+    if (!billing)
+        return CONTENT_SECURITY_POLICY;
+    const contact = new URL(billing.contact);
+    if (contact.protocol !== 'https:' && contact.protocol !== 'mailto:') {
+        throw new Error('billing.contact must be an https or mailto URL');
+    }
+    const origins = billing.formOrigins.map((value) => {
+        const parsed = new URL(value);
+        if (parsed.protocol !== 'https:' || parsed.origin !== value.replace(/\/$/, '')) {
+            throw new Error(`billing.formOrigins must be https origins: ${value}`);
+        }
+        return parsed.origin;
+    });
+    return CONTENT_SECURITY_POLICY.replace("form-action 'self'", ["form-action 'self'", ...origins].join(' '));
+}
 /**
  * The dashboard's resources, in the store under each tenant's row-level security. Adds hold the cap
  * in the database (a READ COMMITTED transaction, under a per-tenant lock).
  */
-export function createSlotlockDashboardResources(store) {
+export function createSlotlockDashboardResources(store, options = {}) {
     // Every change here is the dashboard's, made by the person signed in (actor) when known.
     const by = (actor) => actor === undefined ? { origin: 'dashboard' } : { origin: 'dashboard', actor };
+    const agentBackend = options.agentBackend;
     return {
+        sandbox: {
+            seed: (tenantRef, scenario) => seedSlotlockSandbox(store, tenantRef, scenario),
+            async reset(tenantRef) {
+                await resetSlotlockSandbox(store, tenantRef);
+            },
+            async fastForward(tenantRef, minutes) {
+                const forward = await fastForwardSlotlockSandbox(store, tenantRef, minutes);
+                return { holds: forward.holds, approvals: forward.approvals };
+            },
+        },
+        ...(agentBackend
+            ? {
+                approvals: {
+                    list: (tenantRef, limit) => store.withTenant(tenantRef, (tenant) => tenant.listApprovals({ tenantRef, limit })),
+                    async decide(tenantRef, id, decision, actor, reason) {
+                        const decidedBy = actor ?? 'dashboard';
+                        if (decision === 'decline') {
+                            const declined = await store.withTenant(tenantRef, (tenant) => tenant.declineApproval({ tenantRef, id, decidedBy, ...(reason ? { reason } : {}) }), by(actor));
+                            if (!declined.ok)
+                                return declined;
+                            // Its held time is free: offer it to the waitlist, as a release does.
+                            await store
+                                .withTenant(tenantRef, (tenant) => tenant.offerWaitlist({ tenantRef, limit: 20 }), { origin: 'maintenance' })
+                                .catch(() => undefined);
+                            return { ok: true };
+                        }
+                        const approval = await store.withTenant(tenantRef, (tenant) => tenant.getApproval({ tenantRef, id }));
+                        if (!approval)
+                            return { ok: false, code: 'approval_not_found' };
+                        if (approval.status !== 'pending')
+                            return { ok: false, code: 'approval_not_pending' };
+                        try {
+                            await runSlotlockApprovalGrant(agentBackend, approval, {
+                                tenantRef,
+                                decidedBy,
+                                signal: new AbortController().signal,
+                                origin: 'dashboard',
+                            });
+                        }
+                        catch (error) {
+                            if (error instanceof SlotlockAgentOperationError)
+                                return { ok: false, code: error.code };
+                            throw error;
+                        }
+                        return { ok: true };
+                    },
+                },
+            }
+            : {}),
         list: (tenantRef) => store.withTenant(tenantRef, (tenant) => tenant.listResources({ tenantRef, limit: SLOTLOCK_DASHBOARD_MAX_RESOURCES + 1 })),
+        count: (tenantRef) => store.withTenant(tenantRef, (tenant) => tenant.countResources({ tenantRef })),
+        usage: (tenantRef, from, to) => store.withTenant(tenantRef, (tenant) => tenant.readUsage({ tenantRef, from, to })),
         add: (tenantRef, externalRef, timezone, actor) => store.withTenant(tenantRef, (tenant) => tenant.createResource({
             tenantRef,
             externalRef,
@@ -123,6 +228,39 @@ export function createSlotlockDashboardResources(store) {
         setRules: (tenantRef, id, rules, actor) => store.withTenant(tenantRef, (tenant) => tenant.setResourceBookingRules({ tenantRef, id, rules }), by(actor)),
         ruleDefaults: (tenantRef) => store.withTenant(tenantRef, (tenant) => tenant.getBookingRuleDefaults({ tenantRef })),
         setPool: (tenantRef, id, pool, actor) => store.withTenant(tenantRef, (tenant) => tenant.setResourcePool({ tenantRef, id, pool }), by(actor)),
+        setParent: (tenantRef, id, parentId, actor) => store.withTenant(tenantRef, (tenant) => tenant.setResourceParent({ tenantRef, id, parentId }), by(actor)),
+        setProfile: (tenantRef, id, profile, actor) => store.withTenant(tenantRef, (tenant) => tenant.updateResourceProfile({ tenantRef, id, profile }), by(actor)),
+        grouping: {
+            locations: (tenantRef) => store.withTenant(tenantRef, (tenant) => tenant.listLocations({ tenantRef })),
+            putLocation: (tenantRef, location, actor) => store.withTenant(tenantRef, (tenant) => tenant.putLocation({ tenantRef, ...location }), by(actor)),
+            deleteLocation: (tenantRef, ref, actor) => store.withTenant(tenantRef, (tenant) => tenant.deleteLocation({ tenantRef, ref }), by(actor)),
+            groups: (tenantRef) => store.withTenant(tenantRef, (tenant) => tenant.listGroups({ tenantRef })),
+            putGroup: (tenantRef, group, actor) => store.withTenant(tenantRef, (tenant) => tenant.putGroup({ tenantRef, ...group }), by(actor)),
+            deleteGroup: (tenantRef, ref, actor) => store.withTenant(tenantRef, (tenant) => tenant.deleteGroup({ tenantRef, ref }), by(actor)),
+            place: (tenantRef, id, place, actor) => store.withTenant(tenantRef, async (tenant) => {
+                // The location first, which finds the resource (null when it is not the tenant's);
+                // then its groups, in the same transaction, so a refused group moves nothing.
+                const moved = await tenant.updateResourceProfile({
+                    tenantRef,
+                    id,
+                    profile: {},
+                    location: place.location,
+                });
+                if (!moved)
+                    return null;
+                const wanted = new Set(place.groups);
+                const current = new Set(moved.groups ?? []);
+                for (const group of current) {
+                    if (!wanted.has(group))
+                        await tenant.removeGroupMember({ tenantRef, group, resourceId: id });
+                }
+                for (const group of wanted) {
+                    if (!current.has(group))
+                        await tenant.addGroupMember({ tenantRef, group, resourceId: id });
+                }
+                return tenant.getResource({ tenantRef, id });
+            }, by(actor)),
+        },
         waitlist: {
             list: (tenantRef, limit) => store.withTenant(tenantRef, (tenant) => tenant.listWaitlist({ tenantRef, limit })),
             async leave(tenantRef, id, actor) {
@@ -308,6 +446,8 @@ const AGENDA_LIMIT = 200;
 const AGENDA_SHOWN = 30;
 const ACTIVITY_LIMIT = 20;
 const WAITLIST_SHOWN = 200;
+/** Approvals the dashboard lists, pending and recent decided together, newest first. */
+const APPROVALS_SHOWN = 100;
 const RESOURCE_PAGE = /^\/resources\/([0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})$/i;
 /** How the booking rules form names each rule. */
 const RULE_LIMITS = SLOTLOCK_BOOKING_RULE_LIMITS;
@@ -378,12 +518,122 @@ const ICONS = Object.freeze({
     waitlist: icon('<path d="M4 6h16M4 12h10M4 18h6"/><circle cx="18" cy="16" r="3"/>'),
     webhooks: icon('<path d="M9 7a3 3 0 1 1 4 2.8L16 15M6.5 13.5A3 3 0 1 0 9 18h6M15 18a3 3 0 1 0 1.5-5.6"/>'),
     assistant: icon('<path d="M4 5h16v11H9l-5 4z"/><path d="M8 9h8M8 12h5"/>'),
+    plan: icon('<rect x="3" y="6" width="18" height="13" rx="2"/><path d="M3 10h18M7 15h4"/>'),
+    teams: icon('<circle cx="9" cy="8" r="3"/><circle cx="17" cy="9" r="2.5"/><path d="M3 19c0-3.3 2.7-5 6-5s6 1.7 6 5M15 14.5c3 0 6 1.4 6 4.5"/>'),
     settings: icon('<path d="M4 7h10M18 7h2M4 17h4M12 17h8"/><circle cx="16" cy="7" r="2"/><circle cx="10" cy="17" r="2"/>'),
     check: icon('<path d="M5 12l5 5L20 7"/>'),
+    approvals: icon('<circle cx="12" cy="12" r="8"/><path d="M8.5 12.5l2.5 2.5 4.5-5"/>'),
     signOut: icon('<path d="M15 4h3a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-3M10 17l-5-5 5-5M5 12h11"/>'),
     plus: icon('<path d="M12 5v14M5 12h14"/>'),
+    google: new Html('<svg class="icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path class="fill" d="M15.68 8.18c0-.57-.05-1.11-.15-1.64H8v3.1h4.3a3.68 3.68 0 0 1-1.6 2.41v2h2.58c1.51-1.39 2.4-3.44 2.4-5.87zM8 16c2.16 0 3.97-.72 5.29-1.94l-2.58-2c-.72.48-1.63.76-2.71.76-2.08 0-3.85-1.41-4.48-3.3H.86v2.07A8 8 0 0 0 8 16zM3.52 9.52a4.8 4.8 0 0 1 0-3.04V4.41H.86a8 8 0 0 0 0 7.18zM8 3.18c1.17 0 2.23.4 3.06 1.2l2.29-2.3A8 8 0 0 0 .86 4.41l2.66 2.07C4.15 4.59 5.92 3.18 8 3.18z"/></svg>'),
     github: new Html('<svg class="icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path class="fill" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>'),
 });
+/** How the dashboard names each kind of resource. */
+const KIND_NAMES = Object.freeze({
+    person: 'Person',
+    room: 'Room',
+    desk: 'Desk',
+    space: 'Space',
+    vehicle: 'Vehicle',
+    machine: 'Machine',
+    equipment: 'Equipment',
+    service: 'Service',
+    other: 'Not said',
+});
+/** What a profile field it could not keep must be, in a person's words. */
+const PROFILE_PROBLEMS = Object.freeze({
+    name: `A name is 1 to ${SLOTLOCK_RESOURCE_PROFILE_LIMITS.name} characters on one line.`,
+    description: `A description is at most ${SLOTLOCK_RESOURCE_PROFILE_LIMITS.description.toLocaleString('en')} characters.`,
+    kind: 'Choose a kind from the list.',
+    capacity: `Capacity is a whole number from 1 to ${SLOTLOCK_RESOURCE_PROFILE_LIMITS.capacity.toLocaleString('en')}. Leave it empty for none.`,
+    labels: `Up to ${SLOTLOCK_RESOURCE_PROFILE_LIMITS.labels} labels, each 1 to 64 letters, digits, dots, dashes or underscores.`,
+    attributes: 'Those attributes are not ones Slotlock can keep.',
+    other: 'That profile is not one Slotlock can keep.',
+});
+const GROUPING_REF_RULE = 'A reference is 1 to 100 lowercase letters, digits, dots, dashes or underscores, starting with a letter or digit.';
+/** What a person is told when a location or group change is refused, by the store's code. */
+const GROUPING_PROBLEMS = Object.freeze({
+    location_ref: { status: 400, text: GROUPING_REF_RULE },
+    location_name: { status: 400, text: `A name is 1 to ${SLOTLOCK_RESOURCE_PROFILE_LIMITS.name} characters on one line.` },
+    location_parent: { status: 400, text: 'Choose where it is from the list, or nowhere.' },
+    location_timezone: {
+        status: 400,
+        text: 'A time zone is a name such as Europe/London. Leave it empty to take the one of the location it is in.',
+    },
+    location_other: { status: 400, text: 'That location is not one Slotlock can keep.' },
+    location_not_found: { status: 404, text: 'That location is not one of yours.' },
+    location_too_deep: { status: 409, text: `Locations go ${SLOTLOCK_MAX_LOCATION_DEPTH} levels deep at most.` },
+    location_cycle: { status: 409, text: 'A location cannot be inside itself, or inside a location that is inside it.' },
+    location_limit_reached: {
+        status: 409,
+        text: `You have ${SLOTLOCK_MAX_LOCATIONS.toLocaleString('en')} locations, the most there can be.`,
+    },
+    location_in_use: {
+        status: 409,
+        text: 'Move its resources, and the locations inside it, somewhere else first.',
+    },
+    group_ref: { status: 400, text: GROUPING_REF_RULE },
+    group_name: { status: 400, text: `A name is 1 to ${SLOTLOCK_RESOURCE_PROFILE_LIMITS.name} characters on one line.` },
+    group_description: {
+        status: 400,
+        text: `A description is at most ${SLOTLOCK_RESOURCE_PROFILE_LIMITS.description.toLocaleString('en')} characters.`,
+    },
+    group_other: { status: 400, text: 'That group is not one Slotlock can keep.' },
+    group_not_found: { status: 404, text: 'That group is not one of yours.' },
+    group_limit_reached: {
+        status: 409,
+        text: `You have ${SLOTLOCK_MAX_RESOURCE_GROUPS.toLocaleString('en')} groups, the most there can be.`,
+    },
+    resource_group_limit_reached: {
+        status: 409,
+        text: `A resource is in ${SLOTLOCK_MAX_GROUPS_PER_RESOURCE} groups at most.`,
+    },
+});
+/** The sentence for a refused location or group change, or null when it is not one. */
+function groupingProblem(error) {
+    const code = error?.code;
+    if (code === 'invalid_location' || code === 'invalid_group') {
+        const kind = code === 'invalid_location' ? 'location' : 'group';
+        const field = error.field;
+        return GROUPING_PROBLEMS[`${kind}_${typeof field === 'string' ? field : 'other'}`] ?? GROUPING_PROBLEMS[`${kind}_other`] ?? null;
+    }
+    return typeof code === 'string' ? (GROUPING_PROBLEMS[code] ?? null) : null;
+}
+/** Each location's place from the top, as "London › Floor 3", by reference. */
+function locationPaths(locations) {
+    const byRef = new Map(locations.map((location) => [location.ref, location]));
+    const paths = new Map();
+    for (const location of locations) {
+        const names = [];
+        let at = location;
+        for (let steps = 0; at && steps <= SLOTLOCK_MAX_LOCATION_DEPTH; steps += 1) {
+            names.unshift(at.name);
+            at = at.parentRef === null ? undefined : byRef.get(at.parentRef);
+        }
+        paths.set(location.ref, names.join(' › '));
+    }
+    return paths;
+}
+/** Whether `ref` is `ancestor`, or a location inside it. */
+function locationWithin(locations, ref, ancestor) {
+    let at = ref;
+    for (let steps = 0; at !== null && steps <= SLOTLOCK_MAX_LOCATION_DEPTH; steps += 1) {
+        if (at === ancestor)
+            return true;
+        at = locations.get(at)?.parentRef ?? null;
+    }
+    return false;
+}
+/** The time zone a location gives a resource: its own, or the nearest one above it, and where from. */
+function locationZone(locations, location) {
+    let at = location;
+    for (let steps = 0; at && steps <= SLOTLOCK_MAX_LOCATION_DEPTH; steps += 1) {
+        if (at.timezone !== null)
+            return { timezone: at.timezone, from: at };
+        at = at.parentRef === null ? undefined : locations.get(at.parentRef);
+    }
+    return null;
+}
 /** How the overview names each change the feed records. */
 const CHANGE_LABELS = Object.freeze({
     'hold.created': { text: 'Hold placed', tone: 'neutral' },
@@ -404,7 +654,12 @@ const CHANGE_LABELS = Object.freeze({
     'coverage.stale': { text: 'Calendar sync is behind', tone: 'bad' },
     'waitlist.offered': { text: 'Waitlist offer sent', tone: 'good' },
     'waitlist.expired': { text: 'Waitlist offer lapsed', tone: 'neutral' },
+    'approval.requested': { text: 'Waiting for approval', tone: 'neutral' },
+    'approval.granted': { text: 'Approved and booked', tone: 'good' },
+    'approval.declined': { text: 'Approval declined', tone: 'bad' },
+    'approval.expired': { text: 'Approval not decided in time', tone: 'bad' },
     'webhook.disabled': { text: 'Webhook disabled', tone: 'bad' },
+    'usage.threshold_reached': { text: 'Monthly quota nearly or fully used', tone: 'bad' },
 });
 const zoned = (zone, parts) => {
     try {
@@ -645,6 +900,8 @@ export function createSlotlockDashboard(options) {
     const base = publicUrl.pathname.replace(/\/$/, '');
     const root = `${base}/dashboard`;
     const callbackUrl = `${origin}${root}/callback`;
+    const publicRoot = `${origin}${root}`;
+    const contentSecurityPolicy = policyFor(options.billing);
     // Its cookies are Secure, but a first visit over http:// could still be answered by someone else:
     // a browser that has seen this goes straight to https:// for a year. Not for a local http one.
     const hsts = publicUrl.protocol === 'https:' ? { 'Strict-Transport-Security': 'max-age=31536000' } : {};
@@ -657,14 +914,31 @@ export function createSlotlockDashboard(options) {
     const userUrl = options.github.userUrl ?? 'https://api.github.com/user';
     const membershipsUrl = options.github.membershipsUrl ??
         'https://api.github.com/user/memberships/orgs?state=active&per_page=100';
-    const served = options.organizations ? new Set(options.organizations) : null;
+    const served = Array.isArray(options.organizations) ? new Set(options.organizations) : null;
     if (served && (served.size === 0 || [...served].some((id) => !ORGANIZATION_ID.test(id)))) {
         throw new Error('Slotlock dashboard organizations must be GitHub organization ids');
     }
+    // Teams on Cloud: organizations turned on in the database, beside every person's own tenant.
+    const teams = options.organizations === 'enabled' ? (options.teams ?? null) : null;
+    if (options.organizations === 'enabled' && !teams) {
+        throw new Error('Slotlock dashboard organizations "enabled" needs the teams store');
+    }
+    /** Sign-in reads the person's organizations: a fixed list, or those turned on. */
+    const readsOrganizations = served !== null || teams !== null;
+    /** Each session's organizations turned on, read with it (teams mode). */
+    const enabledOf = new WeakMap();
     const brandName = options.name ?? 'Slotlock';
     if (!SLOTLOCK_DASHBOARD_NAME_PATTERN.test(brandName) || brandName.trim() !== brandName) {
         throw new Error('Slotlock dashboard name must be 1-60 characters, without <, > or control or invisible characters');
     }
+    for (const [label, url] of [
+        ['termsUrl', options.termsUrl],
+        ['privacyUrl', options.privacyUrl],
+    ]) {
+        if (url !== undefined && !/^https:\/\/[^\s"'<>`]+$/.test(url)) {
+            throw new Error(`Slotlock dashboard ${label} must be an https URL`);
+        }
+    }
     const fetchImpl = options.fetch ?? fetch;
     const now = options.now ?? Date.now;
     if (Buffer.byteLength(options.sessionSecret, 'utf8') < 32) {
@@ -672,8 +946,10 @@ export function createSlotlockDashboard(options) {
     }
     const secret = Buffer.from(options.sessionSecret, 'utf8');
     // A list, or exactly '*': any other string would match ids by substring.
-    const allowed = (uid) => options.allowedUsers === '*' ||
-        (Array.isArray(options.allowedUsers) && options.allowedUsers.includes(uid));
+    // A GitHub person by their bare id, a Google one as google:<subject>.
+    const allowed = (uid, idp) => options.allowedUsers === '*' ||
+        (Array.isArray(options.allowedUsers) && options.allowedUsers.includes(idp === 'google' ? `google:${uid}` : uid));
+    const google = served ? null : (options.google ?? null);
     let signInsInFlight = 0;
     /** Sign-ins in flight by client address. */
     const signInsByClient = new Map();
@@ -741,18 +1017,39 @@ export function createSlotlockDashboard(options) {
             typeof payload.uid !== 'string' ||
             typeof payload.login !== 'string' ||
             typeof payload.sid !== 'string' ||
-            !allowed(payload.uid) ||
+            (payload.idp !== undefined && (payload.idp !== 'google' || !google)) ||
+            !allowed(payload.uid, payload.idp) ||
             !organizationsHold(payload) ||
+            (payload.env !== undefined && payload.env !== 'test') ||
             (await options.state.sessionEnded(payload.sid, payload.exp))) {
             return null;
         }
-        return payload;
+        const session = payload;
+        if (teams) {
+            // Which of the person's organizations are on now: one turned off since is left at once.
+            const enabled = session.orgs?.length ? await teams.enabled(session.orgs.map((org) => org.id)) : new Set();
+            if (session.org !== undefined && !enabled.has(session.org)) {
+                const { org: _, ...personal } = session;
+                enabledOf.set(personal, enabled);
+                return personal;
+            }
+            enabledOf.set(session, enabled);
+        }
+        return session;
     }
     /**
      * With organizations, the session names one the server still serves, from its own list; without
      * them, it names none. A session from the other mode is signed out.
      */
     function organizationsHold(payload) {
+        if (teams) {
+            if (payload.orgs === undefined)
+                return payload.org === undefined;
+            if (!Array.isArray(payload.orgs))
+                return false;
+            const listed = payload.orgs.filter((org) => isRecord(org) && typeof org.id === 'string' && typeof org.login === 'string');
+            return payload.org === undefined || (typeof payload.org === 'string' && listed.some((org) => org.id === payload.org));
+        }
         if (!served)
             return payload.org === undefined && payload.orgs === undefined;
         if (typeof payload.org !== 'string' || !served.has(payload.org) || !Array.isArray(payload.orgs)) {
@@ -763,15 +1060,20 @@ export function createSlotlockDashboard(options) {
     const csrfToken = (session) => createHmac('sha256', secret)
         .update(`slotlock-dashboard-csrf-v1.${session.sid}`)
         .digest('base64url');
-    const tenantOf = (session) => served ? `github-org:${session.org}` : `github:${session.uid}`;
+    /** The tenant the session acts in: the workspace's, or its test environment's (`~test`). */
+    const tenantOf = (session) => `${session.org !== undefined ? `github-org:${session.org}` : personOf(session)}${session.env === 'test' ? SLOTLOCK_TEST_TENANT_SUFFIX : ''}`;
     /** Who did something, for the record: the person, whatever tenant they act in. */
-    const personOf = (session) => `github:${session.uid}`;
+    function personOf(session) {
+        return session.idp === 'google' ? `google:${session.uid}` : `github:${session.uid}`;
+    }
+    /** How the dashboard shows the person: their GitHub login, or their Google account's email. */
+    const shownAs = (session) => (session.idp === 'google' ? session.login : `@${session.login}`);
     function respond(status, body, headers = {}, cookies = []) {
         const response = new Response(String(body), {
             status,
             headers: {
                 'Content-Type': 'text/html; charset=utf-8',
-                'Content-Security-Policy': CONTENT_SECURITY_POLICY,
+                'Content-Security-Policy': contentSecurityPolicy,
                 'Cache-Control': 'no-store',
                 'X-Frame-Options': 'DENY',
                 'X-Content-Type-Options': 'nosniff',
@@ -794,6 +1096,9 @@ export function createSlotlockDashboard(options) {
         ...(options.resources.waitlist
             ? [{ section: 'waitlist', label: 'Waitlist', path: '/waitlist', icon: ICONS.waitlist }]
             : []),
+        ...(options.resources.approvals
+            ? [{ section: 'approvals', label: 'Approvals', path: '/approvals', icon: ICONS.approvals }]
+            : []),
         { section: 'keys', label: 'API keys', path: '/keys', icon: ICONS.keys },
         ...(options.resources.webhooks
             ? [{ section: 'webhooks', label: 'Webhooks', path: '/webhooks', icon: ICONS.webhooks }]
@@ -801,14 +1106,27 @@ export function createSlotlockDashboard(options) {
         ...(assistantStore()
             ? [{ section: 'assistant', label: 'Assistant', path: '/assistant', icon: ICONS.assistant }]
             : []),
+        ...(options.billing
+            ? [{ section: 'plan', label: 'Plan', path: '/plan', icon: ICONS.plan }]
+            : []),
+        ...(teams ? [{ section: 'teams', label: 'Teams', path: '/teams', icon: ICONS.teams }] : []),
         { section: 'settings', label: 'Settings', path: '/settings', icon: ICONS.settings },
     ];
+    /** Live or Test (RFC 0003 G9): the same workspace, a tenant of its own for trying things. */
+    function environmentSwitch(session) {
+        const choice = (value, label) => html `<button type="submit" name="environment" value="${value}"${(session.env === 'test') === (value === 'test') ? html ` aria-pressed="true"` : html ` aria-pressed="false"`}>${label}</button>`;
+        return html `<form class="environment" method="post" action="${root}/environment" aria-label="Environment"><input type="hidden" name="csrf" value="${csrfToken(session)}"><input type="hidden" name="once" value="${formNonce(session)}">${choice('live', 'Live')}${choice('test', 'Test')}</form>`;
+    }
     /** The workspace the session acts in: its organization, or the person themselves. */
     function workspace(session) {
         const current = session.orgs?.find((org) => org.id === session.org);
         const choices = (session.orgs ?? []).filter((org) => served?.has(org.id));
         const name = current?.login ?? session.login;
         const badge = html `<span class="avatar" aria-hidden="true">${name.slice(0, 1).toUpperCase()}</span>`;
+        const enabled = teams ? (session.orgs ?? []).filter((org) => enabledOf.get(session)?.has(org.id)) : [];
+        if (teams && enabled.length > 0) {
+            return html `<form class="workspace" method="post" action="${root}/organization">${badge}<input type="hidden" name="csrf" value="${csrfToken(session)}"><input type="hidden" name="once" value="${formNonce(session)}"><label class="visually-hidden" for="organization">Workspace</label><select id="organization" name="organization" title="${name}"><option value=""${current ? html `` : html ` selected`}>${shownAs(session)}</option>${enabled.map((org) => html `<option value="${org.id}"${org.id === current?.id ? html ` selected` : html ``}>${org.login}</option>`)}</select><button class="quiet" type="submit">Switch</button></form>`;
+        }
         if (current && choices.length > 1) {
             return html `<form class="workspace" method="post" action="${root}/organization">${badge}<input type="hidden" name="csrf" value="${csrfToken(session)}"><input type="hidden" name="once" value="${formNonce(session)}"><label class="visually-hidden" for="organization">Organization</label><select id="organization" name="organization" title="${current.login}">${choices.map((org) => html `<option value="${org.id}"${org.id === current.id ? html ` selected` : html ``}>${org.login}</option>`)}</select><button class="quiet" type="submit">Switch</button></form>`;
         }
@@ -823,6 +1141,7 @@ export function createSlotlockDashboard(options) {
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="referrer" content="${REFERRER_POLICY}">
 <title>${title} · ${brandName}</title>
+<link rel="icon" href="${root}/favicon.svg?v=${ASSET_VERSIONS.icon}" type="image/svg+xml">
 <link rel="stylesheet" href="${root}/style.css?v=${ASSET_VERSIONS.css}">
 <script src="${root}/app.js?v=${ASSET_VERSIONS.js}" defer></script>
 </head>`;
@@ -846,11 +1165,13 @@ ${live}
 ${skip}
 <div class="app">
 <header class="side">
-<div class="side-top">${brand}${workspace(session)}</div>
+<div class="side-top">${brand}${workspace(session)}${environmentSwitch(session)}</div>
 <nav class="nav" aria-label="Dashboard">${links}</nav>
-<div class="me"><span class="avatar me-avatar" aria-hidden="true">${session.login.slice(0, 1).toUpperCase()}</span><span class="login" title="@${session.login}">@${session.login}</span><form method="post" action="${root}/sign-out"><input type="hidden" name="csrf" value="${csrfToken(session)}"><button class="quiet sign-out" type="submit" title="Sign out">${ICONS.signOut}<span class="sign-out-label">Sign out</span></button></form></div>
+<div class="me"><span class="avatar me-avatar" aria-hidden="true">${session.login.slice(0, 1).toUpperCase()}</span><span class="login" title="${shownAs(session)}">${shownAs(session)}</span><form method="post" action="${root}/sign-out"><input type="hidden" name="csrf" value="${csrfToken(session)}"><button class="quiet sign-out" type="submit" title="Sign out">${ICONS.signOut}<span class="sign-out-label">Sign out</span></button></form></div>
 </header>
-<main class="page" id="main">${content}</main>
+<main class="page" id="main">${session.env === 'test'
+            ? html `<p class="test-banner">Test environment: its own resources, keys, webhooks and history, on your plan's limits and never billed. Its keys start <code>slk_test_</code>.</p>`
+            : html ``}${content}</main>
 </div>
 ${live}
 </body>
@@ -863,27 +1184,52 @@ ${live}
 <h1>Sign in to ${brandName}</h1>
 <p>Create keys for your agents, add what they book, and watch what they do.</p>
 ${noticeOf(notice)}
-<a class="button primary wide" href="${root}/sign-in">${ICONS.github}Continue with GitHub</a>
-<p class="fine">${served
-            ? `${brandName} reads your GitHub profile and which organizations you belong to, and keeps only your user id, login and the organizations it serves.`
-            : `${brandName} reads only your public GitHub profile, and keeps only your user id and login.`}</p>
+<a class="button primary wide" href="${root}/sign-in">${ICONS.github}Continue with GitHub</a>${google ? html `<a class="button wide" href="${root}/sign-in?with=google">${ICONS.google}Continue with Google</a>` : html ``}
+${options.termsUrl
+            ? html `<p class="fine">By continuing you agree to the <a href="${options.termsUrl}">Terms of Service</a>.${options.privacyUrl
+                ? html ` The <a href="${options.privacyUrl}">Privacy notice</a> says what is kept.`
+                : html ``}</p>`
+            : html ``}
+<p class="fine">${teams
+            ? `${brandName} reads your GitHub profile and which organizations you belong to, and keeps only your user id, login and up to ${String(MAX_SESSION_ORGANIZATIONS)} of those organizations, for you to work in the ones turned on.`
+            : served
+                ? `${brandName} reads your GitHub profile and which organizations you belong to, and keeps only your user id, login and the organizations it serves.`
+                : `${brandName} reads only your public GitHub profile, and keeps only your user id and login.`}${google ? ` With Google, it reads your account's id and email address, and keeps only those.` : ''}</p>
 </section>`;
         return respond(status, layout('Sign in', content, null), {}, cookies);
     }
+    /** A key's own limits (RFC 0004 A5) as fields, filled with what it has. */
+    const keyLimitFields = (limits) => html `<label>Live holds at most<input name="max_holds" inputmode="numeric" pattern="[0-9]*" maxlength="5" value="${limits?.maxHolds !== undefined ? String(limits.maxHolds) : ''}" placeholder="Server's"></label>
+<label>Hours held at most<input name="max_held_hours" inputmode="numeric" pattern="[0-9]*" maxlength="6" value="${limits?.maxHeldHours !== undefined ? String(limits.maxHeldHours) : ''}" placeholder="Server's"></label>
+<label>Requests a minute<input name="requests_per_minute" inputmode="numeric" pattern="[0-9]*" maxlength="6" value="${limits?.requestsPerMinute !== undefined ? String(limits.requestsPerMinute) : ''}" placeholder="Server's"></label>
+<label class="choice"><input type="checkbox" name="requires_approval" value="on"${limits?.requiresApproval ? html ` checked` : html ``}> Its bookings wait for approval</label>`;
+    /** A key's limits in words, for its row. */
+    const keyLimitsText = (limits) => [
+        limits.maxHolds !== undefined ? `${String(limits.maxHolds)} live holds` : '',
+        limits.maxHeldHours !== undefined ? `${String(limits.maxHeldHours)} hours held` : '',
+        limits.requestsPerMinute !== undefined ? `${String(limits.requestsPerMinute)} requests a minute` : '',
+        limits.requiresApproval ? 'bookings need approval' : '',
+    ]
+        .filter(Boolean)
+        .join(', ');
     function keyRows(keys, token, session) {
         return keys.map((key) => {
             const expired = key.expiresAt !== null && key.expiresAt.getTime() <= now();
             const status = key.revokedAt ? 'Revoked' : expired ? 'Expired' : 'Active';
             const actions = status === 'Active'
-                ? html `<details class="act"><summary>Rotate</summary><div class="pop"><p>A new secret replaces this one at once. The key keeps its name, access and bookings.</p>
+                ? html `<details class="act"><summary>Limits</summary><div class="pop"><p>Hold this key below the server's limits. Empty is the server's.</p>
+<form method="post" action="${root}/keys/limits"><input type="hidden" name="csrf" value="${token}"><input type="hidden" name="once" value="${formNonce(session)}"><input type="hidden" name="id" value="${key.id}">${keyLimitFields(key.limits)}<button type="submit">Save limits</button></form></div></details>
+<details class="act"><summary>Rotate</summary><div class="pop"><p>A new secret replaces this one at once. The key keeps its name, access and bookings.</p>
 <form method="post" action="${root}/keys/rotate"><input type="hidden" name="csrf" value="${token}"><input type="hidden" name="once" value="${formNonce(session)}"><input type="hidden" name="id" value="${key.id}"><button type="submit">Rotate key</button></form></div></details>
 <details class="act danger"><summary>Revoke</summary><div class="pop"><p>Requests with this key fail at once. What it booked stays on the calendar.</p>
 <form method="post" action="${root}/keys/revoke"><input type="hidden" name="csrf" value="${token}"><input type="hidden" name="once" value="${formNonce(session)}"><input type="hidden" name="id" value="${key.id}"><button class="danger" type="submit">Revoke key</button></form></div></details>`
                 : html ``;
             return html `<tr>
-<td data-label="Name" class="strong"><span class="cell"><span class="truncate" title="${key.name}">${key.name}</span>${served ? html `<span class="meta">Created by ${key.createdBy === personOf(session) ? 'you' : key.createdBy?.startsWith('github:') ? `GitHub user ${key.createdBy.slice(7)}` : 'someone unknown'}</span>` : html ``}</span></td>
+<td data-label="Name" class="strong"><span class="cell"><span class="truncate" title="${key.name}">${key.name}</span>${session.org !== undefined ? html `<span class="meta">Created by ${key.createdBy === personOf(session) ? 'you' : key.createdBy?.startsWith('github:') ? `GitHub user ${key.createdBy.slice(7)}` : key.createdBy?.startsWith('google:') ? 'a Google user' : 'someone unknown'}</span>` : html ``}</span></td>
 <td data-label="Key"><code class="chip">${key.prefix}…</code></td>
-<td data-label="Access">${key.scopes.includes('admin') ? 'Full' : key.scopes.includes('write') ? 'Read and write' : 'Read only'}</td>
+<td data-label="Access">${key.resourceScope || key.limits
+                ? html `<span class="cell"><span>${accessOf(key)}</span>${key.resourceScope ? html `<span class="meta wrap">Only ${[...key.resourceScope.locations, ...key.resourceScope.groups.map((group) => `group ${group}`)].join(', ')}</span>` : html ``}${key.limits ? html `<span class="meta wrap">At most ${keyLimitsText(key.limits)}</span>` : html ``}</span>`
+                : accessOf(key)}</td>
 <td data-label="Created">${dateCell(key.createdAt)}</td>
 <td data-label="Last used">${key.lastUsedAt ? dateCell(key.lastUsedAt) : html `<span class="muted">Never</span>`}</td>
 <td data-label="Expires">${key.expiresAt ? dateCell(key.expiresAt) : html `<span class="muted">Never</span>`}</td>
@@ -896,7 +1242,8 @@ ${noticeOf(notice)}
     /** A list with nothing in it yet: what goes here, and the one thing to do next. */
     const emptyState = (glyph, text, action) => html `<div class="empty-state"><span class="empty-icon">${glyph}</span><p class="empty">${text}</p>${action ? html `<a class="button" href="${action.href}">${ICONS.plus}${action.label}</a>` : html ``}</div>`;
     /** A resource as people name it: its reference, else the start of its id. */
-    const resourceName = (resource, id) => resource?.externalRef ?? `${id.slice(0, 8)}…`;
+    // Its profile's name, else its reference, else the start of its id.
+    const resourceName = (resource, id) => resource?.name ?? resource?.externalRef ?? `${id.slice(0, 8)}…`;
     function agendaPanel(entries, byId, more) {
         if (entries.length === 0) {
             return html `<p class="empty">Nothing booked in the next ${String(AGENDA_DAYS)} days.</p>`;
@@ -942,11 +1289,15 @@ ${noticeOf(notice)}
                             ? 'A deleted key'
                             : /^github:\d+$/.test(change.actor)
                                 ? `GitHub user ${change.actor.slice(7)}`
-                                : /^dashboard-assistant:github:\d+$/.test(change.actor)
-                                    ? change.actor === assistantActor(session)
-                                        ? `Assistant for @${session.login}`
-                                        : `Assistant for GitHub user ${change.actor.slice(27)}`
-                                    : change.actor.slice(0, 60)));
+                                : /^google:/.test(change.actor)
+                                    ? 'A Google user'
+                                    : /^dashboard-assistant:(github|google):/.test(change.actor)
+                                        ? change.actor === assistantActor(session)
+                                            ? `Assistant for ${shownAs(session)}`
+                                            : change.actor.startsWith('dashboard-assistant:google:')
+                                                ? 'Assistant for a Google user'
+                                                : `Assistant for GitHub user ${change.actor.slice(27)}`
+                                        : change.actor.slice(0, 60)));
             const where = change.resourceId
                 ? resourceName(byId.get(change.resourceId), change.resourceId)
                 : null;
@@ -985,18 +1336,74 @@ ${agenda ? stat('Live holds', counted(held), `${root}#upcoming`) : html ``}
 ${stat('Resources', String(resources.length), `${root}/resources`)}
 ${stat('Active keys', String(active.length), `${root}/keys`)}
 </div>
+${session.env === 'test' && options.resources.sandbox ? sandboxPanel(session, resources.length) : html ``}
 <div class="split">
 ${agenda ? html `<section class="panel" id="upcoming"><h2>Upcoming</h2>${agendaPanel(agenda, byId, agenda.length > AGENDA_SHOWN)}</section>` : html ``}
 ${changes ? html `<section class="panel"><h2>Agent activity</h2>${activityPanel(changes, byId, keys, session)}</section>` : html ``}
 </div>`;
         return respond(status, layout('Overview', content, session, 'overview'));
     }
+    /** In Test: load a scenario to try an agent against, move waiting forward, or start again (RFC 0004 A6). */
+    function sandboxPanel(session, resourceCount) {
+        const token = csrfToken(session);
+        const hidden = html `<input type="hidden" name="csrf" value="${token}"><input type="hidden" name="once" value="${formNonce(session)}">`;
+        const names = { 'car-rental': 'Car rental', clinic: 'Clinic', desks: 'Desks and a hall' };
+        return html `<section class="panel" id="sandbox"><h2>Sandbox</h2>
+<p class="fine">Test only. Try an agent against sample data, make holds and approvals that would lapse lapse now, or start again. Keys and webhooks stay.</p>
+${resourceCount === 0
+            ? html `<form class="create" method="post" action="${root}/sandbox/seed">${hidden}<label>Sample data<select name="scenario">${SLOTLOCK_SANDBOX_SCENARIOS.map((scenario) => html `<option value="${scenario}">${names[scenario]}</option>`)}</select></label><button class="primary" type="submit">Load it</button></form>`
+            : html `<form class="create" method="post" action="${root}/sandbox/fast-forward">${hidden}<label>Move waiting forward<select name="minutes"><option value="15">15 minutes</option><option value="60">An hour</option><option value="1440">A day</option></select></label><button type="submit">Move forward</button></form>
+<details class="act danger"><summary>Start again</summary><div class="pop"><p>Every resource, booking, hold and policy in Test goes. Keys and webhooks stay.</p><form method="post" action="${root}/sandbox/reset">${hidden}<button class="danger" type="submit">Empty Test</button></form></div></details>`}
+</section>`;
+    }
+    async function sandboxAction(session, form, action) {
+        const sandbox = options.resources.sandbox;
+        if (!sandbox || session.env !== 'test')
+            return overviewPage(session, 400, 'The sandbox is in Test only.');
+        const tenantRef = tenantOf(session);
+        try {
+            if (action === 'seed') {
+                const scenario = form.get('scenario');
+                if (!SLOTLOCK_SANDBOX_SCENARIOS.includes(scenario))
+                    return overviewPage(session, 400, 'Choose a sample from the list.');
+                const seeded = await sandbox.seed(tenantRef, scenario);
+                return overviewPage(session, 200, `Loaded ${String(seeded.resources)} resources and ${String(seeded.bookings)} bookings for tomorrow.`);
+            }
+            if (action === 'reset') {
+                await sandbox.reset(tenantRef);
+                return redirect(303, `${root}#sandbox`);
+            }
+            const minutes = Number(form.get('minutes'));
+            if (![15, 60, 1440].includes(minutes))
+                return overviewPage(session, 400, 'Choose how far from the list.');
+            const moved = await sandbox.fastForward(tenantRef, minutes);
+            return overviewPage(session, 200, `${String(moved.holds)} holds and ${String(moved.approvals)} approvals lapsed.`);
+        }
+        catch (error) {
+            if (error.code === 'sandbox_not_empty') {
+                return overviewPage(session, 409, 'Test has resources already. Start again first.');
+            }
+            throw error;
+        }
+    }
     function endpoints() {
         return html `<dl class="endpoints"><dt>MCP</dt><dd><code id="mcp-url">${mcpUrl}</code><button class="quiet" type="button" data-copy="mcp-url">Copy</button></dd><dt>A2A</dt><dd><code id="a2a-url">${a2aUrl}</code><button class="quiet" type="button" data-copy="a2a-url">Copy</button></dd></dl>`;
     }
+    const accessOf = (key) => key.scopes.includes('admin') ? 'Full' : key.scopes.includes('write') ? 'Read and write' : 'Read only';
     async function keysPage(session, status = 200, notice) {
-        const keys = await options.keys.list({ tenantRef: tenantOf(session) });
+        const tenantRef = tenantOf(session);
+        const grouping = options.resources.grouping;
+        const [keys, locations, groups] = await Promise.all([
+            options.keys.list({ tenantRef }),
+            grouping?.locations(tenantRef),
+            grouping?.groups(tenantRef),
+        ]);
         const token = csrfToken(session);
+        const paths = locationPaths(locations ?? []);
+        // A key limited to locations or groups (RFC 0003 G6), when the tenant has any to choose.
+        const limitChoices = (locations?.length ?? 0) + (groups?.length ?? 0) > 0
+            ? html `<details class="types"><summary>Limit to locations or groups (optional)</summary><div class="checks">${(locations ?? []).map((location) => html `<label class="choice"><input type="checkbox" name="limit_location" value="${location.ref}"> ${paths.get(location.ref) ?? location.name}</label>`)}${(groups ?? []).map((group) => html `<label class="choice"><input type="checkbox" name="limit_group" value="${group.ref}"> Group: ${group.name}</label>`)}</div><p class="fine">The key then reaches only the resources there (a location with every location in it), read and write only. Developer plan and up.</p></details>`
+            : html ``;
         const content = html `${noticeOf(notice)}
 ${pageHead('API keys')}
 <section class="panel">
@@ -1013,19 +1420,39 @@ ${endpoints()}
 <label>Access<select name="access"><option value="read_write">Read and write</option><option value="read">Read only</option><option value="full">Full, with the application API</option></select></label>
 <label>Expires<select name="expires"><option value="90">In 90 days</option><option value="30">In 30 days</option><option value="365">In a year</option><option value="never">Never</option></select></label>
 <button class="primary" type="submit">Create key</button>
+${limitChoices}
+<details class="types"><summary>Agent limits (optional)</summary><div class="checks">${keyLimitFields()}</div><p class="fine">Below the server's own limits, never above them. A key whose bookings wait for approval sends each to the Approvals page.</p></details>
 </form>
 </section>
 ${keys.length === 0
             ? emptyState(ICONS.keys, 'No keys yet. Give every agent its own, with the least access it needs.', { href: '#key-name', label: 'Create a key' })
-            : html `${served ? html `<p class="fine">Each key acts in this organization only, and every member can rotate or revoke it.</p>` : html ``}<div class="table"><table><thead><tr><th>Name</th><th>Key</th><th>Access</th><th>Created</th><th>Last used</th><th>Expires</th><th>Status</th><th><span class="visually-hidden">Actions</span></th></tr></thead>
+            : html `${session.org !== undefined ? html `<p class="fine">Each key acts in this organization only, and every member can rotate or revoke it.</p>` : html ``}<div class="table"><table><thead><tr><th>Name</th><th>Key</th><th>Access</th><th>Created</th><th>Last used</th><th>Expires</th><th>Status</th><th><span class="visually-hidden">Actions</span></th></tr></thead>
 <tbody>${keyRows(keys, token, session)}</tbody></table></div>`}`;
         return respond(status, layout('API keys', content, session, 'keys'));
     }
+    /**
+     * How many resources the tenant may have here, and how many it has as that limit counts them: the
+     * dashboard's own limit, or its plan's when lower (archived resources count against a plan).
+     */
+    async function resourceAllowance(tenantRef, resources) {
+        const plan = options.billing ? await options.billing.plan(tenantRef) : null;
+        if (!plan || plan.limits.resources >= SLOTLOCK_DASHBOARD_MAX_RESOURCES) {
+            return { used: resources.length, limit: SLOTLOCK_DASHBOARD_MAX_RESOURCES, planned: false, archived: 0 };
+        }
+        const counted = options.resources.count ? await options.resources.count(tenantRef) : resources.length;
+        return {
+            used: counted,
+            limit: plan.limits.resources,
+            planned: true,
+            archived: Math.max(0, counted - resources.length),
+        };
+    }
     async function resourcesPage(session, status = 200, notice) {
         const resources = await options.resources.list(tenantOf(session));
+        const allowance = await resourceAllowance(tenantOf(session), resources);
         const token = csrfToken(session);
         const content = html `${noticeOf(notice)}
-${pageHead('Resources', resources.length > 0 ? html `<a class="button" href="${root}/hours">Set hours for every resource</a>` : undefined)}
+${pageHead('Resources', html `<div class="row-actions">${options.resources.grouping ? html `<a class="button" href="${root}/locations">Locations and groups</a>` : html ``}${resources.length > 0 ? html `<a class="button" href="${root}/hours">Set hours for every resource</a>` : html ``}</div>`)}
 <section class="panel" id="add-resource">
 <h2>Add a resource</h2>
 <form class="create" method="post" action="${root}/resources">
@@ -1035,19 +1462,92 @@ ${pageHead('Resources', resources.length > 0 ? html `<a class="button" href="${r
 <label>Time zone<input name="timezone" required maxlength="64" value="UTC" placeholder="Europe/London"></label>
 <button class="primary" type="submit">Add resource</button>
 </form>
-<p class="fine">${String(resources.length)} of ${String(SLOTLOCK_DASHBOARD_MAX_RESOURCES)}. Adding a reference you have changes its time zone.</p>
+<p class="fine">${String(allowance.used)} of ${String(allowance.limit)}${allowance.planned ? html ` on your plan${allowance.archived > 0 ? html `, ${String(allowance.archived)} of them archived (archived resources count until deleted)` : html ``}` : html ``}. Adding a reference you have changes its time zone.</p>
 </section>
 ${resources.length === 0
             ? emptyState(ICONS.resources, 'No resources yet. Agents can only book what is listed here.', { href: '#reference', label: 'Add a resource' })
-            : html `<div class="table"><table><thead><tr><th>Reference</th><th>Time zone</th><th>Bookable hours</th><th>Resource id</th></tr></thead><tbody>${resources.map((resource) => html `<tr><td data-label="Reference" class="strong"><span class="cell"><a class="truncate" href="${root}/resources/${resource.id}" title="${resourceName(resource, resource.id)}">${resourceName(resource, resource.id)}</a>${resource.pool ? html `<span class="meta" title="Pool ${resource.pool}">Pool ${resource.pool}</span>` : html ``}</span></td><td data-label="Time zone">${resource.timezone}</td><td data-label="Bookable hours"><span class="cell"><span>${hoursSummary(resource.availabilityRules)}</span><a class="meta-link" href="${root}/hours?resource=${resource.id}">Set hours</a></span></td><td data-label="Resource id"><code class="muted truncate id" title="${resource.id}">${resource.id}</code></td></tr>`)}</tbody></table></div>`}`;
+            : html `<div class="table"><table><thead><tr><th>Reference</th><th>Time zone</th><th>Bookable hours</th><th>Resource id</th></tr></thead><tbody>${resources.map((resource) => html `<tr><td data-label="Reference" class="strong"><span class="cell"><a class="truncate" href="${root}/resources/${resource.id}" title="${resourceName(resource, resource.id)}">${resourceName(resource, resource.id)}</a>${resource.name && resource.externalRef ? html `<span class="meta" title="Reference ${resource.externalRef}">${resource.externalRef}</span>` : html ``}${resource.pool ? html `<span class="meta" title="Pool ${resource.pool}">Pool ${resource.pool}</span>` : html ``}</span></td><td data-label="Time zone">${resource.timezone}</td><td data-label="Bookable hours"><span class="cell"><span>${hoursSummary(resource.availabilityRules)}</span><a class="meta-link" href="${root}/hours?resource=${resource.id}">Set hours</a></span></td><td data-label="Resource id"><code class="muted truncate id" title="${resource.id}">${resource.id}</code></td></tr>`)}</tbody></table></div>`}`;
         return respond(status, layout('Resources', content, session, 'resources'));
     }
-    async function settingsPage(session, status = 200, notice) {
+    /** The tenant's locations and groups (RFC 0003 G2, G3): what they are, and adding and changing them. */
+    async function locationsPage(session, status = 200, notice) {
+        const grouping = options.resources.grouping;
+        if (!grouping)
+            return nothingHere(session);
+        const tenantRef = tenantOf(session);
+        const [locations, groups] = await Promise.all([grouping.locations(tenantRef), grouping.groups(tenantRef)]);
+        const token = csrfToken(session);
+        const byRef = new Map(locations.map((location) => [location.ref, location]));
+        const paths = locationPaths(locations);
+        const sent = () => html `<input type="hidden" name="csrf" value="${token}"><input type="hidden" name="once" value="${formNonce(session)}">`;
+        // Where a location may be: nowhere, or any location but itself and those inside it.
+        const insideChoices = (selected, except) => html `<option value=""${selected === null ? html ` selected` : html ``}>Nowhere (at the top)</option>${locations
+            .filter((location) => except === undefined || !locationWithin(byRef, location.ref, except))
+            .map((location) => html `<option value="${location.ref}"${location.ref === selected ? html ` selected` : html ``}>${paths.get(location.ref) ?? location.name}</option>`)}`;
+        const nameLimit = String(SLOTLOCK_RESOURCE_PROFILE_LIMITS.name);
+        const locationRows = locations.map((location) => {
+            const parent = location.parentRef === null ? undefined : paths.get(location.parentRef);
+            const zone = locationZone(byRef, location);
+            return html `<tr>
+<td data-label="Location" class="strong"><span class="cell"><span class="truncate" title="${paths.get(location.ref) ?? location.name}">${location.name}</span><span class="meta">${location.ref}${parent ? ` · in ${parent}` : ''}</span></span></td>
+<td data-label="Time zone">${zone ? (zone.from === location ? zone.timezone : html `<span class="cell"><span>${zone.timezone}</span><span class="meta">from ${zone.from.name}</span></span>`) : html `<span class="muted">None</span>`}</td>
+<td data-label="Resources">${String(location.resources)}</td>
+<td class="actions"><details class="act"><summary>Edit</summary><div class="pop"><form method="post" action="${root}/locations">${sent()}<input type="hidden" name="ref" value="${location.ref}">
+<label>Name<input name="name" required maxlength="${nameLimit}" value="${location.name}"></label>
+<label>Inside<select name="parent">${insideChoices(location.parentRef, location.ref)}</select></label>
+<label>Time zone<input name="timezone" maxlength="100" value="${location.timezone ?? ''}" placeholder="As where it is"></label>
+<button type="submit">Save location</button></form></div></details><details class="act danger"><summary>Delete</summary><div class="pop"><p>${location.resources > 0 ? 'Move its resources somewhere else first.' : 'Locations inside it must be moved or deleted first.'}</p>
+<form method="post" action="${root}/locations/delete">${sent()}<input type="hidden" name="ref" value="${location.ref}"><button class="danger" type="submit">Delete location</button></form></div></details></td>
+</tr>`;
+        });
+        const groupRows = groups.map((group) => html `<tr>
+<td data-label="Group" class="strong"><span class="cell"><span class="truncate" title="${group.name}">${group.name}</span><span class="meta">${group.ref}</span></span></td>
+<td data-label="Description" class="wrap">${group.description ?? ''}</td>
+<td data-label="Resources">${String(group.members)}</td>
+<td class="actions"><details class="act"><summary>Edit</summary><div class="pop"><form method="post" action="${root}/groups">${sent()}<input type="hidden" name="ref" value="${group.ref}">
+<label>Name<input name="name" required maxlength="${nameLimit}" value="${group.name}"></label>
+<label>Description<textarea name="description" rows="2" maxlength="${String(SLOTLOCK_RESOURCE_PROFILE_LIMITS.description)}">${group.description ?? ''}</textarea></label>
+<button type="submit">Save group</button></form></div></details><details class="act danger"><summary>Delete</summary><div class="pop"><p>Its resources stay as they are, in no group of this name.</p>
+<form method="post" action="${root}/groups/delete">${sent()}<input type="hidden" name="ref" value="${group.ref}"><button class="danger" type="submit">Delete group</button></form></div></details></td>
+</tr>`);
+        const content = html `${noticeOf(notice)}
+<p><a class="back" href="${root}/resources">Resources</a></p>
+${pageHead('Locations and groups')}
+<section class="panel" id="locations">
+<h2>Locations</h2>
+<form class="create" method="post" action="${root}/locations">${sent()}
+<label>Reference<input id="location-ref" name="ref" required maxlength="100" placeholder="floor-3"></label>
+<label class="grow">Name<input name="name" required maxlength="${nameLimit}" placeholder="Floor 3"></label>
+<label>Inside<select name="parent">${insideChoices(null)}</select></label>
+<label>Time zone<input name="timezone" maxlength="100" placeholder="As where it is"></label>
+<button class="primary" type="submit">Add location</button>
+</form>
+<p class="fine">Where resources are: a site, a building, a floor, up to ${String(SLOTLOCK_MAX_LOCATION_DEPTH)} levels. Agents searching a location search every location inside it too. A resource added at a location over the API without a time zone takes the location's, or the nearest one above it. Adding a reference you have changes that location.</p>
+${locations.length === 0
+            ? html `<p class="empty">No locations yet.</p>`
+            : html `<div class="table"><table><thead><tr><th>Location</th><th>Time zone</th><th>Resources</th><th><span class="visually-hidden">Actions</span></th></tr></thead><tbody>${locationRows}</tbody></table></div>`}
+</section>
+<section class="panel" id="groups">
+<h2>Groups</h2>
+<form class="create" method="post" action="${root}/groups">${sent()}
+<label>Reference<input id="group-ref" name="ref" required maxlength="100" placeholder="video-rooms"></label>
+<label class="grow">Name<input name="name" required maxlength="${nameLimit}" placeholder="Rooms with video"></label>
+<label class="grow">Description<input name="description" maxlength="${String(SLOTLOCK_RESOURCE_PROFILE_LIMITS.description)}" placeholder="Optional"></label>
+<button class="primary" type="submit">Add group</button>
+</form>
+<p class="fine">Any set of resources, such as a team or the rooms with video, wherever they are. A resource is in up to ${String(SLOTLOCK_MAX_GROUPS_PER_RESOURCE)} groups; choose them on its page. Adding a reference you have changes that group.</p>
+${groups.length === 0
+            ? html `<p class="empty">No groups yet.</p>`
+            : html `<div class="table"><table><thead><tr><th>Group</th><th>Description</th><th>Resources</th><th><span class="visually-hidden">Actions</span></th></tr></thead><tbody>${groupRows}</tbody></table></div>`}
+</section>`;
+        return respond(status, layout('Locations and groups', content, session, 'resources'));
+    }
+    async function settingsPage(session, status = 200, notice, draft) {
         const rules = options.availability ?? [];
         const current = session.orgs?.find((org) => org.id === session.org);
         const content = html `${noticeOf(notice)}
 ${pageHead('Settings')}
-${await assistantSettingsPanel(session)}
+${await assistantSettingsPanel(session, draft)}
 <section class="panel">
 <h2>Endpoints</h2>
 ${endpoints()}
@@ -1061,7 +1561,7 @@ ${rules.length === 0
 </section>
 <section class="panel">
 <h2>Account</h2>
-<dl class="facts"><dt>Signed in as</dt><dd>@${session.login}</dd>${current
+<dl class="facts"><dt>Signed in as</dt><dd>${shownAs(session)}</dd>${current
             ? html `<dt>Organization</dt><dd>${current.login}</dd>${(session.orgs?.length ?? 0) > 1 ? html `<dt>Also a member of</dt><dd>${(session.orgs ?? []).filter((org) => org.id !== current.id).map((org) => org.login).join(', ')}</dd>` : html ``}`
             : html `<dt>Workspace</dt><dd>Personal</dd>`}<dt>Session ends</dt><dd>${formatDate(new Date(session.exp))}</dd></dl>
 ${current ? html `<p class="fine">Membership is read from GitHub when you sign in.</p>` : html ``}
@@ -1076,12 +1576,21 @@ ${current ? html `<p class="fine">Membership is read from GitHub when you sign i
             return notFound(session);
         const start = new Date(now());
         const window = { start, end: new Date(start.getTime() + AGENDA_DAYS * DAY_MS) };
-        const [agenda, changes, keys, defaults] = await Promise.all([
+        const grouping = options.resources.grouping;
+        const [agenda, changes, keys, defaults, locations, groups, everyResource] = await Promise.all([
             options.resources.agenda?.(tenantRef, window, AGENDA_LIMIT),
             options.resources.recentChanges?.(tenantRef, 100),
             options.keys.list({ tenantRef }),
             options.resources.ruleDefaults?.(tenantRef),
+            grouping?.locations(tenantRef),
+            grouping?.groups(tenantRef),
+            // For a composite: its parts, or the wholes it can be a part of.
+            options.resources.setParent ? options.resources.list(tenantRef) : undefined,
         ]);
+        const parts = (everyResource?.filter((other) => other.parentId === resource.id) ?? []).sort((one, other) => (one.partIndex ?? 0) - (other.partIndex ?? 0));
+        const wholes = everyResource?.filter((other) => other.id !== resource.id && other.parentId === undefined && other.archivedAt === undefined) ?? [];
+        const paths = locationPaths(locations ?? []);
+        const groupNames = new Map((groups ?? []).map((group) => [group.ref, group.name]));
         const byId = new Map([[resource.id, resource]]);
         const mine = agenda?.filter((entry) => entry.resourceId === resource.id);
         const activity = changes?.filter((change) => change.resourceId === resource.id).slice(0, 10);
@@ -1106,7 +1615,8 @@ ${current ? html `<p class="fine">Membership is read from GitHub when you sign i
         const content = html `${noticeOf(notice)}
 <p><a class="back" href="${root}/resources">Resources</a></p>
 ${pageHead(resourceName(resource, resource.id))}
-<dl class="facts"><dt>Time zone</dt><dd>${resource.timezone}</dd><dt>Bookable hours</dt><dd>${hoursSummary(resource.availabilityRules)} <a href="${root}/hours?resource=${resource.id}">Set hours</a></dd><dt>Resource id</dt><dd><code class="muted">${resource.id}</code></dd></dl>
+${resource.description ? html `<p>${resource.description}</p>` : html ``}
+<dl class="facts">${resource.name && resource.externalRef ? html `<dt>Reference</dt><dd>${resource.externalRef}</dd>` : html ``}${resource.kind ? html `<dt>Kind</dt><dd>${KIND_NAMES[resource.kind]}</dd>` : html ``}${resource.capacity !== undefined ? html `<dt>Capacity</dt><dd>${String(resource.capacity)}</dd>` : html ``}${resource.labels ? html `<dt>Labels</dt><dd>${resource.labels.join(', ')}</dd>` : html ``}${resource.location ? html `<dt>Location</dt><dd>${paths.get(resource.location) ?? resource.locationName ?? resource.location}</dd>` : html ``}${resource.groups ? html `<dt>Groups</dt><dd>${resource.groups.map((ref) => groupNames.get(ref) ?? ref).join(', ')}</dd>` : html ``}<dt>Time zone</dt><dd>${resource.timezone}</dd><dt>Bookable hours</dt><dd>${hoursSummary(resource.availabilityRules)} <a href="${root}/hours?resource=${resource.id}">Set hours</a></dd><dt>Resource id</dt><dd><code class="muted">${resource.id}</code></dd></dl>
 <div class="split">
 <div class="stack">
 ${options.resources.setRules
@@ -1131,6 +1641,25 @@ ${inheritedNote(inherited)}
 <p class="fine">Leave a field empty for no rule${inherited.size > 0 ? ' of its own' : ''}.</p>
 <button class="primary" type="submit">Save rules</button>
 </form>
+</section>`
+            : html ``}
+${options.resources.setProfile
+            ? html `<section class="panel">
+<h2>Profile</h2>
+<form method="post" action="${root}/resources/profile">
+<input type="hidden" name="csrf" value="${token}">
+<input type="hidden" name="once" value="${formNonce(session)}">
+<input type="hidden" name="id" value="${resource.id}">
+<div class="grid-form">
+<label>Name<input name="name" maxlength="${String(SLOTLOCK_RESOURCE_PROFILE_LIMITS.name)}" value="${resource.name ?? ''}" placeholder="${resource.externalRef ?? ''}"></label>
+<label>Kind<select name="kind">${SLOTLOCK_RESOURCE_KINDS.map((kind) => html `<option value="${kind}"${(resource.kind ?? 'other') === kind ? html ` selected` : html ``}>${KIND_NAMES[kind]}</option>`)}</select></label>
+<label>Capacity<span class="unit-input"><input type="number" inputmode="numeric" min="1" max="${String(SLOTLOCK_RESOURCE_PROFILE_LIMITS.capacity)}" name="capacity" value="${resource.capacity === undefined ? '' : String(resource.capacity)}"><span>people or seats</span></span></label>
+<label>Labels<input name="labels" value="${(resource.labels ?? []).join(', ')}" placeholder="video, accessible"></label>
+</div>
+<label>Description<textarea name="description" rows="3" maxlength="${String(SLOTLOCK_RESOURCE_PROFILE_LIMITS.description)}">${resource.description ?? ''}</textarea></label>
+<p class="fine">Agents and people see the name instead of the reference. Kind, capacity and labels help them find it, and change nothing about how it is booked.${resource.attributes ? html ` Its attributes (${Object.keys(resource.attributes).join(', ')}) are set over the API.` : html ``}</p>
+<button class="primary" type="submit">Save profile</button>
+</form>
 </section>`
             : html ``}
 ${options.resources.setPool
@@ -1144,6 +1673,39 @@ ${options.resources.setPool
 <button type="submit">Save pool</button>
 </form>
 <p class="fine">Agents can book any free member of a pool. Leave it empty for none.</p>
+</section>`
+            : html ``}
+${options.resources.setParent && everyResource
+            ? html `<section class="panel" id="composite">
+<h2>Composite</h2>
+${parts.length > 0
+                ? html `<p>A whole of ${String(parts.length)} part${parts.length === 1 ? '' : 's'}: ${parts.map((part, index) => html `${index > 0 ? ', ' : ''}<a href="${root}/resources/${part.id}">${resourceName(part, part.id)}</a>`)}. Booking it takes every part, and a booking of any part keeps it from being booked.</p>`
+                : html `<form class="create" method="post" action="${root}/resources/parent">
+<input type="hidden" name="csrf" value="${token}">
+<input type="hidden" name="once" value="${formNonce(session)}">
+<input type="hidden" name="id" value="${resource.id}">
+<label>Part of<select name="parent"><option value=""${resource.parentId ? html `` : html ` selected`}>Nothing: it stands alone</option>${wholes.map((whole) => html `<option value="${whole.id}"${resource.parentId === whole.id ? html ` selected` : html ``}>${resourceName(whole, whole.id)}</option>`)}</select></label>
+<button type="submit">Save</button>
+</form>
+<p class="fine">A room of a hall, a half of a court: booking the whole then takes every part, and two parts never get in each other's way. It changes only while neither has a booking or hold to come.</p>`}
+</section>`
+            : html ``}
+${grouping && locations && groups
+            ? html `<section class="panel" id="place">
+<h2>Location and groups</h2>
+${locations.length === 0 && groups.length === 0
+                ? html `<p class="empty">No locations or groups yet. <a href="${root}/locations">Add them</a>, then choose them here.</p>`
+                : html `<form method="post" action="${root}/resources/place">
+<input type="hidden" name="csrf" value="${token}">
+<input type="hidden" name="once" value="${formNonce(session)}">
+<input type="hidden" name="id" value="${resource.id}">
+<label>Location<select name="location"><option value=""${resource.location ? html `` : html ` selected`}>None</option>${locations.map((location) => html `<option value="${location.ref}"${resource.location === location.ref ? html ` selected` : html ``}>${paths.get(location.ref) ?? location.name}</option>`)}</select></label>
+${groups.length > 0
+                    ? html `<fieldset class="choices"><legend>Groups</legend><div class="checks">${groups.map((group) => html `<label class="choice"><input type="checkbox" name="group" value="${group.ref}"${resource.groups?.includes(group.ref) ? html ` checked` : html ``}> ${group.name}</label>`)}</div></fieldset>`
+                    : html ``}
+<button class="primary" type="submit">Save location and groups</button>
+</form>
+<p class="fine">Agents can search a location, with every location inside it, or a group, in one call. <a href="${root}/locations">Locations and groups</a></p>`}
 </section>`
             : html ``}
 </div>
@@ -1191,6 +1753,153 @@ ${activity ? html `<section class="panel"><h2>Activity</h2>${activityPanel(activ
         }
         return redirect(303, `${root}/resources/${id}`);
     }
+    async function saveProfile(session, form) {
+        const id = form.get('id') ?? '';
+        const resource = await ownResource(session, id);
+        if (!resource || !options.resources.setProfile)
+            return notFound(session);
+        const text = (key) => optionalField(form, key);
+        const capacity = text('capacity');
+        if (capacity !== null && !/^\d{1,6}$/.test(capacity)) {
+            return resourceDetailPage(session, id, 400, PROFILE_PROBLEMS.capacity);
+        }
+        const kind = form.get('kind') ?? 'other';
+        try {
+            await options.resources.setProfile(tenantOf(session), id, {
+                name: text('name'),
+                description: text('description'),
+                kind: kind,
+                capacity: capacity === null ? null : Number(capacity),
+                // Commas or spaces between them; a person may type them in capitals.
+                labels: (form.get('labels') ?? '')
+                    .split(/[\s,]+/)
+                    .map((label) => label.trim().toLowerCase())
+                    .filter((label) => label !== ''),
+            }, personOf(session));
+        }
+        catch (error) {
+            if (error.code !== 'invalid_resource_profile')
+                throw error;
+            const field = error.field;
+            return resourceDetailPage(session, id, 400, PROFILE_PROBLEMS[typeof field === 'string' && field in PROFILE_PROBLEMS ? field : 'other']);
+        }
+        return redirect(303, `${root}/resources/${id}`);
+    }
+    /** Text from a form, trimmed, or null when empty. */
+    function optionalField(form, key) {
+        const value = (form.get(key) ?? '').trim();
+        return value === '' ? null : value;
+    }
+    async function saveLocation(session, form) {
+        const grouping = options.resources.grouping;
+        if (!grouping)
+            return nothingHere(session);
+        try {
+            await grouping.putLocation(tenantOf(session), {
+                // A person may type a reference in capitals; references are lowercase.
+                ref: (form.get('ref') ?? '').trim().toLowerCase(),
+                name: (form.get('name') ?? '').trim(),
+                parentRef: optionalField(form, 'parent'),
+                timezone: optionalField(form, 'timezone'),
+            }, personOf(session));
+        }
+        catch (error) {
+            const problem = groupingProblem(error);
+            if (!problem)
+                throw error;
+            return locationsPage(session, problem.status, problem.text);
+        }
+        return redirect(303, `${root}/locations`);
+    }
+    async function saveGroup(session, form) {
+        const grouping = options.resources.grouping;
+        if (!grouping)
+            return nothingHere(session);
+        try {
+            await grouping.putGroup(tenantOf(session), {
+                ref: (form.get('ref') ?? '').trim().toLowerCase(),
+                name: (form.get('name') ?? '').trim(),
+                description: optionalField(form, 'description'),
+            }, personOf(session));
+        }
+        catch (error) {
+            const problem = groupingProblem(error);
+            if (!problem)
+                throw error;
+            return locationsPage(session, problem.status, problem.text);
+        }
+        return redirect(303, `${root}/locations#groups`);
+    }
+    async function deleteGrouping(session, form, kind) {
+        const grouping = options.resources.grouping;
+        if (!grouping)
+            return nothingHere(session);
+        const ref = form.get('ref') ?? '';
+        let deleted;
+        try {
+            deleted =
+                kind === 'location'
+                    ? await grouping.deleteLocation(tenantOf(session), ref, personOf(session))
+                    : await grouping.deleteGroup(tenantOf(session), ref, personOf(session));
+        }
+        catch (error) {
+            const problem = groupingProblem(error);
+            if (!problem)
+                throw error;
+            return locationsPage(session, problem.status, problem.text);
+        }
+        if (!deleted) {
+            const problem = GROUPING_PROBLEMS[`${kind}_not_found`];
+            return locationsPage(session, problem.status, problem.text);
+        }
+        return redirect(303, `${root}/locations${kind === 'group' ? '#groups' : ''}`);
+    }
+    async function savePlace(session, form) {
+        const id = form.get('id') ?? '';
+        const resource = await ownResource(session, id);
+        const grouping = options.resources.grouping;
+        if (!resource || !grouping)
+            return notFound(session);
+        const groups = [...new Set(form.getAll('group'))];
+        if (groups.length > SLOTLOCK_MAX_GROUPS_PER_RESOURCE) {
+            const problem = GROUPING_PROBLEMS.resource_group_limit_reached;
+            return resourceDetailPage(session, id, problem.status, problem.text);
+        }
+        try {
+            const placed = await grouping.place(tenantOf(session), id, { location: optionalField(form, 'location'), groups }, personOf(session));
+            if (!placed)
+                return notFound(session);
+        }
+        catch (error) {
+            const problem = groupingProblem(error);
+            if (!problem)
+                throw error;
+            return resourceDetailPage(session, id, problem.status, problem.text);
+        }
+        return redirect(303, `${root}/resources/${id}`);
+    }
+    async function saveParent(session, form) {
+        const id = form.get('id') ?? '';
+        const resource = await ownResource(session, id);
+        if (!resource || !options.resources.setParent)
+            return notFound(session);
+        const wanted = (form.get('parent') ?? '').trim();
+        const parent = wanted === '' ? null : await ownResource(session, wanted);
+        if (wanted !== '' && !parent)
+            return resourceDetailPage(session, id, 400, 'That is not one of your resources.');
+        try {
+            const changed = await options.resources.setParent(tenantOf(session), id, parent?.id ?? null, personOf(session));
+            if (!changed)
+                return notFound(session);
+        }
+        catch (error) {
+            const text = COMPOSITE_PROBLEMS[String(error?.code)];
+            if (!text)
+                throw error;
+            return resourceDetailPage(session, id, 409, text);
+        }
+        return redirect(303, `${root}/resources/${id}`);
+    }
     async function savePool(session, form) {
         const id = form.get('id') ?? '';
         const resource = await ownResource(session, id);
@@ -1207,6 +1916,17 @@ ${activity ? html `<section class="panel"><h2>Activity</h2>${activityPanel(activ
         }
         return redirect(303, `${root}/resources/${id}`);
     }
+    /** An endpoint's filter (set over the API), in a few words. */
+    function webhookFilterText(filter) {
+        return [
+            filter.resourceIds ? `${filter.resourceIds.length} resource${filter.resourceIds.length === 1 ? '' : 's'}` : null,
+            filter.pools ? `pools ${filter.pools.join(', ')}` : null,
+            filter.locations ? `locations ${filter.locations.join(', ')}` : null,
+            filter.groups ? `groups ${filter.groups.join(', ')}` : null,
+        ]
+            .filter((part) => part !== null)
+            .join('; ');
+    }
     function endpointState(endpoint) {
         if (endpoint.disabledAt)
             return { text: 'Disabled', tone: 'revoked' };
@@ -1231,7 +1951,7 @@ ${activity ? html `<section class="panel"><h2>Activity</h2>${activityPanel(activ
                     : '';
             return html `<tr>
 <td data-label="URL" class="strong"><code class="truncate url" title="${endpoint.url}">${endpoint.url}</code></td>
-<td data-label="Events" class="wrap">${endpoint.eventTypes ? endpoint.eventTypes.join(', ') : 'All'}</td>
+<td data-label="Events" class="wrap">${endpoint.eventTypes ? endpoint.eventTypes.join(', ') : 'All'}${endpoint.filter ? html `<span class="meta">Only ${webhookFilterText(endpoint.filter)}</span>` : html ``}</td>
 <td data-label="Status"><span class="cell"><span class="pill ${state.tone}">${state.text}</span>${problem ? html `<span class="meta wrap">${problem}</span>` : html ``}</span></td>
 <td data-label="Added">${dateCell(endpoint.createdAt)}</td>
 <td class="actions">${endpoint.disabledAt
@@ -1271,7 +1991,7 @@ ${endpoints.length === 0
         const created = await hooks.create(tenantOf(session), (form.get('url') ?? '').trim(), types.length === 0 ? undefined : types, personOf(session));
         if (!created.ok) {
             const message = created.code === 'webhook_limit_reached'
-                ? `You have ${String(created.limit)} webhooks, as many as Slotlock allows. Delete one first.`
+                ? `You have ${String(created.limit)} webhooks, as many as ${options.billing ? 'your plan' : 'Slotlock'} allows. Delete one first${options.billing ? ', or see Plan' : ''}.`
                 : created.code === 'invalid_webhook_url'
                     ? 'Give an https URL, with no user name, password or #fragment.'
                     : 'Choose events from the list.';
@@ -1360,6 +2080,87 @@ ${entries.length === 0
         }
         return redirect(303, `${root}/waitlist`);
     }
+    // ---- Approvals (RFC 0004 A4) ----
+    async function approvalsPage(session, status = 200, notice) {
+        const approvals = options.resources.approvals;
+        if (!approvals)
+            return notFound(session);
+        const tenantRef = tenantOf(session);
+        const [entries, resources] = await Promise.all([
+            approvals.list(tenantRef, APPROVALS_SHOWN),
+            options.resources.list(tenantRef),
+        ]);
+        const byId = new Map(resources.map((resource) => [resource.id, resource]));
+        const token = csrfToken(session);
+        const pending = entries.filter((entry) => entry.status === 'pending' && entry.expiresAt.getTime() > now());
+        const decided = entries.filter((entry) => !pending.includes(entry));
+        const what = (entry) => entry.resourceIds.map((id) => resourceName(byId.get(id), id)).join(', ');
+        const when = (entry) => {
+            const zone = byId.get(entry.resourceIds[0] ?? '')?.timezone ?? 'UTC';
+            const day = dayLabel(entry.start, zone, now());
+            return `${day.label} ${clock(entry.start, zone)}–${clock(entry.end, zone)}`;
+        };
+        const KINDS = {
+            slotlock_create_event: 'Booking',
+            slotlock_book_together: 'Bundle',
+            slotlock_update_event: 'Move',
+        };
+        const form = (entry, decision, body) => html `<form method="post" action="${root}/approvals/decide"><input type="hidden" name="csrf" value="${token}"><input type="hidden" name="once" value="${formNonce(session)}"><input type="hidden" name="id" value="${entry.id}"><input type="hidden" name="decision" value="${decision}">${body}</form>`;
+        const pendingRows = pending.map((entry) => html `<tr>
+<td data-label="When" class="strong">${when(entry)}</td>
+<td data-label="What"><span class="cell"><span class="truncate" title="${what(entry)}">${what(entry)}</span><span class="meta">${KINDS[entry.operation]}, policy ${entry.policyRef}</span></span></td>
+<td data-label="Asked by"><code class="truncate" title="${entry.requestedBy ?? ''}">${entry.requestedBy ?? 'unknown'}</code></td>
+<td data-label="Decide by">${clock(entry.expiresAt, 'UTC')} UTC, ${dayLabel(entry.expiresAt, 'UTC', now()).label}</td>
+<td class="actions">${form(entry, 'grant', html `<button type="submit">Approve</button>`)}<details class="act danger"><summary>Decline</summary><div class="pop"><p>The held time is freed. The agent is told on its next try.</p>${form(entry, 'decline', html `<label>Reason (optional)<input name="reason" maxlength="500" autocomplete="off"></label><button class="danger" type="submit">Decline</button>`)}</div></details></td>
+</tr>`);
+        const STATUS = {
+            pending: { text: 'Lapsed', tone: 'revoked' },
+            granted: { text: 'Approved', tone: 'active' },
+            declined: { text: 'Declined', tone: 'revoked' },
+            expired: { text: 'Expired', tone: 'revoked' },
+        };
+        const decidedRows = decided.map((entry) => html `<tr>
+<td data-label="When" class="strong">${when(entry)}</td>
+<td data-label="What"><span class="truncate" title="${what(entry)}">${what(entry)}</span></td>
+<td data-label="Status"><span class="cell"><span class="pill ${STATUS[entry.status].tone}">${STATUS[entry.status].text}</span>${entry.reason ? html `<span class="meta" title="${entry.reason}">${entry.reason}</span>` : html ``}</span></td>
+<td data-label="Decided by"><code class="truncate" title="${entry.decidedBy ?? ''}">${entry.decidedBy ?? '—'}</code></td>
+<td data-label="Asked">${ago(entry.createdAt, now())}</td>
+</tr>`);
+        const content = html `${noticeOf(notice)}
+${pageHead('Approvals')}
+<p class="fine">Bookings an approval policy holds for a person. Their time stays held until you decide or the wait ends. Policies are set through the API (slotlock_put_approval_policy).</p>
+<div class="stats">
+<div class="stat"><span class="stat-label">Waiting for you</span><span class="stat-value">${String(pending.length)}</span></div>
+</div>
+${pending.length === 0
+            ? emptyState(ICONS.approvals, 'Nothing is waiting. A policy that holds bookings for a person sends them here.')
+            : html `<div class="table"><table><thead><tr><th>When</th><th>What</th><th>Asked by</th><th>Decide by</th><th><span class="visually-hidden">Actions</span></th></tr></thead><tbody>${pendingRows}</tbody></table></div>`}
+${decided.length === 0
+            ? html ``
+            : html `<h2>Decided</h2><div class="table"><table><thead><tr><th>When</th><th>What</th><th>Status</th><th>Decided by</th><th>Asked</th></tr></thead><tbody>${decidedRows}</tbody></table></div>`}`;
+        return respond(status, layout('Approvals', content, session, 'approvals'));
+    }
+    async function decideApproval(session, form) {
+        const approvals = options.resources.approvals;
+        if (!approvals)
+            return notFound(session);
+        const decision = form.get('decision');
+        if (decision !== 'grant' && decision !== 'decline')
+            return approvalsPage(session, 400, 'Choose approve or decline.');
+        const reason = (form.get('reason') ?? '').trim().slice(0, 500);
+        const decided = await approvals.decide(tenantOf(session), form.get('id') ?? '', decision, personOf(session), reason || undefined);
+        if (!decided.ok) {
+            const messages = {
+                approval_not_found: 'That approval is not one of yours.',
+                approval_not_pending: 'That approval was already decided.',
+                approval_expired: 'The wait for that approval ended: its time is no longer held.',
+                overlap: 'That time is taken now, so it cannot be booked. Decline it instead.',
+                revision_conflict: 'The agent changed that event since it asked. Decline this one; it can ask again.',
+            };
+            return approvalsPage(session, 409, messages[decided.code] ?? `That booking cannot be made now (${decided.code}). Decline it instead.`);
+        }
+        return redirect(303, `${root}/approvals`);
+    }
     // ---- The assistant ----
     const assistantOptions = options.assistant;
     /** The assistant's records, when the assistant is on and the adapter keeps them. Per request (Workers). */
@@ -1383,6 +2184,23 @@ ${entries.length === 0
     if (assistantOptions && assistantOptions.secret === options.sessionSecret) {
         throw new Error('Slotlock dashboard assistant secret must differ from the session secret');
     }
+    const previousSecrets = [...(assistantOptions?.previousSecrets ?? [])];
+    if (previousSecrets.length > SLOTLOCK_ASSISTANT_MAX_PREVIOUS_SECRETS) {
+        throw new Error(`Slotlock dashboard assistant takes at most ${String(SLOTLOCK_ASSISTANT_MAX_PREVIOUS_SECRETS)} previous secrets`);
+    }
+    for (const previous of previousSecrets) {
+        if (Buffer.byteLength(previous, 'utf8') < 32) {
+            throw new Error('Slotlock dashboard assistant previous secrets must each be at least 32 bytes');
+        }
+        if (previous === assistantOptions?.secret || previous === options.sessionSecret) {
+            throw new Error('Slotlock dashboard assistant previous secrets must differ from the assistant and session secrets');
+        }
+    }
+    if (new Set(previousSecrets).size !== previousSecrets.length) {
+        throw new Error('Slotlock dashboard assistant previous secrets must differ from each other');
+    }
+    /** The current secret, then the previous ones: a stored key is tried with each in turn. */
+    const assistantSecrets = assistantOptions ? [assistantOptions.secret, ...previousSecrets] : [];
     const memberMessages = createSlotlockRateLimiter(assistantOptions?.rate ?? { perSecond: 10 / 60, burst: 10 }, now);
     const toolTitles = new Map(slotlockAgentTools().map((tool) => [tool.name, tool.title]));
     /** The writes that take an idempotency key: the dashboard sets it, from the action's id. */
@@ -1407,7 +2225,7 @@ ${entries.length === 0
      * Who the assistant acts as, for the record and for ownership: the member by GitHub user id,
      * which a rename does not change. Shown as "Assistant for @login".
      */
-    const assistantActor = (session) => `dashboard-assistant:github:${session.uid}`;
+    const assistantActor = (session) => `dashboard-assistant:${personOf(session)}`;
     const CONFIRMED_WRITES = new Set([
         'slotlock_create_event',
         'slotlock_update_event',
@@ -1441,6 +2259,15 @@ ${entries.length === 0
         else if (operation === 'slotlock_release_slots') {
             text = `Release the hold ${String(input.hold_id)} and every slot held with it.`;
         }
+        else if (operation === 'slotlock_confirm_slot') {
+            text = `Book the time held by ${String(input.hold_id)}${input.title ? `, as "${String(input.title)}"` : ''}, and release the other holds made with it.`;
+        }
+        else if (operation === 'slotlock_reschedule') {
+            text = `Move the event ${String(input.event_id)} to ${String(input.starts_at)} to ${String(input.ends_at)}${input.resource_id ? ` on resource ${String(input.resource_id)}` : ''}.`;
+        }
+        else if (operation === 'slotlock_cancel') {
+            text = `Cancel the event ${String(input.event_id)}.`;
+        }
         else {
             text = '';
         }
@@ -1448,7 +2275,8 @@ ${entries.length === 0
         return text.length > 500 ? `${text.slice(0, 500)}…` : text;
     }
     /** Owners of the organization in use may change its assistant; a person always may their own. */
-    const isAdmin = (session) => !served || session.orgs?.find((org) => org.id === session.org)?.role === 'admin';
+    /** An owner of the workspace: the person in their own, an organization's owner in its. */
+    const isAdmin = (session) => session.org === undefined || session.orgs?.find((org) => org.id === session.org)?.role === 'admin';
     const assistantPrincipal = (session) => ({
         subject: assistantActor(session),
         tenantRef: tenantOf(session),
@@ -1486,6 +2314,8 @@ ${entries.length === 0
                     ? { consumeRateLimit: assistant.consumeRateLimit }
                     : {}),
                 ...(confirm ? { confirm } : {}),
+                // A proposal halts at `confirm` and never reaches the backend, so only what runs counts.
+                ...(assistant.onUsage ? { onUsage: assistant.onUsage } : {}),
                 onError: (error) => {
                     try {
                         ignoreRejection(options.onError?.(error));
@@ -1510,12 +2340,28 @@ ${entries.length === 0
         }
         let apiKey = null;
         if (settings.sealedKey !== null) {
-            apiKey = await openSlotlockAssistantKey(assistantOptions.secret, tenantOf(session), settings.sealedKey);
-            if (apiKey === null) {
+            const tenantRef = tenantOf(session);
+            const opened = await openSlotlockAssistantKeyWithAny(assistantSecrets, tenantRef, settings.sealedKey);
+            if (opened === null) {
                 return {
                     problem: 'The stored API key cannot be opened: the server’s assistant secret changed. An admin can enter the key again in Settings.',
                 };
             }
+            apiKey = opened.apiKey;
+            // Sealed under a previous secret: sealed again under the current one, unless an owner saved
+            // another key meanwhile. Best effort: the key opened either way.
+            if (opened.secretIndex > 0 && store?.resealKey) {
+                try {
+                    const resealed = await sealSlotlockAssistantKey(assistantOptions.secret, tenantRef, apiKey);
+                    await store.resealKey(tenantRef, settings.sealedKey, resealed);
+                }
+                catch (error) {
+                    // A suspended tenant reads and writes nothing, this included: it opens the old way.
+                    if (error?.code !== 'tenant_suspended') {
+                        ignoreRejection(options.onError?.(error));
+                    }
+                }
+            }
         }
         return {
             model: { provider: settings.provider, baseUrl: settings.baseUrl, model: settings.model, apiKey },
@@ -1619,7 +2465,7 @@ ${settings
                 : 'No model is connected. An admin of this organization can connect one in Settings.'}</p>`}`;
         return respond(status, layout('Assistant', content, session, 'assistant'));
     }
-    async function assistantSettingsPanel(session) {
+    async function assistantSettingsPanel(session, draft) {
         const store = assistantStore();
         if (!store)
             return html ``;
@@ -1631,21 +2477,29 @@ ${settings
                 : html `<p class="empty">No model is connected. An admin can connect one.</p>`}</section>`;
         }
         const token = csrfToken(session);
-        const selected = (provider) => (settings?.provider === provider ? html ` selected` : html ``);
+        // What the form shows: a draft (a preset, or a model list) over what is saved.
+        const provider = draft?.provider ?? settings?.provider;
+        const baseUrl = draft ? draft.baseUrl : (settings?.baseUrl ?? '');
+        const model = draft?.model ?? settings?.model ?? '';
+        const selected = (value) => (provider === value ? html ` selected` : html ``);
+        const models = draft?.models ?? [];
         return html `<section class="panel" id="assistant">
 <h2>Assistant</h2>
+<form class="presets" method="get" action="${root}/settings"><span class="fine">Fill in for</span>${SLOTLOCK_ASSISTANT_PRESETS.map((preset) => html `<button type="submit" name="preset" value="${preset.id}">${preset.name}</button>`)}</form>
 <form method="post" action="${root}/settings/assistant">
 <input type="hidden" name="csrf" value="${token}">
 <input type="hidden" name="once" value="${formNonce(session)}">
 <div class="grid-form">
 <label>Provider<select name="provider"><option value="anthropic"${selected('anthropic')}>Anthropic Messages API</option><option value="openai"${selected('openai')}>OpenAI-compatible</option></select></label>
-<label>Base URL<input name="base_url" required maxlength="2048" value="${settings?.baseUrl ?? ''}" placeholder="https://api.anthropic.com"></label>
-<label>Model<input name="model" required maxlength="200" value="${settings?.model ?? ''}" placeholder="your-model"></label>
+<label>Base URL<input name="base_url" required maxlength="2048" value="${baseUrl}" placeholder="https://api.anthropic.com"></label>
+<label>Model<input name="model" required maxlength="200" value="${model}" placeholder="your-model"${models.length > 0 ? html ` list="assistant-models"` : html ``}></label>${models.length > 0
+            ? html `<datalist id="assistant-models">${models.map((id) => html `<option value="${id}"></option>`)}</datalist>`
+            : html ``}
 <label>API key<input name="api_key" type="password" autocomplete="off" maxlength="4096" placeholder="${settings?.keyHint ? 'Leave empty to keep it' : 'Optional for a local model'}"></label>
 </div>
 <p class="fine">Key: ${settings?.keyHint ? html `set, ending in <code>${settings.keyHint}</code>` : 'none'}. OpenAI-compatible covers OpenAI, OpenRouter, vLLM, Ollama and LM Studio; give the URL that ends in <code>/v1</code>.</p>
 ${settings?.keyHint ? html `<label class="choice"><input type="checkbox" name="clear_key" value="1"> Remove the key</label>` : html ``}
-<button class="primary" type="submit">Save</button>
+<div class="row-actions"><button class="primary" type="submit">Save</button><button type="submit" formaction="${root}/settings/assistant/models">Load models</button></div>
 </form>
 ${sentTo}
 ${settings
@@ -1698,6 +2552,71 @@ ${settings
         }
         return redirect(303, `${root}/settings#assistant`);
     }
+    /**
+     * The provider's models for the Model field (Load models): the form's provider and base URL,
+     * checked as saving checks them, with the key given, or the saved one when it is for that same
+     * provider and URL. Saves nothing; counted as a message to the assistant.
+     */
+    async function loadAssistantModels(session, form) {
+        const store = assistantStore();
+        if (!store || !assistantOptions)
+            return notFound(session);
+        if (!isAdmin(session))
+            return adminOnly(session);
+        if (!memberMessages.take(`${tenantOf(session)}\0${session.uid}`)) {
+            return tooManyMessages(session, settingsPage);
+        }
+        const provider = form.get('provider');
+        if (provider !== 'anthropic' && provider !== 'openai') {
+            return settingsPage(session, 400, 'Choose a provider from the list.');
+        }
+        const typedModel = (form.get('model') ?? '').trim();
+        const draft = {
+            provider,
+            baseUrl: (form.get('base_url') ?? '').trim(),
+            ...(typedModel !== '' ? { model: typedModel } : {}),
+        };
+        const checkedUrl = readSlotlockAssistantBaseUrl(draft.baseUrl, { privateUrls });
+        if (!checkedUrl.ok) {
+            return settingsPage(session, 400, checkedUrl.reason === 'private'
+                ? PRIVATE_URL_REFUSAL
+                : 'Give an https base URL (http only for localhost or 127.0.0.1), with no user name, query or #fragment.', draft);
+        }
+        const baseUrl = checkedUrl.url;
+        if (namesOwnHost(baseUrl))
+            return settingsPage(session, 400, OWN_HOST_REFUSAL, draft);
+        if (!(await checkSlotlockAssistantHost(baseUrl, { privateUrls, resolve: resolveHost }))) {
+            return settingsPage(session, 400, PRIVATE_URL_REFUSAL, draft);
+        }
+        const typedKey = (form.get('api_key') ?? '').trim();
+        if (typedKey !== '' && !SLOTLOCK_ASSISTANT_API_KEY.test(typedKey)) {
+            return settingsPage(session, 400, 'An API key is up to 4,096 characters without spaces.', draft);
+        }
+        // The saved key only for the provider and URL it was entered for, as a model call sends it.
+        let apiKey = typedKey !== '' ? typedKey : null;
+        if (apiKey === null) {
+            const found = await assistantModel(session);
+            if (found && !('problem' in found) && found.model.provider === provider && found.model.baseUrl === baseUrl) {
+                apiKey = found.model.apiKey;
+            }
+        }
+        try {
+            const listed = await listSlotlockAssistantModels({
+                provider,
+                baseUrl,
+                apiKey,
+                fetch: assistantFetch,
+                timeoutMs: assistantTimeout,
+            });
+            return settingsPage(session, 200, listed.length > 0
+                ? `${listed.length.toLocaleString('en')} model${listed.length === 1 ? '' : 's'} listed: choose one for Model, then Save.${typedKey !== '' ? ' Enter the API key again when you save.' : ''}`
+                : 'The provider listed no models. Type the model name.', { ...draft, baseUrl, models: listed });
+        }
+        catch (error) {
+            report(error instanceof Error ? error.message : 'assistant model list failed');
+            return settingsPage(session, 502, slotlockAssistantProviderMessage(error), { ...draft, baseUrl });
+        }
+    }
     async function removeAssistantSettings(session) {
         const store = assistantStore();
         if (!store)
@@ -1754,6 +2673,12 @@ ${settings
             return assistantPage(session, 409, found.problem);
         const tenantRef = tenantOf(session);
         const member = personOf(session);
+        try {
+            ignoreRejection(assistantOptions?.onMessage?.(tenantRef));
+        }
+        catch {
+            // Metering never changes an answer.
+        }
         const stored = await store.getConversation(tenantRef, member);
         const entries = boundSlotlockAssistantEntries([
             ...readSlotlockAssistantEntries(stored?.messages),
@@ -1882,6 +2807,187 @@ ${settings
         await store.deleteConversation(tenantOf(session), personOf(session));
         return redirect(303, `${root}/assistant`);
     }
+    async function planPage(session, status = 200, notice, thanks = false) {
+        const billing = options.billing;
+        if (!billing)
+            return notFound(session);
+        if (session.env === 'test') {
+            // Its own use, counted apart from Live's and never billed.
+            const range = slotlockUsageMonthToDate(now());
+            const tested = options.usage && options.resources.usage
+                ? summarizeSlotlockUsage(await options.resources.usage(tenantOf(session), range.from, range.to))
+                : null;
+            const stat = (label, value) => html `<div class="stat"><span class="stat-label">${label}</span><span class="stat-value">${value.toLocaleString('en-GB')}</span></div>`;
+            return respond(status, layout('Plan', html `${pageHead('Plan')}${noticeOf(notice)}<p>The test environment is on your live plan's limits and is never billed. Switch to Live to see your plan, or to change it.</p>${tested
+                ? html `<section class="panel" id="usage"><h2>Test usage this month</h2><div class="stats">${stat('Operations', tested.totals.operations)}${stat('Bookings', tested.totals.bookings)}${stat('Holds', tested.totals.holds)}</div><p class="fine">Since ${range.from}, in UTC, counted apart from Live, against the same monthly quotas.</p></section>`
+                : html ``}`, session, 'plan'));
+        }
+        const tenantRef = tenantOf(session);
+        const [plan, resourceCount, keys, webhooks] = await Promise.all([
+            billing.plan(tenantRef),
+            // As the limit counts them: archived resources included.
+            options.resources.count
+                ? options.resources.count(tenantRef)
+                : options.resources.list(tenantRef).then((listed) => listed.length),
+            options.keys.list({ tenantRef }),
+            options.resources.webhooks?.list(tenantRef),
+        ]);
+        const month = slotlockUsageMonthToDate(now());
+        const used = options.usage && options.resources.usage
+            ? summarizeSlotlockUsage(await options.resources.usage(tenantRef, month.from, month.to))
+            : null;
+        const keyName = new Map(keys.map((key) => [key.id, key.name]));
+        const active = keys.filter((key) => !key.revokedAt && (key.expiresAt === null || key.expiresAt.getTime() > now()));
+        const token = csrfToken(session);
+        const paying = plan !== null && plan.plan !== 'free';
+        const name = plan ? PLAN_NAMES[plan.plan] : 'No plan';
+        // An organization is offered Team where the deployment sells it; a person, Developer.
+        const offered = session.org !== undefined && billing.teamPrices ? 'team' : 'developer';
+        const offeredPrices = offered === 'team' ? billing.teamPrices : billing.prices;
+        const counted = (value) => value.toLocaleString('en-GB');
+        const use = (label, used, limit) => html `<div class="stat"><span class="stat-label">${label}</span><span class="stat-value">${counted(used)}${limit === undefined ? html `` : html `<span class="meta"> of ${counted(limit)}</span>`}</span></div>`;
+        // This month's quotas, when the deployment holds tenants to them.
+        const quotas = options.quotas && plan ? SLOTLOCK_PLAN_QUOTAS[plan.plan] : null;
+        const resets = formatDate(slotlockQuotaPeriod(now()).resetsAt);
+        const quotaWarnings = quotas && used
+            ? ['operations', 'bookings'].flatMap((metric) => {
+                const quota = quotas[metric];
+                const stop = Math.floor((quota * quotas.stopPercent) / 100);
+                const spent = used.totals[metric];
+                const what = metric === 'operations' ? 'operations' : 'bookings';
+                const refused = metric === 'operations' ? 'every call but reading usage' : 'new bookings and holds';
+                if (spent >= stop) {
+                    return [html `<p class="notice warn" role="alert">This month's ${what} are used up: Slotlock refuses ${refused} with quota_exceeded until ${resets}.${paying ? html `` : html ` Upgrade for more.`}</p>`];
+                }
+                if (spent >= quota) {
+                    const billed = metric === 'operations' && billing.overage && plan?.plan === 'developer' && paying;
+                    return [html `<p class="notice warn" role="alert">You have used this month's ${counted(quota)} ${what}.${billed ? ` Those past it are billed at ${billing.overage?.price ?? ''}.` : ''} Slotlock refuses ${refused} past ${counted(stop)}, until ${resets}.</p>`];
+                }
+                if (spent * 100 >= quota * 80) {
+                    return [html `<p class="notice warn" role="status">You have used ${String(Math.floor((spent * 100) / quota))}% of this month's ${what}. They start again on ${resets}.</p>`];
+                }
+                return [];
+            })
+            : [];
+        const warning = html `${plan?.status === 'past_due'
+            ? html `<p class="notice warn" role="alert">Your last payment failed. Update your payment method to keep the ${name} plan.</p>`
+            : html ``}${quotaWarnings}`;
+        const free = SLOTLOCK_PLAN_LIMITS.free;
+        const developer = SLOTLOCK_PLAN_LIMITS[offered];
+        const upgrade = paying || !isAdmin(session)
+            ? html ``
+            : html `<section class="panel" id="upgrade">
+<h2>${PLAN_NAMES[offered]}</h2>
+<p>${String(developer.resources)} resources, ${String(developer.apiKeys)} API keys and ${String(developer.webhookEndpoints)} webhook endpoints${options.quotas ? html `, with ${counted(SLOTLOCK_PLAN_QUOTAS[offered].operations)} operations and ${counted(SLOTLOCK_PLAN_QUOTAS[offered].bookings)} bookings a month${offered === 'team' ? ' shared by the organization' : ''}` : html ``}.${offered === 'developer' && billing.overage && options.quotas
+                ? ` Operations past them are billed at ${billing.overage.price}, up to ${String(billing.overage.stopPercent)}% of them.`
+                : ''}</p>
+<form method="post" action="${root}/plan/upgrade">
+<input type="hidden" name="csrf" value="${token}">
+<input type="hidden" name="once" value="${formNonce(session)}">
+<fieldset class="modes"><legend>Billed</legend>
+<label class="choice"><input type="radio" name="interval" value="month" checked> Monthly, ${offeredPrices.month} a month</label>
+<label class="choice"><input type="radio" name="interval" value="year"> Yearly, ${offeredPrices.year} a year</label>
+</fieldset>
+<button class="primary" type="submit">Upgrade to ${PLAN_NAMES[offered]}</button>
+</form>
+<p class="fine">Paid through Stripe, in your currency, with tax added where it applies. Cancel at any time.</p>
+</section>`;
+        const manage = plan?.stripeCustomer && isAdmin(session)
+            ? html `<form class="inline" method="post" action="${root}/plan/manage"><input type="hidden" name="csrf" value="${token}"><input type="hidden" name="once" value="${formNonce(session)}"><button type="submit">Manage billing</button></form>`
+            : html ``;
+        const renews = paying && plan?.currentPeriodEnd
+            ? html `<p class="fine">${plan.status === 'past_due' ? 'Payment due since' : 'Renews'} ${formatDate(plan.currentPeriodEnd)}.</p>`
+            : html ``;
+        const usageSection = used
+            ? html `<section class="panel" id="usage">
+<h2>Usage this month</h2>
+<div class="stats">
+${use('Operations', used.totals.operations, quotas?.operations)}
+${use('Bookings', used.totals.bookings, quotas?.bookings)}
+${use('Holds', used.totals.holds, undefined)}
+${use('Webhook deliveries', used.totals.webhook_deliveries, undefined)}
+${use('Assistant messages', used.totals.assistant_messages, undefined)}
+</div>
+<p class="fine">Since ${month.from}, in UTC. An operation is a call that reached Slotlock, whatever it answered; it shows here within 15 seconds. A booking is a reservation, a calendar event or a confirmed hold, and with holds shows within the hour.</p>
+${used.keys.length === 0
+                ? html ``
+                : html `<div class="table"><table><thead><tr><th>Used by</th><th>Operations</th><th>Bookings</th><th>Holds</th></tr></thead><tbody>${used.keys.map((row) => html `<tr><td data-label="Used by">${row.keyId === null ? 'The dashboard and its assistant' : (keyName.get(row.keyId) ?? 'A deleted key')}</td><td data-label="Operations">${String(row.operations)}</td><td data-label="Bookings">${String(row.bookings)}</td><td data-label="Holds">${String(row.holds)}</td></tr>`)}</tbody></table></div>`}
+</section>`
+            : html ``;
+        const content = html `${thanks ? html `<p class="notice">${notice ?? ''}</p>` : noticeOf(notice)}
+${warning}
+${pageHead(`Plan: ${name}`, manage)}
+<div class="stats">
+${use('Resources', resourceCount, plan?.limits.resources)}
+${use('Active API keys', active.length, plan?.limits.apiKeys)}
+${webhooks ? use('Webhooks', webhooks.length, plan?.limits.webhookEndpoints) : html ``}
+</div>
+${renews}
+${usageSection}
+${plan ? html `` : html `<p class="fine">Free allows ${String(free.resources)} resources, ${String(free.apiKeys)} API keys and ${String(free.webhookEndpoints)} webhook endpoints${options.quotas ? html `, with ${counted(SLOTLOCK_PLAN_QUOTAS.free.operations)} operations and ${counted(SLOTLOCK_PLAN_QUOTAS.free.bookings)} bookings a month` : html ``}.</p>`}
+${upgrade}
+<section class="panel" id="custom">
+<h2>Custom</h2>
+<p>Slotlock on your own servers, with support from the people who build it.</p>
+<a class="button" href="${billing.contact}">Talk to the founder</a>
+</section>`;
+        return respond(status, layout('Plan', content, session, 'plan'));
+    }
+    async function upgradePlan(session, form) {
+        const billing = options.billing;
+        if (!billing)
+            return notFound(session);
+        if (session.env === 'test')
+            return planPage(session, 400, 'Plans are changed in Live.');
+        if (!isAdmin(session))
+            return planPage(session, 403, 'Only owners of the organization can change its plan.');
+        const interval = form.get('interval') === 'year' ? 'year' : 'month';
+        const tenantRef = tenantOf(session);
+        const plan = await billing.plan(tenantRef);
+        if (plan && plan.plan !== 'free') {
+            return planPage(session, 409, `You are on the ${PLAN_NAMES[plan.plan]} plan already.`);
+        }
+        let url;
+        try {
+            url = await billing.checkout({
+                tenantRef,
+                interval,
+                ...(session.org !== undefined && billing.teamPrices ? { plan: 'team' } : {}),
+                customer: plan?.stripeCustomer ?? null,
+                successUrl: `${publicRoot}/plan?checkout=done`,
+                cancelUrl: `${publicRoot}/plan`,
+            });
+        }
+        catch (error) {
+            if (error?.code === 'subscription_exists') {
+                return planPage(session, 409, 'You pay for a subscription already. Its plan shows here once Stripe confirms it; to change it, use Manage billing.');
+            }
+            ignoreRejection(options.onError?.(error));
+            return planPage(session, 502, 'The payment page did not open. Try again in a minute.');
+        }
+        return redirect(303, url);
+    }
+    async function manageBilling(session) {
+        const billing = options.billing;
+        if (!billing)
+            return notFound(session);
+        if (session.env === 'test')
+            return planPage(session, 400, 'Billing is managed in Live.');
+        if (!isAdmin(session))
+            return planPage(session, 403, 'Only owners of the organization can manage its billing.');
+        const plan = await billing.plan(tenantOf(session));
+        if (!plan?.stripeCustomer)
+            return planPage(session, 409, 'There is no billing to manage yet.');
+        let url;
+        try {
+            url = await billing.portal({ customer: plan.stripeCustomer, returnUrl: `${publicRoot}/plan` });
+        }
+        catch (error) {
+            ignoreRejection(options.onError?.(error));
+            return planPage(session, 502, 'Billing did not open. Try again in a minute.');
+        }
+        return redirect(303, url);
+    }
     /** The page a form was sent from, to show what went wrong with it. */
     function pageFor(route) {
         if (route.startsWith('/keys'))
@@ -1890,12 +2996,21 @@ ${settings
             return webhooksPage;
         if (route.startsWith('/waitlist') && options.resources.waitlist)
             return waitlistPage;
+        if (route.startsWith('/approvals') && options.resources.approvals)
+            return approvalsPage;
+        if ((route.startsWith('/locations') || route.startsWith('/groups')) && options.resources.grouping) {
+            return locationsPage;
+        }
         if (route.startsWith('/resources') || route === '/hours')
             return resourcesPage;
         if (route.startsWith('/assistant') && assistantStore())
             return assistantPage;
         if (route.startsWith('/settings'))
             return settingsPage;
+        if (route.startsWith('/plan') && options.billing)
+            return planPage;
+        if (route.startsWith('/teams') && teams)
+            return teamsPage;
         return overviewPage;
     }
     function hoursPage(session, state) {
@@ -1950,6 +3065,7 @@ ${state.unshown
         return resources.find((resource) => resource.id === id) ?? null;
     }
     const notFound = (session) => respond(404, layout('Not found', html `<p class="notice">That resource is not one of yours.</p>`, session));
+    const nothingHere = (session) => respond(404, layout('Not found', html `<p class="notice">Nothing is here.</p>`, session));
     async function hoursEditor(session, url) {
         const id = url.searchParams.get('resource');
         if (id === null) {
@@ -2037,8 +3153,83 @@ ${org ? html `<p>For the organization <strong>${org.login}</strong>.</p>` : html
         return respond(200, layout('Your new key', content, session, 'keys'));
     }
     /** Act in another of the session's organizations: the same session, sealed again. */
-    function switchOrganization(session, form) {
+    function switchEnvironment(session, form) {
+        const wanted = form.get('environment');
+        if (wanted !== 'live' && wanted !== 'test') {
+            return respond(400, layout('Refused', html `<p class="notice">Choose Live or Test.</p>`, session));
+        }
+        const { env: _, ...rest } = session;
+        const sealed = seal('slotlock-dashboard-session-v1', wanted === 'test' ? { ...rest, env: 'test' } : rest);
+        const left = Math.max(1, Math.floor((session.exp - now()) / 1000));
+        return redirect(303, root, [setCookie(SESSION_COOKIE, sealed, left)]);
+    }
+    /**
+     * Teams on Cloud: the person's GitHub organizations, as read at sign-in, each on or off. An owner
+     * turns one on or off; a member asks an owner; one that is on is a workspace to switch to.
+     */
+    async function teamsPage(session, status = 200, notice) {
+        if (!teams)
+            return nothingHere(session);
+        const orgs = session.orgs ?? [];
+        const enabled = orgs.length > 0 ? await teams.enabled(orgs.map((org) => org.id)) : new Set();
+        enabledOf.set(session, enabled);
+        const token = csrfToken(session);
+        const hidden = (org) => html `<input type="hidden" name="csrf" value="${token}"><input type="hidden" name="once" value="${formNonce(session)}"><input type="hidden" name="organization" value="${org.id}">`;
+        const rows = orgs.map((org) => {
+            const on = enabled.has(org.id);
+            const owner = org.role === 'admin';
+            const actions = on
+                ? html `${org.id === session.org ? html `<span class="muted">In use</span>` : html `<form class="inline" method="post" action="${root}/organization">${hidden(org)}<button type="submit">Switch to it</button></form>`}${owner
+                    ? html `<details class="act danger"><summary>Turn off</summary><div class="pop"><p>Its keys stop at once and no member can open it. What it holds stays until an owner turns it on again or erases it.</p>
+<form method="post" action="${root}/teams/disable">${hidden(org)}<label for="confirm-${org.id}">Type ${org.login} to confirm</label><input id="confirm-${org.id}" name="confirm" autocomplete="off" required><button class="danger" type="submit">Turn off</button></form></div></details>`
+                    : html ``}`
+                : owner
+                    ? html `<form class="inline" method="post" action="${root}/teams/enable">${hidden(org)}<button class="primary" type="submit">Turn on</button></form>`
+                    : html `<span class="muted">An owner can turn it on</span>`;
+            return html `<tr><td data-label="Organization" class="strong">${org.login}</td><td data-label="You are">${owner ? 'Owner' : 'Member'}</td><td data-label="Slotlock"><span class="pill ${on ? 'active' : 'revoked'}">${on ? 'On' : 'Off'}</span></td><td class="actions">${actions}</td></tr>`;
+        });
+        const content = html `${noticeOf(notice)}${pageHead('Teams')}
+<p>Work with the people in a GitHub organization: once an owner turns Slotlock on for it, every owner and member shares its resources, keys and history, and picks it from the workspace menu. Your own workspace stays yours.</p>
+${rows.length === 0
+            ? emptyState(ICONS.teams, 'Slotlock sees none of your GitHub organizations. It reads them as you sign in: after joining one, sign out and in again. An organization that restricts OAuth apps needs an owner to approve this one.')
+            : html `<div class="table"><table><thead><tr><th>Organization</th><th>You are</th><th>Slotlock</th><th><span class="visually-hidden">Actions</span></th></tr></thead><tbody>${rows}</tbody></table></div>
+<p class="fine">Who owns an organization is read from GitHub as you sign in. Leaving one ends your access at your next sign-in.</p>`}`;
+        return respond(status, layout('Teams', content, session, 'teams'));
+    }
+    async function changeTeam(session, form, on) {
+        if (!teams)
+            return nothingHere(session);
+        const org = session.orgs?.find((candidate) => candidate.id === form.get('organization'));
+        if (!org)
+            return teamsPage(session, 400, 'That is not one of your organizations.');
+        if (org.role !== 'admin')
+            return teamsPage(session, 403, `Only an owner of ${org.login} can turn Slotlock ${on ? 'on' : 'off'} for it.`);
+        // Who owns it was read as the person signed in: only a recent sign-in is trusted to say so.
+        if (now() - (session.exp - SESSION_TTL_MS) > FRESH_SIGN_IN_MS) {
+            return teamsPage(session, 403, `To turn Slotlock ${on ? 'on' : 'off'} for ${org.login}, sign out and in again: who owns it is read from GitHub as you sign in.`);
+        }
+        if (on) {
+            await teams.enable({ id: org.id, login: org.login }, personOf(session));
+            return teamsPage(session, 200, `Slotlock is on for ${org.login}. Its members pick it from the workspace menu.`);
+        }
+        if (form.get('confirm') !== org.login)
+            return teamsPage(session, 400, `Type ${org.login} to turn it off.`);
+        await teams.disable(org.id, personOf(session));
+        return teamsPage(session, 200, `Slotlock is off for ${org.login}: its keys stopped. What it holds stays until it is turned on again or erased.`);
+    }
+    async function switchOrganization(session, form) {
         const wanted = form.get('organization') ?? '';
+        if (teams) {
+            // Their own tenant, or an organization of theirs that is turned on now.
+            const org = session.orgs?.find((candidate) => candidate.id === wanted);
+            if (wanted !== '' && (!org || !(await teams.enabled([wanted])).has(wanted))) {
+                return respond(400, layout('Refused', html `<p class="notice">You cannot act for that organization. An owner turns it on from Teams.</p>`, session));
+            }
+            const { org: _, ...personal } = session;
+            const sealed = seal('slotlock-dashboard-session-v1', wanted === '' ? personal : { ...personal, org: wanted });
+            const left = Math.max(1, Math.floor((session.exp - now()) / 1000));
+            return redirect(303, root, [setCookie(SESSION_COOKIE, sealed, left)]);
+        }
         const org = session.orgs?.find((candidate) => candidate.id === wanted && served?.has(candidate.id));
         if (!served || !org) {
             return respond(400, layout('Refused', html `<p class="notice">You cannot act for that organization.</p>`, session));
@@ -2059,7 +3250,7 @@ ${org ? html `<p>For the organization <strong>${org.login}</strong>.</p>` : html
             code_challenge: challenge,
             code_challenge_method: 'S256',
             // Reading organization membership needs read:org; a personal tenant needs no scope at all.
-            ...(served ? { scope: 'read:org' } : {}),
+            ...(readsOrganizations ? { scope: 'read:org' } : {}),
         }).toString();
         const sealed = seal('slotlock-dashboard-sign-in-v1', {
             state,
@@ -2165,7 +3356,7 @@ ${org ? html `<p>For the organization <strong>${org.login}</strong>.</p>` : html
                 continue;
             }
             const id = String(organization.id);
-            if (served?.has(id)) {
+            if (teams || served?.has(id)) {
                 found.set(id, { id, login: organization.login, role: membership.role === 'admin' ? 'admin' : 'member' });
             }
         }
@@ -2173,13 +3364,146 @@ ${org ? html `<p>For the organization <strong>${org.login}</strong>.</p>` : html
             .sort((a, b) => a.login.localeCompare(b.login))
             .slice(0, MAX_SESSION_ORGANIZATIONS);
     }
+    /** Google's sign-in (OpenID Connect, code flow with PKCE and a nonce), back to the same callback. */
+    async function startGoogleSignIn(provider) {
+        const state = randomBytes(32).toString('base64url');
+        const verifier = randomBytes(32).toString('base64url');
+        const nonce = randomBytes(24).toString('base64url');
+        const target = new URL(provider.authorizeUrl ?? 'https://accounts.google.com/o/oauth2/v2/auth');
+        target.search = new URLSearchParams({
+            client_id: provider.clientId,
+            redirect_uri: callbackUrl,
+            response_type: 'code',
+            scope: 'openid email',
+            state,
+            nonce,
+            code_challenge: createHash('sha256').update(verifier).digest('base64url'),
+            code_challenge_method: 'S256',
+        }).toString();
+        const sealed = seal('slotlock-dashboard-sign-in-v1', {
+            state,
+            verifier,
+            nonce,
+            idp: 'google',
+            exp: now() + SIGN_IN_TTL_MS,
+        });
+        return redirect(302, target.href, [setCookie(SIGN_IN_COOKIE, sealed, SIGN_IN_TTL_MS / 1000)]);
+    }
+    /** Google's signing keys by key id, kept for as long as its answer says (an hour by default). */
+    let googleKeys = null;
+    async function readGoogleKeys(provider, refresh) {
+        if (googleKeys && !refresh && googleKeys.until > now())
+            return googleKeys.keys;
+        const response = await fetchImpl(provider.jwksUrl ?? 'https://www.googleapis.com/oauth2/v3/certs', {
+            headers: { Accept: 'application/json' },
+            redirect: 'manual',
+            signal: AbortSignal.timeout(GITHUB_TIMEOUT_MS),
+        });
+        if (!response.ok)
+            throw new Error(`Google keys answered HTTP ${response.status}`);
+        const body = await response.json();
+        const keys = new Map();
+        for (const jwk of isRecord(body) && Array.isArray(body.keys) ? body.keys : []) {
+            if (!isRecord(jwk) || jwk.kty !== 'RSA' || typeof jwk.kid !== 'string' || (jwk.alg !== undefined && jwk.alg !== 'RS256'))
+                continue;
+            const key = await globalThis.crypto.subtle
+                .importKey('jwk', { kty: 'RSA', n: jwk.n, e: jwk.e, alg: 'RS256', ext: true }, { name: 'RSASSA-PKCS1-v1_5', hash: 'SHA-256' }, false, ['verify'])
+                .catch(() => null);
+            if (key)
+                keys.set(jwk.kid, key);
+        }
+        const maxAge = Number(/max-age=(\d+)/.exec(response.headers.get('cache-control') ?? '')?.[1]);
+        googleKeys = { keys, until: now() + (Number.isFinite(maxAge) && maxAge > 0 ? Math.min(maxAge * 1000, 86_400_000) : GOOGLE_KEYS_DEFAULT_TTL_MS) };
+        return keys;
+    }
+    /** Whether an ID token's signature is Google's: RS256, by a key id Google publishes (read again once when unknown, as Google rotates them). */
+    async function googleSigned(provider, header, payload, signature) {
+        let parsed;
+        try {
+            parsed = JSON.parse(Buffer.from(header, 'base64url').toString('utf8'));
+        }
+        catch {
+            return false;
+        }
+        if (!isRecord(parsed) || parsed.alg !== 'RS256' || typeof parsed.kid !== 'string')
+            return false;
+        let key = (await readGoogleKeys(provider, false)).get(parsed.kid);
+        if (!key)
+            key = (await readGoogleKeys(provider, true)).get(parsed.kid);
+        if (!key)
+            return false;
+        return globalThis.crypto.subtle.verify('RSASSA-PKCS1-v1_5', key, Buffer.from(signature, 'base64url'), Buffer.from(`${header}.${payload}`, 'ascii'));
+    }
+    /**
+     * The person Google signed in, from the ID token its token endpoint returned for this code. The
+     * token's signature is checked against Google's published keys, and its issuer, audience (and
+     * azp), expiry and nonce (OpenID Connect Core 1.0, 3.1.3.7).
+     */
+    async function askGoogle(provider, code, verifier, nonce) {
+        try {
+            const response = await fetchImpl(provider.tokenUrl ?? 'https://oauth2.googleapis.com/token', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/x-www-form-urlencoded', Accept: 'application/json' },
+                body: new URLSearchParams({
+                    code,
+                    client_id: provider.clientId,
+                    client_secret: provider.clientSecret,
+                    redirect_uri: callbackUrl,
+                    grant_type: 'authorization_code',
+                    code_verifier: verifier,
+                }).toString(),
+                redirect: 'manual',
+                signal: AbortSignal.timeout(GITHUB_TIMEOUT_MS),
+            });
+            if (!response.ok) {
+                report(`Google token exchange failed: HTTP ${response.status}`);
+                return null;
+            }
+            const body = await response.json().catch(() => null);
+            const token = isRecord(body) && typeof body.id_token === 'string' ? body.id_token : null;
+            const [header, payload, signature, ...extra] = token?.split('.') ?? [];
+            if (!header || !payload || !signature || extra.length > 0 || ![header, payload, signature].every((part) => BASE64URL.test(part))) {
+                return null;
+            }
+            // Signed by Google, with one of the keys it publishes (RS256), whichever way the token came.
+            if (!(await googleSigned(provider, header, payload, signature))) {
+                report('Google sign-in refused: the ID token is not signed by Google');
+                return null;
+            }
+            const claims = JSON.parse(Buffer.from(payload, 'base64url').toString('utf8'));
+            if (!isRecord(claims))
+                return null;
+            const audience = Array.isArray(claims.aud) ? claims.aud : [claims.aud];
+            if ((claims.iss !== 'https://accounts.google.com' && claims.iss !== 'accounts.google.com') ||
+                !audience.includes(provider.clientId) ||
+                (audience.length > 1 && claims.azp !== provider.clientId) ||
+                typeof claims.exp !== 'number' ||
+                claims.exp * 1000 <= now() ||
+                typeof claims.nonce !== 'string' ||
+                !safeEqual(claims.nonce, nonce) ||
+                typeof claims.sub !== 'string' ||
+                !GOOGLE_SUBJECT.test(claims.sub)) {
+                report('Google sign-in refused: the ID token did not check out');
+                return null;
+            }
+            // The email names the person on the page only, and only once Google has verified it.
+            const email = claims.email_verified === true && typeof claims.email === 'string' && claims.email.length <= 254 && !/[<>\p{Cc}]/u.test(claims.email)
+                ? claims.email
+                : 'Google account';
+            return { uid: claims.sub, login: email, idp: 'google' };
+        }
+        catch (error) {
+            report(`Google sign-in failed: ${error instanceof Error ? error.name : 'unknown error'}`);
+            return null;
+        }
+    }
     async function askGitHub(code, verifier) {
         try {
             const token = await exchangeCode(code, verifier);
             if (token === null)
                 return null;
             const user = await readGitHubUser(token);
-            if (!user || !served)
+            if (!user || !readsOrganizations)
                 return user;
             const orgs = await readMemberships(token);
             return orgs === null ? null : { ...user, orgs };
@@ -2221,7 +3545,12 @@ ${org ? html `<p>For the organization <strong>${org.login}</strong>.</p>` : html
             if (!(await options.state.use('sign_in', pending.state, pending.exp))) {
                 return signedOutPage(400, SIGN_IN_AGAIN, [clearSignIn]);
             }
-            user = await askGitHub(code, verifier);
+            user =
+                pending.idp === 'google'
+                    ? google && typeof pending.nonce === 'string'
+                        ? await askGoogle(google, code, verifier, pending.nonce)
+                        : null
+                    : await askGitHub(code, verifier);
         }
         finally {
             signInsInFlight -= 1;
@@ -2234,12 +3563,10 @@ ${org ? html `<p>For the organization <strong>${org.login}</strong>.</p>` : html
             }
         }
         if (!user) {
-            return signedOutPage(502, 'GitHub did not complete the sign-in. Try again.', [clearSignIn]);
+            return signedOutPage(502, `${pending.idp === 'google' ? 'Google' : 'GitHub'} did not complete the sign-in. Try again.`, [clearSignIn]);
         }
-        if (!allowed(user.uid)) {
-            return signedOutPage(403, `This Slotlock server does not let @${user.login} sign in.`, [
-                clearSignIn,
-            ]);
+        if (!allowed(user.uid, user.idp)) {
+            return signedOutPage(403, `This Slotlock server does not let ${user.idp === 'google' ? user.login : `@${user.login}`} sign in.`, [clearSignIn]);
         }
         const orgs = user.orgs ?? [];
         if (served && orgs.length === 0) {
@@ -2250,7 +3577,8 @@ ${org ? html `<p>For the organization <strong>${org.login}</strong>.</p>` : html
             login: user.login,
             sid: randomBytes(24).toString('base64url'),
             exp: now() + SESSION_TTL_MS,
-            ...(served ? { orgs, org: orgs[0].id } : {}),
+            ...(user.idp === 'google' ? { idp: 'google' } : {}),
+            ...(served ? { orgs, org: orgs[0].id } : teams && user.idp !== 'google' ? { orgs } : {}),
         });
         return redirect(303, root, [
             clearSignIn,
@@ -2290,6 +3618,25 @@ ${org ? html `<p>For the organization <strong>${org.login}</strong>.</p>` : html
             return keysPage(session, 400, 'Choose an access level and an expiry from the lists.');
         }
         const days = KEY_EXPIRY_DAYS[expiry];
+        const limited = {
+            locations: [...new Set(form.getAll('limit_location'))],
+            groups: [...new Set(form.getAll('limit_group'))],
+        };
+        const resourceScope = limited.locations.length + limited.groups.length > 0 ? limited : undefined;
+        const limits = keyLimitsOf(form);
+        if (typeof limits === 'string')
+            return keysPage(session, 400, limits);
+        if (resourceScope) {
+            if (scopes.includes('admin')) {
+                return keysPage(session, 400, 'A key limited to locations or groups reads and writes only: choose that access.');
+            }
+            // Keys limited to part of the tenant come with Developer (RFC 0003 pricing); a server without
+            // plans allows them.
+            const plan = options.billing ? await options.billing.plan(tenantOf(session)) : null;
+            if (plan?.plan === 'free') {
+                return keysPage(session, 403, 'Keys limited to locations or groups come with the Developer and Team plans. See Plan.');
+            }
+        }
         try {
             const created = await options.keys.create({
                 tenantRef: tenantOf(session),
@@ -2297,6 +3644,8 @@ ${org ? html `<p>For the organization <strong>${org.login}</strong>.</p>` : html
                 scopes,
                 createdBy: personOf(session),
                 origin: 'dashboard',
+                ...(resourceScope ? { resourceScope } : {}),
+                ...(Object.keys(limits).length > 0 ? { limits } : {}),
                 ...(typeof days === 'number' ? { expiresAt: new Date(now() + days * DAY_MS) } : {}),
             });
             return shownOncePage(session, created.key, created.apiKey, false);
@@ -2306,8 +3655,13 @@ ${org ? html `<p>For the organization <strong>${org.login}</strong>.</p>` : html
             if (code === 'invalid_api_key_name') {
                 return keysPage(session, 400, 'Give the key a name of 1 to 100 characters.');
             }
+            if (code === 'invalid_api_key_resource_scope') {
+                return keysPage(session, 400, 'Choose up to 20 locations and 20 groups from the lists.');
+            }
             if (code === 'api_key_limit_reached') {
-                return keysPage(session, 409, 'You have as many keys as Slotlock allows. Revoke one first.');
+                return keysPage(session, 409, options.billing
+                    ? 'You have as many active keys as your plan allows. Revoke one first, or see Plan.'
+                    : 'You have as many keys as Slotlock allows. Revoke one first.');
             }
             throw error;
         }
@@ -2318,6 +3672,40 @@ ${org ? html `<p>For the organization <strong>${org.login}</strong>.</p>` : html
         actor: personOf(session),
         origin: 'dashboard',
     });
+    /** A key's limits from its form (RFC 0004 A5): each empty field the server's; else what is wrong. */
+    function keyLimitsOf(form) {
+        const whole = (name, most) => {
+            const text = (form.get(name) ?? '').trim();
+            if (text === '')
+                return undefined;
+            const value = /^[0-9]{1,7}$/.test(text) ? Number(text) : Number.NaN;
+            return Number.isSafeInteger(value) && value >= 1 && value <= most ? value : null;
+        };
+        const maxHolds = whole('max_holds', 10_000);
+        const maxHeldHours = whole('max_held_hours', 876_000);
+        const requestsPerMinute = whole('requests_per_minute', 100_000);
+        if (maxHolds === null || maxHeldHours === null || requestsPerMinute === null) {
+            return 'Give each limit as a whole number: live holds 1 to 10,000, hours held 1 to 876,000, requests a minute 1 to 100,000. Leave one empty for the server’s.';
+        }
+        return {
+            ...(maxHolds !== undefined ? { maxHolds } : {}),
+            ...(maxHeldHours !== undefined ? { maxHeldHours } : {}),
+            ...(requestsPerMinute !== undefined ? { requestsPerMinute } : {}),
+            ...(form.get('requires_approval') === 'on' ? { requiresApproval: true } : {}),
+        };
+    }
+    async function saveKeyLimits(session, form) {
+        const id = form.get('id') ?? '';
+        if (!UUID_PATTERN.test(id))
+            return keysPage(session, 404, 'That key is not one of yours.');
+        const limits = keyLimitsOf(form);
+        if (typeof limits === 'string')
+            return keysPage(session, 400, limits);
+        if (!(await options.keys.setLimits({ tenantRef: tenantOf(session), id, limits }))) {
+            return keysPage(session, 404, 'That key is not an active key of yours.');
+        }
+        return redirect(303, `${root}/keys`);
+    }
     async function changeKey(session, form, change) {
         const id = form.get('id') ?? '';
         if (!UUID_PATTERN.test(id))
@@ -2345,7 +3733,10 @@ ${org ? html `<p>For the organization <strong>${org.login}</strong>.</p>` : html
         catch (error) {
             const code = error.code;
             if (code === 'resource_limit_reached') {
-                return resourcesPage(session, 409, `You have ${SLOTLOCK_DASHBOARD_MAX_RESOURCES} resources, as many as the dashboard allows.`);
+                const limit = error.limit;
+                return resourcesPage(session, 409, typeof limit === 'number' && limit < SLOTLOCK_DASHBOARD_MAX_RESOURCES
+                    ? `You have ${String(limit)} resources, archived ones included, as many as your plan allows. Delete one, or see Plan.`
+                    : `You have ${SLOTLOCK_DASHBOARD_MAX_RESOURCES} resources, as many as the dashboard allows.`);
             }
             if (code === 'invalid_timezone') {
                 return resourcesPage(session, 400, `${timezone} is not a time zone Slotlock knows, such as Europe/London.`);
@@ -2395,7 +3786,7 @@ ${org ? html `<p>For the organization <strong>${org.login}</strong>.</p>` : html
             try {
                 first =
                     checked === 'ok' &&
-                        (await options.state.use('form', once, session.exp, session.uid));
+                        (await options.state.use('form', once, session.exp, session.idp === 'google' ? personOf(session) : session.uid));
             }
             catch (error) {
                 if (error.code !== 'dashboard_form_limit')
@@ -2406,6 +3797,10 @@ ${org ? html `<p>For the organization <strong>${org.login}</strong>.</p>` : html
                 return pageFor(route)(session, 409, 'That form was already sent. Reload the page to start again.');
             }
         }
+        // A tenant new to plans is put on the default plan before it adds what plans limit.
+        if (route === '/keys' || route === '/resources' || route === '/webhooks') {
+            await options.billing?.enrol?.(tenantOf(session));
+        }
         switch (route) {
             case '/sign-out':
                 await options.state.endSession(session.sid, session.exp);
@@ -2416,16 +3811,34 @@ ${org ? html `<p>For the organization <strong>${org.login}</strong>.</p>` : html
                 return changeKey(session, form, 'rotate');
             case '/keys/revoke':
                 return changeKey(session, form, 'revoke');
+            case '/keys/limits':
+                return saveKeyLimits(session, form);
             case '/resources':
                 return addResource(session, form);
             case '/hours':
                 return saveHours(session, form);
             case '/organization':
                 return switchOrganization(session, form);
+            case '/environment':
+                return switchEnvironment(session, form);
             case '/resources/rules':
                 return saveRules(session, form);
             case '/resources/pool':
                 return savePool(session, form);
+            case '/resources/profile':
+                return saveProfile(session, form);
+            case '/resources/place':
+                return savePlace(session, form);
+            case '/resources/parent':
+                return saveParent(session, form);
+            case '/locations':
+                return saveLocation(session, form);
+            case '/locations/delete':
+                return deleteGrouping(session, form, 'location');
+            case '/groups':
+                return saveGroup(session, form);
+            case '/groups/delete':
+                return deleteGrouping(session, form, 'group');
             case '/webhooks':
                 return addWebhook(session, form);
             case '/webhooks/delete':
@@ -2434,6 +3847,14 @@ ${org ? html `<p>For the organization <strong>${org.login}</strong>.</p>` : html
                 return changeWebhook(session, form, 'enable');
             case '/waitlist/leave':
                 return leaveWaitlist(session, form);
+            case '/approvals/decide':
+                return decideApproval(session, form);
+            case '/sandbox/seed':
+                return sandboxAction(session, form, 'seed');
+            case '/sandbox/reset':
+                return sandboxAction(session, form, 'reset');
+            case '/sandbox/fast-forward':
+                return sandboxAction(session, form, 'fast-forward');
             case '/assistant':
                 return sendToAssistant(session, form);
             case '/assistant/approve':
@@ -2444,10 +3865,20 @@ ${org ? html `<p>For the organization <strong>${org.login}</strong>.</p>` : html
                 return resetAssistant(session);
             case '/settings/assistant':
                 return saveAssistantSettings(session, form);
+            case '/settings/assistant/models':
+                return loadAssistantModels(session, form);
             case '/settings/assistant/test':
                 return testAssistant(session);
             case '/settings/assistant/remove':
                 return removeAssistantSettings(session);
+            case '/plan/upgrade':
+                return upgradePlan(session, form);
+            case '/plan/manage':
+                return manageBilling(session);
+            case '/teams/enable':
+                return changeTeam(session, form, true);
+            case '/teams/disable':
+                return changeTeam(session, form, false);
             default:
                 return respond(404, layout('Not found', html `<p class="notice">Nothing is here.</p>`, session));
         }
@@ -2471,11 +3902,21 @@ ${org ? html `<p>For the organization <strong>${org.login}</strong>.</p>` : html
                         case '/resources':
                         case '/webhooks':
                         case '/waitlist':
+                        case '/approvals':
                         case '/assistant':
+                        case '/plan':
+                        case '/teams':
                         case '/settings': {
                             const session = await readSession(request);
                             if (!session)
                                 return redirect(303, root);
+                            if (route === '/teams')
+                                return await teamsPage(session);
+                            if (route === '/plan') {
+                                return await planPage(session, 200, url.searchParams.get('checkout') === 'done'
+                                    ? 'Thank you. Your plan changes here once Stripe confirms the payment, usually within a minute.'
+                                    : undefined, url.searchParams.get('checkout') === 'done');
+                            }
                             if (route === '/keys')
                                 return await keysPage(session);
                             if (route === '/resources')
@@ -2484,22 +3925,34 @@ ${org ? html `<p>For the organization <strong>${org.login}</strong>.</p>` : html
                                 return await webhooksPage(session);
                             if (route === '/waitlist')
                                 return await waitlistPage(session);
+                            if (route === '/approvals')
+                                return await approvalsPage(session);
                             if (route === '/assistant')
                                 return await assistantPage(session);
-                            return await settingsPage(session);
+                            // A provider preset fills the assistant's form; nothing is saved until Save.
+                            const preset = SLOTLOCK_ASSISTANT_PRESETS.find((candidate) => candidate.id === url.searchParams.get('preset'));
+                            return await settingsPage(session, 200, undefined, preset ? { provider: preset.provider, baseUrl: preset.baseUrl } : undefined);
                         }
                         case '/style.css':
                             return asset(DASHBOARD_CSS, 'text/css; charset=utf-8', url, ASSET_VERSIONS.css);
                         case '/app.js':
                             return asset(DASHBOARD_JS, 'text/javascript; charset=utf-8', url, ASSET_VERSIONS.js);
+                        case '/favicon.svg':
+                            return asset(SLOTLOCK_DASHBOARD_ICON_SVG, 'image/svg+xml', url, ASSET_VERSIONS.icon);
                         case '/sign-in':
-                            return await startSignIn();
+                            return google && url.searchParams.get('with') === 'google'
+                                ? await startGoogleSignIn(google)
+                                : await startSignIn();
                         case '/callback':
                             return await finishSignIn(request, url);
                         case '/hours': {
                             const session = await readSession(request);
                             return session ? await hoursEditor(session, url) : redirect(303, root);
                         }
+                        case '/locations': {
+                            const session = await readSession(request);
+                            return session ? await locationsPage(session) : redirect(303, root);
+                        }
                         default: {
                             const resourceId = RESOURCE_PAGE.exec(route)?.[1];
                             if (resourceId !== undefined) {
@@ -2644,6 +4097,12 @@ code, pre, kbd, input[readonly] { font-family: var(--mono); font-size: 12.5px; }
 .workspace select { flex: 1; min-width: 0; height: 26px; border: 0; padding: 0 18px 0 2px; font-weight: 600; font-size: var(--text-md); background-color: transparent; box-shadow: none; text-overflow: ellipsis; }
 .workspace select:focus { box-shadow: none; }
 .workspace:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
+.environment { display: flex; gap: 2px; margin: calc(-1 * var(--space-2)) 0 0; padding: 2px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
+.environment button { flex: 1; height: 26px; padding: 0 var(--space-2); border: 0; border-radius: calc(var(--radius) - 2px); background: none; box-shadow: none; color: var(--muted); font-size: var(--text-sm); font-weight: 600; }
+.environment button[aria-pressed="true"] { background: var(--surface-2); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
+.environment button[aria-pressed="true"][value="test"] { background: var(--warn-wash); color: var(--warn); box-shadow: 0 0 0 1px var(--warn-line); }
+.test-banner { margin: 0 0 var(--space-4); padding: var(--space-2) var(--space-3); border: 1px dashed var(--warn-line); border-radius: var(--radius); background: var(--warn-wash); color: var(--warn); font-size: var(--text-md); }
+.test-banner code { background: none; padding: 0; }
 .avatar { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: var(--radius-sm); background: var(--ink); color: var(--surface); font-size: 11px; font-weight: 700; }
 .nav { display: grid; gap: 1px; }
 .nav a { position: relative; display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: var(--radius); color: var(--ink-2); font-weight: 500; font-size: var(--text-md); transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease); }
@@ -2744,9 +4203,13 @@ textarea { padding: 10px var(--space-3); resize: vertical; min-height: 72px; lin
 .create { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); margin: 0; }
 .create .grow { flex: 1 1 220px; }
 label > input, label > select, label > .unit-input { width: 100%; }
+label > textarea { width: 100%; padding: var(--space-2) var(--space-3); resize: vertical; }
+.presets { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); }
+.presets button { height: 28px; padding: 0 var(--space-3); font-size: var(--text-sm); }
 label.choice > input { width: 16px; }
 .create label:not(.grow) { flex: 0 1 auto; }
 form > label { margin-bottom: var(--space-3); }
+.create > label { margin-bottom: 0; }
 .grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4) var(--space-3); margin-bottom: var(--space-4); align-items: end; }
 .unit-input { display: flex; align-items: center; gap: var(--space-2); }
 .unit-input input { width: 100%; }
@@ -2761,6 +4224,12 @@ form .choice { margin: var(--space-1) 0 var(--space-3); }
 .types summary { cursor: pointer; color: var(--ink-2); font-size: var(--text-md); width: fit-content; }
 .checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-2) var(--space-4); margin-top: var(--space-3); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
 .checks .choice { font-size: var(--text-md); margin: 0; }
+.choices { border: 0; padding: 0; margin: var(--space-4) 0; min-width: 0; }
+.choices legend { font-size: var(--text-sm); font-weight: 500; color: var(--ink-2); padding: 0; }
+.choices .checks { margin-top: 6px; }
+.fine + .table, .fine + .empty { margin-top: var(--space-4); }
+.pop label { margin-bottom: var(--space-3); }
+.pop textarea { width: 100%; }
 
 /* Buttons */
 button, .button { font: inherit; font-size: var(--text-md); font-weight: 500; height: 36px; padding: 0 var(--space-4); border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); white-space: nowrap; transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease), transform var(--fast) var(--ease); }
@@ -2891,6 +4360,7 @@ pre { background: var(--surface-2); border: 1px solid var(--line); border-radius
   .side-top .brand .name { display: none; }
   .workspace { flex: 1; min-width: 0; padding: 3px 4px; }
   .workspace .avatar { display: none; }
+  .environment { margin: 0; flex: none; }
   .me { grid-column: 2; grid-row: 1; margin: 0; padding: 0; border: 0; }
   .me-avatar, .me .login { display: none; }
   .sign-out { width: 36px; height: 36px; padding: 0; }
@@ -2929,6 +4399,7 @@ pre { background: var(--surface-2); border: 1px solid var(--line); border-radius
   .week th[scope="row"] { display: block; padding: var(--space-2) var(--space-4) 0; }
   .actions { text-align: left; width: auto; padding-top: var(--space-2); }
   .act { margin: 0 var(--space-2) 0 0; }
+  .actions form.inline { margin-right: var(--space-2); }
   .act:first-child, form.inline + .act { margin-left: 0; }
   .act summary { border: 1px solid var(--line-strong); height: 32px; }
   .act.danger summary { border-color: var(--bad-line); }
@@ -2947,7 +4418,17 @@ pre { background: var(--surface-2); border: 1px solid var(--line); border-radius
   .pill, .chip, .nav a[aria-current="page"] { border: 1px solid CanvasText; }
 }
 `;
+/** A composite the store refused, in a person's words. */
+const COMPOSITE_PROBLEMS = Object.freeze({
+    parent_not_found: 'That is not one of your resources.',
+    composite_too_deep: 'A part has no parts of its own, and a whole is no part: choose a resource that stands alone.',
+    composite_parts_limit: 'A whole has at most 50 parts.',
+    composite_busy: 'One of them has a booking or hold still to come. A composite changes only while neither does.',
+});
+/** What the Plan page calls each plan. */
+const PLAN_NAMES = Object.freeze({ free: 'Free', developer: 'Developer', team: 'Team' });
 const ASSET_VERSIONS = Object.freeze({
     css: createHash('sha256').update(DASHBOARD_CSS).digest('base64url').slice(0, 12),
     js: createHash('sha256').update(DASHBOARD_JS).digest('base64url').slice(0, 12),
+    icon: createHash('sha256').update(SLOTLOCK_DASHBOARD_ICON_SVG).digest('base64url').slice(0, 12),
 });