slotlock 0.7.0 → 0.9.0

package/dashboard.js

@@ -16,26 +16,36 @@
 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_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_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, SLOTLOCK_ASSISTANT_DIRECTORY_SIZE, 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';
 import { lookup as dnsLookup } from 'node:dns/promises';
-import { SLOTLOCK_DASHBOARD_FORM_LIMIT } from './ddl.js';
+import { SLOTLOCK_ASSISTANT_CHAT_ID, 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 { dayToDate } from './hours.js';
+import { SLOTLOCK_MAX_HOLIDAY_CALENDAR_BYTES } from './holidays.js';
+import { readSlotlockHolidayCalendar } from './holiday-import.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 = 500;
+/** Closures the Closures page shows. */
+const SLOTLOCK_DASHBOARD_MAX_EXCEPTIONS = 200;
+/** Contacts the Contacts page shows at once. */
+const SLOTLOCK_DASHBOARD_CONTACTS_PAGE = 100;
 const SESSION_TTL_MS = 12 * 3_600_000;
 const SIGN_IN_TTL_MS = 10 * 60_000;
 /**
@@ -48,6 +58,8 @@ 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;
+/** A holiday calendar import's form: the calendar (SLOTLOCK_MAX_HOLIDAY_CALENDAR_BYTES) and its fields. */
+const MAX_IMPORT_FORM_BYTES = SLOTLOCK_MAX_HOLIDAY_CALENDAR_BYTES + 65_536;
 /**
  * Sign-ins (record, then GitHub's token and user) one instance runs at once; more are told to retry.
  * This also bounds how fast unauthenticated callbacks can write sign-in records.
@@ -84,14 +96,22 @@ const POST_ROUTES = new Set([
     '/sandbox/reset',
     '/sandbox/fast-forward',
     '/hours',
+    '/closures',
+    '/closures/delete',
+    '/closures/import',
+    '/closures/calendars/delete',
+    '/contacts/forget',
     '/organization',
     '/environment',
     '/teams/enable',
     '/teams/disable',
     '/assistant',
+    '/assistant/stream',
     '/assistant/approve',
     '/assistant/dismiss',
     '/assistant/reset',
+    '/assistant/rename',
+    '/assistant/delete',
     '/settings/assistant',
     '/settings/assistant/test',
     '/settings/assistant/models',
@@ -132,7 +152,7 @@ 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)
@@ -217,12 +237,49 @@ export function createSlotlockDashboardResources(store, options = {}) {
             timezone,
             maxTenantResources: SLOTLOCK_DASHBOARD_MAX_RESOURCES,
         }), { isolation: 'read committed', ...by(actor) }),
-        setHours: (tenantRef, target, rules, actor) => store.withTenant(tenantRef, async (tenant) => {
-            if (target === 'all')
-                return tenant.setTenantAvailability({ tenantRef, rules });
+        setHours: (tenantRef, target, rules, actor, override) => store.withTenant(tenantRef, async (tenant) => {
+            if (target === 'all') {
+                return (await tenant.storeTenantAvailability({ tenantRef, rules, overrideResources: override ?? 'none' })).inheriting;
+            }
+            if ('location' in target) {
+                const result = await tenant.setLocationAvailability({ tenantRef, location: target.location, rules });
+                return result === null ? 0 : Math.max(1, result.inheriting);
+            }
             const updated = await tenant.setResourceAvailability({ tenantRef, id: target.id, rules });
             return updated ? 1 : 0;
         }, by(actor)),
+        contacts: {
+            list: (tenantRef, limit, after) => store.withTenant(tenantRef, (tenant) => tenant.listContacts({ tenantRef, limit, ...(after ? { after } : {}) })),
+            forget: (tenantRef, ref, actor) => store.withTenant(tenantRef, (tenant) => tenant.deleteContact({ tenantRef, ref }), { isolation: 'read committed', ...by(actor) }),
+        },
+        hours: {
+            defaults: (tenantRef) => store.withTenant(tenantRef, (tenant) => tenant.getAvailabilityDefaults({ tenantRef })),
+            exceptions: (tenantRef, limit) => store.withTenant(tenantRef, (tenant) => tenant.listAvailabilityExceptions({
+                tenantRef,
+                from: dayToDate(Math.floor(Date.now() / 86_400_000) - 1),
+                limit,
+            })),
+            addException: (tenantRef, exception, actor) => store.withTenant(tenantRef, (tenant) => tenant.createAvailabilityException({ ...exception, tenantRef }), by(actor)),
+            deleteException: (tenantRef, id, actor) => store.withTenant(tenantRef, (tenant) => tenant.deleteAvailabilityException({ tenantRef, id }), by(actor)),
+            importHolidays: async (tenantRef, source, scope, actor) => {
+                // Read (a URL fetched) before the transaction opens.
+                const read = await readSlotlockHolidayCalendar(source, options.holidayFetch);
+                return store.withTenant(tenantRef, async (tenant) => {
+                    const result = await tenant.importHolidayCalendar({
+                        tenantRef,
+                        ...scope,
+                        name: read.name,
+                        ...(read.url !== undefined ? { url: read.url } : {}),
+                        holidays: read.holidays,
+                        span: read.span,
+                    });
+                    return { imported: result.imported, skipped: read.skipped, removed: result.removed };
+                }, by(actor));
+            },
+            byUrl: options.holidayFetch !== undefined,
+            calendars: (tenantRef) => store.withTenant(tenantRef, (tenant) => tenant.listHolidayCalendars({ tenantRef })),
+            deleteCalendar: (tenantRef, id, actor) => store.withTenant(tenantRef, async (tenant) => (await tenant.deleteHolidayCalendar({ tenantRef, id })) !== null, by(actor)),
+        },
         agenda: (tenantRef, window, limit) => store.withTenant(tenantRef, (tenant) => tenant.listAgenda({ tenantRef, window, limit })),
         recentChanges: (tenantRef, limit) => store.withTenant(tenantRef, (tenant) => tenant.listRecentChanges({ tenantRef, limit })),
         setRules: (tenantRef, id, rules, actor) => store.withTenant(tenantRef, (tenant) => tenant.setResourceBookingRules({ tenantRef, id, rules }), by(actor)),
@@ -459,6 +516,11 @@ const RULE_NAMES = Object.freeze({
     bufferBeforeMinutes: 'Buffer before',
     turnaroundMinutes: 'Turnaround',
     checkInMinutes: 'Check-in release',
+    minDurationMinutes: 'Shortest booking',
+    maxDurationMinutes: 'Longest booking',
+    defaultDurationMinutes: 'Usual length',
+    cancelCutoffMinutes: 'Cancel cutoff',
+    rescheduleCutoffMinutes: 'Move cutoff',
 });
 /** The booking rules form's fields, by rule. */
 const RULE_FIELDS = Object.freeze({
@@ -469,6 +531,11 @@ const RULE_FIELDS = Object.freeze({
     bufferBeforeMinutes: 'buffer_before_minutes',
     turnaroundMinutes: 'turnaround_minutes',
     checkInMinutes: 'check_in_minutes',
+    minDurationMinutes: 'min_duration_minutes',
+    maxDurationMinutes: 'max_duration_minutes',
+    defaultDurationMinutes: 'default_duration_minutes',
+    cancelCutoffMinutes: 'cancel_cutoff_minutes',
+    rescheduleCutoffMinutes: 'reschedule_cutoff_minutes',
 });
 /** How the inherited-rules note names each rule, with its unit. */
 const INHERITED_NAMES = Object.freeze({
@@ -476,7 +543,28 @@ const INHERITED_NAMES = Object.freeze({
     maxAdvanceDays: 'Book up to (days ahead)',
     enforceHours: 'Only inside bookable hours',
     requireCertain: 'Only in time its calendar syncs have read today',
+    allowedDurations: 'Lengths (min)',
+    pickupTimes: 'Pick-up times',
+    returnTimes: 'Return times',
+    cancellationFee: 'Cancellation fee',
+    hoursApply: 'Hours hold a hire at',
 });
+/** A rule's value as the dashboard shows it. */
+function ruleValueText(value) {
+    if (typeof value === 'number')
+        return value.toLocaleString('en');
+    if (typeof value === 'boolean')
+        return value ? 'on' : 'off';
+    if (typeof value === 'string')
+        return value === 'ends' ? 'its start and end' : 'all of it';
+    if (!Array.isArray(value)) {
+        const fee = value;
+        return `${(fee.amountMinor / 100).toFixed(2)} ${fee.currency}${fee.withinMinutes !== undefined ? ` within ${fee.withinMinutes.toLocaleString('en')} min` : ''}`;
+    }
+    return value
+        .map((item) => (typeof item === 'number' ? item.toLocaleString('en') : hoursOf(item.startMinutes, item.durationMinutes)))
+        .join(', ');
+}
 /**
  * The rules a resource takes from defaults, each with where it comes from: a rule its pool's
  * defaults set, else one the tenant's set, where its own rules do not. Without the defaults, the
@@ -504,7 +592,7 @@ function inheritedNote(inherited) {
         return html ``;
     const parts = [...inherited].map(([name, { value, from }]) => typeof value === 'boolean'
         ? `${INHERITED_NAMES[name]}${value ? '' : ': off'} (${from})`
-        : `${INHERITED_NAMES[name]} ${value.toLocaleString('en')} (${from})`);
+        : `${INHERITED_NAMES[name]} ${ruleValueText(value)} (${from})`);
     return html `<p class="fine">Inherited: ${parts.join('; ')}.</p>`;
 }
 const icon = (paths) => new Html(`<svg class="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">${paths}</svg>`);
@@ -660,6 +748,20 @@ const CHANGE_LABELS = Object.freeze({
     '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 {
@@ -765,6 +867,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) {
@@ -894,6 +1000,25 @@ function weekFromForm(form) {
     }
     return week;
 }
+/** Minutes after midnight for `HH:MM`, or null. */
+function minutesOf(value) {
+    const match = TIME.exec(value);
+    return match ? Number(match[1]) * 60 + Number(match[2]) : null;
+}
+/**
+ * A resource's hours in one line: its own, or what it inherits and from where (RFC 0004 B2), or the
+ * server's.
+ */
+function resourceHours(resource, server) {
+    if (resource.availabilityRules !== undefined)
+        return hoursSummary(resource.availabilityRules);
+    const inherited = resource.inheritedAvailability;
+    if (inherited) {
+        const from = inherited.source === 'location' ? `${inherited.location ?? 'Location'}'s hours` : 'Your hours';
+        return `${from}: ${hoursSummary(inherited.rules)}`;
+    }
+    return server.length === 0 ? "Server's hours (none)" : `Server's hours: ${hoursSummary(server)}`;
+}
 export function createSlotlockDashboard(options) {
     const publicUrl = new URL(options.publicUrl);
     const origin = publicUrl.origin;
@@ -920,6 +1045,20 @@ export function createSlotlockDashboard(options) {
     }
     // 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');
     }
@@ -1106,9 +1245,7 @@ export function createSlotlockDashboard(options) {
         ...(assistantStore()
             ? [{ section: 'assistant', label: 'Assistant', path: '/assistant', icon: ICONS.assistant }]
             : []),
-        ...(options.billing
-            ? [{ section: 'plan', label: 'Plan', path: '/plan', icon: ICONS.plan }]
-            : []),
+        ...(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 },
     ];
@@ -1177,13 +1314,19 @@ ${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)}
+${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
@@ -1273,74 +1416,209 @@ ${options.termsUrl
         }
         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)}`
-                                : /^google:/.test(change.actor)
-                                    ? 'A Google user'
-                                    : /^dashboard-assistant:(github|google):/.test(change.actor)
-                                        ? change.actor === assistantActor(session)
-                                            ? `Assistant for ${shownAs(session)}`
-                                            : change.actor.startsWith('dashboard-assistant:google:')
-                                                ? 'Assistant for a Google user'
-                                                : `Assistant for GitHub user ${change.actor.slice(27)}`
-                                        : change.actor.slice(0, 60)));
-            const where = change.resourceId
-                ? resourceName(byId.get(change.resourceId), change.resourceId)
-                : null;
-            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 });
+            }
+        }
+        // Own entries only: a type such as `constructor` names nothing here.
+        const own = (map, type) => (Object.hasOwn(map, type) ? map[type] : undefined);
+        return html `<ol class="feed">${runs.map(({ change, times }) => {
+            const tone = own(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 = own(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 this dashboard has no words for (a newer server's): its label, never its type.
+                const label = own(CHANGE_LABELS, change.type)?.text;
+                sentence = label
+                    ? html `${label}${object ? html ` <span class="on">on</span> <strong>${object}</strong>` : html ``}`
+                    : html `Something changed${where ? html ` on <strong>${where}</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). */
@@ -1404,7 +1682,7 @@ ${resourceCount === 0
         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)}
+        const content = html `${noticeOf(notice, status)}
 ${pageHead('API keys')}
 <section class="panel">
 <h2>Connect an agent</h2>
@@ -1435,7 +1713,7 @@ ${keys.length === 0
      * dashboard's own limit, or its plan's when lower (archived resources count against a plan).
      */
     async function resourceAllowance(tenantRef, resources) {
-        const plan = options.billing ? await options.billing.plan(tenantRef) : null;
+        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 };
         }
@@ -1447,12 +1725,16 @@ ${keys.length === 0
             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);
+    async function resourcesPage(session, status = 200, notice, ownHoursOnly = false) {
+        const every = await options.resources.list(tenantOf(session));
+        const allowance = await resourceAllowance(tenantOf(session), every);
+        // `?hours=own`: those that keep hours of their own, which the tenant's hours do not reach.
+        const resources = ownHoursOnly
+            ? every.filter((resource) => resource.archivedAt === undefined && resource.availabilityRules !== undefined)
+            : every;
         const token = csrfToken(session);
-        const content = html `${noticeOf(notice)}
-${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>`)}
+        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 ``}<a class="button" href="${root}/hours">Your hours</a>${options.resources.hours ? html `<a class="button" href="${root}/closures">Closures</a>` : html ``}${options.resources.contacts ? html `<a class="button" href="${root}/contacts">Contacts</a>` : html ``}</div>`)}
 <section class="panel" id="add-resource">
 <h2>Add a resource</h2>
 <form class="create" method="post" action="${root}/resources">
@@ -1464,9 +1746,11 @@ ${pageHead('Resources', html `<div class="row-actions">${options.resources.group
 </form>
 <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
+${ownHoursOnly
+            ? html `<p class="notice" role="status">${String(resources.length)} ${resources.length === 1 ? 'resource keeps hours of its own' : 'resources keep hours of their own'}, so <a href="${root}/hours">your hours</a> do not reach ${resources.length === 1 ? 'it' : 'them'}. <a href="${root}/resources">Show every resource</a></p>`
+            : html ``}${resources.length === 0 && !ownHoursOnly
             ? 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.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>`}`;
+            : 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>${resourceHours(resource, options.availability ?? [])}</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'));
     }
     /** The tenant's locations and groups (RFC 0003 G2, G3): what they are, and adding and changing them. */
@@ -1492,7 +1776,7 @@ ${resources.length === 0
 <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}">
+<td class="actions">${options.resources.hours ? html `<a class="button" href="${root}/hours?location=${location.ref}">Hours</a>` : html ``}<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>
@@ -1510,7 +1794,7 @@ ${resources.length === 0
 <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)}
+        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">
@@ -1542,32 +1826,46 @@ ${groups.length === 0
 </section>`;
         return respond(status, layout('Locations and groups', content, session, 'resources'));
     }
-    async function settingsPage(session, status = 200, notice, draft) {
-        const rules = options.availability ?? [];
-        const current = session.orgs?.find((org) => org.id === session.org);
-        const content = html `${noticeOf(notice)}
-${pageHead('Settings')}
-${await assistantSettingsPanel(session, draft)}
-<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>
-</section>
-<section class="panel">
-<h2>Account</h2>
-<dl class="facts"><dt>Signed in as</dt><dd>${shownAs(session)}</dd>${current
-            ? html `<dt>Organization</dt><dd>${current.login}</dd>${(session.orgs?.length ?? 0) > 1 ? html `<dt>Also a member of</dt><dd>${(session.orgs ?? []).filter((org) => org.id !== current.id).map((org) => org.login).join(', ')}</dd>` : html ``}`
-            : html `<dt>Workspace</dt><dd>Personal</dd>`}<dt>Session ends</dt><dd>${formatDate(new Date(session.exp))}</dd></dl>
-${current ? html `<p class="fine">Membership is read from GitHub when you sign in.</p>` : html ``}
-</section>`;
+    /** Resources with hours of their own the tenant's hours page names; the rest are counted. */
+    const OWN_HOURS_NAMED = 8;
+    /** 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, their location's or yours."
+                : 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 with no hours of their own, their location's or <a href="${root}/hours">yours</a>. 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);
@@ -1612,11 +1910,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))}
 ${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>
+<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>${resourceHours(resource, options.availability ?? [])} <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
@@ -1634,7 +1932,18 @@ ${field('stepOffsetMinutes', 'Steps start past each step by', 'min')}
 ${field('bufferBeforeMinutes', 'Kept free before each booking', 'min')}
 ${field('turnaroundMinutes', 'Turnaround after each booking', 'min')}
 ${field('checkInMinutes', 'Release if not checked in after', 'min')}
+${field('minDurationMinutes', 'Shortest booking', 'min')}
+${field('maxDurationMinutes', 'Longest booking', 'min')}
+${field('defaultDurationMinutes', 'Usual length, offered when none is asked', 'min')}
+${field('cancelCutoffMinutes', 'Cancel up to, before the start', 'min')}
+${field('rescheduleCutoffMinutes', 'Move up to, before the start', 'min')}
 </div>
+${resource.bookingRules?.allowedDurations || resource.bookingRules?.pickupTimes || resource.bookingRules?.returnTimes || resource.bookingRules?.cancellationFee ? html `<p class="fine">Set through the API, and kept when you save: ${[
+                resource.bookingRules.allowedDurations ? `lengths ${ruleValueText(resource.bookingRules.allowedDurations)} min` : '',
+                resource.bookingRules.pickupTimes ? `pick-up ${ruleValueText(resource.bookingRules.pickupTimes)}` : '',
+                resource.bookingRules.returnTimes ? `return ${ruleValueText(resource.bookingRules.returnTimes)}` : '',
+                resource.bookingRules.cancellationFee ? `cancellation fee ${ruleValueText(resource.bookingRules.cancellationFee)}` : '',
+            ].filter(Boolean).join('; ')}.</p>` : html ``}
 ${toggle('enforceHours', 'enforce_hours', 'Only inside bookable hours')}
 ${toggle('requireCertain', 'require_certain', 'Only in time its calendar syncs have read today')}
 ${inheritedNote(inherited)}
@@ -1743,6 +2052,12 @@ ${activity ? html `<section class="panel"><h2>Activity</h2>${activityPanel(activ
         const requireCertain = choice('require_certain');
         if (requireCertain !== undefined)
             rules.requireCertain = requireCertain;
+        // Rules the form does not edit (set through the API) are kept.
+        for (const name of ['allowedDurations', 'pickupTimes', 'returnTimes', 'cancellationFee']) {
+            const kept = resource.bookingRules?.[name];
+            if (kept !== undefined)
+                rules[name] = kept;
+        }
         try {
             await options.resources.setRules(tenantOf(session), id, Object.keys(rules).length === 0 ? null : rules, personOf(session));
         }
@@ -1960,7 +2275,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>
@@ -1991,7 +2306,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 ${options.billing ? 'your plan' : 'Slotlock'} allows. Delete one first${options.billing ? ', or see Plan' : ''}.`
+                ? `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.';
@@ -2060,7 +2375,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>
@@ -2126,7 +2441,7 @@ ${entries.length === 0
 <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)}
+        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">
@@ -2177,7 +2492,35 @@ ${decided.length === 0
     const OWN_HOST_REFUSAL = 'That URL is this Slotlock deployment’s own address. Give the address of the model’s API.';
     const assistantTimeout = assistantOptions?.timeoutMs ?? 30_000;
     const assistantTurnTimeout = assistantOptions?.turnTimeoutMs ?? 90_000;
-    const conversationTtl = assistantOptions?.conversationTtlMs ?? 2 * 3_600_000;
+    // Kept until the member deletes a conversation, unless the deployment gives them a lifetime.
+    const conversationTtl = assistantOptions?.conversationTtlMs ?? null;
+    /** How recently a conversation was used for the assistant page to open on it rather than a new one. */
+    const CHAT_RESUME_MS = 2 * 3_600_000;
+    const newChatId = () => randomBytes(12).toString('base64url');
+    /** The conversation a page or form names, or null for a new one. */
+    const chatOf = (value) => value && SLOTLOCK_ASSISTANT_CHAT_ID.test(value) ? value : null;
+    const chatUrl = (id) => `${root}/assistant?c=${id ?? 'new'}`;
+    /**
+     * The conversation a form goes to: the one its `chat` names, a new one when it is empty, and with
+     * no `chat` at all (a page of an earlier release), the one the page would open: the member's most
+     * recent, used in the past two hours (`anyAge`: however long ago).
+     */
+    async function chatOfForm(store, session, form, anyAge = false) {
+        if (form.has('chat'))
+            return chatOf(form.get('chat'));
+        const [latest] = await store.listChats(tenantOf(session), personOf(session), 1);
+        return latest && (anyAge || now() - latest.updatedAt.getTime() < CHAT_RESUME_MS) ? latest.id : null;
+    }
+    /** A conversation's first title: its first message on one line, cut at a word near 60 characters. */
+    const chatTitle = (text) => {
+        const line = text.replace(/\s+/gu, ' ').trim();
+        const chars = [...line];
+        if (chars.length <= 60)
+            return line || 'New chat';
+        const cut = chars.slice(0, 60).join('');
+        const space = cut.lastIndexOf(' ');
+        return `${(space > 30 ? cut.slice(0, space) : cut).replace(/[\s.,;:!?-]+$/u, '')}…`;
+    };
     if (assistantOptions && Buffer.byteLength(assistantOptions.secret, 'utf8') < 32) {
         throw new Error('Slotlock dashboard assistant secret must be at least 32 bytes');
     }
@@ -2367,38 +2710,127 @@ ${decided.length === 0
             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',
+        hold_group_id: 'Held together',
+        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' || name === 'hold_group_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, chatId) {
+        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="chat" value="${chatId ?? ''}"><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')
@@ -2412,100 +2844,282 @@ ${decided.length === 0
             ...(typeof value.outcome === 'string' ? { outcome: value.outcome } : {}),
         };
     }
-    async function assistantPage(session, status = 200, notice) {
-        const store = assistantStore();
-        if (!store)
-            return notFound(session);
-        const tenantRef = tenantOf(session);
-        const [settings, conversation] = await Promise.all([
-            store.getSettings(tenantRef),
-            store.getConversation(tenantRef, personOf(session)),
-        ]);
-        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));
-            }
+    /** 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;
         }
-        const token = csrfToken(session);
+        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, chatId) {
         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>`);
+        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 === 'note')
-                items.push(html `<li class="notice">${entry.text}</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)
-                        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>`);
+                    if (action) {
+                        cards.push(actionCard(session, action, names, zones, chatId));
+                        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="chat" value="${chatId ?? ''}"><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>`);
                 }
             }
         }
-        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>`}`;
+        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>'),
+        more: new Html('<svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><circle cx="3.5" cy="8" r="1.3"/><circle cx="8" cy="8" r="1.3"/><circle cx="12.5" cy="8" r="1.3"/></svg>'),
+        chats: new Html('<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 4h10M3 8h10M3 12h6"/></svg>'),
+    };
+    /** How long ago a chat was used, as briefly as the list has room for: 4m, 3h, 5d, then the date. */
+    function chatSince(at) {
+        const minutes = Math.max(0, Math.floor((now() - at.getTime()) / 60_000));
+        if (minutes < 1)
+            return 'now';
+        if (minutes < 60)
+            return `${String(minutes)}m`;
+        if (minutes < 24 * 60)
+            return `${String(Math.floor(minutes / 60))}h`;
+        if (minutes < 7 * 24 * 60)
+            return `${String(Math.floor(minutes / (24 * 60)))}d`;
+        return zoned('UTC', { day: 'numeric', month: 'short' }).format(at);
+    }
+    /** When a conversation was last used, as the Chats list groups them: by day, in UTC. */
+    function chatGroup(at) {
+        const day = (ms) => Math.floor(ms / DAY_MS);
+        const daysAgo = day(now()) - day(at.getTime());
+        if (daysAgo <= 0)
+            return 'Today';
+        if (daysAgo === 1)
+            return 'Yesterday';
+        if (daysAgo < 7)
+            return 'Previous 7 days';
+        if (daysAgo < 30)
+            return 'Previous 30 days';
+        return 'Older';
+    }
+    /**
+     * A member's conversations, the most recent first, grouped by when they were last used: each
+     * opens with a link, and has Rename and Delete behind its menu. `current` is the one shown.
+     */
+    function chatsPanel(session, chats, current) {
+        const token = csrfToken(session);
+        const hidden = (id) => html `<input type="hidden" name="csrf" value="${token}"><input type="hidden" name="once" value="${formNonce(session)}"><input type="hidden" name="chat" value="${id}">`;
+        const groups = [];
+        for (const chat of chats) {
+            const label = chatGroup(chat.updatedAt);
+            let group = groups.at(-1);
+            if (!group || group.label !== label) {
+                group = { label, rows: [] };
+                groups.push(group);
+            }
+            const here = chat.id === current;
+            group.rows.push(html `<li class="chat-row${here ? ' current' : ''}"><a class="chat-link" href="${chatUrl(chat.id)}"${here ? html ` aria-current="page"` : html ``}><span class="chat-title">${chat.title}</span><time class="chat-when" datetime="${chat.updatedAt.toISOString()}" title="${formatDate(chat.updatedAt)}">${chatSince(chat.updatedAt)}</time></a><details class="chat-menu"><summary aria-label="Options for ${chat.title}">${ASSISTANT_ICONS.more}</summary><div class="pop"><form class="chat-rename" method="post" action="${root}/assistant/rename">${hidden(chat.id)}<label class="visually-hidden" for="title-${chat.id}">Title</label><input id="title-${chat.id}" name="title" value="${chat.title}" maxlength="120" required><button type="submit">Rename</button></form><form method="post" action="${root}/assistant/delete">${hidden(chat.id)}<button class="danger" type="submit">Delete chat</button></form></div></details></li>`);
+        }
+        const list = groups.length === 0
+            ? html `<p class="empty chats-empty">No chats yet.</p>`
+            : html `${groups.map((group) => html `<h3 class="chat-group">${group.label}</h3><ul class="chat-rows">${group.rows}</ul>`)}`;
+        return html `<aside class="chats" aria-label="Chats"><div class="chats-head"><h2>Chats</h2><a class="icon-button" href="${chatUrl(null)}" aria-label="New chat" title="New chat">${ASSISTANT_ICONS.plus}</a></div><label class="visually-hidden" for="chats-filter">Search chats</label><input id="chats-filter" class="chats-filter" type="search" placeholder="Search chats" autocomplete="off" hidden><nav class="chat-list" aria-label="Your chats">${list}</nav></aside>`;
+    }
+    /**
+     * The assistant: a conversation, with the member's others beside it. `requested` is the page's
+     * `c`: a conversation's id, `new` for a new one, or nothing for the last one used in the past two
+     * hours (else a new one).
+     */
+    async function assistantPage(session, status = 200, notice, requested) {
+        const store = assistantStore();
+        if (!store)
+            return notFound(session);
+        const tenantRef = tenantOf(session);
+        const member = personOf(session);
+        const [settings, chats] = await Promise.all([store.getSettings(tenantRef), store.listChats(tenantRef, member)]);
+        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'));
+        }
+        let chatId = chatOf(requested);
+        if (requested === undefined) {
+            const latest = chats[0];
+            if (latest && now() - latest.updatedAt.getTime() < CHAT_RESUME_MS)
+                chatId = latest.id;
+        }
+        const conversation = chatId ? await store.getChat(tenantRef, member, chatId) : null;
+        if (chatId && !conversation) {
+            // Deleted, or never this member's: a new one instead, saying so.
+            chatId = null;
+            if (requested !== undefined && notice === undefined) {
+                notice = 'That chat is not here: it was deleted.';
+                status = 404;
+            }
+        }
+        const entries = readSlotlockAssistantEntries(conversation?.messages);
+        const actions = conversation?.actions ?? {};
+        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 hidden = () => html `<input type="hidden" name="csrf" value="${token}"><input type="hidden" name="once" value="${formNonce(session)}"><input type="hidden" name="chat" value="${chatId ?? ''}">`;
+        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 actionsHead = html `<div class="assistant-actions"><a class="button ghost chats-link" href="${root}/assistant/chats">${ASSISTANT_ICONS.chats}Chats</a><a class="button ghost new-chat" href="${chatUrl(null)}">${ASSISTANT_ICONS.plus}New chat</a></div>`;
+        const flag = empty ? new Html(' data-empty') : html ``;
+        const content = html `${noticeOf(notice, status)}<div class="assistant-shell">${chatsPanel(session, chats, chatId)}<div class="assistant-page"${flag}>${pageHead(conversation?.title ?? 'Assistant', actionsHead)}<div class="assistant" data-assistant data-stream="${root}/assistant/stream" data-page="${root}/assistant"${flag}><ol class="thread">${assistantItems(session, entries, actions, names, zones, chatId)}</ol><span id="latest"></span>${chips}${composer}</div></div></div>`;
         return respond(status, layout('Assistant', content, session, 'assistant'));
     }
-    async function assistantSettingsPanel(session, draft) {
+    /** The member's conversations on a page of their own: the Chats list where the page is narrow. */
+    async function chatsPage(session) {
         const store = assistantStore();
         if (!store)
-            return html ``;
+            return notFound(session);
+        const chats = await store.listChats(tenantOf(session), personOf(session));
+        const content = html `<div class="chats-page">${pageHead('Chats', html `<a class="button ghost" href="${chatUrl(null)}">${ASSISTANT_ICONS.plus}New chat</a>`)}${chatsPanel(session, chats, null)}</div>`;
+        return respond(200, layout('Chats', content, session, 'assistant'));
+    }
+    /** 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();
         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 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;
+        const provider = draft?.provider ?? settings?.provider ?? 'anthropic';
         const baseUrl = draft ? draft.baseUrl : (settings?.baseUrl ?? '');
         const model = draft?.model ?? settings?.model ?? '';
-        const selected = (value) => (provider === value ? html ` selected` : html ``);
+        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 ?? [];
-        return html `<section class="panel" id="assistant">
-<h2>Assistant</h2>
-<form class="presets" method="get" action="${root}/settings"><span class="fine">Fill in for</span>${SLOTLOCK_ASSISTANT_PRESETS.map((preset) => html `<button type="submit" name="preset" value="${preset.id}">${preset.name}</button>`)}</form>
-<form method="post" action="${root}/settings/assistant">
-<input type="hidden" name="csrf" value="${token}">
-<input type="hidden" name="once" value="${formNonce(session)}">
-<div class="grid-form">
-<label>Provider<select name="provider"><option value="anthropic"${selected('anthropic')}>Anthropic Messages API</option><option value="openai"${selected('openai')}>OpenAI-compatible</option></select></label>
-<label>Base URL<input name="base_url" required maxlength="2048" value="${baseUrl}" placeholder="https://api.anthropic.com"></label>
-<label>Model<input name="model" required maxlength="200" value="${model}" placeholder="your-model"${models.length > 0 ? html ` list="assistant-models"` : html ``}></label>${models.length > 0
+        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 ``}
-<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 ``}
-<div class="row-actions"><button class="primary" type="submit">Save</button><button type="submit" formaction="${root}/settings/assistant/models">Load models</button></div>
-</form>
-${sentTo}
-${settings
-            ? 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>`;
+            : 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) {
@@ -2514,8 +3128,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') {
@@ -2566,14 +3180,14 @@ ${settings
         if (!memberMessages.take(`${tenantOf(session)}\0${session.uid}`)) {
             return tooManyMessages(session, settingsPage);
         }
-        const provider = form.get('provider');
+        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: (form.get('base_url') ?? '').trim(),
+            baseUrl: givenUrl,
             ...(typedModel !== '' ? { model: typedModel } : {}),
         };
         const checkedUrl = readSlotlockAssistantBaseUrl(draft.baseUrl, { privateUrls });
@@ -2655,22 +3269,34 @@ ${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 {
@@ -2679,7 +3305,16 @@ ${settings
         catch {
             // Metering never changes an answer.
         }
-        const stored = await store.getConversation(tenantRef, member);
+        // The conversation the form continues (a new one when it names none, or one deleted meanwhile),
+        // and the resources agents may see, so a name is matched to its id without a lookup.
+        const asked = await chatOfForm(store, session, form);
+        const [stored, listed] = await Promise.all([
+            asked ? store.getChat(tenantRef, member, asked) : Promise.resolve(null),
+            options.resources.list(tenantRef).catch(() => []),
+        ]);
+        const chatId = stored?.id ?? newChatId();
+        const title = stored?.title ?? chatTitle(text);
+        const bookable = listed.filter((resource) => resource.visibility !== 'private' && resource.archivedAt === undefined);
         const entries = boundSlotlockAssistantEntries([
             ...readSlotlockAssistantEntries(stored?.messages),
             { role: 'user', text },
@@ -2696,12 +3331,25 @@ ${settings
                 workspace: current?.login ?? session.login,
                 login: session.login,
                 now: new Date(now()),
+                resources: bookable.slice(0, SLOTLOCK_ASSISTANT_DIRECTORY_SIZE).map((resource) => ({
+                    id: resource.id,
+                    ...(resource.name !== undefined ? { name: resource.name } : {}),
+                    ...(resource.externalRef ? { ref: resource.externalRef } : {}),
+                    ...(resource.kind !== undefined ? { kind: resource.kind } : {}),
+                    ...(resource.locationName !== undefined || resource.location !== undefined
+                        ? { location: (resource.locationName ?? resource.location) }
+                        : {}),
+                    timezone: resource.timezone,
+                })),
+                resourceCount: bookable.length,
             }),
             entries,
             fetch: assistantFetch,
             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.
@@ -2753,134 +3401,374 @@ ${settings
         // Only this turn's proposals are added; the rest are kept as the row holds them now, so one
         // approved (or a conversation reset) while the turn ran is never put back as it stood.
         const kept = pruneSlotlockAssistantActions(messages, { ...(stored?.actions ?? {}), ...proposed });
-        await store.putConversation(tenantRef, member, {
+        await store.putChat(tenantRef, member, chatId, {
+            title,
             messages,
             added: Object.fromEntries(Object.entries(proposed).filter(([id]) => id in kept)),
             keep: Object.keys(kept),
+            // A chat it continued, only while it is still there: deleted during the turn, it stays so.
+            create: stored === null,
         }, conversationTtl);
-        return redirect(303, `${root}/assistant#latest`);
+        return { ok: true, messages, actions: kept, chatId, title };
+    }
+    /** 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, chatOf(form.get('chat')) ?? 'new');
+        }
+        return redirect(303, `${chatUrl(run.chatId)}#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();
+        // Stop, or a client gone, cancels the body. That stops the turn, which keeps what it had, and
+        // the cancel settles only once it has: a Worker closes the request's connection then, and a
+        // runtime that never aborts request.signal on a disconnect stops the turn all the same.
+        const stop = new AbortController();
+        let open = true;
+        let sink;
+        let work = Promise.resolve();
+        const body = new ReadableStream({
+            start(controller) {
+                sink = controller;
+            },
+            cancel() {
+                open = false;
+                stop.abort();
+                return work;
+            },
+        });
+        const write = (event) => {
+            if (!open)
+                return;
+            try {
+                sink?.enqueue(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),
+        });
+        work = (async () => {
+            try {
+                const run = await runAssistantMessage(session, form, {
+                    signal: AbortSignal.any([request.signal, stop.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() };
+                const chats = await assistantStore()?.listChats(tenantOf(session), personOf(session));
+                write({
+                    t: 'done',
+                    html: assistantItems(session, turn, run.actions, lookups.names, lookups.zones, run.chatId).join(''),
+                    once: formNonce(session),
+                    // The conversation it went to (a new one has its id now), its address, and the list again.
+                    chat: run.chatId,
+                    title: run.title,
+                    url: chatUrl(run.chatId),
+                    chats: chats ? chatsPanel(session, chats, run.chatId).value : undefined,
+                });
+            }
+            catch (error) {
+                report(error instanceof Error ? error.message : 'assistant stream failed');
+                failed('Something went wrong. Reload the page and try again.');
+            }
+            finally {
+                if (open) {
+                    open = false;
+                    try {
+                        sink?.close();
+                    }
+                    catch {
+                        // Cancelled meanwhile.
+                    }
+                }
+            }
+        })();
+        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(body, { status: 200, headers });
     }
     async function settleAction(session, form, decision) {
         const store = assistantStore();
         if (!store || !assistantOptions)
             return notFound(session);
         const id = form.get('action') ?? '';
+        const chatId = await chatOfForm(store, session, form, true);
         const tenantRef = tenantOf(session);
         const member = personOf(session);
-        const claimed = ACTION_ID.test(id)
-            ? await store.settleAction(tenantRef, member, id, 'pending', decision === 'approve' ? { status: 'approved' } : { status: 'dismissed', input: {} })
+        const claimed = ACTION_ID.test(id) && chatId
+            ? await store.settleAction(tenantRef, member, chatId, id, 'pending', decision === 'approve' ? { status: 'approved' } : { status: 'dismissed', input: {} })
             : null;
         const action = claimed ? readAction(id, claimed) : null;
-        if (!action)
-            return assistantPage(session, 409, 'That change was already approved or dismissed.');
+        if (!action || !chatId) {
+            return assistantPage(session, 409, 'That change was already approved or dismissed.', chatId ?? undefined);
+        }
         const title = toolTitles.get(action.operation) ?? action.operation;
         let event;
         if (decision === 'dismiss') {
             event = `The member dismissed the proposed change ${id} (${title}); it did not run.`;
         }
         else if (SLOTLOCK_ASSISTANT_TOOL_USE[action.operation] !== 'propose') {
-            await store.settleAction(tenantRef, member, id, 'approved', { status: 'failed', outcome: 'tool_not_available', input: {} });
+            await store.settleAction(tenantRef, member, chatId, id, 'approved', { status: 'failed', outcome: 'tool_not_available', input: {} });
             event = `The proposed change ${id} (${title}) could not run: tool_not_available.`;
         }
         else {
             const outcome = await dispatch(session, action.operation, action.input, 'run');
             // Settled, the card keeps what it said, not the arguments: the actions stay small.
-            await store.settleAction(tenantRef, member, id, 'approved', outcome.ok ? { status: 'done', input: {} } : { status: 'failed', outcome: outcome.code, input: {} });
+            await store.settleAction(tenantRef, member, chatId, id, 'approved', outcome.ok ? { status: 'done', input: {} } : { status: 'failed', outcome: outcome.code, input: {} });
             const result = JSON.stringify(outcome.ok ? outcome.data : { error: { code: outcome.code } });
             event = `The member approved the proposed change ${id} (${title}). ${outcome.ok ? 'It ran' : 'It was refused'}: ${result.length > 4_000 ? `${result.slice(0, 4_000)} …[truncated]` : result}`;
         }
-        const stored = await store.getConversation(tenantRef, member);
+        const stored = await store.getChat(tenantRef, member, chatId);
         if (stored) {
             const entries = [
                 ...readSlotlockAssistantEntries(stored.messages),
                 { role: 'event', text: event },
             ];
             const messages = boundSlotlockAssistantEntries(entries);
-            await store.putConversation(tenantRef, member, { messages, added: {}, keep: Object.keys(pruneSlotlockAssistantActions(messages, stored.actions)) }, conversationTtl);
-        }
-        return redirect(303, `${root}/assistant#action-${id}`);
+            await store.putChat(tenantRef, member, chatId, {
+                title: stored.title,
+                messages,
+                added: {},
+                keep: Object.keys(pruneSlotlockAssistantActions(messages, stored.actions)),
+                create: false,
+            }, conversationTtl);
+        }
+        return redirect(303, `${chatUrl(chatId)}#action-${id}`);
     }
+    /** A new conversation: the others are kept, in Chats. (A form of an earlier release posts here.) */
     async function resetAssistant(session) {
+        if (!assistantStore())
+            return notFound(session);
+        return redirect(303, chatUrl(null));
+    }
+    /** Give one of the member's conversations a title of their own. */
+    async function renameChat(session, form) {
         const store = assistantStore();
         if (!store)
             return notFound(session);
-        await store.deleteConversation(tenantOf(session), personOf(session));
-        return redirect(303, `${root}/assistant`);
+        const chatId = chatOf(form.get('chat'));
+        const title = (form.get('title') ?? '').replace(/\s+/gu, ' ').trim();
+        if (!chatId)
+            return assistantPage(session, 404, 'That chat is not here: it was deleted.', 'new');
+        if ([...title].length < 1 || [...title].length > 120) {
+            return assistantPage(session, 400, 'Give the chat a title of 1 to 120 characters.', chatId);
+        }
+        const renamed = await store.renameChat(tenantOf(session), personOf(session), chatId, title);
+        if (!renamed)
+            return assistantPage(session, 404, 'That chat is not here: it was deleted.', 'new');
+        return redirect(303, chatUrl(chatId));
     }
-    async function planPage(session, status = 200, notice, thanks = false) {
-        const billing = options.billing;
-        if (!billing)
+    /** Delete one of the member's conversations, at once and for good. */
+    async function deleteChat(session, form) {
+        const store = assistantStore();
+        if (!store)
             return notFound(session);
-        if (session.env === 'test') {
-            // Its own use, counted apart from Live's and never billed.
-            const range = slotlockUsageMonthToDate(now());
-            const tested = options.usage && options.resources.usage
-                ? summarizeSlotlockUsage(await options.resources.usage(tenantOf(session), range.from, range.to))
-                : null;
-            const stat = (label, value) => html `<div class="stat"><span class="stat-label">${label}</span><span class="stat-value">${value.toLocaleString('en-GB')}</span></div>`;
-            return respond(status, layout('Plan', html `${pageHead('Plan')}${noticeOf(notice)}<p>The test environment is on your live plan's limits and is never billed. Switch to Live to see your plan, or to change it.</p>${tested
-                ? html `<section class="panel" id="usage"><h2>Test usage this month</h2><div class="stats">${stat('Operations', tested.totals.operations)}${stat('Bookings', tested.totals.bookings)}${stat('Holds', tested.totals.holds)}</div><p class="fine">Since ${range.from}, in UTC, counted apart from Live, against the same monthly quotas.</p></section>`
-                : html ``}`, session, 'plan'));
-        }
+        const chatId = chatOf(form.get('chat'));
+        if (chatId)
+            await store.deleteChat(tenantOf(session), personOf(session), chatId);
+        return redirect(303, chatUrl(null));
+    }
+    /**
+     * 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, resourceCount, keys, webhooks] = await Promise.all([
-            billing.plan(tenantRef),
+        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),
-            options.keys.list({ tenantRef }),
+            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 keyName = new Map(keys.map((key) => [key.id, key.name]));
-        const active = keys.filter((key) => !key.revokedAt && (key.expiresAt === null || key.expiresAt.getTime() > now()));
-        const token = csrfToken(session);
+        const 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 name = plan ? PLAN_NAMES[plan.plan] : 'No plan';
-        // An organization is offered Team where the deployment sells it; a person, Developer.
-        const offered = session.org !== undefined && billing.teamPrices ? 'team' : 'developer';
-        const offeredPrices = offered === 'team' ? billing.teamPrices : billing.prices;
-        const counted = (value) => value.toLocaleString('en-GB');
-        const use = (label, used, limit) => html `<div class="stat"><span class="stat-label">${label}</span><span class="stat-value">${counted(used)}${limit === undefined ? html `` : html `<span class="meta"> of ${counted(limit)}</span>`}</span></div>`;
-        // This month's quotas, when the deployment holds tenants to them.
+        const 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 quotaWarnings = quotas && used
-            ? ['operations', 'bookings'].flatMap((metric) => {
+        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 what = metric === 'operations' ? 'operations' : 'bookings';
                 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) {
-                    return [html `<p class="notice warn" role="alert">This month's ${what} are used up: Slotlock refuses ${refused} with quota_exceeded until ${resets}.${paying ? html `` : html ` Upgrade for more.`}</p>`];
+                    attention.push(attentionItem('bad', `This month's ${metric} are used up: Slotlock refuses ${refused} with quota_exceeded until ${resets}.${upgradeHint}`, upgrade));
                 }
-                if (spent >= quota) {
-                    const billed = metric === 'operations' && billing.overage && plan?.plan === 'developer' && paying;
-                    return [html `<p class="notice warn" role="alert">You have used this month's ${counted(quota)} ${what}.${billed ? ` Those past it are billed at ${billing.overage?.price ?? ''}.` : ''} Slotlock refuses ${refused} past ${counted(stop)}, until ${resets}.</p>`];
+                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));
                 }
-                if (spent * 100 >= quota * 80) {
-                    return [html `<p class="notice warn" role="status">You have used ${String(Math.floor((spent * 100) / quota))}% of this month's ${what}. They start again on ${resets}.</p>`];
+                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));
                 }
-                return [];
-            })
-            : [];
-        const warning = html `${plan?.status === 'past_due'
-            ? html `<p class="notice warn" role="alert">Your last payment failed. Update your payment method to keep the ${name} plan.</p>`
-            : html ``}${quotaWarnings}`;
-        const free = SLOTLOCK_PLAN_LIMITS.free;
-        const developer = SLOTLOCK_PLAN_LIMITS[offered];
-        const upgrade = paying || !isAdmin(session)
-            ? html ``
-            : html `<section class="panel" id="upgrade">
+            }
+        }
+        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>${String(developer.resources)} resources, ${String(developer.apiKeys)} API keys and ${String(developer.webhookEndpoints)} webhook endpoints${options.quotas ? html `, with ${counted(SLOTLOCK_PLAN_QUOTAS[offered].operations)} operations and ${counted(SLOTLOCK_PLAN_QUOTAS[offered].bookings)} bookings a month${offered === 'team' ? ' shared by the organization' : ''}` : html ``}.${offered === 'developer' && billing.overage && options.quotas
-                ? ` Operations past them are billed at ${billing.overage.price}, up to ${String(billing.overage.stopPercent)}% of them.`
-                : ''}</p>
+<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)}">
@@ -2892,46 +3780,22 @@ ${settings
 </form>
 <p class="fine">Paid through Stripe, in your currency, with tax added where it applies. Cancel at any time.</p>
 </section>`;
-        const manage = plan?.stripeCustomer && isAdmin(session)
-            ? html `<form class="inline" method="post" action="${root}/plan/manage"><input type="hidden" name="csrf" value="${token}"><input type="hidden" name="once" value="${formNonce(session)}"><button type="submit">Manage billing</button></form>`
-            : html ``;
-        const renews = paying && plan?.currentPeriodEnd
-            ? html `<p class="fine">${plan.status === 'past_due' ? 'Payment due since' : 'Renews'} ${formatDate(plan.currentPeriodEnd)}.</p>`
-            : html ``;
-        const usageSection = used
-            ? html `<section class="panel" id="usage">
-<h2>Usage this month</h2>
-<div class="stats">
-${use('Operations', used.totals.operations, quotas?.operations)}
-${use('Bookings', used.totals.bookings, quotas?.bookings)}
-${use('Holds', used.totals.holds, undefined)}
-${use('Webhook deliveries', used.totals.webhook_deliveries, undefined)}
-${use('Assistant messages', used.totals.assistant_messages, undefined)}
-</div>
-<p class="fine">Since ${month.from}, in UTC. An operation is a call that reached Slotlock, whatever it answered; it shows here within 15 seconds. A booking is a reservation, a calendar event or a confirmed hold, and with holds shows within the hour.</p>
-${used.keys.length === 0
-                ? html ``
-                : html `<div class="table"><table><thead><tr><th>Used by</th><th>Operations</th><th>Bookings</th><th>Holds</th></tr></thead><tbody>${used.keys.map((row) => html `<tr><td data-label="Used by">${row.keyId === null ? 'The dashboard and its assistant' : (keyName.get(row.keyId) ?? 'A deleted key')}</td><td data-label="Operations">${String(row.operations)}</td><td data-label="Bookings">${String(row.bookings)}</td><td data-label="Holds">${String(row.holds)}</td></tr>`)}</tbody></table></div>`}
-</section>`
-            : html ``;
-        const content = html `${thanks ? html `<p class="notice">${notice ?? ''}</p>` : noticeOf(notice)}
-${warning}
-${pageHead(`Plan: ${name}`, manage)}
-<div class="stats">
-${use('Resources', resourceCount, plan?.limits.resources)}
-${use('Active API keys', active.length, plan?.limits.apiKeys)}
-${webhooks ? use('Webhooks', webhooks.length, plan?.limits.webhookEndpoints) : html ``}
-</div>
-${renews}
-${usageSection}
-${plan ? html `` : html `<p class="fine">Free allows ${String(free.resources)} resources, ${String(free.apiKeys)} API keys and ${String(free.webhookEndpoints)} webhook endpoints${options.quotas ? html `, with ${counted(SLOTLOCK_PLAN_QUOTAS.free.operations)} operations and ${counted(SLOTLOCK_PLAN_QUOTAS.free.bookings)} bookings a month` : html ``}.</p>`}
+            }
+            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}
-<section class="panel" id="custom">
-<h2>Custom</h2>
-<p>Slotlock on your own servers, with support from the people who build it.</p>
-<a class="button" href="${billing.contact}">Talk to the founder</a>
-</section>`;
-        return respond(status, layout('Plan', content, session, 'plan'));
+${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;
@@ -3001,25 +3865,54 @@ ${upgrade}
         if ((route.startsWith('/locations') || route.startsWith('/groups')) && options.resources.grouping) {
             return locationsPage;
         }
+        if (route.startsWith('/closures') && options.resources.hours)
+            return closuresPage;
+        if (route.startsWith('/contacts') && options.resources.contacts)
+            return contactsPage;
         if (route.startsWith('/resources') || route === '/hours')
             return resourcesPage;
         if (route.startsWith('/assistant') && assistantStore())
             return assistantPage;
         if (route.startsWith('/settings'))
             return settingsPage;
-        if (route.startsWith('/plan') && options.billing)
+        if (route.startsWith('/plan') && plans)
             return planPage;
         if (route.startsWith('/teams') && teams)
             return teamsPage;
         return overviewPage;
     }
+    const isLocationTarget = (target) => typeof target === 'object' && 'location' in target && typeof target.location === 'object';
+    /** How many resources keep hours of their own, a few by name, and what saving does to them. */
+    function ownHoursChoice(own) {
+        if (own.length === 0)
+            return html ``;
+        const named = own.slice(0, OWN_HOURS_NAMED);
+        const word = own.length === 1 ? 'resource keeps hours of its own' : 'resources keep hours of their own';
+        return html `<fieldset class="modes"><legend>${String(own.length)} ${word}</legend>
+<p class="fine">${named.map((resource, index) => html `${index > 0 ? ', ' : ''}<a href="${root}/hours?resource=${resource.id}">${resourceName(resource, resource.id)}</a>`)}${own.length > named.length ? html ` and ${String(own.length - named.length)} more` : html ``}. <a href="${root}/resources?hours=own">See them all</a></p>
+<label class="choice"><input type="radio" name="override" value="none" checked> Keep them</label>
+<label class="choice"><input type="radio" name="override" value="matching"> Clear those with the same hours as yours were, or as these: copies an earlier version made when your hours were set</label>
+<label class="choice"><input type="radio" name="override" value="all"> Clear them all, so every resource uses these</label>
+</fieldset>`;
+    }
     function hoursPage(session, state) {
         const { target, mode } = state;
         const checked = (value) => (mode === value ? html ` checked` : html ``);
         const server = options.availability ?? [];
+        const place = isLocationTarget(target) ? target.location : null;
+        const resource = target !== 'all' && !place ? target : null;
         const title = target === 'all'
-            ? 'Hours for every resource'
-            : `Hours for ${target.externalRef ?? target.id}`;
+            ? 'Your hours'
+            : place
+                ? `Hours at ${place.name}`
+                : `Hours for ${resource?.externalRef ?? resource?.id ?? ''}`;
+        const inheritLabel = target === 'all'
+            ? html `The server's hours (${server.length === 0 ? 'none' : hoursSummary(server)})`
+            : place
+                ? html `Inherit: a location it is in, else your hours, else the server's`
+                : resource && resource.availabilityRules === undefined
+                    ? html `Inherit (${resourceHours(resource, server)})`
+                    : html `Inherit: its location's hours, else yours, else the server's`;
         const rows = WEEKDAYS.map((day) => {
             const cells = state.week[day].flatMap(({ from, to }, index) => {
                 const which = index + 1;
@@ -3033,30 +3926,50 @@ ${upgrade}
         });
         const content = html `${state.notice ? html `<p class="notice" role="alert">${state.notice}</p>` : html ``}
 <section>
-<p><a class="back" href="${root}/resources">Resources</a></p>
+<p><a class="back" href="${root}/${place ? 'locations' : 'resources'}">${place ? 'Locations' : 'Resources'}</a></p>
 <h1>${title}</h1>
 <p>${target === 'all'
-            ? 'The same hours for every resource, each in its own time zone. Saving replaces their hours.'
-            : `When agents may book it, in its time zone: ${target.timezone}.`}</p>
+            ? 'Every resource without hours of its own uses these, each in its own time zone, unless its location has hours. Resources you add later too.'
+            : place
+                ? `Resources at ${place.name}, or at a location inside it, without hours of their own use these, each in its own time zone, unless a location nearer them has hours.`
+                : `When agents may book it, in its time zone: ${resource?.timezone ?? ''}.`}${options.resources.hours ? html ` <a href="${root}/closures">Closures and special days</a> change single days.` : html ``}</p>
 ${state.unshown
             ? html `<div class="notice warn" role="alert"><p>These hours were set outside the dashboard, so the week below cannot show them. Saving replaces them.</p><ul class="hours">${state.unshown.map((rule) => html `<li><code>${rule.rrule}</code> from ${formatMinutes(rule.startMinutes)} for ${String(rule.durationMinutes)} min</li>`)}</ul></div>`
             : html ``}
 <form method="post" action="${root}/hours">
 <input type="hidden" name="csrf" value="${csrfToken(session)}">
 <input type="hidden" name="once" value="${formNonce(session)}">
-<input type="hidden" name="resource" value="${target === 'all' ? 'all' : target.id}">
+${place ? html `<input type="hidden" name="location" value="${place.ref}">` : html `<input type="hidden" name="resource" value="${target === 'all' ? 'all' : (resource?.id ?? '')}">`}
 <fieldset class="modes"><legend>Bookable hours</legend>
-<label class="choice"><input type="radio" name="mode" value="server"${checked('server')}> The server's hours (${server.length === 0 ? 'none' : hoursSummary(server)})</label>
+<label class="choice"><input type="radio" name="mode" value="server"${checked('server')}> ${inheritLabel}</label>
 <label class="choice"><input type="radio" name="mode" value="closed"${checked('closed')}> Closed: agents find no free slot</label>
 <label class="choice"><input type="radio" name="mode" value="custom"${checked('custom')}> These hours</label>
 </fieldset>
 <div class="table"><table class="week"><thead><tr><th>Day</th><th>Opens</th><th>Closes</th><th>Opens</th><th>Closes</th></tr></thead><tbody>${rows}</tbody></table></div>
 <p class="fine">A closing time at or before the opening time closes the next day; 00:00 to 00:00 is the whole day. Leave a window empty for none.</p>
+${target === 'all' ? ownHoursChoice(state.own ?? []) : html ``}
 <button class="primary" type="submit">Save hours</button>
 </form>
 </section>`;
         return respond(state.status ?? 200, layout('Bookable hours', content, session, 'resources'));
     }
+    /** The editor's state for stored rules: inherit (null), closed ([]), or a week. */
+    function hoursState(rules) {
+        if (rules === undefined || rules === null) {
+            return { mode: 'server', week: weekFormOf(rulesToWeeklyHours(options.availability ?? [])) };
+        }
+        if (rules.length === 0)
+            return { mode: 'closed', week: emptyWeekForm() };
+        const week = rulesToWeeklyHours(rules);
+        return { mode: 'custom', week: weekFormOf(week), ...(week === null ? { unshown: rules } : {}) };
+    }
+    /** The tenant's location with that reference, or null. */
+    async function ownLocation(session, ref) {
+        const grouping = options.resources.grouping;
+        if (!grouping || !/^[a-z0-9][a-z0-9._-]{0,99}$/.test(ref))
+            return null;
+        return (await grouping.locations(tenantOf(session))).find((location) => location.ref === ref) ?? null;
+    }
     /** The tenant's resource with that id, or null for anything else. */
     async function ownResource(session, id) {
         if (!UUID_PATTERN.test(id))
@@ -3066,38 +3979,51 @@ ${state.unshown
     }
     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));
+    /** The tenant's resources in use that keep hours of their own, by name. */
+    async function ownHoursOf(session) {
+        const resources = await options.resources.list(tenantOf(session));
+        return resources
+            .filter((resource) => resource.archivedAt === undefined && resource.availabilityRules !== undefined)
+            .sort((one, other) => resourceName(one, one.id).localeCompare(resourceName(other, other.id)));
+    }
     async function hoursEditor(session, url) {
+        const ref = url.searchParams.get('location');
+        if (ref !== null) {
+            const location = await ownLocation(session, ref);
+            if (!location || !options.resources.hours)
+                return nothingHere(session);
+            const defaults = await options.resources.hours.defaults(tenantOf(session));
+            const rules = defaults.locations.find((entry) => entry.location === ref)?.rules ?? null;
+            return hoursPage(session, { target: { location }, ...hoursState(rules) });
+        }
         const id = url.searchParams.get('resource');
         if (id === null) {
-            const server = rulesToWeeklyHours(options.availability ?? []);
-            return hoursPage(session, { target: 'all', mode: 'server', week: weekFormOf(server) });
+            const [defaults, own] = await Promise.all([options.resources.hours?.defaults(tenantOf(session)), ownHoursOf(session)]);
+            return hoursPage(session, { target: 'all', ...hoursState(defaults?.tenant ?? null), own });
         }
         const resource = await ownResource(session, id);
         if (!resource)
             return notFound(session);
-        const rules = resource.availabilityRules;
-        if (rules === undefined) {
-            const server = rulesToWeeklyHours(options.availability ?? []);
-            return hoursPage(session, { target: resource, mode: 'server', week: weekFormOf(server) });
-        }
-        if (rules.length === 0) {
-            return hoursPage(session, { target: resource, mode: 'closed', week: emptyWeekForm() });
-        }
-        const week = rulesToWeeklyHours(rules);
-        return hoursPage(session, {
-            target: resource,
-            mode: 'custom',
-            week: weekFormOf(week),
-            ...(week === null ? { unshown: rules } : {}),
-        });
+        return hoursPage(session, { target: resource, ...hoursState(resource.availabilityRules) });
     }
+    /** The form's choice for resources' own hours (`yes`: the checkbox of a page from before); anything else keeps them. */
+    const overrideOf = (value) => value === 'all' || value === 'yes' ? 'all' : value === 'matching' ? 'matching' : 'none';
     async function saveHours(session, form) {
+        const ref = form.get('location');
         const id = form.get('resource') ?? '';
-        const target = id === 'all' ? 'all' : await ownResource(session, id);
+        let target;
+        if (ref !== null) {
+            const location = await ownLocation(session, ref);
+            target = location && options.resources.hours ? { location } : null;
+        }
+        else {
+            target = id === 'all' ? 'all' : await ownResource(session, id);
+        }
         if (!target)
             return notFound(session);
         const mode = form.get('mode');
         const week = readWeekForm(form);
+        const own = target === 'all' ? await ownHoursOf(session) : undefined;
         if (mode !== 'server' && mode !== 'closed' && mode !== 'custom') {
             return hoursPage(session, {
                 target,
@@ -3105,6 +4031,7 @@ ${state.unshown
                 week,
                 status: 400,
                 notice: 'Choose which hours to use.',
+                own,
             });
         }
         let rules = mode === 'server' ? null : [];
@@ -3126,16 +4053,254 @@ ${state.unshown
                     week,
                     status: 400,
                     notice: error.message,
+                    own,
                 });
             }
         }
-        const changed = await options.resources.setHours(tenantOf(session), target === 'all' ? 'all' : { id: target.id }, rules, personOf(session));
-        if (changed === 0) {
-            return target === 'all'
-                ? resourcesPage(session, 409, 'Add a resource first, then set its hours.')
-                : notFound(session);
+        const place = isLocationTarget(target) ? target.location : null;
+        const changed = target === 'all'
+            ? await options.resources.setHours(tenantOf(session), 'all', rules, personOf(session), overrideOf(form.get('override')))
+            : await options.resources.setHours(tenantOf(session), place ? { location: place.ref } : { id: target.id }, rules, personOf(session));
+        if (changed === 0 && target !== 'all')
+            return notFound(session);
+        return redirect(303, `${root}/${place ? 'locations' : 'resources'}`);
+    }
+    /** A subscription's address as the page names it: its host, never its path or query (which may hold a token). */
+    const hostOfUrl = (url) => {
+        try {
+            return new URL(url).host;
         }
-        return redirect(303, `${root}/resources`);
+        catch {
+            return 'its address';
+        }
+    };
+    /** The tenant's closures and special days from yesterday on, with forms to add and import more. */
+    async function closuresPage(session, status = 200, notice) {
+        const hours = options.resources.hours;
+        if (!hours)
+            return nothingHere(session);
+        const tenantRef = tenantOf(session);
+        const [exceptions, locations, resources, calendars] = await Promise.all([
+            hours.exceptions(tenantRef, SLOTLOCK_DASHBOARD_MAX_EXCEPTIONS + 1),
+            options.resources.grouping?.locations(tenantRef) ?? Promise.resolve([]),
+            options.resources.list(tenantRef),
+            hours.calendars?.(tenantRef) ?? Promise.resolve([]),
+        ]);
+        const token = csrfToken(session);
+        const sent = () => html `<input type="hidden" name="csrf" value="${token}"><input type="hidden" name="once" value="${formNonce(session)}">`;
+        const names = new Map(resources.map((resource) => [resource.id, resourceName(resource, resource.id)]));
+        const places = new Map(locations.map((location) => [location.ref, location.name]));
+        const scopeOf = (exception) => exception.resourceId
+            ? names.get(exception.resourceId) ?? exception.resourceId
+            : exception.location
+                ? `${places.get(exception.location) ?? exception.location} (location)`
+                : 'Everywhere';
+        const days = (exception) => exception.startsOn === exception.endsOn ? exception.startsOn : `${exception.startsOn} to ${exception.endsOn}`;
+        const what = (exception) => exception.outcome === 'closed'
+            ? 'Closed'
+            : `Open ${(exception.hours ?? []).map((window) => hoursOf(window.startMinutes, window.durationMinutes)).join(', ')}`;
+        const scopeOptions = html `<option value="">Everywhere</option>${locations.map((location) => html `<option value="location:${location.ref}">${location.name} (location)</option>`)}${resources.slice(0, SLOTLOCK_DASHBOARD_MAX_RESOURCES).map((resource) => html `<option value="resource:${resource.id}">${resourceName(resource, resource.id)}</option>`)}`;
+        const shown = exceptions.slice(0, SLOTLOCK_DASHBOARD_MAX_EXCEPTIONS);
+        const content = html `${noticeOf(notice)}
+<section>
+<p><a class="back" href="${root}/resources">Resources</a></p>
+<h1>Closures and special days</h1>
+<p>Each closes whole days, or gives them hours of their own instead of the weekly hours, read in each resource's time zone. Where several apply to a day, the nearest wins: a resource's own, then its location's, then everywhere's.</p>
+<div class="table"><table><thead><tr><th>Days</th><th>Applies to</th><th>Hours</th><th>Label</th><th></th></tr></thead><tbody>${shown.length === 0
+            ? html `<tr><td colspan="5" class="muted">No closures from today on.</td></tr>`
+            : shown.map((exception) => html `<tr><td data-label="Days">${days(exception)}</td><td data-label="Applies to">${scopeOf(exception)}</td><td data-label="Hours">${what(exception)}</td><td data-label="Label" class="wrap">${exception.label}${exception.source === 'ics' ? html ` <span class="meta">imported</span>` : html ``}</td><td class="actions"><form method="post" action="${root}/closures/delete">${sent()}<input type="hidden" name="id" value="${exception.id}"><button type="submit">Delete</button></form></td></tr>`)}</tbody></table></div>
+${exceptions.length > SLOTLOCK_DASHBOARD_MAX_EXCEPTIONS ? html `<p class="fine">The first ${String(SLOTLOCK_DASHBOARD_MAX_EXCEPTIONS)} are shown; the API lists them all.</p>` : html ``}
+<h2>Add a closure or special day</h2>
+<form method="post" action="${root}/closures" class="stack">${sent()}
+<label>Applies to <select name="scope">${scopeOptions}</select></label>
+<label>First day <input type="date" name="starts_on" required></label>
+<label>Last day <input type="date" name="ends_on"></label>
+<fieldset class="modes"><legend>Those days</legend>
+<label class="choice"><input type="radio" name="outcome" value="closed" checked> Closed</label>
+<label class="choice"><input type="radio" name="outcome" value="open"> Open only from <input type="time" name="opens" aria-label="Opens"> to <input type="time" name="closes" aria-label="Closes"></label>
+</fieldset>
+<label>Label <input name="label" maxlength="200" required placeholder="Christmas Day"></label>
+<button class="primary" type="submit">Add</button>
+</form>
+${calendars.length > 0 ? html `<h2>Holiday calendars</h2>
+<div class="table"><table><thead><tr><th>Calendar</th><th>Applies to</th><th>From</th><th>Closures</th><th></th></tr></thead><tbody>${calendars.map((calendar) => html `<tr><td data-label="Calendar" class="wrap">${calendar.name}${calendar.lastError ? html `<span class="meta bad" role="status">The last import failed: ${calendar.lastError}</span>` : html ``}</td><td data-label="Applies to">${calendar.resourceId
+            ? names.get(calendar.resourceId) ?? calendar.resourceId
+            : calendar.location
+                ? `${places.get(calendar.location) ?? calendar.location} (location)`
+                : 'Everywhere'}</td><td data-label="From" class="wrap">${calendar.url
+            ? html `${hostOfUrl(calendar.url)}<span class="meta">Imported again every 30 days${calendar.nextImportAt ? html `, next ${calendar.nextImportAt.toISOString().slice(0, 10)}` : html ``}</span>`
+            : html `Uploaded or pasted${calendar.importedAt ? html `<span class="meta">${calendar.importedAt.toISOString().slice(0, 10)}</span>` : html ``}`}</td><td data-label="Closures">${String(calendar.closures)}</td><td class="actions">${hours.deleteCalendar
+            ? html `<form method="post" action="${root}/closures/calendars/delete">${sent()}<input type="hidden" name="id" value="${calendar.id}"><button type="submit" class="danger">Delete</button></form>`
+            : html ``}</td></tr>`)}</tbody></table></div>
+<p class="fine">Deleting a calendar deletes its closures too.</p>` : html ``}
+<h2>Import a holiday calendar</h2>
+<p>Upload or paste an iCalendar file of days off${hours.byUrl ? html `, or give its address` : html ``}: each all-day event closes its days for the next two years. A calendar is kept by its name where it applies: importing it again updates its closures and removes the holidays it no longer has.</p>
+<form method="post" action="${root}/closures/import" class="stack" enctype="multipart/form-data">${sent()}
+<label>Applies to <select name="scope">${scopeOptions}</select></label>
+<label>Name <input name="name" maxlength="200" placeholder="Its own name, else its address, else Holidays"></label>
+<label>File <input type="file" name="icalendar_file" accept=".ics,text/calendar"></label>
+<label>Or paste it <textarea name="icalendar" rows="6" placeholder="BEGIN:VCALENDAR"></textarea></label>
+${hours.byUrl ? html `<label>Or its address <input type="url" name="url" maxlength="2000" placeholder="https://example.com/holidays.ics"></label>
+<label class="choice"><input type="checkbox" name="subscribe" value="on"> Import it again every 30 days</label>` : html ``}
+<button type="submit">Import</button>
+</form>
+</section>`;
+        return respond(status, layout('Closures', content, session, 'resources'));
+    }
+    /**
+     * The people the tenant keeps to tell about bookings (RFC 0004 P3): how to reach each, what they
+     * agreed to and when, and a button that forgets one (their reference leaves every booking too).
+     * Contacts are added by the tenant's own systems, through the API.
+     */
+    async function contactsPage(session, status = 200, notice, after) {
+        const contacts = options.resources.contacts;
+        if (!contacts)
+            return nothingHere(session);
+        const listed = await contacts.list(tenantOf(session), SLOTLOCK_DASHBOARD_CONTACTS_PAGE + 1, after);
+        const shown = listed.slice(0, SLOTLOCK_DASHBOARD_CONTACTS_PAGE);
+        const token = csrfToken(session);
+        const reach = (contact) => [contact.email, contact.phone ? `SMS ${contact.phone}` : null, contact.whatsapp ? `WhatsApp ${contact.whatsapp}` : null]
+            .filter(Boolean)
+            .join(', ') || 'No way to reach them';
+        const agreed = (contact) => ['email', 'sms', 'whatsapp']
+            .filter((channel) => contact.consent[channel] !== undefined)
+            .map((channel) => `${channel === 'sms' ? 'SMS' : channel === 'whatsapp' ? 'WhatsApp' : 'Email'}: ${contact.consent[channel] ? 'yes' : 'no'}${contact.consentAt[channel] ? ` (${contact.consentAt[channel]?.toISOString().slice(0, 10)})` : ''}`)
+            .join('; ') || 'Not asked';
+        const content = html `${noticeOf(notice)}
+<section>
+<p><a class="back" href="${root}/resources">Resources</a></p>
+<h1>Contacts</h1>
+<p>The people your bookings name to be told about them, kept by your own systems through the API (<code>PUT /v1/contacts/{contact_ref}</code>). Forgetting one deletes them and takes their reference off every booking, for an erasure request.</p>
+<table><thead><tr><th>Reference</th><th>Name</th><th>Reach by</th><th>Agreed to</th><th></th></tr></thead><tbody>${shown.length === 0
+            ? html `<tr><td colspan="5" class="muted">No contacts yet.</td></tr>`
+            : shown.map((contact) => html `<tr><td data-label="Reference"><code>${contact.ref}</code></td><td data-label="Name">${contact.name ?? ''}</td><td data-label="Reach by" class="wrap">${reach(contact)}</td><td data-label="Agreed to" class="wrap">${agreed(contact)}</td><td class="actions"><form method="post" action="${root}/contacts/forget"><input type="hidden" name="csrf" value="${token}"><input type="hidden" name="once" value="${formNonce(session)}"><input type="hidden" name="ref" value="${contact.ref}"><button type="submit" class="danger">Forget</button></form></td></tr>`)}</tbody></table>
+${listed.length > SLOTLOCK_DASHBOARD_CONTACTS_PAGE ? html `<p><a class="button" href="${root}/contacts?after=${encodeURIComponent(shown.at(-1)?.ref ?? '')}">More</a></p>` : html ``}
+</section>`;
+        return respond(status, layout('Contacts', content, session, 'resources'));
+    }
+    async function forgetContact(session, form) {
+        const contacts = options.resources.contacts;
+        if (!contacts)
+            return nothingHere(session);
+        const ref = form.get('ref') ?? '';
+        if (!/^[A-Za-z0-9][A-Za-z0-9._:-]{0,199}$/.test(ref))
+            return contactsPage(session, 400, 'That is not a contact reference.');
+        const forgotten = await contacts.forget(tenantOf(session), ref, personOf(session));
+        if (!forgotten.deleted)
+            return contactsPage(session, 404, 'That contact is not one of yours.');
+        return contactsPage(session, 200, `Forgotten. ${forgotten.bookings} booking${forgotten.bookings === 1 ? '' : 's'} no longer name them.`);
+    }
+    /** `location:<ref>` or `resource:<id>` from a closures form, checked against the tenant's. */
+    async function closureScope(session, value) {
+        if (value === '')
+            return {};
+        if (value.startsWith('location:')) {
+            const location = await ownLocation(session, value.slice(9));
+            return location ? { location: location.ref } : null;
+        }
+        if (value.startsWith('resource:')) {
+            const resource = await ownResource(session, value.slice(9));
+            return resource ? { resourceId: resource.id } : null;
+        }
+        return null;
+    }
+    async function saveClosure(session, form) {
+        const hours = options.resources.hours;
+        if (!hours)
+            return nothingHere(session);
+        const scope = await closureScope(session, form.get('scope') ?? '');
+        if (!scope)
+            return closuresPage(session, 400, 'Choose where it applies.');
+        const outcome = form.get('outcome') === 'open' ? 'open' : 'closed';
+        const startsOn = form.get('starts_on') ?? '';
+        const endsOn = form.get('ends_on') || startsOn;
+        let windows;
+        if (outcome === 'open') {
+            const opens = minutesOf(form.get('opens') ?? '');
+            const closes = minutesOf(form.get('closes') ?? '');
+            if (opens === null || closes === null)
+                return closuresPage(session, 400, 'Give the hours those days open.');
+            windows = [{ startMinutes: opens, durationMinutes: closes > opens ? closes - opens : closes + 1_440 - opens }];
+        }
+        try {
+            await hours.addException(tenantOf(session), {
+                ...scope,
+                startsOn,
+                endsOn,
+                outcome,
+                ...(windows ? { hours: windows } : {}),
+                label: form.get('label') ?? '',
+            }, personOf(session));
+        }
+        catch (error) {
+            const code = error.code;
+            if (code === 'invalid_availability_exception' || code === 'availability_exceptions_limit_reached') {
+                return closuresPage(session, code === 'invalid_availability_exception' ? 400 : 409, error.message);
+            }
+            throw error;
+        }
+        return redirect(303, `${root}/closures`);
+    }
+    async function deleteClosure(session, form) {
+        const hours = options.resources.hours;
+        if (!hours)
+            return nothingHere(session);
+        const id = form.get('id') ?? '';
+        if (!UUID_PATTERN.test(id) || !(await hours.deleteException(tenantOf(session), id, personOf(session)))) {
+            return closuresPage(session, 404, 'That closure is not one of yours.');
+        }
+        return redirect(303, `${root}/closures`);
+    }
+    async function importClosures(session, form) {
+        const hours = options.resources.hours;
+        if (!hours)
+            return nothingHere(session);
+        const scope = await closureScope(session, form.get('scope') ?? '');
+        if (!scope)
+            return closuresPage(session, 400, 'Choose where it applies.');
+        // An uploaded file, else what was pasted, else (where the server reads them) an address.
+        const text = (form.get('icalendar_file') ?? '').trim() || (form.get('icalendar') ?? '').trim();
+        const url = hours.byUrl ? (form.get('url') ?? '').trim() : '';
+        if ((text === '') === (url === '')) {
+            return closuresPage(session, 400, hours.byUrl ? 'Upload or paste a calendar, or give its address: one of them.' : 'Upload or paste a calendar.');
+        }
+        const name = (form.get('name') ?? '').trim();
+        const source = {
+            ...(text !== '' ? { icalendar: text } : { url }),
+            ...(name !== '' ? { name } : {}),
+            ...(url !== '' && form.get('subscribe') === 'on' ? { subscribe: true } : {}),
+        };
+        try {
+            const result = await hours.importHolidays(tenantOf(session), source, scope, personOf(session));
+            const plural = (count, word) => `${String(count)} ${word}${count === 1 ? '' : 's'}`;
+            return closuresPage(session, 200, `Imported ${plural(result.imported, 'closure')}${result.removed > 0 ? `; removed ${plural(result.removed, 'holiday')} the calendar no longer has` : ''}${result.skipped > 0 ? `; skipped ${plural(result.skipped, 'event')} that were not all-day or not in the next two years` : ''}.`);
+        }
+        catch (error) {
+            const code = error.code;
+            if (code === 'invalid_holiday_calendar' ||
+                code === 'invalid_availability_exception' ||
+                code === 'holiday_calendar_unreachable' ||
+                code === 'holiday_url_not_served' ||
+                code === 'location_not_found' ||
+                code === 'resource_not_found') {
+                return closuresPage(session, 400, error.message);
+            }
+            if (code === 'availability_exceptions_limit_reached' || code === 'holiday_calendars_limit_reached') {
+                return closuresPage(session, 409, error.message);
+            }
+            throw error;
+        }
+    }
+    /** Delete a holiday calendar and the closures it made. */
+    async function deleteHolidayCalendar(session, form) {
+        const hours = options.resources.hours;
+        if (!hours?.deleteCalendar)
+            return nothingHere(session);
+        const id = form.get('id') ?? '';
+        if (!(await hours.deleteCalendar(tenantOf(session), id, personOf(session)))) {
+            return closuresPage(session, 404, 'That calendar is not one of yours.');
+        }
+        return redirect(303, `${root}/closures`);
     }
     function shownOncePage(session, key, apiKey, rotated) {
         const org = session.orgs?.find((candidate) => candidate.id === session.org);
@@ -3188,7 +4353,7 @@ ${org ? html `<p>For the organization <strong>${org.login}</strong>.</p>` : html
                     : html `<span class="muted">An owner can turn it on</span>`;
             return html `<tr><td data-label="Organization" class="strong">${org.login}</td><td data-label="You are">${owner ? 'Owner' : 'Member'}</td><td data-label="Slotlock"><span class="pill ${on ? 'active' : 'revoked'}">${on ? 'On' : 'Off'}</span></td><td class="actions">${actions}</td></tr>`;
         });
-        const content = html `${noticeOf(notice)}${pageHead('Teams')}
+        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.')
@@ -3586,9 +4751,11 @@ ${rows.length === 0
         ]);
     }
     /** The form, `'too_large'` past MAX_FORM_BYTES (read no further), or null for another type. */
-    async function readForm(request, maxBytes = MAX_FORM_BYTES) {
-        const type = request.headers.get('content-type')?.split(';')[0]?.trim();
-        if (type !== 'application/x-www-form-urlencoded')
+    async function readForm(request, maxBytes = MAX_FORM_BYTES, multipart = false) {
+        const header = request.headers.get('content-type') ?? '';
+        const type = header.split(';')[0]?.trim();
+        const isMultipart = multipart && type === 'multipart/form-data';
+        if (type !== 'application/x-www-form-urlencoded' && !isMultipart)
             return null;
         const declared = Number(request.headers.get('content-length'));
         if (Number.isFinite(declared) && declared > maxBytes)
@@ -3609,7 +4776,24 @@ ${rows.length === 0
             }
             chunks.push(value);
         }
-        return new URLSearchParams(Buffer.concat(chunks).toString('utf8'));
+        if (!isMultipart)
+            return new URLSearchParams(Buffer.concat(chunks).toString('utf8'));
+        // A file field is read as text under its name; nothing else a form sends is kept apart.
+        let data;
+        try {
+            data = await new Response(Buffer.concat(chunks), { headers: { 'content-type': header } }).formData();
+        }
+        catch {
+            return null;
+        }
+        const form = new URLSearchParams();
+        for (const [name, value] of data.entries()) {
+            if (typeof value === 'string')
+                form.append(name, value);
+            else if (value.size > 0)
+                form.append(name, await value.text());
+        }
+        return form;
     }
     async function createKey(session, form) {
         const scopes = KEY_ACCESS[form.get('access') ?? ''];
@@ -3632,9 +4816,9 @@ ${rows.length === 0
             }
             // Keys limited to part of the tenant come with Developer (RFC 0003 pricing); a server without
             // plans allows them.
-            const plan = options.billing ? await options.billing.plan(tenantOf(session)) : null;
+            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 Plan.');
+                return keysPage(session, 403, 'Keys limited to locations or groups come with the Developer and Team plans. See Usage.');
             }
         }
         try {
@@ -3659,8 +4843,8 @@ ${rows.length === 0
                 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, options.billing
-                    ? 'You have as many active keys as your plan allows. Revoke one first, or see Plan.'
+                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;
@@ -3735,7 +4919,7 @@ ${rows.length === 0
             if (code === 'resource_limit_reached') {
                 const limit = error.limit;
                 return resourcesPage(session, 409, typeof limit === 'number' && limit < SLOTLOCK_DASHBOARD_MAX_RESOURCES
-                    ? `You have ${String(limit)} resources, archived ones included, as many as your plan allows. Delete one, or see Plan.`
+                    ? `You have ${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') {
@@ -3756,7 +4940,13 @@ ${rows.length === 0
         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);
+        // A holiday calendar may be uploaded, or pasted, up to its own limit.
+        const importing = route === '/closures/import';
+        const form = await readForm(request, importing
+            ? MAX_IMPORT_FORM_BYTES
+            : route === '/assistant' || route === '/assistant/stream'
+                ? MAX_ASSISTANT_FORM_BYTES
+                : MAX_FORM_BYTES, importing);
         if (form === 'too_large') {
             return respond(413, layout('Refused', html `<p class="notice">That form is too large.</p>`, session));
         }
@@ -3794,12 +4984,17 @@ ${rows.length === 0
                 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')) {
+                    const chat = chatOf(form.get('chat'));
+                    return redirect(303, chat ? `${chatUrl(chat)}#latest` : `${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 options.billing?.enrol?.(tenantOf(session));
+            await plans?.enrol?.(tenantOf(session));
         }
         switch (route) {
             case '/sign-out':
@@ -3817,6 +5012,16 @@ ${rows.length === 0
                 return addResource(session, form);
             case '/hours':
                 return saveHours(session, form);
+            case '/closures':
+                return saveClosure(session, form);
+            case '/closures/delete':
+                return deleteClosure(session, form);
+            case '/closures/import':
+                return importClosures(session, form);
+            case '/closures/calendars/delete':
+                return deleteHolidayCalendar(session, form);
+            case '/contacts/forget':
+                return forgetContact(session, form);
             case '/organization':
                 return switchOrganization(session, form);
             case '/environment':
@@ -3857,12 +5062,18 @@ ${rows.length === 0
                 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':
                 return settleAction(session, form, 'dismiss');
             case '/assistant/reset':
                 return resetAssistant(session);
+            case '/assistant/rename':
+                return renameChat(session, form);
+            case '/assistant/delete':
+                return deleteChat(session, form);
             case '/settings/assistant':
                 return saveAssistantSettings(session, form);
             case '/settings/assistant/models':
@@ -3904,8 +5115,12 @@ ${rows.length === 0
                         case '/waitlist':
                         case '/approvals':
                         case '/assistant':
+                        case '/assistant/chats':
                         case '/plan':
                         case '/teams':
+                        case '/settings/endpoints':
+                        case '/settings/hours':
+                        case '/settings/account':
                         case '/settings': {
                             const session = await readSession(request);
                             if (!session)
@@ -3919,8 +5134,9 @@ ${rows.length === 0
                             }
                             if (route === '/keys')
                                 return await keysPage(session);
-                            if (route === '/resources')
-                                return await resourcesPage(session);
+                            if (route === '/resources') {
+                                return await resourcesPage(session, 200, undefined, url.searchParams.get('hours') === 'own');
+                            }
                             if (route === '/webhooks')
                                 return await webhooksPage(session);
                             if (route === '/waitlist')
@@ -3928,15 +5144,23 @@ ${rows.length === 0
                             if (route === '/approvals')
                                 return await approvalsPage(session);
                             if (route === '/assistant')
-                                return await assistantPage(session);
+                                return await assistantPage(session, 200, undefined, url.searchParams.get('c') ?? undefined);
+                            if (route === '/assistant/chats')
+                                return await chatsPage(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':
@@ -3949,6 +5173,15 @@ ${rows.length === 0
                             const session = await readSession(request);
                             return session ? await hoursEditor(session, url) : redirect(303, root);
                         }
+                        case '/closures': {
+                            const session = await readSession(request);
+                            return session ? await closuresPage(session) : redirect(303, root);
+                        }
+                        case '/contacts': {
+                            const session = await readSession(request);
+                            const after = url.searchParams.get('after') ?? undefined;
+                            return session ? await contactsPage(session, 200, undefined, after) : redirect(303, root);
+                        }
                         case '/locations': {
                             const session = await readSession(request);
                             return session ? await locationsPage(session) : redirect(303, root);
@@ -4140,13 +5373,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; }
@@ -4164,7 +5428,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); }
@@ -4204,8 +5472,6 @@ textarea { padding: 10px var(--space-3); resize: vertical; min-height: 72px; lin
 .create .grow { flex: 1 1 220px; }
 label > input, label > select, label > .unit-input { width: 100%; }
 label > textarea { width: 100%; padding: var(--space-2) var(--space-3); resize: vertical; }
-.presets { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); }
-.presets button { height: 28px; padding: 0 var(--space-3); font-size: var(--text-sm); }
 label.choice > input { width: 16px; }
 .create label:not(.grow) { flex: 0 1 auto; }
 form > label { margin-bottom: var(--space-3); }
@@ -4295,6 +5561,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; }
@@ -4331,23 +5613,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); }
@@ -4377,6 +5642,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); }
@@ -4405,8 +5672,6 @@ pre { background: var(--surface-2); border: 1px solid var(--line); border-radius
   .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); }
@@ -4425,10 +5690,15 @@ const COMPOSITE_PROBLEMS = Object.freeze({
     composite_parts_limit: 'A whole has at most 50 parts.',
     composite_busy: 'One of them has a booking or hold still to come. A composite changes only while neither does.',
 });
-/** What the Plan page calls each plan. */
+/** 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),
 });