slotlock 0.6.3 → 0.8.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,30 @@ 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_SETTINGS_CSS } from './dashboard-settings-ui.js';
+import { renderSlotlockMarkdown } from './dashboard-markdown.js';
+import { SLOTLOCK_ASSISTANT_CSS, slotlockAssistantActionVerb, slotlockAssistantScript, slotlockAssistantStepLabel, } from './dashboard-assistant-ui.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 +67,48 @@ 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/stream',
     '/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';
@@ -96,16 +136,85 @@ const KEY_EXPIRY_DAYS = Object.freeze({
  * still sends no referrer to any other site, so the callback URL's code never leaves.
  */
 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'";
+const CONTENT_SECURITY_POLICY = "default-src 'none'; script-src 'self'; style-src 'self'; connect-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 +232,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 +450,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 +522,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 +658,26 @@ 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' },
+    'usage.period_closed': { text: 'Month of use closed', tone: 'neutral' },
+    'resource.created': { text: 'Resource added', tone: 'good' },
+    'resource.updated': { text: 'Resource changed', tone: 'neutral' },
+    'resource.archived': { text: 'Resource archived', tone: 'neutral' },
+    'resource.restored': { text: 'Resource restored', tone: 'good' },
+    'resource.deleted': { text: 'Resource deleted', tone: 'bad' },
+    'key.created': { text: 'API key created', tone: 'good' },
+    'key.rotated': { text: 'API key rotated', tone: 'neutral' },
+    'key.revoked': { text: 'API key revoked', tone: 'bad' },
+    'webhook.created': { text: 'Webhook added', tone: 'good' },
+    'webhook.enabled': { text: 'Webhook enabled', tone: 'good' },
+    'webhook.deleted': { text: 'Webhook deleted', tone: 'neutral' },
+    'coverage.recorded': { text: 'Calendar synced', tone: 'neutral' },
+    'coverage.deleted': { text: 'Calendar sync removed', tone: 'neutral' },
 });
 const zoned = (zone, parts) => {
     try {
@@ -510,6 +783,10 @@ function formatDate(date) {
         return '—';
     return `${date.toISOString().slice(0, 16).replace('T', ' ')} UTC`;
 }
+/** A UTC day as people write it: `9 Dec 2026`. */
+function dayOf(date) {
+    return zoned('UTC', { day: 'numeric', month: 'short', year: 'numeric' }).format(date);
+}
 const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 /** A table's date: the day (`19 Oct 2026`), with the full UTC time on hover and for machines. */
 function dateCell(date) {
@@ -645,6 +922,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 +936,45 @@ 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;
+    // Plans whether or not billing sells them; billing's own reader when only it is given.
+    const plans = options.plans ??
+        (options.billing
+            ? {
+                plan: options.billing.plan,
+                ...(options.billing.enrol ? { enrol: options.billing.enrol } : {}),
+                contact: options.billing.contact,
+            }
+            : undefined);
+    if (plans?.contact) {
+        const protocol = new URL(plans.contact).protocol;
+        if (protocol !== 'https:' && protocol !== 'mailto:')
+            throw new Error('plans.contact must be an https or mailto URL');
+    }
+    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 +982,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 +1053,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 +1096,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 +1132,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 +1142,25 @@ export function createSlotlockDashboard(options) {
         ...(assistantStore()
             ? [{ section: 'assistant', label: 'Assistant', path: '/assistant', icon: ICONS.assistant }]
             : []),
+        ...(plans ? [{ section: 'plan', label: 'Usage', 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 +1175,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,44 +1199,77 @@ ${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>
 </html>`;
     }
-    const noticeOf = (notice) => notice ? html `<p class="notice" role="alert">${notice}</p>` : html ``;
+    // A notice is an alert only when the page answers with an error: a done or saved message is a
+    // status, so success is never painted in the error colour.
+    const noticeOf = (notice, status = 200) => notice
+        ? status >= 400
+            ? html `<p class="notice" role="alert">${notice}</p>`
+            : html `<p class="notice done" role="status">${notice}</p>`
+        : html ``;
     function signedOutPage(status, notice, cookies = []) {
         const content = html `<section class="sign-in">
 <span class="sign-in-mark">${ICONS.mark}</span>
 <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>
+${noticeOf(notice, status)}
+<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 +1282,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>`;
@@ -926,78 +1313,269 @@ ${noticeOf(notice)}
         }
         return html `${[...groups.values()].map((group) => html `<h3 class="day">${group.label}</h3><ul class="slots">${group.rows}</ul>`)}${more ? html `<p class="fine">Showing the first ${String(AGENDA_SHOWN)}.</p>` : html ``}`;
     }
+    /**
+     * What each change says in the feed, as a sentence: who did it (`verb` then the resource), or what
+     * happened (`passive`, the resource in place of {X}). Every change type the feed records has one,
+     * so the feed never shows a raw type such as resource.updated.
+     */
+    const ACTIVITY = Object.freeze({
+        'hold.created': { verb: 'held' },
+        'hold.updated': { verb: 'changed the hold on' },
+        'hold.confirmed': { verb: 'booked', after: ' from a hold' },
+        'hold.released': { verb: 'released the hold on' },
+        'hold.expired': { passive: 'The hold on {X} expired' },
+        'reservation.created': { verb: 'booked' },
+        'reservation.updated': { verb: 'moved a booking on' },
+        'reservation.cancelled': { verb: 'cancelled a booking on' },
+        'reservation.checked_in': { verb: 'checked in to' },
+        'reservation.no_show': { passive: '{X} was released after a no-show' },
+        'event.created': { verb: 'added an event on' },
+        'event.updated': { verb: 'changed an event on' },
+        'event.cancelled': { verb: 'cancelled an event on' },
+        'event.timezone_shifted': { passive: 'An event on {X} moved with a time zone change' },
+        'event.timezone_conflict': { passive: 'An event on {X} clashes after a time zone change' },
+        'coverage.stale': { passive: 'The calendar sync for {X} is behind' },
+        'coverage.recorded': { passive: 'The calendar for {X} synced' },
+        'coverage.deleted': { verb: 'removed the calendar sync for' },
+        'waitlist.offered': { passive: 'A waitlist offer went out for {X}' },
+        'waitlist.expired': { passive: 'A waitlist offer for {X} lapsed' },
+        'approval.requested': { passive: 'A booking on {X} waits for approval' },
+        'approval.granted': { verb: 'approved a booking on' },
+        'approval.declined': { verb: 'declined a booking on' },
+        'approval.expired': { passive: 'A booking on {X} was not approved in time' },
+        'resource.created': { verb: 'added' },
+        'resource.updated': { verb: 'edited' },
+        'resource.archived': { verb: 'archived' },
+        'resource.restored': { verb: 'restored' },
+        'resource.deleted': { verb: 'deleted' },
+        'key.created': { verb: 'created an API key' },
+        'key.rotated': { verb: 'rotated an API key' },
+        'key.revoked': { verb: 'revoked an API key' },
+        'webhook.created': { verb: 'added a webhook' },
+        'webhook.enabled': { verb: 'turned a webhook back on' },
+        'webhook.disabled': { passive: 'A webhook was turned off' },
+        'webhook.deleted': { verb: 'deleted a webhook' },
+        'usage.period_closed': { passive: 'A month of use closed' },
+    });
+    /** Changes about a resource, which name it; the rest stand alone. */
+    const ABOUT_A_RESOURCE = /^(hold|reservation|event|coverage|waitlist|approval|resource)\./;
     function activityPanel(changes, byId, keys, session) {
         if (changes.length === 0) {
             return html `<p class="empty">No activity yet. What agents book, move and cancel shows here.</p>`;
         }
         const keyNames = new Map(keys.map((key) => [`api_key:${key.id}`, key.name]));
-        return html `<ol class="feed">${changes.map((change) => {
-            const label = CHANGE_LABELS[change.type] ?? { text: change.type, tone: 'neutral' };
-            const who = change.actor === null
-                ? brandName
-                : change.actor === personOf(session)
-                    ? 'You'
-                    : (keyNames.get(change.actor) ??
-                        (change.actor.startsWith('api_key:')
-                            ? '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)));
-            const where = change.resourceId
-                ? resourceName(byId.get(change.resourceId), change.resourceId)
-                : null;
-            return html `<li class="event"><span class="dot ${label.tone}" aria-hidden="true"></span><span class="what" title="${where ? `${label.text} on ${where}` : label.text}"><span class="title">${label.text}${where ? html ` <span class="on">on</span> ${where}` : html ``}</span><span class="meta">${who} · <time datetime="${change.occurredAt.toISOString()}" title="${formatDate(change.occurredAt)}">${ago(change.occurredAt, now())}</time></span></span></li>`;
+        const whoOf = (actor) => actor === null
+            ? brandName
+            : actor === personOf(session)
+                ? 'You'
+                : (keyNames.get(actor) ??
+                    (actor.startsWith('api_key:')
+                        ? 'A deleted key'
+                        : /^github:\d+$/.test(actor)
+                            ? `GitHub user ${actor.slice(7)}`
+                            : /^google:/.test(actor)
+                                ? 'A Google user'
+                                : /^dashboard-assistant:(github|google):/.test(actor)
+                                    ? actor === assistantActor(session)
+                                        ? `Assistant for ${shownAs(session)}`
+                                        : actor.startsWith('dashboard-assistant:google:')
+                                            ? 'Assistant for a Google user'
+                                            : `Assistant for GitHub user ${actor.slice(27)}`
+                                    : actor.slice(0, 60)));
+        // Repeats in a row (one actor, one change, one resource) read as one line with a count.
+        const runs = [];
+        for (const change of changes) {
+            const last = runs.at(-1);
+            if (last && last.change.actor === change.actor && last.change.type === change.type && last.change.resourceId === change.resourceId) {
+                last.times += 1;
+            }
+            else {
+                runs.push({ change, times: 1 });
+            }
+        }
+        return html `<ol class="feed">${runs.map(({ change, times }) => {
+            const tone = CHANGE_LABELS[change.type]?.tone ?? 'neutral';
+            const where = change.resourceId ? resourceName(byId.get(change.resourceId), change.resourceId) : null;
+            const object = where ?? (ABOUT_A_RESOURCE.test(change.type) ? 'a resource' : null);
+            const words = ACTIVITY[change.type];
+            let sentence;
+            if (change.type === 'usage.threshold_reached') {
+                const metric = typeof change.data.metric === 'string' ? change.data.metric : 'use';
+                const percent = typeof change.data.percent === 'number' ? change.data.percent : null;
+                sentence = html `${percent === null ? 'A monthly quota' : `${String(percent)}% of this month's ${metric}`} used`;
+            }
+            else if (words?.verb) {
+                sentence = html `<strong>${whoOf(change.actor)}</strong> ${words.verb}${object ? html ` <strong>${object}</strong>` : html ``}${words.after ?? ''}`;
+            }
+            else if (words?.passive) {
+                const [before, rest] = words.passive.split('{X}');
+                sentence = rest === undefined ? html `${before}` : html `${before}<strong>${object ?? 'a resource'}</strong>${rest}`;
+            }
+            else {
+                // A change type this dashboard does not know yet: its label, or its name in words.
+                const label = CHANGE_LABELS[change.type]?.text ?? change.type.replace(/[._]/g, ' ').replace(/^./, (first) => first.toUpperCase());
+                sentence = html `${label}${object ? html ` <span class="on">on</span> <strong>${object}</strong>` : html ``}`;
+            }
+            return html `<li class="event"><span class="dot ${tone}" aria-hidden="true"></span><span class="what"><span class="title">${sentence}${times > 1 ? html ` <span class="times">${times === 2 ? 'twice' : `${String(times)} times`}</span>` : html ``}</span></span><time class="when" datetime="${change.occurredAt.toISOString()}" title="${formatDate(change.occurredAt)}">${ago(change.occurredAt, now())}</time></li>`;
         })}</ol>`;
     }
+    /** The MCP and A2A endpoints with Copy, and the command that adds Slotlock to an MCP client. */
+    const connectAgent = () => html `${endpoints()}<details class="command"><summary>Claude Code command</summary><div class="copy-block"><pre><code id="mcp-command">claude mcp add --transport http slotlock ${mcpUrl} --header "Authorization: Bearer YOUR_KEY"</code></pre><button class="quiet" type="button" data-copy="mcp-command">Copy</button></div></details>`;
     async function overviewPage(session, status = 200, notice) {
         const tenantRef = tenantOf(session);
         const start = new Date(now());
         const window = { start, end: new Date(start.getTime() + AGENDA_DAYS * DAY_MS) };
-        const [keys, resources, agenda, changes] = await Promise.all([
+        const assistant = assistantStore();
+        const [keys, resources, agenda, changes, approvals, waitlist, model] = await Promise.all([
             options.keys.list({ tenantRef }),
             options.resources.list(tenantRef),
             options.resources.agenda?.(tenantRef, window, AGENDA_LIMIT),
             options.resources.recentChanges?.(tenantRef, ACTIVITY_LIMIT),
+            options.resources.approvals?.list(tenantRef, APPROVALS_SHOWN),
+            options.resources.waitlist?.list(tenantRef, WAITLIST_SHOWN),
+            assistant?.getSettings(tenantRef),
         ]);
+        // The plan is Live's: the test environment has none of its own.
+        const standing = plans && session.env !== 'test' ? await planStanding(session, 'overview', keys) : null;
         const byId = new Map(resources.map((resource) => [resource.id, resource]));
         const active = keys.filter((key) => !key.revokedAt && (key.expiresAt === null || key.expiresAt.getTime() > now()));
         const counted = (count) => agenda && agenda.length >= AGENDA_LIMIT ? `${count}+` : String(count);
         const booked = agenda?.filter((entry) => entry.kind !== 'hold').length ?? 0;
         const held = agenda?.filter((entry) => entry.kind === 'hold').length ?? 0;
-        const stat = (label, value, href) => html `<a class="stat" href="${href}"><span class="stat-label">${label}</span><span class="stat-value">${value}</span></a>`;
+        const waiting = approvals?.filter((approval) => approval.status === 'pending').length ?? 0;
+        const attention = [
+            ...(standing?.attention ?? []),
+            ...(waiting > 0
+                ? [
+                    attentionItem('info', `${String(waiting)} ${waiting === 1 ? 'booking waits' : 'bookings wait'} for your approval.`, {
+                        href: `${root}/approvals`,
+                        label: 'Review',
+                    }),
+                ]
+                : []),
+        ];
+        const admin = isAdmin(session);
         const steps = [
-            { done: resources.length > 0, text: 'Add what your agents book', href: `${root}/resources` },
-            { done: active.length > 0, text: 'Create a key for an agent', href: `${root}/keys` },
-            { done: (changes?.length ?? 0) > 0, text: 'Connect the agent and book', href: `${root}/keys` },
+            { done: resources.length > 0, title: 'Add a resource', action: { href: `${root}/resources`, label: 'Add resource' } },
+            { done: active.length > 0, title: 'Create an API key', action: { href: `${root}/keys#new-key`, label: 'Create key' } },
+            // Done once an agent has used a key.
+            { done: active.some((key) => key.lastUsedAt !== null), title: 'Connect an agent', action: { href: `${root}#connect`, label: 'Connect' } },
+            ...(assistant
+                ? [
+                    admin
+                        ? { done: Boolean(model), title: 'Connect a model to the assistant', action: { href: `${root}/settings`, label: 'Connect' } }
+                        : { done: Boolean(model), title: 'Try the assistant', action: { href: `${root}/assistant`, label: 'Open' } },
+                ]
+                : []),
         ];
-        const content = html `${noticeOf(notice)}
-${pageHead('Overview')}
-${steps.every((step) => step.done)
+        const done = steps.filter((step) => step.done).length;
+        const next = steps.findIndex((step) => !step.done);
+        // Nothing made and nothing happened yet: only the way in.
+        const fresh = resources.length === 0 && active.length === 0 && (changes?.length ?? 0) === 0;
+        const setupCard = next === -1
             ? html ``
-            : html `<section class="panel setup"><h2>Get started</h2><ol class="steps">${steps.map((step) => html `<li class="${step.done ? 'done' : ''}"><span class="check" aria-hidden="true">${step.done ? ICONS.check : html ``}</span>${step.done ? html `<span>${step.text}</span>` : html `<a href="${step.href}">${step.text}</a>`}${step.done ? html `<span class="visually-hidden">(done)</span>` : html ``}</li>`)}</ol></section>`}
-<div class="stats">
-${agenda ? stat(`Booked, next ${AGENDA_DAYS} days`, counted(booked), `${root}#upcoming`) : html ``}
-${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>
+            : html `<section class="panel setup-card"><div class="panel-head"><h2>Get started</h2><span class="meta">${String(done)} of ${String(steps.length)}</span></div><div class="segments" aria-hidden="true">${steps.map((step) => html `<span${step.done ? html ` class="done"` : html ``}></span>`)}</div><ol class="setup-steps">${steps.map((step, index) => html `<li class="${step.done ? 'done' : index === next ? 'next' : ''}"><span class="check" aria-hidden="true">${step.done ? ICONS.check : html ``}</span><span class="step-title">${step.title}${step.done ? html `<span class="visually-hidden"> (done)</span>` : html ``}</span>${index === next ? html `<a class="button primary" href="${step.action.href}">${step.action.label}</a>` : html ``}</li>`)}</ol></section>`;
+        // Mostly set up: one line that leads to the next step.
+        const setupRow = next === -1
+            ? html ``
+            : html `<a class="setup-row" href="${steps[next]?.action.href ?? root}"><span class="segments" aria-hidden="true">${steps.map((step) => html `<span${step.done ? html ` class="done"` : html ``}></span>`)}</span><span>Get started · ${String(done)} of ${String(steps.length)} · <strong>${steps[next]?.title ?? ''}</strong></span></a>`;
+        const stat = (label, value, href, tone = '') => html `<a class="stat${tone}" href="${href}"><span class="stat-label">${label}</span><span class="stat-value">${value}</span></a>`;
+        const tiles = [
+            ...(agenda ? [stat(`Bookings, next ${AGENDA_DAYS} days`, counted(booked), `${root}#upcoming`), stat('Live holds', counted(held), `${root}#upcoming`)] : []),
+            ...(approvals ? [stat('Waiting for approval', String(waiting), `${root}/approvals`, waiting > 0 ? ' attention-stat' : '')] : []),
+            ...(waitlist ? [stat('On the waitlist', String(waitlist.filter((entry) => entry.status !== 'expired').length), `${root}/waitlist`)] : []),
+            stat('Resources', String(resources.length), `${root}/resources`),
+            stat('Active keys', String(active.length), `${root}/keys`),
+        ].slice(0, 4);
+        const planCard = standing
+            ? html `<section class="panel plan-card"><div class="panel-head"><h2>${standing.name}</h2><a href="${root}/plan">Usage</a></div><div class="meters stacked">${standing.meters}</div>${standing.canUpgrade && standing.pressing
+                ? html `<a class="button primary" href="${root}/plan#upgrade">Upgrade</a>`
+                : html ``}</section>`
+            : html ``;
+        const connectCard = html `<section class="panel" id="connect"><h2>Connect an agent</h2>${connectAgent()}</section>`;
+        const body = fresh
+            ? standing
+                ? html `<div class="split">${setupCard}<div class="column">${planCard}</div></div>`
+                : setupCard
+            : html `${done * 2 >= steps.length ? setupRow : setupCard}
+<div class="stats">${tiles}</div>
+${session.env === 'test' && options.resources.sandbox ? sandboxPanel(session, resources.length) : html ``}
 <div class="split">
+<div class="column">
 ${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 ``}
+${changes ? html `<section class="panel"><h2>Activity</h2>${activityPanel(changes, byId, keys, session)}</section>` : html ``}
+</div>
+<div class="column">${planCard}${connectCard}</div>
 </div>`;
+        const content = html `${noticeOf(notice, status)}
+${pageHead('Overview')}
+${attentionList(attention)}
+${fresh && session.env === 'test' && options.resources.sandbox ? sandboxPanel(session, resources.length) : html ``}
+${body}`;
         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 content = html `${noticeOf(notice)}
+        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, status)}
 ${pageHead('API keys')}
 <section class="panel">
 <h2>Connect an agent</h2>
@@ -1013,19 +1591,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 = plans ? await plans.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)}
+        const content = html `${noticeOf(notice, status)}
+${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,39 +1633,124 @@ ${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) {
-        const rules = options.availability ?? [];
-        const current = session.orgs?.find((org) => org.id === session.org);
-        const content = html `${noticeOf(notice)}
-${pageHead('Settings')}
-${await assistantSettingsPanel(session)}
-<section class="panel">
-<h2>Endpoints</h2>
-${endpoints()}
-</section>
-<section class="panel">
-<h2>Server hours</h2>
-${rules.length === 0
-            ? html `<p class="empty">None: agents find a free slot only on resources with hours of their own.</p>`
-            : html `<ul class="hours">${rules.map((rule) => html `<li>${daysOf(rule.rrule)}: ${hoursOf(rule.startMinutes, rule.durationMinutes)}</li>`)}</ul>`}
-<p class="fine">For resources without hours of their own, in each resource's time zone. Set by the server's operator.</p>
+    /** 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, status)}
+<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">
-<h2>Account</h2>
-<dl class="facts"><dt>Signed in as</dt><dd>@${session.login}</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 ``}
+<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'));
+    }
+    /** Settings' sections, each its own page: the assistant's form apart from what is only read. */
+    const SETTINGS_SECTIONS = Object.freeze([
+        { id: 'assistant', label: 'Assistant', path: '/settings' },
+        { id: 'endpoints', label: 'Endpoints', path: '/settings/endpoints' },
+        { id: 'hours', label: 'Hours', path: '/settings/hours' },
+        { id: 'account', label: 'Account', path: '/settings/account' },
+    ]);
+    async function settingsPage(session, status = 200, notice, draft, section = 'assistant') {
+        const store = assistantStore();
+        const sections = SETTINGS_SECTIONS.filter((entry) => entry.id !== 'assistant' || store);
+        const shown = section === 'assistant' && !store ? 'endpoints' : section;
+        const connected = store ? Boolean(await store.getSettings(tenantOf(session))) : false;
+        const nav = html `<nav class="subnav" aria-label="Settings">${sections.map((entry) => html `<a href="${root}${entry.path}"${entry.id === shown ? html ` aria-current="page"` : html ``}>${entry.label}${entry.id === 'assistant' && connected ? html `<span class="nav-dot" aria-hidden="true"></span>` : html ``}</a>`)}</nav>`;
+        let body;
+        if (shown === 'assistant') {
+            body = await assistantSettingsSection(session, status, notice, draft);
+        }
+        else if (shown === 'endpoints') {
+            body = html `${noticeOf(notice, status)}<div class="set-card"><div class="row"><span class="row-label">MCP</span><div class="row-value">${copyField('mcp-url', mcpUrl)}</div></div><div class="row"><span class="row-label">A2A</span><div class="row-value">${copyField('a2a-url', a2aUrl)}</div></div></div>`;
+        }
+        else if (shown === 'hours') {
+            const rules = options.availability ?? [];
+            body = html `${noticeOf(notice, status)}<div class="set-card"><div class="row"><span class="row-label">Default hours</span><div class="row-value${rules.length === 0 ? ' muted' : ''}">${rules.length === 0
+                ? 'None. Agents find free time only on resources with hours of their own.'
+                : html `${rules.map((rule, index) => html `${index > 0 ? html `<br>` : html ``}${daysOf(rule.rrule)}: ${hoursOf(rule.startMinutes, rule.durationMinutes)}`)}`}</div></div></div><p class="fine">In each resource's own time zone, for resources without hours of their own. Set by the server's operator.</p>`;
+        }
+        else {
+            const current = session.orgs?.find((org) => org.id === session.org);
+            const others = (session.orgs ?? []).filter((org) => org.id !== current?.id);
+            body = html `${noticeOf(notice, status)}<div class="set-card"><div class="row"><span class="row-label">Signed in as</span><div class="row-value">${shownAs(session)}</div></div><div class="row"><span class="row-label">${current ? 'Organization' : 'Workspace'}</span><div class="row-value">${current ? current.login : 'Personal'}</div></div>${current && others.length > 0
+                ? html `<div class="row"><span class="row-label">Also a member of</span><div class="row-value">${others.map((org) => org.login).join(', ')}</div></div>`
+                : html ``}<div class="row"><span class="row-label">Session ends</span><div class="row-value">${formatDate(new Date(session.exp))}</div></div></div>${current ? html `<p class="fine">Membership is read from GitHub when you sign in.</p>` : html ``}`;
+        }
+        const content = html `${pageHead('Settings')}<div class="settings">${nav}<div class="settings-body">${body}</div></div>`;
         return respond(status, layout('Settings', content, session, 'settings'));
     }
+    /** A value to copy: monospace, cut with an ellipsis, with a Copy button (app.js). */
+    const copyField = (id, value) => html `<dl class="endpoints"><dd><code id="${id}">${value}</code><button class="quiet" type="button" data-copy="${id}">Copy</button></dd></dl>`;
     /** The tenant's resource with that id and every resource (for names), or null for anything else. */
     async function resourceDetailPage(session, id, status = 200, notice) {
         const tenantRef = tenantOf(session);
@@ -1076,12 +1759,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);
@@ -1103,10 +1795,11 @@ ${current ? html `<p class="fine">Membership is read from GitHub when you sign i
             const fallback = from ? `As its default (${from.value ? 'on' : 'off'}, ${from.from})` : 'Off';
             return html `<label>${label}<select name="${key}"><option value=""${chosen(undefined)}>${fallback}</option><option value="1"${chosen(true)}>On</option><option value="0"${chosen(false)}>Off</option></select></label>`;
         };
-        const content = html `${noticeOf(notice)}
+        const content = html `${noticeOf(notice, status)}
 <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 +1824,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 +1856,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 +1936,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 +2099,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 +2134,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
@@ -1240,7 +2143,7 @@ ${activity ? html `<section class="panel"><h2>Activity</h2>${activityPanel(activ
 <form method="post" action="${root}/webhooks/delete"><input type="hidden" name="csrf" value="${token}"><input type="hidden" name="once" value="${formNonce(session)}"><input type="hidden" name="id" value="${endpoint.id}"><button class="danger" type="submit">Delete webhook</button></form></div></details></td>
 </tr>`;
         });
-        const content = html `${noticeOf(notice)}
+        const content = html `${noticeOf(notice, status)}
 ${pageHead('Webhooks')}
 <div class="stats">
 <div class="stat"><span class="stat-label">Endpoints</span><span class="stat-value">${String(endpoints.length)}</span></div>
@@ -1271,7 +2174,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 ${plans ? 'your plan' : 'Slotlock'} allows. Delete one first${plans ? ', or see Usage' : ''}.`
                 : created.code === 'invalid_webhook_url'
                     ? 'Give an https URL, with no user name, password or #fragment.'
                     : 'Choose events from the list.';
@@ -1340,7 +2243,7 @@ ${endpoints.length === 0
         });
         const waiting = entries.filter((entry) => entry.status === 'waiting').length;
         const offered = entries.filter((entry) => entry.status === 'offered').length;
-        const content = html `${noticeOf(notice)}
+        const content = html `${noticeOf(notice, status)}
 ${pageHead('Waitlist')}
 <div class="stats">
 <div class="stat"><span class="stat-label">Waiting</span><span class="stat-value">${String(waiting)}</span></div>
@@ -1360,6 +2263,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, status)}
+${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 +2367,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 +2408,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 +2442,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 +2458,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 +2497,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,49 +2523,153 @@ ${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 },
         };
     }
+    /** When a change happens, in its resource's time zone when the card knows it, else UTC. */
+    function whenOf(start, end, zone) {
+        if (typeof start !== 'string')
+            return null;
+        const from = new Date(start);
+        if (Number.isNaN(from.getTime()))
+            return null;
+        const timeZone = zone ?? 'UTC';
+        let day;
+        let time;
+        try {
+            day = new Intl.DateTimeFormat('en-GB', { weekday: 'short', day: 'numeric', month: 'short', timeZone });
+            time = new Intl.DateTimeFormat('en-GB', { hour: '2-digit', minute: '2-digit', hourCycle: 'h23', timeZone });
+        }
+        catch {
+            return null;
+        }
+        const to = typeof end === 'string' ? new Date(end) : null;
+        const span = to && !Number.isNaN(to.getTime())
+            ? day.format(from) === day.format(to)
+                ? `${time.format(from)}–${time.format(to)}`
+                : `${time.format(from)} – ${day.format(to)}, ${time.format(to)}`
+            : time.format(from);
+        return `${day.format(from)}, ${span} ${timeZone}`;
+    }
+    /** What a proposed change's fields are called on its card. */
+    const FACT_NAMES = Object.freeze({
+        resource_id: 'Resource',
+        resource_ids: 'Resources',
+        pool_id: 'Pool',
+        title: 'Title',
+        external_ref: 'Reference',
+        event_id: 'Booking',
+        hold_id: 'Hold',
+        ttl_seconds: 'Held for',
+        notes: 'Note',
+        description: 'Note',
+        metadata: 'Details',
+        slots: 'Times',
+    });
     /**
-     * A field of a proposed change, as the card shows it: all of it, wrapped, never cut (the
-     * proposal is bounded instead). A resource is named, with its id beside the name.
+     * A field of a proposed change, as the card shows it: all of it, wrapped, never cut (the proposal
+     * is bounded instead). A resource is named; its id is the name's title.
      */
     function fieldValue(name, value, names) {
-        const named = (id) => (names.has(id) ? `${names.get(id)} (${id})` : id);
-        if (typeof value === 'string') {
-            return html `<span class="wrap">${name === 'resource_id' ? named(value) : value}</span>`;
+        const named = (id) => names.has(id) ? html `<span title="${id}">${names.get(id)}</span>` : html `<code>${id}</code>`;
+        if (name === 'resource_id' && typeof value === 'string')
+            return named(value);
+        if (name === 'resource_ids' && Array.isArray(value) && value.every((item) => typeof item === 'string')) {
+            return html `${value.map((id, index) => html `${index > 0 ? ', ' : ''}${named(id)}`)}`;
+        }
+        if (name === 'ttl_seconds' && typeof value === 'number') {
+            return html `${value >= 60 ? `${Math.round(value / 60)} min` : `${value} s`}`;
         }
+        if ((name === 'event_id' || name === 'hold_id') && typeof value === 'string')
+            return html `<code>${value}</code>`;
+        if (typeof value === 'string')
+            return html `<span class="wrap">${value}</span>`;
         if (Array.isArray(value) && value.every((item) => typeof item === 'string')) {
-            return html `<span class="wrap">${value.map((item) => (name === 'resource_ids' ? named(item) : item)).join(', ')}</span>`;
+            return html `<span class="wrap">${value.join(', ')}</span>`;
         }
-        if (typeof value === 'number' || typeof value === 'boolean' || value === null) {
+        if (typeof value === 'number' || typeof value === 'boolean' || value === null)
             return html `${String(value)}`;
-        }
-        return html `<pre class="wrap">${JSON.stringify(value, null, 2)}</pre>`;
+        return html `<pre>${JSON.stringify(value, null, 2)}</pre>`;
     }
-    function actionCard(session, action, names) {
+    /** Why a change or a step was refused, in words, for the codes a member meets. */
+    const REFUSALS = Object.freeze({
+        overlap: 'that time was just taken',
+        pool_full: 'the pool is full then',
+        not_found: 'it no longer exists',
+        resource_not_found: 'the resource no longer exists',
+        event_not_found: 'the booking no longer exists',
+        invalid_input: 'the request was incomplete',
+        invalid_arguments: 'the request was incomplete',
+        validation_error: 'the request was incomplete',
+        turn_read_budget_exceeded: 'one message may read only so much',
+        too_many_pending_changes: 'too many changes are waiting for you',
+        change_too_large_to_show: 'the change was too large to show',
+        tool_not_available: 'the assistant may not do that',
+        too_many_calls: 'too many at once',
+        quota_exceeded: "this month's allowance is used up",
+        approval_pending: 'it is waiting for an approval',
+    });
+    const refusal = (code) => REFUSALS[code] ?? code.replaceAll('_', ' ');
+    function actionCard(session, action, names, zones) {
+        const verb = slotlockAssistantActionVerb(action.operation);
+        const title = action.summary || `${verb.verb}: ${toolTitles.get(action.operation) ?? action.operation}`;
+        if (action.status !== 'pending') {
+            const [tone, word] = action.status === 'done'
+                ? ['ok', verb.done]
+                : action.status === 'dismissed'
+                    ? ['', 'Declined']
+                    : action.status === 'approved'
+                        ? ['', 'Running…']
+                        : ['bad', `Refused: ${refusal(action.outcome ?? 'failed')}`];
+            return html `<li class="turn action" id="action-${action.id}"><p class="receipt ${tone}"><span>${title}</span><span class="why">${word}</span></p></li>`;
+        }
         const token = csrfToken(session);
-        const fields = Object.entries(action.input).filter(([name]) => name !== 'idempotency_key');
-        const summary = action.summary ? html `<p class="action-summary">${action.summary}</p>` : html ``;
-        const state = {
-            pending: { text: 'Waiting for you', tone: 'held' },
-            approved: { text: 'Running', tone: 'held' },
-            dismissed: { text: 'Dismissed', tone: 'revoked' },
-            done: { text: 'Done', tone: 'active' },
-            failed: { text: 'Failed', tone: 'revoked' },
-        }[action.status] ?? { text: action.status, tone: 'revoked' };
-        const buttons = action.status === 'pending'
-            ? html `<div class="action-buttons"><form class="inline" method="post" action="${root}/assistant/approve"><input type="hidden" name="csrf" value="${token}"><input type="hidden" name="once" value="${formNonce(session)}"><input type="hidden" name="action" value="${action.id}"><button class="primary" type="submit">Approve</button></form><form class="inline" method="post" action="${root}/assistant/dismiss"><input type="hidden" name="csrf" value="${token}"><input type="hidden" name="once" value="${formNonce(session)}"><input type="hidden" name="action" value="${action.id}"><button type="submit">Dismiss</button></form></div>`
-            : html ``;
-        return html `<li class="action-card" id="action-${action.id}"><div class="action-head"><span class="title">${toolTitles.get(action.operation) ?? action.operation}</span><span class="pill ${state.tone}">${state.text}</span></div>${summary}<dl class="facts">${fields.map(([name, value]) => html `<dt>${name.replaceAll('_', ' ')}</dt><dd>${fieldValue(name, value, names)}</dd>`)}</dl>${action.status === 'failed' && action.outcome ? html `<p class="fine">Refused: <code>${action.outcome}</code></p>` : html ``}${buttons}</li>`;
+        const input = Object.entries(action.input).filter(([name]) => name !== 'idempotency_key');
+        // The change's own time zone when it gives one, else its resource's.
+        const zone = typeof action.input.timezone === 'string'
+            ? action.input.timezone
+            : typeof action.input.resource_id === 'string'
+                ? zones.get(action.input.resource_id)
+                : undefined;
+        const when = whenOf(action.input.starts_at, action.input.ends_at, zone);
+        const facts = [];
+        const more = [];
+        if (when)
+            facts.push(html `<dt>When</dt><dd>${when}</dd>`);
+        for (const [name, value] of input) {
+            if (when && (name === 'starts_at' || name === 'ends_at' || name === 'timezone'))
+                continue;
+            const label = FACT_NAMES[name] ?? name.charAt(0).toUpperCase() + name.slice(1).replaceAll('_', ' ');
+            (name in FACT_NAMES || name === 'attendees' ? facts : more).push(html `<dt>${label}</dt><dd>${fieldValue(name, value, names)}</dd>`);
+        }
+        const hidden = (id) => html `<input type="hidden" name="csrf" value="${token}"><input type="hidden" name="once" value="${formNonce(session)}"><input type="hidden" name="action" value="${id}">`;
+        return html `<li class="turn action" id="action-${action.id}"><div class="change"><p class="change-title">${title}</p>${facts.length > 0 ? html `<dl class="facts">${facts}</dl>` : html ``}${more.length > 0
+            ? html `<details class="more"><summary>All details</summary><dl class="facts">${more}</dl></details>`
+            : html ``}<div class="change-buttons"><form method="post" action="${root}/assistant/approve">${hidden(action.id)}<button class="${verb.danger ? 'danger' : 'primary'}" type="submit" data-busy="${verb.busy}">${verb.verb}</button></form><form method="post" action="${root}/assistant/dismiss">${hidden(action.id)}<button class="ghost" type="submit">Decline</button></form></div></div></li>`;
     }
     function readAction(id, value) {
         if (!isRecord(value) || typeof value.operation !== 'string')
@@ -1566,6 +2683,100 @@ ${entries.length === 0
             ...(typeof value.outcome === 'string' ? { outcome: value.outcome } : {}),
         };
     }
+    /** The code a tool result was refused with, from the JSON the model was given. */
+    function refusedCode(content) {
+        try {
+            const parsed = JSON.parse(content);
+            const error = isRecord(parsed) && isRecord(parsed.error) ? parsed.error : null;
+            return error && typeof error.code === 'string' ? error.code : null;
+        }
+        catch {
+            return null;
+        }
+    }
+    /** Notes the turn ends with that are not a failure: a member's Stop, and the step bound. */
+    const quietNote = (text) => text === 'Stopped.' || text.startsWith('The assistant stopped after');
+    /**
+     * The conversation as the thread shows it: the member's messages as bubbles, the replies as
+     * rendered Markdown, each run of tool steps folded into one line, proposed changes as cards, and
+     * a failure that ends it with a way to send the last message again.
+     */
+    function assistantItems(session, entries, actions, names, zones) {
+        const items = [];
+        let steps = [];
+        let cards = [];
+        const flush = () => {
+            if (steps.length > 0) {
+                const bad = steps.some((step) => !step.ok);
+                const seen = [];
+                for (const step of steps)
+                    if (!seen.includes(step.label))
+                        seen.push(step.label);
+                const summary = seen.map((label, index) => (index === 0 ? label : label.charAt(0).toLowerCase() + label.slice(1))).join(', ');
+                items.push(html `<li class="turn steps"><details class="steps${bad ? ' has-bad' : ''}"><summary>${summary}</summary><ul class="step-list">${steps.map((step) => html `<li class="step ${step.ok ? 'ok' : 'bad'}">${step.label}${step.why ? html ` <span class="why">${step.why}</span>` : html ``}</li>`)}</ul></details></li>`);
+                steps = [];
+            }
+            items.push(...cards);
+            cards = [];
+        };
+        const lastUser = [...entries].reverse().find((entry) => entry.role === 'user');
+        for (const [index, entry] of entries.entries()) {
+            if (entry.role === 'user') {
+                flush();
+                items.push(html `<li class="turn mine"><div class="bubble">${entry.text}</div></li>`);
+            }
+            else if (entry.role === 'assistant') {
+                if (entry.text.trim() === '')
+                    continue;
+                flush();
+                items.push(html `<li class="turn bot"><div class="prose">${new Html(renderSlotlockMarkdown(entry.text))}</div></li>`);
+            }
+            else if (entry.role === 'tool') {
+                for (const result of entry.results) {
+                    const write = SLOTLOCK_ASSISTANT_TOOL_USE[result.name] === 'propose';
+                    const action = result.action ? readAction(result.action, actions[result.action]) : null;
+                    if (action) {
+                        cards.push(actionCard(session, action, names, zones));
+                        continue;
+                    }
+                    const title = toolTitles.get(result.name) ?? result.name;
+                    const code = result.error ? refusedCode(result.content) : null;
+                    steps.push({
+                        label: slotlockAssistantStepLabel(result.name, title, result.error ? 'bad' : 'ok', write),
+                        ok: !result.error,
+                        why: code ? refusal(code) : null,
+                    });
+                }
+            }
+            else if (entry.role === 'note') {
+                flush();
+                const last = index === entries.length - 1;
+                if (last && !quietNote(entry.text) && lastUser?.role === 'user') {
+                    items.push(html `<li class="turn error" role="alert"><span>${entry.text}</span><form method="post" action="${root}/assistant"><input type="hidden" name="csrf" value="${csrfToken(session)}"><input type="hidden" name="once" value="${formNonce(session)}"><input type="hidden" name="message" value="${lastUser.text}"><button class="text-button" type="submit">Retry</button></form></li>`);
+                }
+                else {
+                    items.push(html `<li class="turn note">${entry.text}</li>`);
+                }
+            }
+        }
+        flush();
+        return items;
+    }
+    /** The tenant's resources as a proposed change's card names them, and each one's time zone. */
+    async function resourceLookups(tenantRef) {
+        const resources = await options.resources.list(tenantRef);
+        return {
+            resources,
+            names: new Map(resources.map((resource) => [resource.id, resourceName(resource, resource.id)])),
+            zones: new Map(resources.flatMap((resource) => (resource.timezone ? [[resource.id, resource.timezone]] : []))),
+        };
+    }
+    const ASSISTANT_ICONS = {
+        send: new Html('<svg class="arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 13V3M3.5 7.5 8 3l4.5 4.5"/></svg>'),
+        stop: new Html('<svg class="stop" viewBox="0 0 16 16" aria-hidden="true"><rect x="4" y="4" width="8" height="8" rx="1.5" fill="currentColor"/></svg>'),
+        down: new Html('<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 3v10M3.5 8.5 8 13l4.5-4.5"/></svg>'),
+        plus: new Html('<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><path d="M8 3v10M3 8h10"/></svg>'),
+    };
     async function assistantPage(session, status = 200, notice) {
         const store = assistantStore();
         if (!store)
@@ -1575,83 +2786,100 @@ ${entries.length === 0
             store.getSettings(tenantRef),
             store.getConversation(tenantRef, personOf(session)),
         ]);
+        if (!settings) {
+            const content = html `${noticeOf(notice, status)}${pageHead('Assistant')}${emptyState(ICONS.assistant, isAdmin(session) ? 'Connect a model to use the assistant.' : 'An admin of this organization connects a model in Settings.', isAdmin(session) ? { href: `${root}/settings#assistant`, label: 'Connect a model' } : undefined)}`;
+            return respond(status, layout('Assistant', content, session, 'assistant'));
+        }
         const entries = readSlotlockAssistantEntries(conversation?.messages);
         const actions = conversation?.actions ?? {};
-        const names = new Map();
-        if (Object.keys(actions).length > 0) {
-            for (const resource of await options.resources.list(tenantRef)) {
-                names.set(resource.id, resourceName(resource, resource.id));
-            }
-        }
+        const empty = entries.length === 0;
+        const { resources, names, zones } = empty || Object.keys(actions).length > 0
+            ? await resourceLookups(tenantRef)
+            : { resources: [], names: new Map(), zones: new Map() };
         const token = csrfToken(session);
-        const items = [];
-        for (const entry of entries) {
-            if (entry.role === 'user')
-                items.push(html `<li class="msg mine"><p>${entry.text}</p></li>`);
-            else if (entry.role === 'assistant' && entry.text.trim() !== '') {
-                items.push(html `<li class="msg bot"><p>${entry.text}</p></li>`);
-            }
-            else if (entry.role === 'note')
-                items.push(html `<li class="notice">${entry.text}</li>`);
-            else if (entry.role === 'tool') {
-                for (const result of entry.results) {
-                    const action = result.action ? readAction(result.action, actions[result.action]) : null;
-                    if (action)
-                        items.push(actionCard(session, action, names));
-                    else {
-                        items.push(html `<li class="tool-line">${result.error ? 'Could not run' : 'Read'}: ${toolTitles.get(result.name) ?? result.name}</li>`);
-                    }
-                }
-            }
-        }
-        const composer = html `<form class="composer" method="post" action="${root}/assistant"><input type="hidden" name="csrf" value="${token}"><input type="hidden" name="once" value="${formNonce(session)}"><label class="visually-hidden" for="message">Message</label><textarea id="message" name="message" rows="3" maxlength="${String(SLOTLOCK_ASSISTANT_MAX_MESSAGE)}" required placeholder="Find a free van tomorrow morning and book it for Ana"></textarea><button class="primary" type="submit">Send</button></form>`;
-        const reset = entries.length > 0
-            ? html `<form class="inline" method="post" action="${root}/assistant/reset"><input type="hidden" name="csrf" value="${token}"><input type="hidden" name="once" value="${formNonce(session)}"><button type="submit">New conversation</button></form>`
-            : undefined;
-        const content = html `${noticeOf(notice)}
-${pageHead('Assistant', reset)}
-${settings
-            ? html `<section class="panel chat">${items.length === 0
-                ? html `<p class="empty">Ask about bookings and free time. Changes wait for your approval.</p>`
-                : html `<ol class="thread">${items}</ol>`}<span id="latest"></span>${composer}</section>`
-            : html `<p class="empty">${isAdmin(session)
-                ? html `No model is connected. <a href="${root}/settings#assistant">Connect one in Settings</a>.`
-                : 'No model is connected. An admin of this organization can connect one in Settings.'}</p>`}`;
+        const hidden = () => html `<input type="hidden" name="csrf" value="${token}"><input type="hidden" name="once" value="${formNonce(session)}">`;
+        const first = resources.find((resource) => !resource.archivedAt);
+        const named = first ? resourceName(first, first.id) : null;
+        // A read chip asks at once; a write chip fills the box to finish (app.js), or asks (no script).
+        const prompts = [
+            { label: "What's on today", message: "What's booked today?" },
+            { label: 'Find free time', message: named ? `When is ${named} free tomorrow morning?` : 'What is free tomorrow morning?' },
+            { label: 'Book', message: named ? `Book ${named} tomorrow 9:00–10:00` : 'Book ', fill: true },
+            { label: 'Move a booking', message: 'Move the next booking one hour later', fill: true },
+            { label: 'Cancel a booking', message: 'Cancel the next booking', fill: true },
+        ];
+        const chips = html `<div class="assistant-start"><div class="chips">${prompts.map((prompt) => html `<form method="post" action="${root}/assistant">${hidden()}<button class="chip" type="submit" name="message" value="${prompt.message}"${prompt.fill ? html ` data-fill="${prompt.message}"` : html ``}>${prompt.label}</button></form>`)}</div></div>`;
+        const composer = html `<div class="dock"><button class="jump" type="button" hidden aria-label="Jump to the latest message">${ASSISTANT_ICONS.down}</button><form class="composer" method="post" action="${root}/assistant">${hidden()}<label class="visually-hidden" for="message">Message</label><textarea id="message" name="message" rows="2" maxlength="${String(SLOTLOCK_ASSISTANT_MAX_MESSAGE)}" required placeholder="${empty ? 'Ask about bookings' : 'Reply…'}"></textarea><div class="composer-bar"><span class="count" hidden></span><button class="send" type="submit" aria-label="Send">${ASSISTANT_ICONS.send}${ASSISTANT_ICONS.stop}</button></div></form></div>`;
+        const reset = html `<form class="inline new-chat" method="post" action="${root}/assistant/reset">${hidden()}<button class="ghost" type="submit">${ASSISTANT_ICONS.plus}New conversation</button></form>`;
+        const flag = empty ? new Html(' data-empty') : html ``;
+        const content = html `${noticeOf(notice, status)}<div class="assistant-page"${flag}>${pageHead('Assistant', reset)}<div class="assistant" data-assistant data-stream="${root}/assistant/stream" data-page="${root}/assistant"${flag}><ol class="thread">${assistantItems(session, entries, actions, names, zones)}</ol><span id="latest"></span>${chips}${composer}</div></div>`;
         return respond(status, layout('Assistant', content, session, 'assistant'));
     }
-    async function assistantSettingsPanel(session) {
+    /** The named provider a provider and base URL are, or none (Custom). */
+    const presetOf = (provider, baseUrl) => SLOTLOCK_ASSISTANT_PRESETS.find((preset) => preset.id !== 'custom' && preset.provider === provider && preset.baseUrl === baseUrl);
+    /**
+     * The assistant's settings: what is connected and whether it answers (Test, its result in place),
+     * then the form, one provider chosen from tiles, and Disconnect apart. A member sees only what is
+     * connected, and where their messages go.
+     */
+    async function assistantSettingsSection(session, status, notice, draft) {
         const store = assistantStore();
-        if (!store)
-            return html ``;
         const settings = await store.getSettings(tenantOf(session));
-        const sentTo = html `<p class="fine">Members' messages, and the bookings and resources the assistant reads for them, are sent to this provider.</p>`;
-        if (!isAdmin(session)) {
-            return html `<section class="panel" id="assistant"><h2>Assistant</h2>${settings
-                ? html `<dl class="facts"><dt>Provider</dt><dd>${settings.provider === 'anthropic' ? 'Anthropic' : 'OpenAI-compatible'}</dd><dt>Model</dt><dd>${settings.model}</dd></dl>${sentTo}`
-                : 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 ``);
-        return html `<section class="panel" id="assistant">
-<h2>Assistant</h2>
-<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>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>
-</form>
-${sentTo}
-${settings
-            ? html `<div class="row-actions"><form class="inline" method="post" action="${root}/settings/assistant/test"><input type="hidden" name="csrf" value="${token}"><input type="hidden" name="once" value="${formNonce(session)}"><button type="submit">Test connection</button></form><details class="act danger"><summary>Disconnect</summary><div class="pop"><p>Members can no longer chat. The key is deleted.</p><form method="post" action="${root}/settings/assistant/remove"><input type="hidden" name="csrf" value="${token}"><input type="hidden" name="once" value="${formNonce(session)}"><button class="danger" type="submit">Disconnect</button></form></div></details></div>`
-            : html ``}
-</section>`;
+        const hidden = () => html `<input type="hidden" name="csrf" value="${token}"><input type="hidden" name="once" value="${formNonce(session)}">`;
+        const savedName = settings ? (presetOf(settings.provider, settings.baseUrl)?.name ?? 'Custom') : null;
+        // Where messages go, in words: the provider's name, or a custom one's host.
+        const hostOf = (url) => {
+            try {
+                return new URL(url).host;
+            }
+            catch {
+                return url;
+            }
+        };
+        const savedTo = settings ? (savedName === 'Custom' ? hostOf(settings.baseUrl) : savedName) : null;
+        const admin = isAdmin(session);
+        const badge = !settings
+            ? html `<span class="badge">Not set up</span>`
+            : notice && status === 200 && notice.startsWith('Connected')
+                ? html `<span class="badge ok">Connected</span>`
+                : notice && status === 502
+                    ? html `<span class="badge bad">Failing</span>`
+                    : html `<span class="badge ok">Set up</span>`;
+        const test = settings && admin
+            ? html `<form method="post" action="${root}/settings/assistant/test">${hidden()}<button type="submit">Test</button></form>`
+            : html ``;
+        const statusCard = html `<div class="set-card status-card" id="assistant"><div class="status-head"><span class="mono-tile" aria-hidden="true">${savedName ? savedName.charAt(0) : '–'}</span><div class="status-name"><strong>${savedName ?? 'No model connected'}</strong>${settings ? html `<code>${settings.model}</code>` : html ``}</div>${badge}${test}</div>${noticeOf(notice, status)}</div>`;
+        const sentTo = (name) => html `<p class="fine">Members' messages, and the bookings they ask about, are sent to ${name ?? 'the provider you choose'}.</p>`;
+        if (!admin) {
+            return html `${statusCard}${settings ? sentTo(savedTo) : html `<p class="fine">An admin of this organization connects a model here.</p>`}`;
+        }
+        // What the form shows: a draft (a preset, or a model list) over what is saved.
+        const provider = draft?.provider ?? settings?.provider ?? 'anthropic';
+        const baseUrl = draft ? draft.baseUrl : (settings?.baseUrl ?? '');
+        const model = draft?.model ?? settings?.model ?? '';
+        const chosen = settings || draft ? (presetOf(provider, baseUrl)?.id ?? 'custom') : 'anthropic';
+        const chosenName = chosen === 'custom' ? (baseUrl ? hostOf(baseUrl) : null) : (SLOTLOCK_ASSISTANT_PRESETS.find((preset) => preset.id === chosen)?.name ?? null);
+        const models = draft?.models ?? [];
+        const tiles = html `<div class="tiles" role="radiogroup" aria-label="Provider">${SLOTLOCK_ASSISTANT_PRESETS.map((preset) => html `<label class="tile"><input type="radio" name="preset" value="${preset.id}"${preset.id === chosen ? html ` checked` : html ``}><span class="tile-mark" aria-hidden="true">${preset.name.charAt(0)}</span>${preset.name}</label>`)}</div>`;
+        const format = (value, label) => html `<label><input type="radio" name="provider" value="${value}"${provider === value ? html ` checked` : html ``}>${label}</label>`;
+        const keyField = settings?.keyHint
+            ? html `<div class="key-set"><code>•••• ${settings.keyHint}</code><details><summary>Replace</summary><input id="api-key" name="api_key" type="password" autocomplete="off" maxlength="4096" aria-label="New API key"></details></div>`
+            : html `<input id="api-key" name="api_key" type="password" autocomplete="off" maxlength="4096" placeholder="Optional for a local model">`;
+        const form = html `<form class="set-card provider-form" method="post" action="${root}/settings/assistant">${hidden()}<div class="row stack"><span class="row-label">Provider</span>${tiles}</div><div class="row custom-only"><span class="row-label">API format</span><div class="segmented">${format('anthropic', 'Anthropic Messages')}${format('openai', 'OpenAI-compatible')}</div></div><div class="row custom-only"><label class="row-label" for="base-url">Base URL</label><input id="base-url" class="mono" name="base_url" maxlength="2048" value="${baseUrl}" placeholder="https://host/v1"></div><div class="row"><label class="row-label" for="model">Model</label><div class="field-with-button"><input id="model" class="mono" name="model" required maxlength="200" value="${model}" placeholder="Model name"${models.length > 0 ? html ` list="assistant-models"` : html ``}><button type="submit" formaction="${root}/settings/assistant/models" formnovalidate>Load models</button></div>${models.length > 0
+            ? html `<datalist id="assistant-models">${models.map((id) => html `<option value="${id}"></option>`)}</datalist>`
+            : html ``}</div><div class="row"><label class="row-label" for="api-key">API key</label>${keyField}</div><div class="card-foot">${sentTo(chosenName)}<button class="primary" type="submit">Save</button></div></form>`;
+        const disconnect = settings
+            ? html `<div class="set-card"><div class="danger-row"><strong>Disconnect ${savedName}</strong><details class="act danger"><summary>Disconnect…</summary><div class="pop"><p>The key is deleted. Members can't use the assistant until a model is connected again.</p><form method="post" action="${root}/settings/assistant/remove">${hidden()}<button class="danger" type="submit">Disconnect</button></form></div></details></div></div>`
+            : html ``;
+        return html `${statusCard}${form}${disconnect}`;
+    }
+    /** The provider and base URL a form names: a named provider's own, or Custom's two fields. */
+    function formEndpoint(form) {
+        const preset = SLOTLOCK_ASSISTANT_PRESETS.find((candidate) => candidate.id === form.get('preset'));
+        if (preset && preset.id !== 'custom')
+            return { provider: preset.provider, baseUrl: preset.baseUrl };
+        return { provider: form.get('provider'), baseUrl: (form.get('base_url') ?? '').trim() };
     }
     const adminOnly = (session) => settingsPage(session, 403, 'Only an owner of this organization can change the assistant.');
     async function saveAssistantSettings(session, form) {
@@ -1660,8 +2888,8 @@ ${settings
             return notFound(session);
         if (!isAdmin(session))
             return adminOnly(session);
-        const provider = form.get('provider');
-        const checkedUrl = readSlotlockAssistantBaseUrl(form.get('base_url') ?? '', { privateUrls });
+        const { provider, baseUrl: givenUrl } = formEndpoint(form);
+        const checkedUrl = readSlotlockAssistantBaseUrl(givenUrl, { privateUrls });
         const model = (form.get('model') ?? '').trim();
         const apiKey = (form.get('api_key') ?? '').trim();
         if (provider !== 'anthropic' && provider !== 'openai') {
@@ -1698,6 +2926,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, baseUrl: givenUrl } = formEndpoint(form);
+        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: givenUrl,
+            ...(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)
@@ -1736,24 +3029,42 @@ ${settings
             return settingsPage(session, 502, slotlockAssistantProviderMessage(error));
         }
     }
-    async function sendToAssistant(session, form) {
+    /**
+     * One member message: check it, run the turn (streaming its text and steps to `onEvent` when
+     * given, stopping when `signal` aborts), and keep the conversation. Both ways to send share it.
+     */
+    async function runAssistantMessage(session, form, hooks = {}) {
         const store = assistantStore();
         if (!store || !assistantOptions)
-            return notFound(session);
+            return { ok: false, status: 404, message: 'Nothing is here.' };
         const text = (form.get('message') ?? '').trim();
         if (text === '' || text.length > SLOTLOCK_ASSISTANT_MAX_MESSAGE) {
-            return assistantPage(session, 400, `Write a message of 1 to ${SLOTLOCK_ASSISTANT_MAX_MESSAGE.toLocaleString('en')} characters.`);
+            return {
+                ok: false,
+                status: 400,
+                message: `Write a message of 1 to ${SLOTLOCK_ASSISTANT_MAX_MESSAGE.toLocaleString('en')} characters.`,
+            };
         }
         if (!memberMessages.take(`${tenantOf(session)}\0${session.uid}`)) {
-            return tooManyMessages(session, assistantPage);
+            return {
+                ok: false,
+                status: 429,
+                message: 'You have sent the assistant a lot in the last minute. Wait a moment and try again.',
+            };
         }
         const found = await assistantModel(session);
         if (found === null)
-            return assistantPage(session, 409, 'No model is connected.');
+            return { ok: false, status: 409, message: 'No model is connected.' };
         if ('problem' in found)
-            return assistantPage(session, 409, found.problem);
+            return { ok: false, status: 409, message: 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),
@@ -1777,6 +3088,8 @@ ${settings
             timeoutMs: assistantTimeout,
             turnTimeoutMs: assistantTurnTimeout,
             ...(assistantOptions.maxSteps !== undefined ? { maxSteps: assistantOptions.maxSteps } : {}),
+            ...(hooks.onEvent ? { onEvent: hooks.onEvent } : {}),
+            ...(hooks.signal ? { signal: hooks.signal } : {}),
             read: async (operation, input) => {
                 // A turn's reads share one budget of resource-days, so 8 steps of wide reads cannot each
                 // scan a hundred resources over years.
@@ -1833,8 +3146,85 @@ ${settings
             added: Object.fromEntries(Object.entries(proposed).filter(([id]) => id in kept)),
             keep: Object.keys(kept),
         }, conversationTtl);
+        return { ok: true, messages, actions: kept };
+    }
+    /** The form's way (no script): run the turn, then show the conversation at its latest message. */
+    async function sendToAssistant(session, form) {
+        const run = await runAssistantMessage(session, form);
+        if (!run.ok)
+            return run.status === 404 ? notFound(session) : assistantPage(session, run.status, run.message);
         return redirect(303, `${root}/assistant#latest`);
     }
+    /**
+     * app.js's way: the same turn, answered as it happens, one JSON object a line. `text` carries a
+     * piece of the reply, `step` a tool step as it starts and ends, and the last line is `done` (the
+     * turn as the page renders it, which replaces what was streamed) or `error`, each with a fresh
+     * single-use value for the next send. The member's Stop aborts the request, and the turn with it.
+     */
+    async function streamToAssistant(session, form, request) {
+        const encoder = new TextEncoder();
+        const pipe = new TransformStream();
+        const writer = pipe.writable.getWriter();
+        let open = true;
+        const write = (event) => {
+            if (!open)
+                return;
+            writer.write(encoder.encode(`${JSON.stringify(event)}\n`)).catch(() => {
+                open = false;
+            });
+        };
+        const label = (name, state) => slotlockAssistantStepLabel(name, toolTitles.get(name) ?? name, state, SLOTLOCK_ASSISTANT_TOOL_USE[name] === 'propose');
+        const failed = (message) => write({
+            t: 'error',
+            html: html `<li class="turn error" role="alert"><span>${message}</span></li>`.value,
+            once: formNonce(session),
+        });
+        const work = (async () => {
+            try {
+                const run = await runAssistantMessage(session, form, {
+                    signal: request.signal,
+                    onEvent: (event) => {
+                        if (event.type === 'text')
+                            write({ t: 'text', d: event.delta });
+                        else if (event.type === 'call')
+                            write({ t: 'step', id: event.id, s: 'run', label: label(event.name, 'run') });
+                        else
+                            write({ t: 'step', id: event.id, s: event.ok ? 'ok' : 'bad', label: label(event.name, event.ok ? 'ok' : 'bad') });
+                    },
+                });
+                if (!run.ok) {
+                    failed(run.message);
+                    return;
+                }
+                // The turn from the member's message on, as a reload would show it.
+                const start = run.messages.map((entry) => entry.role).lastIndexOf('user');
+                const turn = run.messages.slice(Math.max(0, start));
+                const lookups = Object.keys(run.actions).length > 0
+                    ? await resourceLookups(tenantOf(session))
+                    : { names: new Map(), zones: new Map() };
+                write({
+                    t: 'done',
+                    html: assistantItems(session, turn, run.actions, lookups.names, lookups.zones).join(''),
+                    once: formNonce(session),
+                });
+            }
+            catch (error) {
+                report(error instanceof Error ? error.message : 'assistant stream failed');
+                failed('Something went wrong. Reload the page and try again.');
+            }
+            finally {
+                await writer.close().catch(() => undefined);
+                open = false;
+            }
+        })();
+        ignoreRejection(work);
+        const page = respond(200, '');
+        const headers = new Headers(page.headers);
+        headers.set('Content-Type', 'application/x-ndjson; charset=utf-8');
+        // Proxies that buffer (nginx) send each line as it is written.
+        headers.set('X-Accel-Buffering', 'no');
+        return new Response(pipe.readable, { status: 200, headers });
+    }
     async function settleAction(session, form, decision) {
         const store = assistantStore();
         if (!store || !assistantOptions)
@@ -1882,6 +3272,256 @@ ${settings
         await store.deleteConversation(tenantOf(session), personOf(session));
         return redirect(303, `${root}/assistant`);
     }
+    /**
+     * A workspace's plan as both the Usage page and the overview show it: the plan (or the default it
+     * moves to), what it has against the limits, this month's use against the quotas, and what needs a
+     * person: a failed payment, a quota used up or nearly, more than the coming plan allows.
+     * `here` is the page asking, so an item's action points to the page that resolves it.
+     */
+    async function planStanding(session, here, given) {
+        const active = plans;
+        const billing = options.billing;
+        const tenantRef = tenantOf(session);
+        const [plan, planDefault, resourceCount, keys, webhooks] = await Promise.all([
+            active.plan(tenantRef),
+            active.planDefault ? active.planDefault() : Promise.resolve(null),
+            // As the limit counts them: archived resources included.
+            options.resources.count
+                ? options.resources.count(tenantRef)
+                : options.resources.list(tenantRef).then((listed) => listed.length),
+            given ?? 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 keyCount = keys.filter((key) => !key.revokedAt && (key.expiresAt === null || key.expiresAt.getTime() > now())).length;
+        const admin = isAdmin(session);
+        const paying = plan !== null && plan.plan !== 'free';
+        const upcoming = !plan && planDefault && planDefault.appliesFrom.getTime() > now() ? planDefault : null;
+        const limits = plan?.limits ?? upcoming?.limits;
+        const quotas = options.quotas && plan ? SLOTLOCK_PLAN_QUOTAS[plan.plan] : null;
+        const resets = formatDate(slotlockQuotaPeriod(now()).resetsAt);
+        const counted = (value) => value.toLocaleString('en-GB');
+        const usagePage = `${root}/plan`;
+        const upgradeAt = here === 'usage' ? '#upgrade' : `${usagePage}#upgrade`;
+        const canUpgrade = !paying && admin && Boolean(billing || active.contact);
+        const upgradeHint = paying ? '' : admin ? ' Upgrade for more.' : ' An owner of this organization can upgrade.';
+        const attention = [];
+        // Whether anything is near or past a limit: the overview then offers the upgrade.
+        let pressing = false;
+        if (plan?.status === 'past_due') {
+            attention.push(attentionItem('bad', `Your last payment failed. ${admin && billing && plan.stripeCustomer ? 'Update your payment method in Manage billing' : 'An owner updates the payment method'} to keep the ${PLAN_NAMES[plan.plan]} plan.`, here === 'overview' ? { href: usagePage, label: 'Usage' } : undefined));
+        }
+        if (quotas && used) {
+            for (const metric of ['operations', 'bookings']) {
+                const quota = quotas[metric];
+                const stop = Math.floor((quota * quotas.stopPercent) / 100);
+                const spent = used.totals[metric];
+                const refused = metric === 'operations' ? 'every call but reading usage' : 'new bookings and holds';
+                const upgrade = canUpgrade ? { href: upgradeAt, label: 'Upgrade' } : here === 'overview' ? { href: usagePage, label: 'Usage' } : undefined;
+                if (spent * 100 >= quota * 80)
+                    pressing = true;
+                if (spent >= stop) {
+                    attention.push(attentionItem('bad', `This month's ${metric} are used up: Slotlock refuses ${refused} with quota_exceeded until ${resets}.${upgradeHint}`, upgrade));
+                }
+                else if (spent >= quota) {
+                    const billed = metric === 'operations' && billing?.overage && plan?.plan === 'developer' && paying;
+                    attention.push(attentionItem('warn', `You have used this month's ${counted(quota)} ${metric}.${billed ? ` Those past it are billed at ${billing?.overage?.price ?? ''}.` : ''} Slotlock refuses ${refused} past ${counted(stop)}, until ${resets}.${billed ? '' : upgradeHint}`, billed ? undefined : upgrade));
+                }
+                else if (spent * 100 >= quota * 80) {
+                    attention.push(attentionItem('warn', `You have used ${String(Math.floor((spent * 100) / quota))}% of this month's ${metric}. They start again on ${resets}.`, here === 'overview' ? { href: usagePage, label: 'Usage' } : undefined));
+                }
+            }
+        }
+        if (upcoming) {
+            // What the workspace has that its coming plan will not allow: nothing is removed; adding stops.
+            const over = [
+                ['resources', resourceCount, upcoming.limits.resources],
+                ['active API keys', keyCount, upcoming.limits.apiKeys],
+                ['webhooks', webhooks?.length ?? 0, upcoming.limits.webhookEndpoints],
+            ].filter(([, have, allowed]) => have > allowed);
+            if (over.length > 0)
+                pressing = true;
+            attention.push(attentionItem(over.length > 0 ? 'warn' : 'info', `From ${formatDate(upcoming.appliesFrom)}, this workspace is on ${PLAN_NAMES[upcoming.plan]}: ${String(upcoming.limits.resources)} resources, ${String(upcoming.limits.apiKeys)} API keys and ${String(upcoming.limits.webhookEndpoints)} webhooks.${over.length > 0
+                ? ` You have ${over.map(([what, have]) => `${String(have)} ${what}`).join(', ')}: nothing is removed, but you cannot add more until you have fewer${paying || !admin ? '' : ', or upgrade'}.`
+                : ''}`, canUpgrade && over.length > 0 ? { href: upgradeAt, label: 'See plans' } : undefined));
+        }
+        /** One use against its allowance: a bar, amber from 80%, red at the limit. */
+        const meter = (label, value, limit) => {
+            if (limit === undefined) {
+                return html `<div class="meter"><div class="meter-head"><span>${label}</span><span class="meter-value">${counted(value)}</span></div></div>`;
+            }
+            const tone = value >= limit ? ' bad' : value * 100 >= limit * 80 ? ' warn' : '';
+            return html `<div class="meter${tone}"><div class="meter-head"><span>${label}</span><span class="meter-value">${counted(value)}<span class="meta"> of ${counted(limit)}</span></span></div><progress value="${String(Math.min(value, limit))}" max="${String(limit)}" aria-label="${label}: ${counted(value)} of ${counted(limit)}"></progress></div>`;
+        };
+        const limitMeters = html `${meter('Resources', resourceCount, limits?.resources)}${meter('Active API keys', keyCount, limits?.apiKeys)}${webhooks ? meter('Webhooks', webhooks.length, limits?.webhookEndpoints) : html ``}`;
+        // Under a "This month" heading, or beside the limits with the month in each label.
+        const monthMeters = (suffix) => used
+            ? html `${meter(`Operations${suffix}`, used.totals.operations, quotas?.operations)}${meter(`Bookings${suffix}`, used.totals.bookings, quotas?.bookings)}${meter(`Holds${suffix}`, used.totals.holds, undefined)}`
+            : html ``;
+        const name = plan
+            ? PLAN_NAMES[plan.plan]
+            : upcoming
+                ? `${PLAN_NAMES[upcoming.plan]} from ${dayOf(upcoming.appliesFrom)}`
+                : 'No plan';
+        return {
+            plan,
+            upcoming,
+            paying,
+            admin,
+            used,
+            month,
+            resets,
+            keys,
+            name,
+            limitMeters,
+            monthMeters,
+            meters: html `${limitMeters}${monthMeters(' this month')}`,
+            attention,
+            canUpgrade,
+            pressing,
+        };
+    }
+    /** One thing that needs a person: a sentence, its tone, and what resolves it. */
+    const attentionItem = (tone, text, action) => html `<li class="attention ${tone}"><span class="attention-text">${text}</span>${action ? html `<a class="attention-action" href="${action.href}">${action.label}</a>` : html ``}</li>`;
+    /** The list of things that need a person, or nothing. */
+    const attentionList = (items) => items.length > 0 ? html `<ul class="attention-list" aria-label="Needs attention">${items}</ul>` : html ``;
+    async function planPage(session, status = 200, notice, thanks = false) {
+        if (!plans)
+            return notFound(session);
+        const billing = options.billing;
+        const counted = (value) => value.toLocaleString('en-GB');
+        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 meter = (label, value) => html `<div class="meter"><div class="meter-head"><span>${label}</span><span class="meter-value">${counted(value)}</span></div></div>`;
+            return respond(status, layout('Usage', html `${pageHead('Usage')}${noticeOf(notice, status)}<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>This month, in Test</h2><div class="meters">${meter('Operations', tested.totals.operations)}${meter('Bookings', tested.totals.bookings)}${meter('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 standing = await planStanding(session, 'usage');
+        const { plan, paying, admin, used, month, resets, keys } = standing;
+        const token = csrfToken(session);
+        const keyName = new Map(keys.map((key) => [key.id, key.name]));
+        // An organization is offered Team (where billing sells it, or by asking); a person, Developer.
+        const offered = session.org !== undefined && (billing ? Boolean(billing.teamPrices) : true) ? 'team' : 'developer';
+        const contact = plans.contact ?? billing?.contact;
+        const manage = billing && plan?.stripeCustomer && admin
+            ? 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 `<span class="meta">${plan.status === 'past_due' ? 'Payment due since' : 'Renews'} ${formatDate(plan.currentPeriodEnd)}</span>`
+            : html ``;
+        const planCard = html `<section class="panel plan-card" id="plan"><div class="plan-head"><h2>${standing.name}</h2>${renews}</div><div class="meters">${standing.limitMeters}</div>${used ? html `` : html `<p class="fine">This server does not count use yet.</p>`}</section>${used
+            ? html `<section class="panel" id="month"><h2>This month</h2><div class="meters">${standing.monthMeters('')}</div><p class="fine">Since ${month.from} (UTC); the month starts again on ${resets}. An operation is a call that reached Slotlock, whatever it answered.</p></section>`
+            : html ``}`;
+        const byKey = used && used.keys.length > 0
+            ? html `<section class="panel" id="usage"><h2>Used by</h2><div class="table"><table><thead><tr><th>Key</th><th>Operations</th><th>Bookings</th><th>Holds</th></tr></thead><tbody>${used.keys.map((row) => html `<tr><td data-label="Key">${row.keyId === null ? 'The dashboard and its assistant' : (keyName.get(row.keyId) ?? 'A deleted key')}</td><td data-label="Operations">${counted(row.operations)}</td><td data-label="Bookings">${counted(row.bookings)}</td><td data-label="Holds">${counted(row.holds)}</td></tr>`)}</tbody></table></div><p class="fine">Webhook deliveries ${counted(used.totals.webhook_deliveries)} · assistant messages ${counted(used.totals.assistant_messages)}.</p></section>`
+            : html ``;
+        const offeredLimits = SLOTLOCK_PLAN_LIMITS[offered];
+        const offeredText = html `${String(offeredLimits.resources)} resources, ${String(offeredLimits.apiKeys)} API keys and ${String(offeredLimits.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 ``}.`;
+        let upgrade = html ``;
+        if (!paying) {
+            if (!admin) {
+                upgrade = html `<p class="fine">An owner of this organization can change its plan.</p>`;
+            }
+            else if (billing) {
+                const offeredPrices = offered === 'team' ? billing.teamPrices : billing.prices;
+                upgrade = html `<section class="panel" id="upgrade">
+<h2>${PLAN_NAMES[offered]}</h2>
+<p>${offeredText}${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>`;
+            }
+            else if (contact) {
+                // No payment here yet: the plan is arranged by asking.
+                upgrade = html `<section class="panel" id="upgrade"><h2>${PLAN_NAMES[offered]}</h2><p>${offeredText}</p><a class="button primary" href="${contact}">Talk to us about ${PLAN_NAMES[offered]}</a></section>`;
+            }
+        }
+        const content = html `${thanks ? html `<p class="notice done" role="status">${notice ?? ''}</p>` : noticeOf(notice, status)}
+${pageHead('Usage', manage)}
+${attentionList(standing.attention)}
+${planCard}
+${byKey}
+${upgrade}
+${contact
+            ? html `<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="${contact}">Talk to the founder</a></section>`
+            : html ``}`;
+        return respond(status, layout('Usage', 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 +3530,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') && plans)
+            return planPage;
+        if (route.startsWith('/teams') && teams)
+            return teamsPage;
         return overviewPage;
     }
     function hoursPage(session, state) {
@@ -1950,6 +3599,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 +3687,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, status)}${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 +3784,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 +3890,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 +3898,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 +4079,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 +4097,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 +4111,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 +4152,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 = plans ? await plans.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 Usage.');
+            }
+        }
         try {
             const created = await options.keys.create({
                 tenantRef: tenantOf(session),
@@ -2297,6 +4178,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 +4189,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, plans
+                    ? 'You have as many active keys as your plan allows. Revoke one first, or see Usage.'
+                    : 'You have as many keys as Slotlock allows. Revoke one first.');
             }
             throw error;
         }
@@ -2318,6 +4206,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 +4267,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 Usage.`
+                    : `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.`);
@@ -2365,7 +4290,7 @@ ${org ? html `<p>For the organization <strong>${org.login}</strong>.</p>` : html
         const session = await readSession(request);
         if (!session)
             return redirect(303, root);
-        const form = await readForm(request, route === '/assistant' ? MAX_ASSISTANT_FORM_BYTES : MAX_FORM_BYTES);
+        const form = await readForm(request, route === '/assistant' || route === '/assistant/stream' ? MAX_ASSISTANT_FORM_BYTES : MAX_FORM_BYTES);
         if (form === 'too_large') {
             return respond(413, layout('Refused', html `<p class="notice">That form is too large.</p>`, session));
         }
@@ -2395,7 +4320,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')
@@ -2403,9 +4328,16 @@ ${org ? html `<p>For the organization <strong>${org.login}</strong>.</p>` : html
                 return pageFor(route)(session, 429, 'Too many forms sent from this account in the last 12 hours. Try again later.');
             }
             if (!first) {
+                // The first one was taken: a second click, a reload or a resend shows what it did.
+                if (route.startsWith('/assistant'))
+                    return redirect(303, `${root}/assistant#latest`);
                 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 plans?.enrol?.(tenantOf(session));
+        }
         switch (route) {
             case '/sign-out':
                 await options.state.endSession(session.sid, session.exp);
@@ -2416,16 +4348,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,8 +4384,18 @@ ${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/stream':
+                return streamToAssistant(session, form, request);
             case '/assistant/approve':
                 return settleAction(session, form, 'approve');
             case '/assistant/dismiss':
@@ -2444,10 +4404,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 +4441,24 @@ ${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/endpoints':
+                        case '/settings/hours':
+                        case '/settings/account':
                         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 +4467,40 @@ ${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);
+                            if (route === '/settings/endpoints')
+                                return await settingsPage(session, 200, undefined, undefined, 'endpoints');
+                            if (route === '/settings/hours')
+                                return await settingsPage(session, 200, undefined, undefined, 'hours');
+                            if (route === '/settings/account')
+                                return await settingsPage(session, 200, undefined, undefined, 'account');
+                            // 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);
+                            return asset(DASHBOARD_ASSETS.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);
+                            return asset(DASHBOARD_ASSETS.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 +4645,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); }
@@ -2681,13 +4688,44 @@ a.stat:hover { background: var(--surface-2); text-decoration: none; }
 a.stat::after { content: ""; position: absolute; top: 18px; right: 18px; width: 6px; height: 6px; border-top: 1.5px solid var(--ink-3); border-right: 1.5px solid var(--ink-3); transform: rotate(45deg); opacity: 0; transition: opacity var(--fast) var(--ease); }
 a.stat:hover::after, a.stat:focus-visible::after { opacity: 1; }
 a.stat:focus-visible { outline-offset: -2px; border-radius: 0; }
-.stat-label { font: 500 var(--text-xs)/1.4 var(--mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
+.stat-label { font-size: var(--text-sm); line-height: 1.4; color: var(--ink-3); }
+.attention-stat .stat-value { color: var(--accent); }
 .stat-value { font-size: var(--text-2xl); line-height: 1.1; font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
 
-/* Setup checklist */
-.setup .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: step; }
-.steps li { display: flex; align-items: center; gap: var(--space-3); min-height: 36px; color: var(--ink); font-weight: 500; }
-.steps li.done { color: var(--ink-3); font-weight: 400; text-decoration: line-through; text-decoration-color: var(--line-strong); }
+/* Overview: what needs a person, getting started, the side column */
+.column { display: grid; gap: var(--space-5); align-content: start; min-width: 0; }
+.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
+.panel-head h2 { margin: 0; }
+.panel-head .meta { flex: none; }
+.attention-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
+.attention { display: flex; align-items: center; gap: var(--space-4); padding: 10px var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-size: var(--text-md); color: var(--ink); box-shadow: inset 3px 0 0 var(--ink-3); }
+.attention.bad { border-color: var(--bad-line); background: var(--bad-wash); box-shadow: inset 3px 0 0 var(--bad); }
+.attention.warn { border-color: var(--warn-line); background: var(--warn-wash); box-shadow: inset 3px 0 0 var(--warn); }
+.attention.info { box-shadow: inset 3px 0 0 var(--accent); }
+.attention-text { flex: 1; min-width: 0; }
+.attention-action { flex: none; font-weight: 600; white-space: nowrap; }
+.segments { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
+.segments span { height: 4px; border-radius: var(--radius-full); background: var(--sunken); }
+.segments span.done { background: var(--good); }
+.setup-card .segments { margin-bottom: var(--space-3); }
+.setup-steps { list-style: none; margin: 0; padding: 0; display: grid; }
+.setup-steps li { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; border-top: 1px solid var(--line-soft); color: var(--ink-3); }
+.setup-steps li:first-child { border-top: 0; }
+.setup-steps li.next { color: var(--ink); font-weight: 500; }
+.setup-steps li.done .step-title { text-decoration: line-through; text-decoration-color: var(--line-strong); }
+.setup-steps .step-title { flex: 1; min-width: 0; }
+.setup-row { display: flex; align-items: center; gap: var(--space-4); padding: 10px var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink-2); font-size: var(--text-md); }
+.setup-row:hover { background: var(--surface-2); text-decoration: none; }
+.setup-row .segments { width: 96px; flex: none; }
+.plan-card .panel-head h2 { font-size: var(--text-lg); }
+.meters.stacked { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin: 0 0 var(--space-4); }
+.plan-card > .button { width: 100%; justify-content: center; }
+details.command { margin-top: var(--space-4); }
+details.command > summary { cursor: pointer; font-size: var(--text-md); color: var(--ink-2); }
+details.command[open] > summary { margin-bottom: var(--space-2); }
+.copy-block { position: relative; }
+.copy-block pre { padding-right: 72px; font-size: var(--text-sm); }
+.copy-block button { position: absolute; top: 6px; right: 6px; }
 .check { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: var(--radius-full); border: 1.5px dashed var(--line-strong); color: var(--surface); }
 .done .check { background: var(--good); border: 0; }
 .check .icon { width: 12px; height: 12px; stroke-width: 3; }
@@ -2705,7 +4743,11 @@ a.stat:focus-visible { outline-offset: -2px; border-radius: 0; }
 .on { color: var(--ink-3); font-weight: 400; }
 .meta { font-size: var(--text-sm); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .feed { position: relative; }
-.event { position: relative; display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: 7px 0; }
+.event { position: relative; display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; padding: 7px 0; }
+.event .title { font-weight: 400; color: var(--ink-2); white-space: normal; overflow-wrap: anywhere; }
+.event .title strong { font-weight: 600; color: var(--ink); }
+.event .when { font-size: var(--text-sm); font-weight: 400; color: var(--ink-3); white-space: nowrap; padding-top: 1px; }
+.times { font-size: var(--text-sm); color: var(--ink-3); }
 .event:not(:last-child)::before { content: ""; position: absolute; left: 5.5px; top: 22px; bottom: -8px; width: 1px; background: var(--line); }
 .dot { position: relative; width: 12px; height: 12px; margin-top: 4px; border-radius: var(--radius-full); background: var(--surface); box-shadow: inset 0 0 0 3px var(--ink-3); }
 .dot.good { box-shadow: inset 0 0 0 3px var(--good); }
@@ -2744,9 +4786,11 @@ 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; }
 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 +4805,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); }
@@ -2826,6 +4876,22 @@ form > .table { margin-bottom: var(--space-3); }
 /* Notices and empty states */
 .notice { display: block; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3) var(--space-4); background: var(--surface); color: var(--ink); margin: 0; font-size: var(--text-md); }
 .notice[role="alert"] { border-color: var(--bad-line); background: var(--bad-wash); color: var(--ink); box-shadow: inset 3px 0 0 var(--bad); }
+.meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5) var(--space-6); margin: var(--space-4) 0; }
+.meter { display: grid; gap: 6px; min-width: 0; }
+.meter-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); font-size: var(--text-md); color: var(--ink-2); }
+.meter-value { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
+.meter progress { appearance: none; -webkit-appearance: none; width: 100%; height: 6px; border: 0; border-radius: var(--radius-full); background: var(--sunken); overflow: hidden; }
+.meter progress::-webkit-progress-bar { background: var(--sunken); border-radius: var(--radius-full); }
+.meter progress::-webkit-progress-value { background: var(--ink-2); border-radius: var(--radius-full); }
+.meter progress::-moz-progress-bar { background: var(--ink-2); border-radius: var(--radius-full); }
+.meter.warn progress::-webkit-progress-value { background: var(--warn); }
+.meter.warn progress::-moz-progress-bar { background: var(--warn); }
+.meter.bad progress::-webkit-progress-value { background: var(--bad); }
+.meter.bad progress::-moz-progress-bar { background: var(--bad); }
+.meter.bad .meter-value { color: var(--bad); }
+.plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
+.plan-head h2 { margin: 0; }
+.notice.done { border-color: color-mix(in srgb, var(--good) 35%, var(--line)); background: var(--good-wash); color: var(--ink); box-shadow: inset 3px 0 0 var(--good); }
 .notice.warn, .notice.warn[role="alert"] { border-color: var(--warn-line); background: var(--warn-wash); color: var(--warn); box-shadow: inset 3px 0 0 var(--warn); }
 .notice p { color: inherit; margin: 0 0 var(--space-2); }
 .empty { color: var(--ink-3); margin: 0; }
@@ -2862,23 +4928,6 @@ pre { background: var(--surface-2); border: 1px solid var(--line); border-radius
 .bare-main > .notice { max-width: 480px; }
 
 /* Assistant */
-.chat { display: grid; gap: var(--space-5); }
-.thread { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
-.msg { max-width: 78%; padding: 10px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
-.msg p { margin: 0; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
-.msg.mine { justify-self: end; background: var(--button); border-color: var(--button); border-bottom-right-radius: 4px; }
-.msg.mine p { color: var(--button-ink); }
-.msg.bot { justify-self: start; border-bottom-left-radius: 4px; }
-.tool-line { font: 400 var(--text-sm)/1.5 var(--mono); color: var(--ink-3); padding-left: var(--space-1); }
-.thread > .notice { justify-self: start; }
-.action-card { justify-self: start; width: min(100%, 540px); padding: var(--space-4) var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--pop-shadow); display: grid; gap: var(--space-3); }
-.action-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
-.action-card .facts { font-size: var(--text-md); gap: 6px var(--space-4); }
-.action-card .facts dt::first-letter { text-transform: uppercase; }
-.action-card pre.wrap { white-space: pre-wrap; margin: 0; padding: var(--space-2); font-size: 12px; }
-.action-summary { margin: 0; color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
-.action-card .action-buttons { margin-top: var(--space-1); }
-.composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: end; margin: 0; padding-top: var(--space-4); border-top: 1px solid var(--line-soft); }
 
 @media (max-width: 1080px) {
   .split { grid-template-columns: minmax(0, 1fr); }
@@ -2891,6 +4940,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; }
@@ -2907,6 +4957,8 @@ pre { background: var(--surface-2); border: 1px solid var(--line); border-radius
   .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .stat { padding: 14px var(--space-4); box-shadow: -1px 0 0 var(--line), 0 -1px 0 var(--line); }
   .stat-value { font-size: 22px; }
+  .attention { flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
+  .setup-row .segments { width: 56px; }
   .create > * { flex: 1 1 100%; }
   .create button { width: 100%; }
   .endpoints { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
@@ -2929,13 +4981,12 @@ 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); }
   .pop { left: 0; right: auto; width: min(300px, calc(100vw - 48px)); transform-origin: top left; }
   .table .pop { margin-left: 0; }
-  .msg { max-width: 92%; }
-  .composer { grid-template-columns: minmax(0, 1fr); }
   .empty-state { padding: var(--space-8) var(--space-4); }
   .bare-main { padding-top: 6vh; }
   .sign-in { padding: var(--space-6); }
@@ -2947,7 +4998,22 @@ 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 Usage page calls each plan. */
+const PLAN_NAMES = Object.freeze({ free: 'Free', developer: 'Developer', team: 'Team' });
+const DASHBOARD_ASSETS = Object.freeze({
+    css: DASHBOARD_CSS + SLOTLOCK_ASSISTANT_CSS + SLOTLOCK_SETTINGS_CSS,
+    // The chat's script renders a reply with the server's own Markdown renderer, embedded.
+    js: DASHBOARD_JS + slotlockAssistantScript(renderSlotlockMarkdown.toString()),
+});
 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),
+    css: createHash('sha256').update(DASHBOARD_ASSETS.css).digest('base64url').slice(0, 12),
+    js: createHash('sha256').update(DASHBOARD_ASSETS.js).digest('base64url').slice(0, 12),
+    icon: createHash('sha256').update(SLOTLOCK_DASHBOARD_ICON_SVG).digest('base64url').slice(0, 12),
 });