slotlock 0.7.0 → 0.8.0

package/dashboard.js

@@ -25,6 +25,9 @@ import { SLOTLOCK_DASHBOARD_FORM_LIMIT } from './ddl.js';
 import { ignoreRejection } from './hooks.js';
 import { SLOTLOCK_BOOKING_RULE_LIMITS } from './booking-rules.js';
 import { SLOTLOCK_DASHBOARD_ICON_SVG } from './dashboard-icon.js';
+import { SLOTLOCK_SETTINGS_CSS } from './dashboard-settings-ui.js';
+import { renderSlotlockMarkdown } from './dashboard-markdown.js';
+import { SLOTLOCK_ASSISTANT_CSS, slotlockAssistantActionVerb, slotlockAssistantScript, slotlockAssistantStepLabel, } from './dashboard-assistant-ui.js';
 import { SLOTLOCK_PLAN_LIMITS, SLOTLOCK_PLAN_QUOTAS } from './plans.js';
 import { SLOTLOCK_MAX_GROUPS_PER_RESOURCE, SLOTLOCK_MAX_LOCATION_DEPTH, SLOTLOCK_MAX_LOCATIONS, SLOTLOCK_MAX_RESOURCE_GROUPS, SLOTLOCK_RESOURCE_KINDS, SLOTLOCK_RESOURCE_PROFILE_LIMITS, } from './resource-profile.js';
 import { slotlockQuotaPeriod } from './quotas.js';
@@ -89,6 +92,7 @@ const POST_ROUTES = new Set([
     '/teams/enable',
     '/teams/disable',
     '/assistant',
+    '/assistant/stream',
     '/assistant/approve',
     '/assistant/dismiss',
     '/assistant/reset',
@@ -132,7 +136,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)
@@ -660,6 +664,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 +783,10 @@ function formatDate(date) {
         return '—';
     return `${date.toISOString().slice(0, 16).replace('T', ' ')} UTC`;
 }
+/** A UTC day as people write it: `9 Dec 2026`. */
+function dayOf(date) {
+    return zoned('UTC', { day: 'numeric', month: 'short', year: 'numeric' }).format(date);
+}
 const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 /** A table's date: the day (`19 Oct 2026`), with the full UTC time on hover and for machines. */
 function dateCell(date) {
@@ -920,6 +942,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 +1142,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 +1211,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 +1313,205 @@ ${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 });
+            }
+        }
+        return html `<ol class="feed">${runs.map(({ change, times }) => {
+            const tone = CHANGE_LABELS[change.type]?.tone ?? 'neutral';
+            const where = change.resourceId ? resourceName(byId.get(change.resourceId), change.resourceId) : null;
+            const object = where ?? (ABOUT_A_RESOURCE.test(change.type) ? 'a resource' : null);
+            const words = ACTIVITY[change.type];
+            let sentence;
+            if (change.type === 'usage.threshold_reached') {
+                const metric = typeof change.data.metric === 'string' ? change.data.metric : 'use';
+                const percent = typeof change.data.percent === 'number' ? change.data.percent : null;
+                sentence = html `${percent === null ? 'A monthly quota' : `${String(percent)}% of this month's ${metric}`} used`;
+            }
+            else if (words?.verb) {
+                sentence = html `<strong>${whoOf(change.actor)}</strong> ${words.verb}${object ? html ` <strong>${object}</strong>` : html ``}${words.after ?? ''}`;
+            }
+            else if (words?.passive) {
+                const [before, rest] = words.passive.split('{X}');
+                sentence = rest === undefined ? html `${before}` : html `${before}<strong>${object ?? 'a resource'}</strong>${rest}`;
+            }
+            else {
+                // A change type this dashboard does not know yet: its label, or its name in words.
+                const label = CHANGE_LABELS[change.type]?.text ?? change.type.replace(/[._]/g, ' ').replace(/^./, (first) => first.toUpperCase());
+                sentence = html `${label}${object ? html ` <span class="on">on</span> <strong>${object}</strong>` : html ``}`;
+            }
+            return html `<li class="event"><span class="dot ${tone}" aria-hidden="true"></span><span class="what"><span class="title">${sentence}${times > 1 ? html ` <span class="times">${times === 2 ? 'twice' : `${String(times)} times`}</span>` : html ``}</span></span><time class="when" datetime="${change.occurredAt.toISOString()}" title="${formatDate(change.occurredAt)}">${ago(change.occurredAt, now())}</time></li>`;
         })}</ol>`;
     }
+    /** The MCP and A2A endpoints with Copy, and the command that adds Slotlock to an MCP client. */
+    const connectAgent = () => html `${endpoints()}<details class="command"><summary>Claude Code command</summary><div class="copy-block"><pre><code id="mcp-command">claude mcp add --transport http slotlock ${mcpUrl} --header "Authorization: Bearer YOUR_KEY"</code></pre><button class="quiet" type="button" data-copy="mcp-command">Copy</button></div></details>`;
     async function overviewPage(session, status = 200, notice) {
         const tenantRef = tenantOf(session);
         const start = new Date(now());
         const window = { start, end: new Date(start.getTime() + AGENDA_DAYS * DAY_MS) };
-        const [keys, resources, agenda, changes] = await Promise.all([
+        const assistant = assistantStore();
+        const [keys, resources, agenda, changes, approvals, waitlist, model] = await Promise.all([
             options.keys.list({ tenantRef }),
             options.resources.list(tenantRef),
             options.resources.agenda?.(tenantRef, window, AGENDA_LIMIT),
             options.resources.recentChanges?.(tenantRef, ACTIVITY_LIMIT),
+            options.resources.approvals?.list(tenantRef, APPROVALS_SHOWN),
+            options.resources.waitlist?.list(tenantRef, WAITLIST_SHOWN),
+            assistant?.getSettings(tenantRef),
         ]);
+        // The plan is Live's: the test environment has none of its own.
+        const standing = plans && session.env !== 'test' ? await planStanding(session, 'overview', keys) : null;
         const byId = new Map(resources.map((resource) => [resource.id, resource]));
         const active = keys.filter((key) => !key.revokedAt && (key.expiresAt === null || key.expiresAt.getTime() > now()));
         const counted = (count) => agenda && agenda.length >= AGENDA_LIMIT ? `${count}+` : String(count);
         const booked = agenda?.filter((entry) => entry.kind !== 'hold').length ?? 0;
         const held = agenda?.filter((entry) => entry.kind === 'hold').length ?? 0;
-        const stat = (label, value, href) => html `<a class="stat" href="${href}"><span class="stat-label">${label}</span><span class="stat-value">${value}</span></a>`;
+        const waiting = approvals?.filter((approval) => approval.status === 'pending').length ?? 0;
+        const attention = [
+            ...(standing?.attention ?? []),
+            ...(waiting > 0
+                ? [
+                    attentionItem('info', `${String(waiting)} ${waiting === 1 ? 'booking waits' : 'bookings wait'} for your approval.`, {
+                        href: `${root}/approvals`,
+                        label: 'Review',
+                    }),
+                ]
+                : []),
+        ];
+        const admin = isAdmin(session);
         const steps = [
-            { done: resources.length > 0, text: 'Add what your agents book', href: `${root}/resources` },
-            { done: active.length > 0, text: 'Create a key for an agent', href: `${root}/keys` },
-            { done: (changes?.length ?? 0) > 0, text: 'Connect the agent and book', href: `${root}/keys` },
+            { done: resources.length > 0, title: 'Add a resource', action: { href: `${root}/resources`, label: 'Add resource' } },
+            { done: active.length > 0, title: 'Create an API key', action: { href: `${root}/keys#new-key`, label: 'Create key' } },
+            // Done once an agent has used a key.
+            { done: active.some((key) => key.lastUsedAt !== null), title: 'Connect an agent', action: { href: `${root}#connect`, label: 'Connect' } },
+            ...(assistant
+                ? [
+                    admin
+                        ? { done: Boolean(model), title: 'Connect a model to the assistant', action: { href: `${root}/settings`, label: 'Connect' } }
+                        : { done: Boolean(model), title: 'Try the assistant', action: { href: `${root}/assistant`, label: 'Open' } },
+                ]
+                : []),
         ];
-        const content = html `${noticeOf(notice)}
-${pageHead('Overview')}
-${steps.every((step) => step.done)
+        const done = steps.filter((step) => step.done).length;
+        const next = steps.findIndex((step) => !step.done);
+        // Nothing made and nothing happened yet: only the way in.
+        const fresh = resources.length === 0 && active.length === 0 && (changes?.length ?? 0) === 0;
+        const setupCard = next === -1
             ? html ``
-            : html `<section class="panel setup"><h2>Get started</h2><ol class="steps">${steps.map((step) => html `<li class="${step.done ? 'done' : ''}"><span class="check" aria-hidden="true">${step.done ? ICONS.check : html ``}</span>${step.done ? html `<span>${step.text}</span>` : html `<a href="${step.href}">${step.text}</a>`}${step.done ? html `<span class="visually-hidden">(done)</span>` : html ``}</li>`)}</ol></section>`}
-<div class="stats">
-${agenda ? stat(`Booked, next ${AGENDA_DAYS} days`, counted(booked), `${root}#upcoming`) : html ``}
-${agenda ? stat('Live holds', counted(held), `${root}#upcoming`) : html ``}
-${stat('Resources', String(resources.length), `${root}/resources`)}
-${stat('Active keys', String(active.length), `${root}/keys`)}
-</div>
+            : html `<section class="panel setup-card"><div class="panel-head"><h2>Get started</h2><span class="meta">${String(done)} of ${String(steps.length)}</span></div><div class="segments" aria-hidden="true">${steps.map((step) => html `<span${step.done ? html ` class="done"` : html ``}></span>`)}</div><ol class="setup-steps">${steps.map((step, index) => html `<li class="${step.done ? 'done' : index === next ? 'next' : ''}"><span class="check" aria-hidden="true">${step.done ? ICONS.check : html ``}</span><span class="step-title">${step.title}${step.done ? html `<span class="visually-hidden"> (done)</span>` : html ``}</span>${index === next ? html `<a class="button primary" href="${step.action.href}">${step.action.label}</a>` : html ``}</li>`)}</ol></section>`;
+        // Mostly set up: one line that leads to the next step.
+        const setupRow = next === -1
+            ? html ``
+            : html `<a class="setup-row" href="${steps[next]?.action.href ?? root}"><span class="segments" aria-hidden="true">${steps.map((step) => html `<span${step.done ? html ` class="done"` : html ``}></span>`)}</span><span>Get started · ${String(done)} of ${String(steps.length)} · <strong>${steps[next]?.title ?? ''}</strong></span></a>`;
+        const stat = (label, value, href, tone = '') => html `<a class="stat${tone}" href="${href}"><span class="stat-label">${label}</span><span class="stat-value">${value}</span></a>`;
+        const tiles = [
+            ...(agenda ? [stat(`Bookings, next ${AGENDA_DAYS} days`, counted(booked), `${root}#upcoming`), stat('Live holds', counted(held), `${root}#upcoming`)] : []),
+            ...(approvals ? [stat('Waiting for approval', String(waiting), `${root}/approvals`, waiting > 0 ? ' attention-stat' : '')] : []),
+            ...(waitlist ? [stat('On the waitlist', String(waitlist.filter((entry) => entry.status !== 'expired').length), `${root}/waitlist`)] : []),
+            stat('Resources', String(resources.length), `${root}/resources`),
+            stat('Active keys', String(active.length), `${root}/keys`),
+        ].slice(0, 4);
+        const planCard = standing
+            ? html `<section class="panel plan-card"><div class="panel-head"><h2>${standing.name}</h2><a href="${root}/plan">Usage</a></div><div class="meters stacked">${standing.meters}</div>${standing.canUpgrade && standing.pressing
+                ? html `<a class="button primary" href="${root}/plan#upgrade">Upgrade</a>`
+                : html ``}</section>`
+            : html ``;
+        const connectCard = html `<section class="panel" id="connect"><h2>Connect an agent</h2>${connectAgent()}</section>`;
+        const body = fresh
+            ? standing
+                ? html `<div class="split">${setupCard}<div class="column">${planCard}</div></div>`
+                : setupCard
+            : html `${done * 2 >= steps.length ? setupRow : setupCard}
+<div class="stats">${tiles}</div>
 ${session.env === 'test' && options.resources.sandbox ? sandboxPanel(session, resources.length) : html ``}
 <div class="split">
+<div class="column">
 ${agenda ? html `<section class="panel" id="upcoming"><h2>Upcoming</h2>${agendaPanel(agenda, byId, agenda.length > AGENDA_SHOWN)}</section>` : html ``}
-${changes ? html `<section class="panel"><h2>Agent activity</h2>${activityPanel(changes, byId, keys, session)}</section>` : html ``}
+${changes ? html `<section class="panel"><h2>Activity</h2>${activityPanel(changes, byId, keys, session)}</section>` : html ``}
+</div>
+<div class="column">${planCard}${connectCard}</div>
 </div>`;
+        const content = html `${noticeOf(notice, status)}
+${pageHead('Overview')}
+${attentionList(attention)}
+${fresh && session.env === 'test' && options.resources.sandbox ? sandboxPanel(session, resources.length) : html ``}
+${body}`;
         return respond(status, layout('Overview', content, session, 'overview'));
     }
     /** In Test: load a scenario to try an agent against, move waiting forward, or start again (RFC 0004 A6). */
@@ -1404,7 +1575,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 +1606,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 };
         }
@@ -1451,7 +1622,7 @@ ${keys.length === 0
         const resources = await options.resources.list(tenantOf(session));
         const allowance = await resourceAllowance(tenantOf(session), resources);
         const token = csrfToken(session);
-        const content = html `${noticeOf(notice)}
+        const content = html `${noticeOf(notice, status)}
 ${pageHead('Resources', html `<div class="row-actions">${options.resources.grouping ? html `<a class="button" href="${root}/locations">Locations and groups</a>` : html ``}${resources.length > 0 ? html `<a class="button" href="${root}/hours">Set hours for every resource</a>` : html ``}</div>`)}
 <section class="panel" id="add-resource">
 <h2>Add a resource</h2>
@@ -1510,7 +1681,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 +1713,44 @@ ${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>`;
+    /** Settings' sections, each its own page: the assistant's form apart from what is only read. */
+    const SETTINGS_SECTIONS = Object.freeze([
+        { id: 'assistant', label: 'Assistant', path: '/settings' },
+        { id: 'endpoints', label: 'Endpoints', path: '/settings/endpoints' },
+        { id: 'hours', label: 'Hours', path: '/settings/hours' },
+        { id: 'account', label: 'Account', path: '/settings/account' },
+    ]);
+    async function settingsPage(session, status = 200, notice, draft, section = 'assistant') {
+        const store = assistantStore();
+        const sections = SETTINGS_SECTIONS.filter((entry) => entry.id !== 'assistant' || store);
+        const shown = section === 'assistant' && !store ? 'endpoints' : section;
+        const connected = store ? Boolean(await store.getSettings(tenantOf(session))) : false;
+        const nav = html `<nav class="subnav" aria-label="Settings">${sections.map((entry) => html `<a href="${root}${entry.path}"${entry.id === shown ? html ` aria-current="page"` : html ``}>${entry.label}${entry.id === 'assistant' && connected ? html `<span class="nav-dot" aria-hidden="true"></span>` : html ``}</a>`)}</nav>`;
+        let body;
+        if (shown === 'assistant') {
+            body = await assistantSettingsSection(session, status, notice, draft);
+        }
+        else if (shown === 'endpoints') {
+            body = html `${noticeOf(notice, status)}<div class="set-card"><div class="row"><span class="row-label">MCP</span><div class="row-value">${copyField('mcp-url', mcpUrl)}</div></div><div class="row"><span class="row-label">A2A</span><div class="row-value">${copyField('a2a-url', a2aUrl)}</div></div></div>`;
+        }
+        else if (shown === 'hours') {
+            const rules = options.availability ?? [];
+            body = html `${noticeOf(notice, status)}<div class="set-card"><div class="row"><span class="row-label">Default hours</span><div class="row-value${rules.length === 0 ? ' muted' : ''}">${rules.length === 0
+                ? 'None. Agents find free time only on resources with hours of their own.'
+                : html `${rules.map((rule, index) => html `${index > 0 ? html `<br>` : html ``}${daysOf(rule.rrule)}: ${hoursOf(rule.startMinutes, rule.durationMinutes)}`)}`}</div></div></div><p class="fine">In each resource's own time zone, for resources without hours of their own. Set by the server's operator.</p>`;
+        }
+        else {
+            const current = session.orgs?.find((org) => org.id === session.org);
+            const others = (session.orgs ?? []).filter((org) => org.id !== current?.id);
+            body = html `${noticeOf(notice, status)}<div class="set-card"><div class="row"><span class="row-label">Signed in as</span><div class="row-value">${shownAs(session)}</div></div><div class="row"><span class="row-label">${current ? 'Organization' : 'Workspace'}</span><div class="row-value">${current ? current.login : 'Personal'}</div></div>${current && others.length > 0
+                ? html `<div class="row"><span class="row-label">Also a member of</span><div class="row-value">${others.map((org) => org.login).join(', ')}</div></div>`
+                : html ``}<div class="row"><span class="row-label">Session ends</span><div class="row-value">${formatDate(new Date(session.exp))}</div></div></div>${current ? html `<p class="fine">Membership is read from GitHub when you sign in.</p>` : html ``}`;
+        }
+        const content = html `${pageHead('Settings')}<div class="settings">${nav}<div class="settings-body">${body}</div></div>`;
         return respond(status, layout('Settings', content, session, 'settings'));
     }
+    /** A value to copy: monospace, cut with an ellipsis, with a Copy button (app.js). */
+    const copyField = (id, value) => html `<dl class="endpoints"><dd><code id="${id}">${value}</code><button class="quiet" type="button" data-copy="${id}">Copy</button></dd></dl>`;
     /** The tenant's resource with that id and every resource (for names), or null for anything else. */
     async function resourceDetailPage(session, id, status = 200, notice) {
         const tenantRef = tenantOf(session);
@@ -1612,7 +1795,7 @@ ${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 ``}
@@ -1960,7 +2143,7 @@ ${activity ? html `<section class="panel"><h2>Activity</h2>${activityPanel(activ
 <form method="post" action="${root}/webhooks/delete"><input type="hidden" name="csrf" value="${token}"><input type="hidden" name="once" value="${formNonce(session)}"><input type="hidden" name="id" value="${endpoint.id}"><button class="danger" type="submit">Delete webhook</button></form></div></details></td>
 </tr>`;
         });
-        const content = html `${noticeOf(notice)}
+        const content = html `${noticeOf(notice, status)}
 ${pageHead('Webhooks')}
 <div class="stats">
 <div class="stat"><span class="stat-label">Endpoints</span><span class="stat-value">${String(endpoints.length)}</span></div>
@@ -1991,7 +2174,7 @@ ${endpoints.length === 0
         const created = await hooks.create(tenantOf(session), (form.get('url') ?? '').trim(), types.length === 0 ? undefined : types, personOf(session));
         if (!created.ok) {
             const message = created.code === 'webhook_limit_reached'
-                ? `You have ${String(created.limit)} webhooks, as many as ${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 +2243,7 @@ ${endpoints.length === 0
         });
         const waiting = entries.filter((entry) => entry.status === 'waiting').length;
         const offered = entries.filter((entry) => entry.status === 'offered').length;
-        const content = html `${noticeOf(notice)}
+        const content = html `${noticeOf(notice, status)}
 ${pageHead('Waitlist')}
 <div class="stats">
 <div class="stat"><span class="stat-label">Waiting</span><span class="stat-value">${String(waiting)}</span></div>
@@ -2126,7 +2309,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">
@@ -2367,38 +2550,126 @@ ${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',
+        ttl_seconds: 'Held for',
+        notes: 'Note',
+        description: 'Note',
+        metadata: 'Details',
+        slots: 'Times',
+    });
     /**
-     * A field of a proposed change, as the card shows it: all of it, wrapped, never cut (the
-     * proposal is bounded instead). A resource is named, with its id beside the name.
+     * A field of a proposed change, as the card shows it: all of it, wrapped, never cut (the proposal
+     * is bounded instead). A resource is named; its id is the name's title.
      */
     function fieldValue(name, value, names) {
-        const named = (id) => (names.has(id) ? `${names.get(id)} (${id})` : id);
-        if (typeof value === 'string') {
-            return html `<span class="wrap">${name === 'resource_id' ? named(value) : value}</span>`;
-        }
+        const named = (id) => names.has(id) ? html `<span title="${id}">${names.get(id)}</span>` : html `<code>${id}</code>`;
+        if (name === 'resource_id' && typeof value === 'string')
+            return named(value);
+        if (name === 'resource_ids' && Array.isArray(value) && value.every((item) => typeof item === 'string')) {
+            return html `${value.map((id, index) => html `${index > 0 ? ', ' : ''}${named(id)}`)}`;
+        }
+        if (name === 'ttl_seconds' && typeof value === 'number') {
+            return html `${value >= 60 ? `${Math.round(value / 60)} min` : `${value} s`}`;
+        }
+        if ((name === 'event_id' || name === 'hold_id') && typeof value === 'string')
+            return html `<code>${value}</code>`;
+        if (typeof value === 'string')
+            return html `<span class="wrap">${value}</span>`;
         if (Array.isArray(value) && value.every((item) => typeof item === 'string')) {
-            return html `<span class="wrap">${value.map((item) => (name === 'resource_ids' ? named(item) : item)).join(', ')}</span>`;
+            return html `<span class="wrap">${value.join(', ')}</span>`;
         }
-        if (typeof value === 'number' || typeof value === 'boolean' || value === null) {
+        if (typeof value === 'number' || typeof value === 'boolean' || value === null)
             return html `${String(value)}`;
-        }
-        return html `<pre class="wrap">${JSON.stringify(value, null, 2)}</pre>`;
+        return html `<pre>${JSON.stringify(value, null, 2)}</pre>`;
     }
-    function actionCard(session, action, names) {
+    /** Why a change or a step was refused, in words, for the codes a member meets. */
+    const REFUSALS = Object.freeze({
+        overlap: 'that time was just taken',
+        pool_full: 'the pool is full then',
+        not_found: 'it no longer exists',
+        resource_not_found: 'the resource no longer exists',
+        event_not_found: 'the booking no longer exists',
+        invalid_input: 'the request was incomplete',
+        invalid_arguments: 'the request was incomplete',
+        validation_error: 'the request was incomplete',
+        turn_read_budget_exceeded: 'one message may read only so much',
+        too_many_pending_changes: 'too many changes are waiting for you',
+        change_too_large_to_show: 'the change was too large to show',
+        tool_not_available: 'the assistant may not do that',
+        too_many_calls: 'too many at once',
+        quota_exceeded: "this month's allowance is used up",
+        approval_pending: 'it is waiting for an approval',
+    });
+    const refusal = (code) => REFUSALS[code] ?? code.replaceAll('_', ' ');
+    function actionCard(session, action, names, zones) {
+        const verb = slotlockAssistantActionVerb(action.operation);
+        const title = action.summary || `${verb.verb}: ${toolTitles.get(action.operation) ?? action.operation}`;
+        if (action.status !== 'pending') {
+            const [tone, word] = action.status === 'done'
+                ? ['ok', verb.done]
+                : action.status === 'dismissed'
+                    ? ['', 'Declined']
+                    : action.status === 'approved'
+                        ? ['', 'Running…']
+                        : ['bad', `Refused: ${refusal(action.outcome ?? 'failed')}`];
+            return html `<li class="turn action" id="action-${action.id}"><p class="receipt ${tone}"><span>${title}</span><span class="why">${word}</span></p></li>`;
+        }
         const token = csrfToken(session);
-        const fields = Object.entries(action.input).filter(([name]) => name !== 'idempotency_key');
-        const summary = action.summary ? html `<p class="action-summary">${action.summary}</p>` : html ``;
-        const state = {
-            pending: { text: 'Waiting for you', tone: 'held' },
-            approved: { text: 'Running', tone: 'held' },
-            dismissed: { text: 'Dismissed', tone: 'revoked' },
-            done: { text: 'Done', tone: 'active' },
-            failed: { text: 'Failed', tone: 'revoked' },
-        }[action.status] ?? { text: action.status, tone: 'revoked' };
-        const buttons = action.status === 'pending'
-            ? html `<div class="action-buttons"><form class="inline" method="post" action="${root}/assistant/approve"><input type="hidden" name="csrf" value="${token}"><input type="hidden" name="once" value="${formNonce(session)}"><input type="hidden" name="action" value="${action.id}"><button class="primary" type="submit">Approve</button></form><form class="inline" method="post" action="${root}/assistant/dismiss"><input type="hidden" name="csrf" value="${token}"><input type="hidden" name="once" value="${formNonce(session)}"><input type="hidden" name="action" value="${action.id}"><button type="submit">Dismiss</button></form></div>`
-            : html ``;
-        return html `<li class="action-card" id="action-${action.id}"><div class="action-head"><span class="title">${toolTitles.get(action.operation) ?? action.operation}</span><span class="pill ${state.tone}">${state.text}</span></div>${summary}<dl class="facts">${fields.map(([name, value]) => html `<dt>${name.replaceAll('_', ' ')}</dt><dd>${fieldValue(name, value, names)}</dd>`)}</dl>${action.status === 'failed' && action.outcome ? html `<p class="fine">Refused: <code>${action.outcome}</code></p>` : html ``}${buttons}</li>`;
+        const input = Object.entries(action.input).filter(([name]) => name !== 'idempotency_key');
+        // The change's own time zone when it gives one, else its resource's.
+        const zone = typeof action.input.timezone === 'string'
+            ? action.input.timezone
+            : typeof action.input.resource_id === 'string'
+                ? zones.get(action.input.resource_id)
+                : undefined;
+        const when = whenOf(action.input.starts_at, action.input.ends_at, zone);
+        const facts = [];
+        const more = [];
+        if (when)
+            facts.push(html `<dt>When</dt><dd>${when}</dd>`);
+        for (const [name, value] of input) {
+            if (when && (name === 'starts_at' || name === 'ends_at' || name === 'timezone'))
+                continue;
+            const label = FACT_NAMES[name] ?? name.charAt(0).toUpperCase() + name.slice(1).replaceAll('_', ' ');
+            (name in FACT_NAMES || name === 'attendees' ? facts : more).push(html `<dt>${label}</dt><dd>${fieldValue(name, value, names)}</dd>`);
+        }
+        const hidden = (id) => html `<input type="hidden" name="csrf" value="${token}"><input type="hidden" name="once" value="${formNonce(session)}"><input type="hidden" name="action" value="${id}">`;
+        return html `<li class="turn action" id="action-${action.id}"><div class="change"><p class="change-title">${title}</p>${facts.length > 0 ? html `<dl class="facts">${facts}</dl>` : html ``}${more.length > 0
+            ? html `<details class="more"><summary>All details</summary><dl class="facts">${more}</dl></details>`
+            : html ``}<div class="change-buttons"><form method="post" action="${root}/assistant/approve">${hidden(action.id)}<button class="${verb.danger ? 'danger' : 'primary'}" type="submit" data-busy="${verb.busy}">${verb.verb}</button></form><form method="post" action="${root}/assistant/dismiss">${hidden(action.id)}<button class="ghost" type="submit">Decline</button></form></div></div></li>`;
     }
     function readAction(id, value) {
         if (!isRecord(value) || typeof value.operation !== 'string')
@@ -2412,6 +2683,100 @@ ${decided.length === 0
             ...(typeof value.outcome === 'string' ? { outcome: value.outcome } : {}),
         };
     }
+    /** The code a tool result was refused with, from the JSON the model was given. */
+    function refusedCode(content) {
+        try {
+            const parsed = JSON.parse(content);
+            const error = isRecord(parsed) && isRecord(parsed.error) ? parsed.error : null;
+            return error && typeof error.code === 'string' ? error.code : null;
+        }
+        catch {
+            return null;
+        }
+    }
+    /** Notes the turn ends with that are not a failure: a member's Stop, and the step bound. */
+    const quietNote = (text) => text === 'Stopped.' || text.startsWith('The assistant stopped after');
+    /**
+     * The conversation as the thread shows it: the member's messages as bubbles, the replies as
+     * rendered Markdown, each run of tool steps folded into one line, proposed changes as cards, and
+     * a failure that ends it with a way to send the last message again.
+     */
+    function assistantItems(session, entries, actions, names, zones) {
+        const items = [];
+        let steps = [];
+        let cards = [];
+        const flush = () => {
+            if (steps.length > 0) {
+                const bad = steps.some((step) => !step.ok);
+                const seen = [];
+                for (const step of steps)
+                    if (!seen.includes(step.label))
+                        seen.push(step.label);
+                const summary = seen.map((label, index) => (index === 0 ? label : label.charAt(0).toLowerCase() + label.slice(1))).join(', ');
+                items.push(html `<li class="turn steps"><details class="steps${bad ? ' has-bad' : ''}"><summary>${summary}</summary><ul class="step-list">${steps.map((step) => html `<li class="step ${step.ok ? 'ok' : 'bad'}">${step.label}${step.why ? html ` <span class="why">${step.why}</span>` : html ``}</li>`)}</ul></details></li>`);
+                steps = [];
+            }
+            items.push(...cards);
+            cards = [];
+        };
+        const lastUser = [...entries].reverse().find((entry) => entry.role === 'user');
+        for (const [index, entry] of entries.entries()) {
+            if (entry.role === 'user') {
+                flush();
+                items.push(html `<li class="turn mine"><div class="bubble">${entry.text}</div></li>`);
+            }
+            else if (entry.role === 'assistant') {
+                if (entry.text.trim() === '')
+                    continue;
+                flush();
+                items.push(html `<li class="turn bot"><div class="prose">${new Html(renderSlotlockMarkdown(entry.text))}</div></li>`);
+            }
+            else if (entry.role === 'tool') {
+                for (const result of entry.results) {
+                    const write = SLOTLOCK_ASSISTANT_TOOL_USE[result.name] === 'propose';
+                    const action = result.action ? readAction(result.action, actions[result.action]) : null;
+                    if (action) {
+                        cards.push(actionCard(session, action, names, zones));
+                        continue;
+                    }
+                    const title = toolTitles.get(result.name) ?? result.name;
+                    const code = result.error ? refusedCode(result.content) : null;
+                    steps.push({
+                        label: slotlockAssistantStepLabel(result.name, title, result.error ? 'bad' : 'ok', write),
+                        ok: !result.error,
+                        why: code ? refusal(code) : null,
+                    });
+                }
+            }
+            else if (entry.role === 'note') {
+                flush();
+                const last = index === entries.length - 1;
+                if (last && !quietNote(entry.text) && lastUser?.role === 'user') {
+                    items.push(html `<li class="turn error" role="alert"><span>${entry.text}</span><form method="post" action="${root}/assistant"><input type="hidden" name="csrf" value="${csrfToken(session)}"><input type="hidden" name="once" value="${formNonce(session)}"><input type="hidden" name="message" value="${lastUser.text}"><button class="text-button" type="submit">Retry</button></form></li>`);
+                }
+                else {
+                    items.push(html `<li class="turn note">${entry.text}</li>`);
+                }
+            }
+        }
+        flush();
+        return items;
+    }
+    /** The tenant's resources as a proposed change's card names them, and each one's time zone. */
+    async function resourceLookups(tenantRef) {
+        const resources = await options.resources.list(tenantRef);
+        return {
+            resources,
+            names: new Map(resources.map((resource) => [resource.id, resourceName(resource, resource.id)])),
+            zones: new Map(resources.flatMap((resource) => (resource.timezone ? [[resource.id, resource.timezone]] : []))),
+        };
+    }
+    const ASSISTANT_ICONS = {
+        send: new Html('<svg class="arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 13V3M3.5 7.5 8 3l4.5 4.5"/></svg>'),
+        stop: new Html('<svg class="stop" viewBox="0 0 16 16" aria-hidden="true"><rect x="4" y="4" width="8" height="8" rx="1.5" fill="currentColor"/></svg>'),
+        down: new Html('<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 3v10M3.5 8.5 8 13l4.5-4.5"/></svg>'),
+        plus: new Html('<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><path d="M8 3v10M3 8h10"/></svg>'),
+    };
     async function assistantPage(session, status = 200, notice) {
         const store = assistantStore();
         if (!store)
@@ -2421,91 +2786,100 @@ ${decided.length === 0
             store.getSettings(tenantRef),
             store.getConversation(tenantRef, personOf(session)),
         ]);
+        if (!settings) {
+            const content = html `${noticeOf(notice, status)}${pageHead('Assistant')}${emptyState(ICONS.assistant, isAdmin(session) ? 'Connect a model to use the assistant.' : 'An admin of this organization connects a model in Settings.', isAdmin(session) ? { href: `${root}/settings#assistant`, label: 'Connect a model' } : undefined)}`;
+            return respond(status, layout('Assistant', content, session, 'assistant'));
+        }
         const entries = readSlotlockAssistantEntries(conversation?.messages);
         const actions = conversation?.actions ?? {};
-        const names = new Map();
-        if (Object.keys(actions).length > 0) {
-            for (const resource of await options.resources.list(tenantRef)) {
-                names.set(resource.id, resourceName(resource, resource.id));
-            }
-        }
+        const empty = entries.length === 0;
+        const { resources, names, zones } = empty || Object.keys(actions).length > 0
+            ? await resourceLookups(tenantRef)
+            : { resources: [], names: new Map(), zones: new Map() };
         const token = csrfToken(session);
-        const items = [];
-        for (const entry of entries) {
-            if (entry.role === 'user')
-                items.push(html `<li class="msg mine"><p>${entry.text}</p></li>`);
-            else if (entry.role === 'assistant' && entry.text.trim() !== '') {
-                items.push(html `<li class="msg bot"><p>${entry.text}</p></li>`);
-            }
-            else if (entry.role === 'note')
-                items.push(html `<li class="notice">${entry.text}</li>`);
-            else if (entry.role === 'tool') {
-                for (const result of entry.results) {
-                    const action = result.action ? readAction(result.action, actions[result.action]) : null;
-                    if (action)
-                        items.push(actionCard(session, action, names));
-                    else {
-                        items.push(html `<li class="tool-line">${result.error ? 'Could not run' : 'Read'}: ${toolTitles.get(result.name) ?? result.name}</li>`);
-                    }
-                }
-            }
-        }
-        const composer = html `<form class="composer" method="post" action="${root}/assistant"><input type="hidden" name="csrf" value="${token}"><input type="hidden" name="once" value="${formNonce(session)}"><label class="visually-hidden" for="message">Message</label><textarea id="message" name="message" rows="3" maxlength="${String(SLOTLOCK_ASSISTANT_MAX_MESSAGE)}" required placeholder="Find a free van tomorrow morning and book it for Ana"></textarea><button class="primary" type="submit">Send</button></form>`;
-        const reset = entries.length > 0
-            ? html `<form class="inline" method="post" action="${root}/assistant/reset"><input type="hidden" name="csrf" value="${token}"><input type="hidden" name="once" value="${formNonce(session)}"><button type="submit">New conversation</button></form>`
-            : undefined;
-        const content = html `${noticeOf(notice)}
-${pageHead('Assistant', reset)}
-${settings
-            ? html `<section class="panel chat">${items.length === 0
-                ? html `<p class="empty">Ask about bookings and free time. Changes wait for your approval.</p>`
-                : html `<ol class="thread">${items}</ol>`}<span id="latest"></span>${composer}</section>`
-            : html `<p class="empty">${isAdmin(session)
-                ? html `No model is connected. <a href="${root}/settings#assistant">Connect one in Settings</a>.`
-                : 'No model is connected. An admin of this organization can connect one in Settings.'}</p>`}`;
+        const hidden = () => html `<input type="hidden" name="csrf" value="${token}"><input type="hidden" name="once" value="${formNonce(session)}">`;
+        const first = resources.find((resource) => !resource.archivedAt);
+        const named = first ? resourceName(first, first.id) : null;
+        // A read chip asks at once; a write chip fills the box to finish (app.js), or asks (no script).
+        const prompts = [
+            { label: "What's on today", message: "What's booked today?" },
+            { label: 'Find free time', message: named ? `When is ${named} free tomorrow morning?` : 'What is free tomorrow morning?' },
+            { label: 'Book', message: named ? `Book ${named} tomorrow 9:00–10:00` : 'Book ', fill: true },
+            { label: 'Move a booking', message: 'Move the next booking one hour later', fill: true },
+            { label: 'Cancel a booking', message: 'Cancel the next booking', fill: true },
+        ];
+        const chips = html `<div class="assistant-start"><div class="chips">${prompts.map((prompt) => html `<form method="post" action="${root}/assistant">${hidden()}<button class="chip" type="submit" name="message" value="${prompt.message}"${prompt.fill ? html ` data-fill="${prompt.message}"` : html ``}>${prompt.label}</button></form>`)}</div></div>`;
+        const composer = html `<div class="dock"><button class="jump" type="button" hidden aria-label="Jump to the latest message">${ASSISTANT_ICONS.down}</button><form class="composer" method="post" action="${root}/assistant">${hidden()}<label class="visually-hidden" for="message">Message</label><textarea id="message" name="message" rows="2" maxlength="${String(SLOTLOCK_ASSISTANT_MAX_MESSAGE)}" required placeholder="${empty ? 'Ask about bookings' : 'Reply…'}"></textarea><div class="composer-bar"><span class="count" hidden></span><button class="send" type="submit" aria-label="Send">${ASSISTANT_ICONS.send}${ASSISTANT_ICONS.stop}</button></div></form></div>`;
+        const reset = html `<form class="inline new-chat" method="post" action="${root}/assistant/reset">${hidden()}<button class="ghost" type="submit">${ASSISTANT_ICONS.plus}New conversation</button></form>`;
+        const flag = empty ? new Html(' data-empty') : html ``;
+        const content = html `${noticeOf(notice, status)}<div class="assistant-page"${flag}>${pageHead('Assistant', reset)}<div class="assistant" data-assistant data-stream="${root}/assistant/stream" data-page="${root}/assistant"${flag}><ol class="thread">${assistantItems(session, entries, actions, names, zones)}</ol><span id="latest"></span>${chips}${composer}</div></div>`;
         return respond(status, layout('Assistant', content, session, 'assistant'));
     }
-    async function assistantSettingsPanel(session, draft) {
+    /** The named provider a provider and base URL are, or none (Custom). */
+    const presetOf = (provider, baseUrl) => SLOTLOCK_ASSISTANT_PRESETS.find((preset) => preset.id !== 'custom' && preset.provider === provider && preset.baseUrl === baseUrl);
+    /**
+     * The assistant's settings: what is connected and whether it answers (Test, its result in place),
+     * then the form, one provider chosen from tiles, and Disconnect apart. A member sees only what is
+     * connected, and where their messages go.
+     */
+    async function assistantSettingsSection(session, status, notice, draft) {
         const store = assistantStore();
-        if (!store)
-            return html ``;
         const settings = await store.getSettings(tenantOf(session));
-        const sentTo = html `<p class="fine">Members' messages, and the bookings and resources the assistant reads for them, are sent to this provider.</p>`;
-        if (!isAdmin(session)) {
-            return html `<section class="panel" id="assistant"><h2>Assistant</h2>${settings
-                ? html `<dl class="facts"><dt>Provider</dt><dd>${settings.provider === 'anthropic' ? 'Anthropic' : 'OpenAI-compatible'}</dd><dt>Model</dt><dd>${settings.model}</dd></dl>${sentTo}`
-                : html `<p class="empty">No model is connected. An admin can connect one.</p>`}</section>`;
-        }
         const token = csrfToken(session);
+        const 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 +2888,8 @@ ${settings
             return notFound(session);
         if (!isAdmin(session))
             return adminOnly(session);
-        const provider = form.get('provider');
-        const checkedUrl = readSlotlockAssistantBaseUrl(form.get('base_url') ?? '', { privateUrls });
+        const { provider, baseUrl: givenUrl } = formEndpoint(form);
+        const checkedUrl = readSlotlockAssistantBaseUrl(givenUrl, { privateUrls });
         const model = (form.get('model') ?? '').trim();
         const apiKey = (form.get('api_key') ?? '').trim();
         if (provider !== 'anthropic' && provider !== 'openai') {
@@ -2566,14 +2940,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 +3029,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 {
@@ -2702,6 +3088,8 @@ ${settings
             timeoutMs: assistantTimeout,
             turnTimeoutMs: assistantTurnTimeout,
             ...(assistantOptions.maxSteps !== undefined ? { maxSteps: assistantOptions.maxSteps } : {}),
+            ...(hooks.onEvent ? { onEvent: hooks.onEvent } : {}),
+            ...(hooks.signal ? { signal: hooks.signal } : {}),
             read: async (operation, input) => {
                 // A turn's reads share one budget of resource-days, so 8 steps of wide reads cannot each
                 // scan a hundred resources over years.
@@ -2758,8 +3146,85 @@ ${settings
             added: Object.fromEntries(Object.entries(proposed).filter(([id]) => id in kept)),
             keep: Object.keys(kept),
         }, conversationTtl);
+        return { ok: true, messages, actions: kept };
+    }
+    /** The form's way (no script): run the turn, then show the conversation at its latest message. */
+    async function sendToAssistant(session, form) {
+        const run = await runAssistantMessage(session, form);
+        if (!run.ok)
+            return run.status === 404 ? notFound(session) : assistantPage(session, run.status, run.message);
         return redirect(303, `${root}/assistant#latest`);
     }
+    /**
+     * app.js's way: the same turn, answered as it happens, one JSON object a line. `text` carries a
+     * piece of the reply, `step` a tool step as it starts and ends, and the last line is `done` (the
+     * turn as the page renders it, which replaces what was streamed) or `error`, each with a fresh
+     * single-use value for the next send. The member's Stop aborts the request, and the turn with it.
+     */
+    async function streamToAssistant(session, form, request) {
+        const encoder = new TextEncoder();
+        const pipe = new TransformStream();
+        const writer = pipe.writable.getWriter();
+        let open = true;
+        const write = (event) => {
+            if (!open)
+                return;
+            writer.write(encoder.encode(`${JSON.stringify(event)}\n`)).catch(() => {
+                open = false;
+            });
+        };
+        const label = (name, state) => slotlockAssistantStepLabel(name, toolTitles.get(name) ?? name, state, SLOTLOCK_ASSISTANT_TOOL_USE[name] === 'propose');
+        const failed = (message) => write({
+            t: 'error',
+            html: html `<li class="turn error" role="alert"><span>${message}</span></li>`.value,
+            once: formNonce(session),
+        });
+        const work = (async () => {
+            try {
+                const run = await runAssistantMessage(session, form, {
+                    signal: request.signal,
+                    onEvent: (event) => {
+                        if (event.type === 'text')
+                            write({ t: 'text', d: event.delta });
+                        else if (event.type === 'call')
+                            write({ t: 'step', id: event.id, s: 'run', label: label(event.name, 'run') });
+                        else
+                            write({ t: 'step', id: event.id, s: event.ok ? 'ok' : 'bad', label: label(event.name, event.ok ? 'ok' : 'bad') });
+                    },
+                });
+                if (!run.ok) {
+                    failed(run.message);
+                    return;
+                }
+                // The turn from the member's message on, as a reload would show it.
+                const start = run.messages.map((entry) => entry.role).lastIndexOf('user');
+                const turn = run.messages.slice(Math.max(0, start));
+                const lookups = Object.keys(run.actions).length > 0
+                    ? await resourceLookups(tenantOf(session))
+                    : { names: new Map(), zones: new Map() };
+                write({
+                    t: 'done',
+                    html: assistantItems(session, turn, run.actions, lookups.names, lookups.zones).join(''),
+                    once: formNonce(session),
+                });
+            }
+            catch (error) {
+                report(error instanceof Error ? error.message : 'assistant stream failed');
+                failed('Something went wrong. Reload the page and try again.');
+            }
+            finally {
+                await writer.close().catch(() => undefined);
+                open = false;
+            }
+        })();
+        ignoreRejection(work);
+        const page = respond(200, '');
+        const headers = new Headers(page.headers);
+        headers.set('Content-Type', 'application/x-ndjson; charset=utf-8');
+        // Proxies that buffer (nginx) send each line as it is written.
+        headers.set('X-Accel-Buffering', 'no');
+        return new Response(pipe.readable, { status: 200, headers });
+    }
     async function settleAction(session, form, decision) {
         const store = assistantStore();
         if (!store || !assistantOptions)
@@ -2807,80 +3272,173 @@ ${settings
         await store.deleteConversation(tenantOf(session), personOf(session));
         return redirect(303, `${root}/assistant`);
     }
-    async function planPage(session, status = 200, notice, thanks = false) {
+    /**
+     * 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;
-        if (!billing)
-            return notFound(session);
-        if (session.env === 'test') {
-            // Its own use, counted apart from Live's and never billed.
-            const range = slotlockUsageMonthToDate(now());
-            const tested = options.usage && options.resources.usage
-                ? summarizeSlotlockUsage(await options.resources.usage(tenantOf(session), range.from, range.to))
-                : null;
-            const stat = (label, value) => html `<div class="stat"><span class="stat-label">${label}</span><span class="stat-value">${value.toLocaleString('en-GB')}</span></div>`;
-            return respond(status, layout('Plan', html `${pageHead('Plan')}${noticeOf(notice)}<p>The test environment is on your live plan's limits and is never billed. Switch to Live to see your plan, or to change it.</p>${tested
-                ? html `<section class="panel" id="usage"><h2>Test usage this month</h2><div class="stats">${stat('Operations', tested.totals.operations)}${stat('Bookings', tested.totals.bookings)}${stat('Holds', tested.totals.holds)}</div><p class="fine">Since ${range.from}, in UTC, counted apart from Live, against the same monthly quotas.</p></section>`
-                : html ``}`, session, 'plan'));
-        }
         const tenantRef = tenantOf(session);
-        const [plan, resourceCount, keys, webhooks] = await Promise.all([
-            billing.plan(tenantRef),
+        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 +3450,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;
@@ -3007,7 +3541,7 @@ ${upgrade}
             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;
@@ -3188,7 +3722,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.')
@@ -3632,9 +4166,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 +4193,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 +4269,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 +4290,7 @@ ${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);
+        const form = await readForm(request, route === '/assistant' || route === '/assistant/stream' ? MAX_ASSISTANT_FORM_BYTES : MAX_FORM_BYTES);
         if (form === 'too_large') {
             return respond(413, layout('Refused', html `<p class="notice">That form is too large.</p>`, session));
         }
@@ -3794,12 +4328,15 @@ ${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'))
+                    return redirect(303, `${root}/assistant#latest`);
                 return pageFor(route)(session, 409, 'That form was already sent. Reload the page to start again.');
             }
         }
         // A tenant new to plans is put on the default plan before it adds what plans limit.
         if (route === '/keys' || route === '/resources' || route === '/webhooks') {
-            await options.billing?.enrol?.(tenantOf(session));
+            await plans?.enrol?.(tenantOf(session));
         }
         switch (route) {
             case '/sign-out':
@@ -3857,6 +4394,8 @@ ${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':
@@ -3906,6 +4445,9 @@ ${rows.length === 0
                         case '/assistant':
                         case '/plan':
                         case '/teams':
+                        case '/settings/endpoints':
+                        case '/settings/hours':
+                        case '/settings/account':
                         case '/settings': {
                             const session = await readSession(request);
                             if (!session)
@@ -3929,14 +4471,20 @@ ${rows.length === 0
                                 return await approvalsPage(session);
                             if (route === '/assistant')
                                 return await assistantPage(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':
@@ -4140,13 +4688,44 @@ a.stat:hover { background: var(--surface-2); text-decoration: none; }
 a.stat::after { content: ""; position: absolute; top: 18px; right: 18px; width: 6px; height: 6px; border-top: 1.5px solid var(--ink-3); border-right: 1.5px solid var(--ink-3); transform: rotate(45deg); opacity: 0; transition: opacity var(--fast) var(--ease); }
 a.stat:hover::after, a.stat:focus-visible::after { opacity: 1; }
 a.stat:focus-visible { outline-offset: -2px; border-radius: 0; }
-.stat-label { font: 500 var(--text-xs)/1.4 var(--mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
+.stat-label { font-size: var(--text-sm); line-height: 1.4; color: var(--ink-3); }
+.attention-stat .stat-value { color: var(--accent); }
 .stat-value { font-size: var(--text-2xl); line-height: 1.1; font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
 
-/* Setup checklist */
-.setup .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: step; }
-.steps li { display: flex; align-items: center; gap: var(--space-3); min-height: 36px; color: var(--ink); font-weight: 500; }
-.steps li.done { color: var(--ink-3); font-weight: 400; text-decoration: line-through; text-decoration-color: var(--line-strong); }
+/* Overview: what needs a person, getting started, the side column */
+.column { display: grid; gap: var(--space-5); align-content: start; min-width: 0; }
+.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
+.panel-head h2 { margin: 0; }
+.panel-head .meta { flex: none; }
+.attention-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
+.attention { display: flex; align-items: center; gap: var(--space-4); padding: 10px var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-size: var(--text-md); color: var(--ink); box-shadow: inset 3px 0 0 var(--ink-3); }
+.attention.bad { border-color: var(--bad-line); background: var(--bad-wash); box-shadow: inset 3px 0 0 var(--bad); }
+.attention.warn { border-color: var(--warn-line); background: var(--warn-wash); box-shadow: inset 3px 0 0 var(--warn); }
+.attention.info { box-shadow: inset 3px 0 0 var(--accent); }
+.attention-text { flex: 1; min-width: 0; }
+.attention-action { flex: none; font-weight: 600; white-space: nowrap; }
+.segments { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
+.segments span { height: 4px; border-radius: var(--radius-full); background: var(--sunken); }
+.segments span.done { background: var(--good); }
+.setup-card .segments { margin-bottom: var(--space-3); }
+.setup-steps { list-style: none; margin: 0; padding: 0; display: grid; }
+.setup-steps li { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; border-top: 1px solid var(--line-soft); color: var(--ink-3); }
+.setup-steps li:first-child { border-top: 0; }
+.setup-steps li.next { color: var(--ink); font-weight: 500; }
+.setup-steps li.done .step-title { text-decoration: line-through; text-decoration-color: var(--line-strong); }
+.setup-steps .step-title { flex: 1; min-width: 0; }
+.setup-row { display: flex; align-items: center; gap: var(--space-4); padding: 10px var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink-2); font-size: var(--text-md); }
+.setup-row:hover { background: var(--surface-2); text-decoration: none; }
+.setup-row .segments { width: 96px; flex: none; }
+.plan-card .panel-head h2 { font-size: var(--text-lg); }
+.meters.stacked { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin: 0 0 var(--space-4); }
+.plan-card > .button { width: 100%; justify-content: center; }
+details.command { margin-top: var(--space-4); }
+details.command > summary { cursor: pointer; font-size: var(--text-md); color: var(--ink-2); }
+details.command[open] > summary { margin-bottom: var(--space-2); }
+.copy-block { position: relative; }
+.copy-block pre { padding-right: 72px; font-size: var(--text-sm); }
+.copy-block button { position: absolute; top: 6px; right: 6px; }
 .check { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: var(--radius-full); border: 1.5px dashed var(--line-strong); color: var(--surface); }
 .done .check { background: var(--good); border: 0; }
 .check .icon { width: 12px; height: 12px; stroke-width: 3; }
@@ -4164,7 +4743,11 @@ a.stat:focus-visible { outline-offset: -2px; border-radius: 0; }
 .on { color: var(--ink-3); font-weight: 400; }
 .meta { font-size: var(--text-sm); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .feed { position: relative; }
-.event { position: relative; display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: 7px 0; }
+.event { position: relative; display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; padding: 7px 0; }
+.event .title { font-weight: 400; color: var(--ink-2); white-space: normal; overflow-wrap: anywhere; }
+.event .title strong { font-weight: 600; color: var(--ink); }
+.event .when { font-size: var(--text-sm); font-weight: 400; color: var(--ink-3); white-space: nowrap; padding-top: 1px; }
+.times { font-size: var(--text-sm); color: var(--ink-3); }
 .event:not(:last-child)::before { content: ""; position: absolute; left: 5.5px; top: 22px; bottom: -8px; width: 1px; background: var(--line); }
 .dot { position: relative; width: 12px; height: 12px; margin-top: 4px; border-radius: var(--radius-full); background: var(--surface); box-shadow: inset 0 0 0 3px var(--ink-3); }
 .dot.good { box-shadow: inset 0 0 0 3px var(--good); }
@@ -4204,8 +4787,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 +4876,22 @@ form > .table { margin-bottom: var(--space-3); }
 /* Notices and empty states */
 .notice { display: block; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3) var(--space-4); background: var(--surface); color: var(--ink); margin: 0; font-size: var(--text-md); }
 .notice[role="alert"] { border-color: var(--bad-line); background: var(--bad-wash); color: var(--ink); box-shadow: inset 3px 0 0 var(--bad); }
+.meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5) var(--space-6); margin: var(--space-4) 0; }
+.meter { display: grid; gap: 6px; min-width: 0; }
+.meter-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); font-size: var(--text-md); color: var(--ink-2); }
+.meter-value { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
+.meter progress { appearance: none; -webkit-appearance: none; width: 100%; height: 6px; border: 0; border-radius: var(--radius-full); background: var(--sunken); overflow: hidden; }
+.meter progress::-webkit-progress-bar { background: var(--sunken); border-radius: var(--radius-full); }
+.meter progress::-webkit-progress-value { background: var(--ink-2); border-radius: var(--radius-full); }
+.meter progress::-moz-progress-bar { background: var(--ink-2); border-radius: var(--radius-full); }
+.meter.warn progress::-webkit-progress-value { background: var(--warn); }
+.meter.warn progress::-moz-progress-bar { background: var(--warn); }
+.meter.bad progress::-webkit-progress-value { background: var(--bad); }
+.meter.bad progress::-moz-progress-bar { background: var(--bad); }
+.meter.bad .meter-value { color: var(--bad); }
+.plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
+.plan-head h2 { margin: 0; }
+.notice.done { border-color: color-mix(in srgb, var(--good) 35%, var(--line)); background: var(--good-wash); color: var(--ink); box-shadow: inset 3px 0 0 var(--good); }
 .notice.warn, .notice.warn[role="alert"] { border-color: var(--warn-line); background: var(--warn-wash); color: var(--warn); box-shadow: inset 3px 0 0 var(--warn); }
 .notice p { color: inherit; margin: 0 0 var(--space-2); }
 .empty { color: var(--ink-3); margin: 0; }
@@ -4331,23 +4928,6 @@ pre { background: var(--surface-2); border: 1px solid var(--line); border-radius
 .bare-main > .notice { max-width: 480px; }
 
 /* Assistant */
-.chat { display: grid; gap: var(--space-5); }
-.thread { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
-.msg { max-width: 78%; padding: 10px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
-.msg p { margin: 0; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
-.msg.mine { justify-self: end; background: var(--button); border-color: var(--button); border-bottom-right-radius: 4px; }
-.msg.mine p { color: var(--button-ink); }
-.msg.bot { justify-self: start; border-bottom-left-radius: 4px; }
-.tool-line { font: 400 var(--text-sm)/1.5 var(--mono); color: var(--ink-3); padding-left: var(--space-1); }
-.thread > .notice { justify-self: start; }
-.action-card { justify-self: start; width: min(100%, 540px); padding: var(--space-4) var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--pop-shadow); display: grid; gap: var(--space-3); }
-.action-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
-.action-card .facts { font-size: var(--text-md); gap: 6px var(--space-4); }
-.action-card .facts dt::first-letter { text-transform: uppercase; }
-.action-card pre.wrap { white-space: pre-wrap; margin: 0; padding: var(--space-2); font-size: 12px; }
-.action-summary { margin: 0; color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
-.action-card .action-buttons { margin-top: var(--space-1); }
-.composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: end; margin: 0; padding-top: var(--space-4); border-top: 1px solid var(--line-soft); }
 
 @media (max-width: 1080px) {
   .split { grid-template-columns: minmax(0, 1fr); }
@@ -4377,6 +4957,8 @@ pre { background: var(--surface-2); border: 1px solid var(--line); border-radius
   .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .stat { padding: 14px var(--space-4); box-shadow: -1px 0 0 var(--line), 0 -1px 0 var(--line); }
   .stat-value { font-size: 22px; }
+  .attention { flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
+  .setup-row .segments { width: 56px; }
   .create > * { flex: 1 1 100%; }
   .create button { width: 100%; }
   .endpoints { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
@@ -4405,8 +4987,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 +5005,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),
 });