slotlock 0.2.0 → 0.5.0

package/dashboard.js

@@ -1,9 +1,10 @@
 // The dashboard: people sign in with GitHub and manage the API keys and calendar resources of a
-// personal tenant, `github:<user id>`. It is server-rendered HTML with no inline script or style,
+// tenant: their own, `github:<user id>`, or with `organizations`, a GitHub organization's,
+// `github-org:<organization id>`, shared by its owners and members. It is server-rendered HTML with no inline script or style,
 // so its Content-Security-Policy allows nothing but this server's own stylesheet and script.
 //
-// Sign-in is GitHub's OAuth web flow with `state` and PKCE (S256) and no scope: the token is used
-// once, to read who signed in, and dropped. A session is an HMAC-sealed cookie (`__Host-`,
+// Sign-in is GitHub's OAuth web flow with `state` and PKCE (S256), with no scope (`read:org` with
+// organizations): the token is used once, to read who signed in and their memberships, and dropped. A session is an HMAC-sealed cookie (`__Host-`,
 // HttpOnly, Secure, SameSite=Lax) that lasts 12 hours and is checked against the allowlist on every
 // request. Every form carries a CSRF token bound to the session, and every POST must come from this
 // server's own origin.
@@ -13,8 +14,11 @@
 // keeps these in Postgres, so they hold on every server that shares the database; the resource cap
 // is held in the database too.
 import { createHash, createHmac, randomBytes, timingSafeEqual } from 'node:crypto';
+import { SLOTLOCK_DASHBOARD_NAME_PATTERN } from './config.js';
 import { SLOTLOCK_DASHBOARD_FORM_LIMIT } from './ddl.js';
 import { ignoreRejection } from './hooks.js';
+import { SLOTLOCK_BOOKING_RULE_LIMITS } from './booking-rules.js';
+import { SLOTLOCK_CHANGE_TYPES, } from './event-feed.js';
 import { WEEKDAYS, WEEKDAY_NAMES as DAY_NAMES, rulesToWeeklyHours, weeklyHoursToRules, } from './weekly-hours.js';
 /** Resources one dashboard tenant may hold. */
 export const SLOTLOCK_DASHBOARD_MAX_RESOURCES = 100;
@@ -26,6 +30,8 @@ const MAX_FORM_BYTES = 8_192;
  * This also bounds how fast unauthenticated callbacks can write sign-in records.
  */
 const MAX_SIGN_INS_IN_FLIGHT = 8;
+/** Of those, how many one client address may run at once, so one client cannot take every slot. */
+const MAX_SIGN_INS_IN_FLIGHT_PER_CLIENT = 2;
 /** Entries each in-memory record keeps (createSlotlockMemoryDashboardState); past this the oldest go first. */
 const MAX_REMEMBERED = 10_000;
 /** A form's single-use value: 18 random bytes, then a MAC binding them to the session. */
@@ -36,7 +42,14 @@ const POST_ROUTES = new Set([
     '/keys/rotate',
     '/keys/revoke',
     '/resources',
+    '/resources/rules',
+    '/resources/pool',
+    '/webhooks',
+    '/webhooks/delete',
+    '/webhooks/enable',
+    '/waitlist/leave',
     '/hours',
+    '/organization',
 ]);
 const SIGN_IN_AGAIN = 'That sign-in did not finish here, or took too long. Sign in again.';
 const GITHUB_ERROR_CODE = /^[a-z0-9_]{1,64}$/;
@@ -75,20 +88,48 @@ const CONTENT_SECURITY_POLICY = "default-src 'none'; script-src 'self'; style-sr
  * in the database (a READ COMMITTED transaction, under a per-tenant lock).
  */
 export function createSlotlockDashboardResources(store) {
+    const by = (actor) => (actor === undefined ? {} : { actor });
     return {
         list: (tenantRef) => store.withTenant(tenantRef, (tenant) => tenant.listResources({ tenantRef, limit: SLOTLOCK_DASHBOARD_MAX_RESOURCES + 1 })),
-        add: (tenantRef, externalRef, timezone) => store.withTenant(tenantRef, (tenant) => tenant.createResource({
+        add: (tenantRef, externalRef, timezone, actor) => store.withTenant(tenantRef, (tenant) => tenant.createResource({
             tenantRef,
             externalRef,
             timezone,
             maxTenantResources: SLOTLOCK_DASHBOARD_MAX_RESOURCES,
-        }), { isolation: 'read committed' }),
-        setHours: (tenantRef, target, rules) => store.withTenant(tenantRef, async (tenant) => {
+        }), { isolation: 'read committed', ...by(actor) }),
+        setHours: (tenantRef, target, rules, actor) => store.withTenant(tenantRef, async (tenant) => {
             if (target === 'all')
                 return tenant.setTenantAvailability({ tenantRef, rules });
             const updated = await tenant.setResourceAvailability({ tenantRef, id: target.id, rules });
             return updated ? 1 : 0;
-        }),
+        }, by(actor)),
+        agenda: (tenantRef, window, limit) => store.withTenant(tenantRef, (tenant) => tenant.listAgenda({ tenantRef, window, limit })),
+        recentChanges: (tenantRef, limit) => store.withTenant(tenantRef, (tenant) => tenant.listRecentChanges({ tenantRef, limit })),
+        setRules: (tenantRef, id, rules, actor) => store.withTenant(tenantRef, (tenant) => tenant.setResourceBookingRules({ tenantRef, id, rules }), by(actor)),
+        setPool: (tenantRef, id, pool, actor) => store.withTenant(tenantRef, (tenant) => tenant.setResourcePool({ tenantRef, id, pool }), by(actor)),
+        waitlist: {
+            list: (tenantRef, limit) => store.withTenant(tenantRef, (tenant) => tenant.listWaitlist({ tenantRef, limit })),
+            async leave(tenantRef, id, actor) {
+                const left = await store.withTenant(tenantRef, (tenant) => tenant.leaveWaitlist({ tenantRef, id }), by(actor));
+                // An offered entry's hold went with it: offer that time to the next, as the API does.
+                if (left) {
+                    await store
+                        .withTenant(tenantRef, (tenant) => tenant.offerWaitlist({ tenantRef, limit: 20 }))
+                        .catch(() => undefined);
+                }
+                return left;
+            },
+        },
+        webhooks: {
+            list: (tenantRef) => store.withTenant(tenantRef, (tenant) => tenant.listWebhookEndpoints({ tenantRef })),
+            create: (tenantRef, url, eventTypes, actor) => store.withTenant(tenantRef, (tenant) => tenant.createWebhookEndpoint({
+                tenantRef,
+                url,
+                ...(eventTypes !== undefined ? { eventTypes } : {}),
+            }), by(actor)),
+            remove: async (tenantRef, id, actor) => (await store.withTenant(tenantRef, (tenant) => tenant.deleteWebhookEndpoint({ tenantRef, id }), by(actor))).deleted,
+            enable: (tenantRef, id, actor) => store.withTenant(tenantRef, (tenant) => tenant.enableWebhookEndpoint({ tenantRef, id }), by(actor)),
+        },
     };
 }
 function assertExpiry(expiresAt) {
@@ -100,6 +141,28 @@ function formLimitError() {
     return Object.assign(new Error(`Slotlock dashboard: ${SLOTLOCK_DASHBOARD_FORM_LIMIT} forms are live for this person`), { code: 'dashboard_form_limit' });
 }
 const ownerDigest = (owner) => createHash('sha256').update(`slotlock-dashboard-owner.${owner}`).digest();
+/**
+ * Records accepted write confirmations (`SlotlockAgentConfirmationOptions.consumeAcceptance`) in
+ * Postgres, shared by every server on the database: true the first time a confirmation's nonce is
+ * recorded, false while it stays recorded, so an accepted confirmation runs its write once on any
+ * server. Kept until the confirmation's own expiry, through the same function and table as the
+ * dashboard's records (only a SHA-256 digest of the nonce is stored); pass a client, not a
+ * transaction.
+ */
+export function createSlotlockAcceptanceRecords(sql) {
+    if (!('begin' in sql)) {
+        throw new Error('createSlotlockAcceptanceRecords needs a client, not a transaction: a rollback would undo its records');
+    }
+    const client = sql;
+    return async ({ nonce, expiresAt }) => {
+        const digest = createHash('sha256').update(`slotlock-confirmation.${nonce}`).digest();
+        return (await client.begin('isolation level read committed', async (tx) => {
+            const [row] = await tx `
+        SELECT slotlock.use_dashboard_token('confirmation', ${digest}, ${expiresAt}, NULL::bytea) AS used`;
+            return row?.used === true;
+        }));
+    };
+}
 /**
  * The dashboard's records in Postgres, shared by every server on the database. Run `applySchema()`
  * and `grantApplicationRole()` first: the serving role reaches the records only through
@@ -187,6 +250,9 @@ export function createSlotlockMemoryDashboardState(now = Date.now) {
         },
     };
 }
+/** Served organizations one session lists at most: the session is a cookie of at most 4 KB. */
+const MAX_SESSION_ORGANIZATIONS = 20;
+const ORGANIZATION_ID = /^[1-9]\d{0,19}$/;
 const isRecord = (value) => typeof value === 'object' && value !== null && !Array.isArray(value);
 function escapeHtml(value) {
     return value
@@ -217,6 +283,100 @@ function html(strings, ...values) {
     });
     return new Html(out);
 }
+/** Days of bookings the overview shows, how many it reads and lists, and its activity's length. */
+const AGENDA_DAYS = 7;
+const AGENDA_LIMIT = 200;
+const AGENDA_SHOWN = 30;
+const ACTIVITY_LIMIT = 20;
+const WAITLIST_SHOWN = 200;
+const RESOURCE_PAGE = /^\/resources\/([0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})$/i;
+/** How the booking rules form names each rule. */
+const RULE_LIMITS = SLOTLOCK_BOOKING_RULE_LIMITS;
+const RULE_NAMES = Object.freeze({
+    minNoticeMinutes: 'Minimum notice',
+    maxAdvanceDays: 'Book up to',
+    slotStepMinutes: 'Start step',
+    turnaroundMinutes: 'Turnaround',
+    checkInMinutes: 'Check-in release',
+});
+/** The booking rules form's fields, by rule. */
+const RULE_FIELDS = Object.freeze({
+    minNoticeMinutes: 'min_notice_minutes',
+    maxAdvanceDays: 'max_advance_days',
+    slotStepMinutes: 'slot_step_minutes',
+    turnaroundMinutes: 'turnaround_minutes',
+    checkInMinutes: 'check_in_minutes',
+});
+const icon = (paths) => new Html(`<svg class="icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">${paths}</svg>`);
+const ICONS = Object.freeze({
+    mark: new Html('<svg class="mark" viewBox="0 0 64 64" aria-hidden="true" focusable="false"><path d="M8 46 L26 14 L56 44"></path></svg>'),
+    overview: icon('<path d="M4 13h6V4H4zM14 20h6v-9h-6zM4 20h6v-3H4zM14 7h6V4h-6z"/>'),
+    resources: icon('<rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/>'),
+    keys: icon('<circle cx="8" cy="15" r="4"/><path d="M11 12l9-9M16 7l3 3"/>'),
+    waitlist: icon('<path d="M4 6h16M4 12h10M4 18h6"/><circle cx="18" cy="16" r="3"/>'),
+    webhooks: icon('<path d="M9 7a3 3 0 1 1 4 2.8L16 15M6.5 13.5A3 3 0 1 0 9 18h6M15 18a3 3 0 1 0 1.5-5.6"/>'),
+    settings: icon('<path d="M4 7h10M18 7h2M4 17h4M12 17h8"/><circle cx="16" cy="7" r="2"/><circle cx="10" cy="17" r="2"/>'),
+    check: icon('<path d="M5 12l5 5L20 7"/>'),
+    github: new Html('<svg class="icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path class="fill" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>'),
+});
+/** How the overview names each change the feed records. */
+const CHANGE_LABELS = Object.freeze({
+    'hold.created': { text: 'Hold placed', tone: 'neutral' },
+    'hold.updated': { text: 'Hold changed', tone: 'neutral' },
+    'hold.confirmed': { text: 'Hold booked', tone: 'good' },
+    'hold.released': { text: 'Hold released', tone: 'neutral' },
+    'hold.expired': { text: 'Hold expired', tone: 'neutral' },
+    'reservation.created': { text: 'Booked', tone: 'good' },
+    'reservation.updated': { text: 'Booking moved', tone: 'neutral' },
+    'reservation.cancelled': { text: 'Booking cancelled', tone: 'bad' },
+    'reservation.checked_in': { text: 'Checked in', tone: 'good' },
+    'reservation.no_show': { text: 'No-show released', tone: 'bad' },
+    'event.created': { text: 'Event added', tone: 'good' },
+    'event.updated': { text: 'Event changed', tone: 'neutral' },
+    'event.cancelled': { text: 'Event cancelled', tone: 'bad' },
+    'event.timezone_shifted': { text: 'Event moved by a time zone change', tone: 'neutral' },
+    'event.timezone_conflict': { text: 'Event clashes after a time zone change', tone: 'bad' },
+    'coverage.stale': { text: 'Calendar sync is behind', tone: 'bad' },
+    'waitlist.offered': { text: 'Waitlist offer sent', tone: 'good' },
+    'waitlist.expired': { text: 'Waitlist offer lapsed', tone: 'neutral' },
+    'webhook.disabled': { text: 'Webhook disabled', tone: 'bad' },
+});
+const zoned = (zone, parts) => {
+    try {
+        return new Intl.DateTimeFormat('en-GB', { ...parts, timeZone: zone });
+    }
+    catch {
+        return new Intl.DateTimeFormat('en-GB', { ...parts, timeZone: 'UTC' });
+    }
+};
+/** `14:30` in the resource's own time zone. */
+function clock(date, zone) {
+    return zoned(zone, { hour: '2-digit', minute: '2-digit', hourCycle: 'h23' }).format(date);
+}
+/** The day a time falls on in a zone: `Today`, `Tomorrow`, or `Thu 30 Oct`, with a key to group by. */
+function dayLabel(date, zone, nowMs) {
+    const key = (at) => zoned(zone, { year: 'numeric', month: '2-digit', day: '2-digit' }).format(at);
+    const day = key(date);
+    if (day === key(new Date(nowMs)))
+        return { key: day, label: 'Today' };
+    if (day === key(new Date(nowMs + DAY_MS)))
+        return { key: day, label: 'Tomorrow' };
+    return {
+        key: day,
+        label: zoned(zone, { weekday: 'short', day: 'numeric', month: 'short' }).format(date),
+    };
+}
+/** `just now`, `5 min ago`, `3 h ago`, `2 d ago`. */
+function ago(date, nowMs) {
+    const minutes = Math.max(0, Math.floor((nowMs - date.getTime()) / 60_000));
+    if (minutes < 1)
+        return 'just now';
+    if (minutes < 60)
+        return `${minutes} min ago`;
+    if (minutes < 1_440)
+        return `${Math.floor(minutes / 60)} h ago`;
+    return `${Math.floor(minutes / 1_440)} d ago`;
+}
 function safeEqual(a, b) {
     const left = createHash('sha256').update(a).digest();
     const right = createHash('sha256').update(b).digest();
@@ -422,6 +582,16 @@ export function createSlotlockDashboard(options) {
     const authorizeUrl = options.github.authorizeUrl ?? 'https://github.com/login/oauth/authorize';
     const tokenUrl = options.github.tokenUrl ?? 'https://github.com/login/oauth/access_token';
     const userUrl = options.github.userUrl ?? 'https://api.github.com/user';
+    const membershipsUrl = options.github.membershipsUrl ??
+        'https://api.github.com/user/memberships/orgs?state=active&per_page=100';
+    const served = options.organizations ? new Set(options.organizations) : null;
+    if (served && (served.size === 0 || [...served].some((id) => !ORGANIZATION_ID.test(id)))) {
+        throw new Error('Slotlock dashboard organizations must be GitHub organization ids');
+    }
+    const brandName = options.name ?? 'Slotlock';
+    if (!SLOTLOCK_DASHBOARD_NAME_PATTERN.test(brandName) || brandName.trim() !== brandName) {
+        throw new Error('Slotlock dashboard name must be 1-60 characters, without <, > or control or invisible characters');
+    }
     const fetchImpl = options.fetch ?? fetch;
     const now = options.now ?? Date.now;
     if (Buffer.byteLength(options.sessionSecret, 'utf8') < 32) {
@@ -432,6 +602,8 @@ export function createSlotlockDashboard(options) {
     const allowed = (uid) => options.allowedUsers === '*' ||
         (Array.isArray(options.allowedUsers) && options.allowedUsers.includes(uid));
     let signInsInFlight = 0;
+    /** Sign-ins in flight by client address. */
+    const signInsByClient = new Map();
     function report(message) {
         try {
             ignoreRejection(options.onError?.(new Error(message)));
@@ -440,18 +612,26 @@ export function createSlotlockDashboard(options) {
             // A failing reporter must not change the response.
         }
     }
-    const formMac = (session, nonce) => createHmac('sha256', secret)
-        .update(`slotlock-dashboard-form-v1.${session.sid}.${nonce}`)
+    // Bound to the organization too: a page opened before a switch cannot write into the new one.
+    const formMac = (session, nonce, org = session.org ?? '') => createHmac('sha256', secret)
+        .update(`slotlock-dashboard-form-v2.${session.sid}.${org}.${nonce}`)
         .digest('base64url');
     /** Random, and bound to the session by a MAC: a made-up or another session's value is refused unwritten. */
     const formNonce = (session) => {
         const nonce = randomBytes(18).toString('base64url');
         return `${nonce}.${formMac(session, nonce)}`;
     };
-    const isFormNonce = (session, once) => {
+    /** `ok`, `other_org` for a form from a page of another of the session's organizations, else `bad`. */
+    const checkFormNonce = (session, once) => {
         const match = FORM_NONCE.exec(once);
+        if (match === null)
+            return 'bad';
+        const [, nonce, mac] = match;
         // Compared as text, like the cookie MACs: decoding would drop the last character's spare bits.
-        return match !== null && safeEqual(match[2], formMac(session, match[1]));
+        if (safeEqual(mac, formMac(session, nonce)))
+            return 'ok';
+        const other = session.orgs?.some((org) => org.id !== session.org && safeEqual(mac, formMac(session, nonce, org.id)));
+        return other ? 'other_org' : 'bad';
     };
     function seal(context, payload) {
         const body = Buffer.from(JSON.stringify(payload), 'utf8').toString('base64url');
@@ -489,15 +669,30 @@ export function createSlotlockDashboard(options) {
             typeof payload.login !== 'string' ||
             typeof payload.sid !== 'string' ||
             !allowed(payload.uid) ||
+            !organizationsHold(payload) ||
             (await options.state.sessionEnded(payload.sid, payload.exp))) {
             return null;
         }
         return payload;
     }
+    /**
+     * With organizations, the session names one the server still serves, from its own list; without
+     * them, it names none. A session from the other mode is signed out.
+     */
+    function organizationsHold(payload) {
+        if (!served)
+            return payload.org === undefined && payload.orgs === undefined;
+        if (typeof payload.org !== 'string' || !served.has(payload.org) || !Array.isArray(payload.orgs)) {
+            return false;
+        }
+        return payload.orgs.some((org) => isRecord(org) && org.id === payload.org && typeof org.login === 'string');
+    }
     const csrfToken = (session) => createHmac('sha256', secret)
         .update(`slotlock-dashboard-csrf-v1.${session.sid}`)
         .digest('base64url');
-    const tenantOf = (session) => `github:${session.uid}`;
+    const tenantOf = (session) => served ? `github-org:${session.org}` : `github:${session.uid}`;
+    /** Who did something, for the record: the person, whatever tenant they act in. */
+    const personOf = (session) => `github:${session.uid}`;
     function respond(status, body, headers = {}, cookies = []) {
         const response = new Response(String(body), {
             status,
@@ -517,34 +712,75 @@ export function createSlotlockDashboard(options) {
         return response;
     }
     const redirect = (status, location, cookies = []) => respond(status, '', { Location: location }, cookies);
-    function layout(title, content, session) {
-        const account = session
-            ? html `<div class="account"><span class="login">@${session.login}</span>
-          <form method="post" action="${root}/sign-out"><input type="hidden" name="csrf" value="${csrfToken(session)}"><button class="link" type="submit">Sign out</button></form></div>`
-            : html ``;
-        return html `<!doctype html>
+    // Pages for what the adapter offers, so a custom one without a waitlist shows none. Read per
+    // request: on Workers the adapter exists only inside one.
+    const nav = () => [
+        { section: 'overview', label: 'Overview', path: '', icon: ICONS.overview },
+        { section: 'resources', label: 'Resources', path: '/resources', icon: ICONS.resources },
+        ...(options.resources.waitlist
+            ? [{ section: 'waitlist', label: 'Waitlist', path: '/waitlist', icon: ICONS.waitlist }]
+            : []),
+        { section: 'keys', label: 'API keys', path: '/keys', icon: ICONS.keys },
+        ...(options.resources.webhooks
+            ? [{ section: 'webhooks', label: 'Webhooks', path: '/webhooks', icon: ICONS.webhooks }]
+            : []),
+        { section: 'settings', label: 'Settings', path: '/settings', icon: ICONS.settings },
+    ];
+    /** The workspace the session acts in: its organization, or the person themselves. */
+    function workspace(session) {
+        const current = session.orgs?.find((org) => org.id === session.org);
+        const choices = (session.orgs ?? []).filter((org) => served?.has(org.id));
+        const name = current?.login ?? session.login;
+        const badge = html `<span class="avatar" aria-hidden="true">${name.slice(0, 1).toUpperCase()}</span>`;
+        if (current && choices.length > 1) {
+            return html `<form class="workspace" method="post" action="${root}/organization">${badge}<input type="hidden" name="csrf" value="${csrfToken(session)}"><input type="hidden" name="once" value="${formNonce(session)}"><label class="visually-hidden" for="organization">Organization</label><select id="organization" name="organization">${choices.map((org) => html `<option value="${org.id}"${org.id === current.id ? html ` selected` : html ``}>${org.login}</option>`)}</select><button class="quiet" type="submit">Switch</button></form>`;
+        }
+        return html `<div class="workspace">${badge}<span class="workspace-name">${current ? name : `@${name}`}</span></div>`;
+    }
+    function layout(title, content, session, section) {
+        const head = html `<!doctype html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="referrer" content="${REFERRER_POLICY}">
-<title>${title} · Slotlock</title>
+<title>${title} · ${brandName}</title>
 <link rel="stylesheet" href="${root}/style.css?v=${ASSET_VERSIONS.css}">
 <script src="${root}/app.js?v=${ASSET_VERSIONS.js}" defer></script>
-</head>
+</head>`;
+        const brand = html `<a class="brand" href="${root}">${ICONS.mark}<span class="name">${brandName}</span></a>`;
+        if (!session) {
+            return html `${head}
+<body class="bare">
+<header class="bare-bar">${brand}</header>
+<main class="bare-main">${content}</main>
+</body>
+</html>`;
+        }
+        const links = nav().map((item) => html `<a href="${root}${item.path}"${item.section === section ? html ` aria-current="page"` : html ``}>${item.icon}<span>${item.label}</span></a>`);
+        return html `${head}
 <body>
-<header class="bar"><a class="brand" href="${root}"><svg class="mark" viewBox="0 0 64 64" aria-hidden="true" focusable="false"><path d="M8 46 L26 14 L56 44"></path></svg><span class="name">Slotlock</span> <span class="by">by Pylota</span></a>${account}</header>
-<main>${content}</main>
+<div class="app">
+<aside class="side">
+<div class="side-top">${brand}${workspace(session)}</div>
+<nav class="nav" aria-label="Dashboard">${links}</nav>
+<div class="me"><span class="login">@${session.login}</span><form method="post" action="${root}/sign-out"><input type="hidden" name="csrf" value="${csrfToken(session)}"><button class="quiet" type="submit">Sign out</button></form></div>
+</aside>
+<main class="page">${content}</main>
+</div>
 </body>
 </html>`;
     }
+    const noticeOf = (notice) => notice ? html `<p class="notice" role="alert">${notice}</p>` : html ``;
     function signedOutPage(status, notice, cookies = []) {
-        const content = html `<section class="hero">
-<h1>Your agents' calendar keys</h1>
-<p>Sign in with GitHub to create API keys for the Slotlock tools, add the resources your agents book, and connect an MCP or A2A client.</p>
-${notice ? html `<p class="notice" role="alert">${notice}</p>` : html ``}
-<a class="button primary" href="${root}/sign-in">Sign in with GitHub</a>
-<p class="fine">Slotlock reads only your public GitHub profile, to know who you are, and keeps nothing from GitHub but your user id and login.</p>
+        const content = html `<section class="sign-in">
+<h1>Sign in to ${brandName}</h1>
+<p>Create keys for your agents, add what they book, and watch what they do.</p>
+${noticeOf(notice)}
+<a class="button primary wide" href="${root}/sign-in">${ICONS.github}Continue with GitHub</a>
+<p class="fine">${served
+            ? `${brandName} reads your GitHub profile and which organizations you belong to, and keeps only your user id, login and the organizations it serves.`
+            : `${brandName} reads only your public GitHub profile, and keeps only your user id and login.`}</p>
 </section>`;
         return respond(status, layout('Sign in', content, null), {}, cookies);
     }
@@ -553,39 +789,132 @@ ${notice ? html `<p class="notice" role="alert">${notice}</p>` : html ``}
             const expired = key.expiresAt !== null && key.expiresAt.getTime() <= now();
             const status = key.revokedAt ? 'Revoked' : expired ? 'Expired' : 'Active';
             const actions = status === 'Active'
-                ? html `<details class="act"><summary>Rotate</summary><p>A new secret replaces this one at once. The key keeps its name, access and bookings.</p>
-<form method="post" action="${root}/keys/rotate"><input type="hidden" name="csrf" value="${token}"><input type="hidden" name="once" value="${formNonce(session)}"><input type="hidden" name="id" value="${key.id}"><button type="submit">Rotate key</button></form></details>
-<details class="act danger"><summary>Revoke</summary><p>Requests with this key fail at once. What it booked stays on the calendar.</p>
-<form method="post" action="${root}/keys/revoke"><input type="hidden" name="csrf" value="${token}"><input type="hidden" name="once" value="${formNonce(session)}"><input type="hidden" name="id" value="${key.id}"><button class="danger" type="submit">Revoke key</button></form></details>`
+                ? html `<details class="act"><summary>Rotate</summary><div class="pop"><p>A new secret replaces this one at once. The key keeps its name, access and bookings.</p>
+<form method="post" action="${root}/keys/rotate"><input type="hidden" name="csrf" value="${token}"><input type="hidden" name="once" value="${formNonce(session)}"><input type="hidden" name="id" value="${key.id}"><button type="submit">Rotate key</button></form></div></details>
+<details class="act danger"><summary>Revoke</summary><div class="pop"><p>Requests with this key fail at once. What it booked stays on the calendar.</p>
+<form method="post" action="${root}/keys/revoke"><input type="hidden" name="csrf" value="${token}"><input type="hidden" name="once" value="${formNonce(session)}"><input type="hidden" name="id" value="${key.id}"><button class="danger" type="submit">Revoke key</button></form></div></details>`
                 : html ``;
             return html `<tr>
-<td data-label="Name">${key.name}</td>
+<td data-label="Name" class="strong">${key.name}</td>
 <td data-label="Key"><code>${key.prefix}…</code></td>
 <td data-label="Access">${key.scopes.includes('admin') ? 'Full' : key.scopes.includes('write') ? 'Read and write' : 'Read only'}</td>
 <td data-label="Created">${formatDate(key.createdAt)}</td>
+${served ? html `<td data-label="Created by">${key.createdBy === personOf(session) ? 'You' : key.createdBy?.startsWith('github:') ? `GitHub user ${key.createdBy.slice(7)}` : 'Unknown'}</td>` : html ``}
 <td data-label="Last used">${key.lastUsedAt ? formatDate(key.lastUsedAt) : 'Never'}</td>
 <td data-label="Expires">${key.expiresAt ? formatDate(key.expiresAt) : 'Never'}</td>
-<td data-label="Status"><span class="status ${status.toLowerCase()}">${status}</span></td>
+<td data-label="Status"><span class="pill ${status.toLowerCase()}">${status}</span></td>
 <td class="actions">${actions}</td>
 </tr>`;
         });
     }
-    async function dashboardPage(session, status = 200, notice) {
+    const pageHead = (title, action) => html `<header class="page-head"><h1>${title}</h1>${action ?? html ``}</header>`;
+    /** A resource as people name it: its reference, else the start of its id. */
+    const resourceName = (resource, id) => resource?.externalRef ?? `${id.slice(0, 8)}…`;
+    function agendaPanel(entries, byId, more) {
+        if (entries.length === 0) {
+            return html `<p class="empty">Nothing booked in the next ${String(AGENDA_DAYS)} days.</p>`;
+        }
+        const zones = new Set(entries.map((entry) => byId.get(entry.resourceId)?.timezone ?? 'UTC'));
+        const groups = new Map();
+        for (const entry of entries.slice(0, AGENDA_SHOWN)) {
+            const resource = byId.get(entry.resourceId);
+            const zone = resource?.timezone ?? 'UTC';
+            const day = dayLabel(entry.start, zone, now());
+            const group = groups.get(day.key) ?? { label: day.label, rows: [] };
+            const name = resourceName(resource, entry.resourceId);
+            // An event by its summary; a booking or hold by what it occupies, and a booking's own
+            // reference when it is one a person chose (not the id Slotlock gave it).
+            const title = entry.kind === 'event' ? (entry.summary ?? name) : name;
+            const meta = [
+                entry.kind === 'event' ? name : null,
+                entry.reference && !UUID_PATTERN.test(entry.reference) ? entry.reference : null,
+                zones.size > 1 ? zone : null,
+                entry.source && !entry.source.startsWith('calendar-event:') ? entry.source : null,
+            ].filter((part) => part !== null);
+            const pill = entry.kind === 'hold' && entry.expiresAt
+                ? html `<span class="pill held">Held until ${clock(entry.expiresAt, zone)}</span>`
+                : html `<span class="pill ${entry.kind}">${entry.kind === 'event' ? 'Event' : 'Booked'}</span>`;
+            group.rows.push(html `<li class="slot"><span class="when">${clock(entry.start, zone)}<span class="until">${clock(entry.end, zone)}</span></span><span class="what"><span class="title">${title}</span>${meta.length > 0 ? html `<span class="meta">${meta.join(' · ')}</span>` : html ``}</span>${pill}</li>`);
+            groups.set(day.key, group);
+        }
+        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 ``}`;
+    }
+    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)}`
+                                : 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"><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>`;
+        })}</ol>`;
+    }
+    async function overviewPage(session, status = 200, notice) {
         const tenantRef = tenantOf(session);
-        const [keys, resources] = await Promise.all([
+        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([
             options.keys.list({ tenantRef }),
             options.resources.list(tenantRef),
+            options.resources.agenda?.(tenantRef, window, AGENDA_LIMIT),
+            options.resources.recentChanges?.(tenantRef, ACTIVITY_LIMIT),
         ]);
+        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 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` },
+        ];
+        const content = html `${noticeOf(notice)}
+${pageHead('Overview')}
+${steps.every((step) => step.done)
+            ? 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>
+<div class="split">
+${agenda ? html `<section class="panel" id="upcoming"><h2>Upcoming</h2>${agendaPanel(agenda, byId, agenda.length > AGENDA_SHOWN)}</section>` : html ``}
+${changes ? html `<section class="panel"><h2>Agent activity</h2>${activityPanel(changes, byId, keys, session)}</section>` : html ``}
+</div>`;
+        return respond(status, layout('Overview', content, session, 'overview'));
+    }
+    function endpoints() {
+        return html `<dl class="endpoints"><dt>MCP</dt><dd><code id="mcp-url">${mcpUrl}</code><button class="quiet" type="button" data-copy="mcp-url">Copy</button></dd><dt>A2A</dt><dd><code id="a2a-url">${a2aUrl}</code><button class="quiet" type="button" data-copy="a2a-url">Copy</button></dd></dl>`;
+    }
+    async function keysPage(session, status = 200, notice) {
+        const keys = await options.keys.list({ tenantRef: tenantOf(session) });
         const token = csrfToken(session);
-        const rules = options.availability ?? [];
-        const content = html `${notice ? html `<p class="notice" role="alert">${notice}</p>` : html ``}
-<section class="card">
+        const content = html `${noticeOf(notice)}
+${pageHead('API keys')}
+<section class="panel">
 <h2>Connect an agent</h2>
-<p>Agents call Slotlock over MCP or A2A with one of your keys: <code>Authorization: Bearer slk_…</code>.</p>
-<dl class="endpoints"><dt>MCP</dt><dd><code>${mcpUrl}</code></dd><dt>A2A</dt><dd><code>${a2aUrl}</code></dd></dl>
+<p>Agents call ${brandName} over MCP or A2A with a key: <code>Authorization: Bearer slk_…</code></p>
+${endpoints()}
 </section>
-<section>
-<div class="head"><div><h2>API keys</h2><p>Each key acts in your calendar only. Give every agent its own, with the least access it needs.</p></div></div>
+<section class="panel">
+<h2>New key</h2>
 <form class="create" method="post" action="${root}/keys">
 <input type="hidden" name="csrf" value="${token}">
 <input type="hidden" name="once" value="${formNonce(session)}">
@@ -594,33 +923,338 @@ ${notice ? html `<p class="notice" role="alert">${notice}</p>` : html ``}
 <label>Expires<select name="expires"><option value="90">In 90 days</option><option value="30">In 30 days</option><option value="365">In a year</option><option value="never">Never</option></select></label>
 <button class="primary" type="submit">Create key</button>
 </form>
-${keys.length === 0
-            ? html `<p class="empty">No keys yet. Create one to connect an agent.</p>`
-            : html `<div class="table"><table><thead><tr><th>Name</th><th>Key</th><th>Access</th><th>Created</th><th>Last used</th><th>Expires</th><th>Status</th><th><span class="visually-hidden">Actions</span></th></tr></thead>
-<tbody>${keyRows(keys, token, session)}</tbody></table></div>`}
 </section>
-<section>
-<div class="head"><div><h2>Resources</h2><p>What your agents book: a car, a room, a person, a machine. Up to ${SLOTLOCK_DASHBOARD_MAX_RESOURCES}.</p></div></div>
+${keys.length === 0
+            ? html `<p class="empty">No keys yet. Give every agent its own, with the least access it needs.</p>`
+            : served
+                ? html `<p class="fine">Each key acts in this organization only, and every member can rotate or revoke it.</p><div class="table"><table><thead><tr><th>Name</th><th>Key</th><th>Access</th><th>Created</th><th>Created by</th><th>Last used</th><th>Expires</th><th>Status</th><th><span class="visually-hidden">Actions</span></th></tr></thead>
+<tbody>${keyRows(keys, token, session)}</tbody></table></div>`
+                : html `<div class="table"><table><thead><tr><th>Name</th><th>Key</th><th>Access</th><th>Created</th><th>Last used</th><th>Expires</th><th>Status</th><th><span class="visually-hidden">Actions</span></th></tr></thead>
+<tbody>${keyRows(keys, token, session)}</tbody></table></div>`}`;
+        return respond(status, layout('API keys', content, session, 'keys'));
+    }
+    async function resourcesPage(session, status = 200, notice) {
+        const resources = await options.resources.list(tenantOf(session));
+        const token = csrfToken(session);
+        const content = html `${noticeOf(notice)}
+${pageHead('Resources', resources.length > 0 ? html `<a class="button" href="${root}/hours">Set hours for every resource</a>` : undefined)}
+<section class="panel">
+<h2>Add a resource</h2>
 <form class="create" method="post" action="${root}/resources">
 <input type="hidden" name="csrf" value="${token}">
 <input type="hidden" name="once" value="${formNonce(session)}">
 <label>Reference<input name="reference" required maxlength="200" placeholder="vehicle-42"></label>
 <label>Time zone<input name="timezone" required maxlength="64" value="UTC" placeholder="Europe/London"></label>
-<button type="submit">Add resource</button>
+<button class="primary" type="submit">Add resource</button>
 </form>
+<p class="fine">${String(resources.length)} of ${String(SLOTLOCK_DASHBOARD_MAX_RESOURCES)}. Adding a reference you have changes its time zone.</p>
+</section>
 ${resources.length === 0
             ? html `<p class="empty">No resources yet. Agents can only book what is listed here.</p>`
-            : html `<div class="table"><table><thead><tr><th>Reference</th><th>Time zone</th><th>Bookable hours</th><th>Resource id</th></tr></thead><tbody>${resources.map((resource) => html `<tr><td data-label="Reference">${resource.externalRef ?? ''}</td><td data-label="Time zone">${resource.timezone}</td><td data-label="Bookable hours">${hoursSummary(resource.availabilityRules)} <a href="${root}/hours?resource=${resource.id}">Set hours</a></td><td data-label="Resource id"><code>${resource.id}</code></td></tr>`)}</tbody></table></div>`}
+            : html `<div class="table"><table><thead><tr><th>Reference</th><th>Time zone</th><th>Bookable hours</th><th>Resource id</th></tr></thead><tbody>${resources.map((resource) => html `<tr><td data-label="Reference" class="strong"><span class="cell"><a href="${root}/resources/${resource.id}">${resourceName(resource, resource.id)}</a>${resource.pool ? html `<span class="meta">Pool ${resource.pool}</span>` : html ``}</span></td><td data-label="Time zone">${resource.timezone}</td><td data-label="Bookable hours">${hoursSummary(resource.availabilityRules)} <a href="${root}/hours?resource=${resource.id}">Set hours</a></td><td data-label="Resource id"><code class="muted">${resource.id}</code></td></tr>`)}</tbody></table></div>`}`;
+        return respond(status, layout('Resources', content, session, 'resources'));
+    }
+    function settingsPage(session) {
+        const rules = options.availability ?? [];
+        const current = session.orgs?.find((org) => org.id === session.org);
+        const content = html `${pageHead('Settings')}
+<section class="panel">
+<h2>Endpoints</h2>
+${endpoints()}
 </section>
-<section>
-<h2>Bookable hours</h2>
+<section class="panel">
+<h2>Server hours</h2>
 ${rules.length === 0
-            ? html `<p class="empty">This server offers no bookable hours: agents find a free slot only on resources with hours of their own.</p>`
+            ? 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">The server's hours, for resources without hours of their own, in each resource's own time zone.</p>
-${resources.length > 0 ? html `<p><a href="${root}/hours">Set hours for every resource</a></p>` : html ``}
+<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>@${session.login}</dd>${current
+            ? html `<dt>Organization</dt><dd>${current.login}</dd>${(session.orgs?.length ?? 0) > 1 ? html `<dt>Also a member of</dt><dd>${(session.orgs ?? []).filter((org) => org.id !== current.id).map((org) => org.login).join(', ')}</dd>` : html ``}`
+            : html `<dt>Workspace</dt><dd>Personal</dd>`}<dt>Session ends</dt><dd>${formatDate(new Date(session.exp))}</dd></dl>
+${current ? html `<p class="fine">Membership is read from GitHub when you sign in.</p>` : html ``}
+</section>`;
+        return respond(200, layout('Settings', content, session, 'settings'));
+    }
+    /** 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);
+        const resource = await ownResource(session, id);
+        if (!resource)
+            return notFound(session);
+        const start = new Date(now());
+        const window = { start, end: new Date(start.getTime() + AGENDA_DAYS * DAY_MS) };
+        const [agenda, changes, keys] = await Promise.all([
+            options.resources.agenda?.(tenantRef, window, AGENDA_LIMIT),
+            options.resources.recentChanges?.(tenantRef, 100),
+            options.keys.list({ tenantRef }),
+        ]);
+        const byId = new Map([[resource.id, resource]]);
+        const mine = agenda?.filter((entry) => entry.resourceId === resource.id);
+        const activity = changes?.filter((change) => change.resourceId === resource.id).slice(0, 10);
+        const token = csrfToken(session);
+        const rules = resource.bookingRules ?? {};
+        const field = (name, label, unit) => html `<label>${label}<span class="unit-input"><input type="number" inputmode="numeric" min="${String(RULE_LIMITS[name][0])}" max="${String(RULE_LIMITS[name][1])}" name="${RULE_FIELDS[name]}" value="${rules[name] === undefined ? '' : String(rules[name])}"><span>${unit}</span></span></label>`;
+        const content = html `${noticeOf(notice)}
+<p><a class="back" href="${root}/resources">Resources</a></p>
+${pageHead(resourceName(resource, resource.id))}
+<dl class="facts"><dt>Time zone</dt><dd>${resource.timezone}</dd><dt>Bookable hours</dt><dd>${hoursSummary(resource.availabilityRules)} <a href="${root}/hours?resource=${resource.id}">Set hours</a></dd><dt>Resource id</dt><dd><code class="muted">${resource.id}</code></dd></dl>
+<div class="split">
+<div class="stack">
+${options.resources.setRules
+            ? html `<section class="panel">
+<h2>Booking rules</h2>
+<form method="post" action="${root}/resources/rules">
+<input type="hidden" name="csrf" value="${token}">
+<input type="hidden" name="once" value="${formNonce(session)}">
+<input type="hidden" name="id" value="${resource.id}">
+<div class="grid-form">
+${field('minNoticeMinutes', 'Minimum notice', 'min')}
+${field('maxAdvanceDays', 'Book up to', 'days ahead')}
+${field('slotStepMinutes', 'Start on a step of', 'min')}
+${field('turnaroundMinutes', 'Turnaround after each booking', 'min')}
+${field('checkInMinutes', 'Release if not checked in after', 'min')}
+</div>
+<label class="choice"><input type="checkbox" name="enforce_hours" value="1"${rules.enforceHours ? html ` checked` : html ``}> Only inside bookable hours</label>
+<label class="choice"><input type="checkbox" name="require_certain" value="1"${rules.requireCertain ? html ` checked` : html ``}> Only in time its calendar syncs have read today</label>
+<p class="fine">Leave a field empty for no rule.</p>
+<button class="primary" type="submit">Save rules</button>
+</form>
+</section>`
+            : html ``}
+${options.resources.setPool
+            ? html `<section class="panel">
+<h2>Pool</h2>
+<form class="create" method="post" action="${root}/resources/pool">
+<input type="hidden" name="csrf" value="${token}">
+<input type="hidden" name="once" value="${formNonce(session)}">
+<input type="hidden" name="id" value="${resource.id}">
+<label>Pool name<input name="pool" maxlength="100" value="${resource.pool ?? ''}" placeholder="suv"></label>
+<button type="submit">Save pool</button>
+</form>
+<p class="fine">Agents can book any free member of a pool. Leave it empty for none.</p>
+</section>`
+            : html ``}
+</div>
+<div class="stack">
+${mine ? html `<section class="panel"><h2>Upcoming</h2>${agendaPanel(mine, byId, mine.length > AGENDA_SHOWN)}</section>` : html ``}
+${activity ? html `<section class="panel"><h2>Activity</h2>${activityPanel(activity, byId, keys, session)}</section>` : html ``}
+</div>
+</div>`;
+        return respond(status, layout(resourceName(resource, resource.id), content, session, 'resources'));
+    }
+    async function saveRules(session, form) {
+        const id = form.get('id') ?? '';
+        const resource = await ownResource(session, id);
+        if (!resource || !options.resources.setRules)
+            return notFound(session);
+        const rules = {};
+        for (const [name, key] of Object.entries(RULE_FIELDS)) {
+            const value = (form.get(key) ?? '').trim();
+            if (value === '')
+                continue;
+            const [min, max] = RULE_LIMITS[name];
+            if (!/^\d{1,7}$/.test(value) || Number(value) < min || Number(value) > max) {
+                return resourceDetailPage(session, id, 400, `${RULE_NAMES[name]} is a whole number from ${min.toLocaleString('en')} to ${max.toLocaleString('en')}. Leave it empty for none.`);
+            }
+            rules[name] = Number(value);
+        }
+        if (form.get('enforce_hours') === '1')
+            rules.enforceHours = true;
+        if (form.get('require_certain') === '1')
+            rules.requireCertain = true;
+        try {
+            await options.resources.setRules(tenantOf(session), id, Object.keys(rules).length === 0 ? null : rules, personOf(session));
+        }
+        catch (error) {
+            if (error.code !== 'invalid_booking_rules')
+                throw error;
+            return resourceDetailPage(session, id, 400, 'Those rules are not ones Slotlock can keep.');
+        }
+        return redirect(303, `${root}/resources/${id}`);
+    }
+    async function savePool(session, form) {
+        const id = form.get('id') ?? '';
+        const resource = await ownResource(session, id);
+        if (!resource || !options.resources.setPool)
+            return notFound(session);
+        const pool = (form.get('pool') ?? '').trim();
+        try {
+            await options.resources.setPool(tenantOf(session), id, pool === '' ? null : pool, personOf(session));
+        }
+        catch (error) {
+            if (error.code !== 'invalid_pool')
+                throw error;
+            return resourceDetailPage(session, id, 400, 'A pool name is 1 to 100 letters, digits, dots, dashes or underscores.');
+        }
+        return redirect(303, `${root}/resources/${id}`);
+    }
+    function endpointState(endpoint) {
+        if (endpoint.disabledAt)
+            return { text: 'Disabled', tone: 'revoked' };
+        if (endpoint.failingSince)
+            return { text: 'Failing', tone: 'held' };
+        return { text: 'Delivering', tone: 'active' };
+    }
+    async function webhooksPage(session, status = 200, notice) {
+        const hooks = options.resources.webhooks;
+        if (!hooks)
+            return notFound(session);
+        const endpoints = await hooks.list(tenantOf(session));
+        const token = csrfToken(session);
+        const failing = endpoints.filter((endpoint) => endpoint.failingSince && !endpoint.disabledAt);
+        const disabled = endpoints.filter((endpoint) => endpoint.disabledAt);
+        const rows = endpoints.map((endpoint) => {
+            const state = endpointState(endpoint);
+            const problem = endpoint.disabledAt
+                ? `${endpoint.disabledReason ?? 'Disabled'} (${formatDate(endpoint.disabledAt)})`
+                : endpoint.failingSince
+                    ? `Since ${formatDate(endpoint.failingSince)}, ${String(endpoint.attempts)} attempts${endpoint.lastStatus ? `, last HTTP ${endpoint.lastStatus}` : ''}${endpoint.lastError ? `: ${endpoint.lastError.slice(0, 120)}` : ''}`
+                    : '';
+            return html `<tr>
+<td data-label="URL" class="strong wrap"><code>${endpoint.url}</code></td>
+<td data-label="Events">${endpoint.eventTypes ? endpoint.eventTypes.join(', ') : 'All'}</td>
+<td data-label="Status"><span class="cell"><span class="pill ${state.tone}">${state.text}</span>${problem ? html `<span class="meta wrap">${problem}</span>` : html ``}</span></td>
+<td data-label="Added">${formatDate(endpoint.createdAt)}</td>
+<td class="actions">${endpoint.disabledAt
+                ? html `<form class="inline" method="post" action="${root}/webhooks/enable"><input type="hidden" name="csrf" value="${token}"><input type="hidden" name="once" value="${formNonce(session)}"><input type="hidden" name="id" value="${endpoint.id}"><button type="submit">Enable</button></form>`
+                : html ``}<details class="act danger"><summary>Delete</summary><div class="pop"><p>Nothing more is sent to it. The feed keeps its changes.</p>
+<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)}
+${pageHead('Webhooks')}
+<div class="stats">
+<div class="stat"><span class="stat-label">Endpoints</span><span class="stat-value">${String(endpoints.length)}</span></div>
+<div class="stat"><span class="stat-label">Failing</span><span class="stat-value">${String(failing.length)}</span></div>
+<div class="stat"><span class="stat-label">Disabled</span><span class="stat-value">${String(disabled.length)}</span></div>
+</div>
+<section class="panel">
+<h2>Add an endpoint</h2>
+<form method="post" action="${root}/webhooks">
+<input type="hidden" name="csrf" value="${token}">
+<input type="hidden" name="once" value="${formNonce(session)}">
+<label>URL<input name="url" type="url" required maxlength="2048" placeholder="https://example.com/slotlock"></label>
+<details class="types"><summary>Events: all, or choose</summary><div class="checks">${SLOTLOCK_CHANGE_TYPES.map((type) => html `<label class="choice"><input type="checkbox" name="event_type" value="${type}"> <code>${type}</code></label>`)}</div></details>
+<button class="primary" type="submit">Add endpoint</button>
+</form>
+<p class="fine">Signed as Standard Webhooks with a secret shown once. An endpoint failing for a day is disabled.</p>
+</section>
+${endpoints.length === 0
+            ? html `<p class="empty">No webhooks. Add one to hear about bookings as they change.</p>`
+            : html `<div class="table"><table><thead><tr><th>URL</th><th>Events</th><th>Status</th><th>Added</th><th><span class="visually-hidden">Actions</span></th></tr></thead><tbody>${rows}</tbody></table></div>`}`;
+        return respond(status, layout('Webhooks', content, session, 'webhooks'));
+    }
+    async function addWebhook(session, form) {
+        const hooks = options.resources.webhooks;
+        if (!hooks)
+            return notFound(session);
+        const types = form.getAll('event_type');
+        const created = await hooks.create(tenantOf(session), (form.get('url') ?? '').trim(), types.length === 0 ? undefined : types, personOf(session));
+        if (!created.ok) {
+            const message = created.code === 'webhook_limit_reached'
+                ? `You have ${String(created.limit)} webhooks, as many as Slotlock allows. Delete one first.`
+                : created.code === 'invalid_webhook_url'
+                    ? 'Give an https URL, with no user name, password or #fragment.'
+                    : 'Choose events from the list.';
+            return webhooksPage(session, created.code === 'webhook_limit_reached' ? 409 : 400, message);
+        }
+        const content = html `<section class="card once">
+<h1>Webhook added</h1>
+<p><code>${created.endpoint.url}</code></p>
+<p class="notice warn" role="alert">Copy the signing secret now. It will not be shown again.</p>
+<div class="copy"><input id="secret" readonly value="${created.secret}" aria-label="Signing secret"><button type="button" data-copy="secret">Copy</button></div>
+<p>Verify each delivery's <code>webhook-signature</code> with it, using a Standard Webhooks library.</p>
+<a class="button primary" href="${root}/webhooks">Done</a>
 </section>`;
-        return respond(status, layout('Dashboard', content, session));
+        return respond(200, layout('Webhook added', content, session, 'webhooks'));
+    }
+    async function changeWebhook(session, form, change) {
+        const hooks = options.resources.webhooks;
+        if (!hooks)
+            return notFound(session);
+        const id = form.get('id') ?? '';
+        if (change === 'remove') {
+            if (!(await hooks.remove(tenantOf(session), id, personOf(session)))) {
+                return webhooksPage(session, 404, 'That webhook is not one of yours.');
+            }
+            return redirect(303, `${root}/webhooks`);
+        }
+        const enabled = await hooks.enable(tenantOf(session), id, personOf(session));
+        if (enabled === null)
+            return webhooksPage(session, 404, 'That webhook is not one of yours.');
+        if ('code' in enabled) {
+            return webhooksPage(session, 409, 'It missed changes older than the feed keeps. Delete it, add it again, and read what it missed from the feed.');
+        }
+        return redirect(303, `${root}/webhooks`);
+    }
+    async function waitlistPage(session, status = 200, notice) {
+        const waitlist = options.resources.waitlist;
+        if (!waitlist)
+            return notFound(session);
+        const tenantRef = tenantOf(session);
+        const [entries, resources] = await Promise.all([
+            waitlist.list(tenantRef, WAITLIST_SHOWN),
+            options.resources.list(tenantRef),
+        ]);
+        const byId = new Map(resources.map((resource) => [resource.id, resource]));
+        const token = csrfToken(session);
+        const rows = entries.map((entry) => {
+            const resource = entry.resourceId ? byId.get(entry.resourceId) : undefined;
+            const zone = resource?.timezone ?? 'UTC';
+            const day = dayLabel(entry.start, zone, now());
+            const what = entry.resourceId
+                ? resourceName(resource, entry.resourceId)
+                : `Pool ${entry.pool ?? ''}`;
+            const offered = entry.offeredResourceId
+                ? resourceName(byId.get(entry.offeredResourceId), entry.offeredResourceId)
+                : null;
+            const tone = entry.status === 'offered' ? 'active' : entry.status === 'expired' ? 'revoked' : 'held';
+            return html `<tr>
+<td data-label="When" class="strong">${day.label} ${clock(entry.start, zone)}–${clock(entry.end, zone)}</td>
+<td data-label="For">${what}</td>
+<td data-label="Holder"><code>${entry.holderRef}</code></td>
+<td data-label="Status"><span class="cell"><span class="pill ${tone}">${entry.status === 'offered' ? 'Offered' : entry.status === 'expired' ? 'Expired' : 'Waiting'}</span>${offered && entry.offeredAt ? html `<span class="meta">${offered}, ${ago(entry.offeredAt, now())}</span>` : html ``}</span></td>
+<td data-label="Joined">${ago(entry.createdAt, now())}</td>
+<td class="actions"><details class="act danger"><summary>Remove</summary><div class="pop"><p>${entry.status === 'offered' ? 'Its offered hold is released and offered to the next.' : 'It stops waiting.'}</p>
+<form method="post" action="${root}/waitlist/leave"><input type="hidden" name="csrf" value="${token}"><input type="hidden" name="once" value="${formNonce(session)}"><input type="hidden" name="id" value="${entry.id}"><button class="danger" type="submit">Remove entry</button></form></div></details></td>
+</tr>`;
+        });
+        const waiting = entries.filter((entry) => entry.status === 'waiting').length;
+        const offered = entries.filter((entry) => entry.status === 'offered').length;
+        const content = html `${noticeOf(notice)}
+${pageHead('Waitlist')}
+<div class="stats">
+<div class="stat"><span class="stat-label">Waiting</span><span class="stat-value">${String(waiting)}</span></div>
+<div class="stat"><span class="stat-label">Offered</span><span class="stat-value">${String(offered)}</span></div>
+</div>
+${entries.length === 0
+            ? html `<p class="empty">Nobody is waiting. Agents add entries when the time they want is taken.</p>`
+            : html `<div class="table"><table><thead><tr><th>When</th><th>For</th><th>Holder</th><th>Status</th><th>Joined</th><th><span class="visually-hidden">Actions</span></th></tr></thead><tbody>${rows}</tbody></table></div>${entries.length >= WAITLIST_SHOWN ? html `<p class="fine">Showing the first ${String(WAITLIST_SHOWN)}.</p>` : html ``}`}`;
+        return respond(status, layout('Waitlist', content, session, 'waitlist'));
+    }
+    async function leaveWaitlist(session, form) {
+        const waitlist = options.resources.waitlist;
+        if (!waitlist)
+            return notFound(session);
+        if (!(await waitlist.leave(tenantOf(session), form.get('id') ?? '', personOf(session)))) {
+            return waitlistPage(session, 404, 'That entry is not on your waitlist.');
+        }
+        return redirect(303, `${root}/waitlist`);
+    }
+    /** The page a form was sent from, to show what went wrong with it. */
+    function pageFor(route) {
+        if (route.startsWith('/keys'))
+            return keysPage;
+        if (route.startsWith('/webhooks') && options.resources.webhooks)
+            return webhooksPage;
+        if (route.startsWith('/waitlist') && options.resources.waitlist)
+            return waitlistPage;
+        if (route.startsWith('/resources') || route === '/hours')
+            return resourcesPage;
+        return overviewPage;
     }
     function hoursPage(session, state) {
         const { target, mode } = state;
@@ -642,7 +1276,7 @@ ${resources.length > 0 ? html `<p><a href="${root}/hours">Set hours for every re
         });
         const content = html `${state.notice ? html `<p class="notice" role="alert">${state.notice}</p>` : html ``}
 <section>
-<p><a href="${root}">Back to the dashboard</a></p>
+<p><a class="back" href="${root}/resources">Resources</a></p>
 <h1>${title}</h1>
 <p>${target === 'all'
             ? 'The same hours for every resource, each in its own time zone. Saving replaces their hours.'
@@ -664,7 +1298,7 @@ ${state.unshown
 <button class="primary" type="submit">Save hours</button>
 </form>
 </section>`;
-        return respond(state.status ?? 200, layout('Bookable hours', content, session));
+        return respond(state.status ?? 200, layout('Bookable hours', content, session, 'resources'));
     }
     /** The tenant's resource with that id, or null for anything else. */
     async function ownResource(session, id) {
@@ -737,26 +1371,39 @@ ${state.unshown
                 });
             }
         }
-        const changed = await options.resources.setHours(tenantOf(session), target === 'all' ? 'all' : { id: target.id }, rules);
+        const changed = await options.resources.setHours(tenantOf(session), target === 'all' ? 'all' : { id: target.id }, rules, personOf(session));
         if (changed === 0) {
             return target === 'all'
-                ? dashboardPage(session, 409, 'Add a resource first, then set its hours.')
+                ? resourcesPage(session, 409, 'Add a resource first, then set its hours.')
                 : notFound(session);
         }
-        return redirect(303, root);
+        return redirect(303, `${root}/resources`);
     }
     function shownOncePage(session, key, apiKey, rotated) {
+        const org = session.orgs?.find((candidate) => candidate.id === session.org);
         const content = html `<section class="card once">
 <h1>${rotated ? 'Key rotated' : 'Key created'}: ${apiKey.name}</h1>
+${org ? html `<p>For the organization <strong>${org.login}</strong>.</p>` : html ``}
 <p class="notice warn" role="alert">Copy this key now. Slotlock keeps only its fingerprint, so it will not be shown again.${rotated ? ' The old key no longer works.' : ''}</p>
 <div class="copy"><input id="key" readonly value="${key}" aria-label="API key"><button type="button" data-copy="key">Copy</button></div>
 <h2>Add it to an MCP client</h2>
 <pre><code id="command">claude mcp add --transport http slotlock ${mcpUrl} \\
   --header "Authorization: Bearer ${key}"</code></pre>
 <p>Keep the key in a secret manager. Rotate it if it leaks; revoke it when the agent is retired.</p>
-<a class="button primary" href="${root}">Done</a>
+<a class="button primary" href="${root}/keys">Done</a>
 </section>`;
-        return respond(200, layout('Your new key', content, session));
+        return respond(200, layout('Your new key', content, session, 'keys'));
+    }
+    /** Act in another of the session's organizations: the same session, sealed again. */
+    function switchOrganization(session, form) {
+        const wanted = form.get('organization') ?? '';
+        const org = session.orgs?.find((candidate) => candidate.id === wanted && served?.has(candidate.id));
+        if (!served || !org) {
+            return respond(400, layout('Refused', html `<p class="notice">You cannot act for that organization.</p>`, session));
+        }
+        const sealed = seal('slotlock-dashboard-session-v1', { ...session, org: org.id });
+        const left = Math.max(1, Math.floor((session.exp - now()) / 1000));
+        return redirect(303, root, [setCookie(SESSION_COOKIE, sealed, left)]);
     }
     async function startSignIn() {
         const state = randomBytes(32).toString('base64url');
@@ -769,6 +1416,8 @@ ${state.unshown
             state,
             code_challenge: challenge,
             code_challenge_method: 'S256',
+            // Reading organization membership needs read:org; a personal tenant needs no scope at all.
+            ...(served ? { scope: 'read:org' } : {}),
         }).toString();
         const sealed = seal('slotlock-dashboard-sign-in-v1', {
             state,
@@ -835,10 +1484,62 @@ ${state.unshown
         }
         return { uid: String(body.id), login: body.login };
     }
+    /**
+     * The served organizations the token's person is an active member of, by login, or null when
+     * GitHub does not answer. Only `state: active` counts; at most MAX_SESSION_ORGANIZATIONS.
+     */
+    async function readMemberships(token) {
+        const response = await fetchImpl(membershipsUrl, {
+            headers: {
+                Authorization: `Bearer ${token}`,
+                Accept: 'application/vnd.github+json',
+                'X-GitHub-Api-Version': GITHUB_API_VERSION,
+                'User-Agent': USER_AGENT,
+            },
+            redirect: 'manual',
+            signal: AbortSignal.timeout(GITHUB_TIMEOUT_MS),
+        });
+        if (!response.ok) {
+            report(`GitHub membership lookup failed: HTTP ${response.status}`);
+            return null;
+        }
+        const body = await response.json().catch(() => null);
+        if (!Array.isArray(body))
+            return null;
+        const found = new Map();
+        for (const membership of body) {
+            // Owners and members only: a billing manager is not a member, and may invite more of them.
+            if (!isRecord(membership) ||
+                membership.state !== 'active' ||
+                (membership.role !== 'admin' && membership.role !== 'member')) {
+                continue;
+            }
+            const organization = membership.organization;
+            if (!isRecord(organization) ||
+                !Number.isSafeInteger(organization.id) ||
+                organization.id <= 0 ||
+                typeof organization.login !== 'string' ||
+                !GITHUB_LOGIN.test(organization.login)) {
+                continue;
+            }
+            const id = String(organization.id);
+            if (served?.has(id))
+                found.set(id, { id, login: organization.login });
+        }
+        return [...found.values()]
+            .sort((a, b) => a.login.localeCompare(b.login))
+            .slice(0, MAX_SESSION_ORGANIZATIONS);
+    }
     async function askGitHub(code, verifier) {
         try {
             const token = await exchangeCode(code, verifier);
-            return token === null ? null : await readGitHubUser(token);
+            if (token === null)
+                return null;
+            const user = await readGitHubUser(token);
+            if (!user || !served)
+                return user;
+            const orgs = await readMemberships(token);
+            return orgs === null ? null : { ...user, orgs };
         }
         catch (error) {
             report(`GitHub sign-in failed: ${error instanceof Error ? error.name : 'unknown error'}`);
@@ -861,11 +1562,16 @@ ${state.unshown
             !safeEqual(state, pending.state)) {
             return signedOutPage(400, SIGN_IN_AGAIN, [clearSignIn]);
         }
-        if (signInsInFlight >= MAX_SIGN_INS_IN_FLIGHT) {
+        const client = options.clientAddress?.(request);
+        const fromClient = client === undefined ? 0 : (signInsByClient.get(client) ?? 0);
+        if (signInsInFlight >= MAX_SIGN_INS_IN_FLIGHT ||
+            fromClient >= MAX_SIGN_INS_IN_FLIGHT_PER_CLIENT) {
             return signedOutPage(503, 'Too many people are signing in at once. Sign in again in a moment.', [clearSignIn]);
         }
         const verifier = pending.verifier;
         signInsInFlight += 1;
+        if (client !== undefined)
+            signInsByClient.set(client, fromClient + 1);
         let user;
         try {
             // Recorded before GitHub is asked, so a replayed callback is refused on every server unasked.
@@ -876,6 +1582,13 @@ ${state.unshown
         }
         finally {
             signInsInFlight -= 1;
+            if (client !== undefined) {
+                const left = (signInsByClient.get(client) ?? 1) - 1;
+                if (left === 0)
+                    signInsByClient.delete(client);
+                else
+                    signInsByClient.set(client, left);
+            }
         }
         if (!user) {
             return signedOutPage(502, 'GitHub did not complete the sign-in. Try again.', [clearSignIn]);
@@ -885,11 +1598,16 @@ ${state.unshown
                 clearSignIn,
             ]);
         }
+        const orgs = user.orgs ?? [];
+        if (served && orgs.length === 0) {
+            return signedOutPage(403, `@${user.login} is not a member of an organization this Slotlock server serves.`, [clearSignIn]);
+        }
         const session = seal('slotlock-dashboard-session-v1', {
             uid: user.uid,
             login: user.login,
             sid: randomBytes(24).toString('base64url'),
             exp: now() + SESSION_TTL_MS,
+            ...(served ? { orgs, org: orgs[0].id } : {}),
         });
         return redirect(303, root, [
             clearSignIn,
@@ -926,7 +1644,7 @@ ${state.unshown
         const scopes = KEY_ACCESS[form.get('access') ?? ''];
         const expiry = form.get('expires') ?? '';
         if (!scopes || !Object.hasOwn(KEY_EXPIRY_DAYS, expiry)) {
-            return dashboardPage(session, 400, 'Choose an access level and an expiry from the lists.');
+            return keysPage(session, 400, 'Choose an access level and an expiry from the lists.');
         }
         const days = KEY_EXPIRY_DAYS[expiry];
         try {
@@ -934,7 +1652,7 @@ ${state.unshown
                 tenantRef: tenantOf(session),
                 name: form.get('name') ?? '',
                 scopes,
-                createdBy: tenantOf(session),
+                createdBy: personOf(session),
                 ...(typeof days === 'number' ? { expiresAt: new Date(now() + days * DAY_MS) } : {}),
             });
             return shownOncePage(session, created.key, created.apiKey, false);
@@ -942,10 +1660,10 @@ ${state.unshown
         catch (error) {
             const code = error.code;
             if (code === 'invalid_api_key_name') {
-                return dashboardPage(session, 400, 'Give the key a name of 1 to 100 characters.');
+                return keysPage(session, 400, 'Give the key a name of 1 to 100 characters.');
             }
             if (code === 'api_key_limit_reached') {
-                return dashboardPage(session, 409, 'You have as many keys as Slotlock allows. Revoke one first.');
+                return keysPage(session, 409, 'You have as many keys as Slotlock allows. Revoke one first.');
             }
             throw error;
         }
@@ -953,41 +1671,41 @@ ${state.unshown
     async function changeKey(session, form, change) {
         const id = form.get('id') ?? '';
         if (!UUID_PATTERN.test(id))
-            return dashboardPage(session, 404, 'That key is not one of yours.');
+            return keysPage(session, 404, 'That key is not one of yours.');
         if (change === 'rotate') {
             const rotated = await options.keys.rotate({ tenantRef: tenantOf(session), id });
             if (!rotated)
-                return dashboardPage(session, 404, 'That key is not an active key of yours.');
+                return keysPage(session, 404, 'That key is not an active key of yours.');
             return shownOncePage(session, rotated.key, rotated.apiKey, true);
         }
         const revoked = await options.keys.revoke({ tenantRef: tenantOf(session), id });
         if (!revoked)
-            return dashboardPage(session, 404, 'That key is not one of yours.');
-        return redirect(303, root);
+            return keysPage(session, 404, 'That key is not one of yours.');
+        return redirect(303, `${root}/keys`);
     }
     async function addResource(session, form) {
         const reference = (form.get('reference') ?? '').trim();
         const timezone = (form.get('timezone') ?? '').trim();
         if (reference.length === 0 || reference.length > 200) {
-            return dashboardPage(session, 400, 'Give the resource a reference of 1 to 200 characters.');
+            return resourcesPage(session, 400, 'Give the resource a reference of 1 to 200 characters.');
         }
         try {
-            await options.resources.add(tenantOf(session), reference, timezone);
+            await options.resources.add(tenantOf(session), reference, timezone, personOf(session));
         }
         catch (error) {
             const code = error.code;
             if (code === 'resource_limit_reached') {
-                return dashboardPage(session, 409, `You have ${SLOTLOCK_DASHBOARD_MAX_RESOURCES} resources, as many as the dashboard allows.`);
+                return resourcesPage(session, 409, `You have ${SLOTLOCK_DASHBOARD_MAX_RESOURCES} resources, as many as the dashboard allows.`);
             }
             if (code === 'invalid_timezone') {
-                return dashboardPage(session, 400, `${timezone} is not a time zone Slotlock knows, such as Europe/London.`);
+                return resourcesPage(session, 400, `${timezone} is not a time zone Slotlock knows, such as Europe/London.`);
             }
             if (code === 'invalid_external_ref') {
-                return dashboardPage(session, 400, 'Give the resource a reference of 1 to 200 characters.');
+                return resourcesPage(session, 400, 'Give the resource a reference of 1 to 200 characters.');
             }
             throw error;
         }
-        return redirect(303, root);
+        return redirect(303, `${root}/resources`);
     }
     async function handlePost(request, route) {
         // A browser sends Origin with every form POST; anything else did not come from these pages.
@@ -1019,19 +1737,23 @@ ${state.unshown
             return respond(400, layout('Refused', html `<p class="notice">That form could not be read.</p>`, session));
         }
         if (once !== null) {
+            const checked = checkFormNonce(session, once);
+            if (checked === 'other_org') {
+                return pageFor(route)(session, 409, 'That page was for another organization. Nothing was changed: check the organization and try again.');
+            }
             let first;
             try {
                 first =
-                    isFormNonce(session, once) &&
+                    checked === 'ok' &&
                         (await options.state.use('form', once, session.exp, session.uid));
             }
             catch (error) {
                 if (error.code !== 'dashboard_form_limit')
                     throw error;
-                return dashboardPage(session, 429, 'Too many forms sent from this account in the last 12 hours. Try again later.');
+                return pageFor(route)(session, 429, 'Too many forms sent from this account in the last 12 hours. Try again later.');
             }
             if (!first) {
-                return dashboardPage(session, 409, 'That form was already sent. Reload the page to start again.');
+                return pageFor(route)(session, 409, 'That form was already sent. Reload the page to start again.');
             }
         }
         switch (route) {
@@ -1048,6 +1770,20 @@ ${state.unshown
                 return addResource(session, form);
             case '/hours':
                 return saveHours(session, form);
+            case '/organization':
+                return switchOrganization(session, form);
+            case '/resources/rules':
+                return saveRules(session, form);
+            case '/resources/pool':
+                return savePool(session, form);
+            case '/webhooks':
+                return addWebhook(session, form);
+            case '/webhooks/delete':
+                return changeWebhook(session, form, 'remove');
+            case '/webhooks/enable':
+                return changeWebhook(session, form, 'enable');
+            case '/waitlist/leave':
+                return leaveWaitlist(session, form);
             default:
                 return respond(404, layout('Not found', html `<p class="notice">Nothing is here.</p>`, session));
         }
@@ -1065,7 +1801,25 @@ ${state.unshown
                     switch (route) {
                         case '/': {
                             const session = await readSession(request);
-                            return session ? await dashboardPage(session) : signedOutPage(200);
+                            return session ? await overviewPage(session) : signedOutPage(200);
+                        }
+                        case '/keys':
+                        case '/resources':
+                        case '/webhooks':
+                        case '/waitlist':
+                        case '/settings': {
+                            const session = await readSession(request);
+                            if (!session)
+                                return redirect(303, root);
+                            if (route === '/keys')
+                                return await keysPage(session);
+                            if (route === '/resources')
+                                return await resourcesPage(session);
+                            if (route === '/webhooks')
+                                return await webhooksPage(session);
+                            if (route === '/waitlist')
+                                return await waitlistPage(session);
+                            return settingsPage(session);
                         }
                         case '/style.css':
                             return asset(DASHBOARD_CSS, 'text/css; charset=utf-8', url, ASSET_VERSIONS.css);
@@ -1079,8 +1833,16 @@ ${state.unshown
                             const session = await readSession(request);
                             return session ? await hoursEditor(session, url) : redirect(303, root);
                         }
-                        default:
+                        default: {
+                            const resourceId = RESOURCE_PAGE.exec(route)?.[1];
+                            if (resourceId !== undefined) {
+                                const session = await readSession(request);
+                                return session
+                                    ? await resourceDetailPage(session, resourceId.toLowerCase())
+                                    : redirect(303, root);
+                            }
                             return respond(404, layout('Not found', html `<p class="notice">Nothing is here.</p>`, null));
+                        }
                     }
                 }
                 if (request.method === 'POST')
@@ -1090,6 +1852,10 @@ ${state.unshown
                 });
             }
             catch (error) {
+                // A suspended tenant may look, not change: the store refuses its writes.
+                if (error?.code === 'tenant_suspended') {
+                    return respond(403, layout('Suspended', html `<p class="notice">This account is suspended: its data can be seen, not changed.</p>`, null));
+                }
                 try {
                     ignoreRejection(options.onError?.(error));
                 }
@@ -1118,82 +1884,188 @@ const DASHBOARD_JS = `document.addEventListener('click', (event) => {
 });
 `;
 const DASHBOARD_CSS = `:root {
-  --ink: #0b0d12; --ink-2: #3a3f4b; --ink-3: #6b7180; --line: #e6e8ee; --paper: #ffffff; --wash: #f6f7f9;
-  --accent: #2655ff; --accent-ink: #ffffff; --danger: #c62828; --warn: #8a5a00; --warn-wash: #fff6e0;
+  --ink: #0f1115; --ink-2: #464b57; --ink-3: #7a808d; --line: #e7e8ec; --line-2: #f0f1f4;
+  --paper: #ffffff; --wash: #f7f7f9; --side: #fafafb; --hover: #f1f2f5;
+  --accent: #2655ff; --accent-wash: #eef2ff; --accent-ink: #ffffff;
+  --good: #12805c; --good-wash: #e8f6f0; --bad: #c4321f; --bad-wash: #fdeeec;
+  --warn: #8a5a00; --warn-wash: #fff6e0; --held: #8a5a00; --held-wash: #fff4dc;
+  --shadow: 0 1px 2px rgba(15, 17, 21, 0.04), 0 1px 1px rgba(15, 17, 21, 0.03);
   color-scheme: light dark;
 }
 @media (prefers-color-scheme: dark) {
-  :root { --ink: #eef0f5; --ink-2: #c3c7d1; --ink-3: #8b91a0; --line: #2a2e38; --paper: #0e1016; --wash: #161922;
-    --accent: #6f8cff; --accent-ink: #0b0d12; --danger: #ff6b6b; --warn: #ffcf70; --warn-wash: #2b2410; }
+  :root { --ink: #eceef3; --ink-2: #b9bdc8; --ink-3: #868c99; --line: #262932; --line-2: #1d2027;
+    --paper: #0d0f13; --wash: #14171d; --side: #101217; --hover: #1b1e25;
+    --accent: #7b93ff; --accent-wash: #1a2145; --accent-ink: #0d0f13;
+    --good: #4cc79a; --good-wash: #0f2a20; --bad: #ff7b6b; --bad-wash: #34150f;
+    --warn: #ffcf70; --warn-wash: #2b2410; --held: #ffcf70; --held-wash: #2b2410;
+    --shadow: none; }
 }
 * { box-sizing: border-box; }
-body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
-code, pre, input[readonly] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
-.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; border-bottom: 1px solid var(--line); }
-.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; }
-.mark { width: 20px; height: 20px; fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
-.name { font-weight: 650; font-size: 16px; }
-.by { color: var(--ink-3); font-size: 12px; }
-.account { display: flex; align-items: center; gap: 12px; color: var(--ink-2); }
-.account form { margin: 0; }
-main { max-width: 1040px; margin: 0 auto; padding: 32px 24px 64px; display: grid; gap: 40px; }
-h1 { font-size: 28px; line-height: 1.2; margin: 0 0 12px; letter-spacing: -0.01em; }
-h2 { font-size: 18px; margin: 0 0 6px; }
-p { margin: 0 0 12px; color: var(--ink-2); }
-.fine { font-size: 13px; color: var(--ink-3); }
-.hero { max-width: 560px; margin: 48px auto; text-align: center; }
-.card { border: 1px solid var(--line); border-radius: 12px; padding: 20px; background: var(--wash); }
-.head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 12px; }
-.endpoints { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 12px 0 0; }
-.endpoints dt { color: var(--ink-3); }
-.endpoints dd { margin: 0; overflow-wrap: anywhere; }
-.create { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 0 0 16px; }
-label { display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); }
-input, select { font: inherit; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); min-width: 0; }
-button, .button { font: inherit; font-weight: 600; height: 38px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
-.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
-button.danger { border-color: var(--danger); color: var(--danger); }
-button.link { border: 0; background: none; padding: 0; height: auto; color: var(--ink-2); font-weight: 500; text-decoration: underline; }
+html { -webkit-text-size-adjust: 100%; }
+body { margin: 0; background: var(--paper); color: var(--ink); font: 14px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
+a { color: var(--accent); text-decoration: none; }
+a:hover { text-decoration: underline; }
+code, pre, input[readonly] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
+.icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
+.icon .fill { fill: currentColor; stroke: none; }
+.mark { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
+.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 650; font-size: 15px; letter-spacing: -0.01em; }
+.brand:hover { text-decoration: none; }
+.app { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; background: linear-gradient(to right, var(--side) 239px, var(--line) 239px, var(--line) 240px, var(--paper) 240px); }
+.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 16px; padding: 16px 12px; }
+.side-top { display: grid; gap: 14px; padding: 0 6px; }
+.workspace { display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); min-width: 0; }
+.workspace-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.workspace select { flex: 1; min-width: 0; height: 28px; border: 0; padding: 0 2px; font-weight: 600; background: transparent; }
+.avatar { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 6px; background: var(--accent-wash); color: var(--accent); font-size: 12px; font-weight: 700; }
+.nav { display: grid; gap: 2px; }
+.nav a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 7px; color: var(--ink-2); font-weight: 500; }
+.nav a:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
+.nav a[aria-current="page"] { background: var(--hover); color: var(--ink); font-weight: 600; }
+.nav a[aria-current="page"] .icon { color: var(--accent); }
+.me { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 10px 0; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 13px; }
+.me form { margin: 0; }
+.login { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.page { width: 100%; max-width: 1120px; padding: 28px 40px 64px; display: grid; gap: 20px; align-content: start; }
+.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
+h1 { font-size: 22px; line-height: 1.25; margin: 0; letter-spacing: -0.015em; font-weight: 650; }
+h2 { font-size: 14px; margin: 0 0 12px; font-weight: 600; }
+h3 { font-size: 12px; margin: 0; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; }
+p { margin: 0 0 10px; color: var(--ink-2); }
+.fine { font-size: 12.5px; color: var(--ink-3); margin: 8px 0 0; }
+.muted { color: var(--ink-3); }
+.panel, .card { border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; background: var(--paper); box-shadow: var(--shadow); min-width: 0; }
+.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
+.stat { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); box-shadow: var(--shadow); color: var(--ink); }
+.stat:hover { border-color: var(--ink-3); text-decoration: none; }
+.stat-label { font-size: 12.5px; color: var(--ink-3); }
+.stat-value { font-size: 24px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
+.split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; align-items: start; }
+.setup .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
+.steps li { display: flex; align-items: center; gap: 10px; color: var(--ink-2); }
+.steps li.done { color: var(--ink-3); text-decoration: line-through; }
+.check { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; border: 1.5px solid var(--line); color: var(--accent-ink); }
+.done .check { background: var(--good); border-color: var(--good); }
+.check .icon { width: 12px; height: 12px; stroke-width: 3; }
+.day { margin: 14px 0 6px; }
+.day:first-of-type { margin-top: 0; }
+.slots, .feed { list-style: none; margin: 0; padding: 0; }
+.slot { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line-2); }
+.slot:last-child { border-bottom: 0; }
+.when { display: grid; font-weight: 600; font-variant-numeric: tabular-nums; }
+.until { font-weight: 400; font-size: 12px; color: var(--ink-3); }
+.what { display: grid; min-width: 0; }
+.title { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.on { color: var(--ink-3); font-weight: 400; }
+.meta { font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.event { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 12px; align-items: start; padding: 8px 0; }
+.dot { width: 8px; height: 8px; margin-top: 6px; border-radius: 999px; background: var(--ink-3); }
+.dot.good { background: var(--good); }
+.dot.bad { background: var(--bad); }
+.pill { display: inline-block; font-size: 11.5px; font-weight: 600; line-height: 18px; padding: 1px 8px; border-radius: 999px; background: var(--wash); color: var(--ink-2); white-space: nowrap; }
+.pill.booking, .pill.active { background: var(--good-wash); color: var(--good); }
+.pill.event { background: var(--accent-wash); color: var(--accent); }
+.pill.held { background: var(--held-wash); color: var(--held); }
+.pill.revoked, .pill.expired { color: var(--ink-3); }
+.endpoints { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; margin: 12px 0 0; align-items: center; }
+.endpoints dt { color: var(--ink-3); font-weight: 600; font-size: 12.5px; }
+.endpoints dd { margin: 0; display: flex; align-items: center; gap: 10px; min-width: 0; }
+.endpoints code { overflow-wrap: anywhere; }
+.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin: 0; }
+.facts dt { color: var(--ink-3); }
+.facts dd { margin: 0; }
+.create { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 0; }
+label { display: grid; gap: 5px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
+input, select { font: inherit; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); min-width: 0; }
+input:focus, select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-wash); }
+button, .button { font: inherit; font-weight: 600; height: 34px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: var(--shadow); }
+button:hover, .button:hover { background: var(--hover); text-decoration: none; }
+.primary, .primary:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
+.primary:hover { filter: brightness(1.06); }
+.wide { width: 100%; height: 40px; }
+button.danger { border-color: var(--bad); color: var(--bad); }
+button.quiet { height: auto; padding: 2px 6px; border: 0; background: none; box-shadow: none; color: var(--ink-3); font-weight: 500; font-size: 12.5px; }
+button.quiet:hover { color: var(--ink); background: var(--hover); }
 :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
-.table { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
-table { width: 100%; border-collapse: collapse; font-size: 14px; }
-th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
-th { font-weight: 600; color: var(--ink-3); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; background: var(--wash); }
+.table { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); box-shadow: var(--shadow); }
+table { width: 100%; border-collapse: collapse; }
+th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
+th { font-weight: 600; color: var(--ink-3); font-size: 12px; background: var(--wash); border-bottom-color: var(--line); white-space: nowrap; }
+td { white-space: nowrap; }
+td.strong { font-weight: 600; white-space: normal; min-width: 120px; }
 tr:last-child td { border-bottom: 0; }
-.status { justify-self: start; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--wash); }
-.status.active { color: var(--accent); }
-.status.revoked, .status.expired { color: var(--ink-3); }
-.actions { white-space: nowrap; }
-.act { display: inline-block; margin-right: 8px; }
-.act summary { cursor: pointer; color: var(--ink-2); }
-.act.danger summary { color: var(--danger); }
-.act[open] { display: block; max-width: 280px; white-space: normal; }
-.act p { font-size: 13px; margin: 8px 0; }
-.notice { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--wash); color: var(--ink); }
+.actions { white-space: nowrap; text-align: right; }
+.act { display: inline-block; position: relative; margin-left: 8px; text-align: left; }
+.act summary { cursor: pointer; color: var(--ink-2); font-weight: 500; list-style: none; }
+.act summary::-webkit-details-marker { display: none; }
+.act.danger summary { color: var(--bad); }
+.pop { position: absolute; right: 0; z-index: 2; width: 260px; margin-top: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); box-shadow: 0 8px 24px rgba(15, 17, 21, 0.12); white-space: normal; }
+.pop p { font-size: 12.5px; }
+.notice { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; background: var(--wash); color: var(--ink); margin: 0; }
 .notice.warn { background: var(--warn-wash); color: var(--warn); border-color: transparent; }
-.empty { color: var(--ink-3); }
+.empty { color: var(--ink-3); margin: 0; }
 .once { max-width: 720px; }
 .copy { display: flex; gap: 8px; margin: 12px 0 20px; }
 .copy input { flex: 1; }
 pre { background: var(--wash); border: 1px solid var(--line); border-radius: 8px; padding: 12px; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
-.hours { margin: 0 0 8px; padding-left: 20px; color: var(--ink-2); }
+.hours { margin: 0; padding-left: 18px; color: var(--ink-2); }
+.back::before { content: "← "; }
 .modes { border: 0; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; }
 .modes legend { font-weight: 600; color: var(--ink); padding: 0; margin-bottom: 4px; }
-.choice { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink); }
+.choice { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); }
 .choice input { height: auto; }
 .week input { width: 100%; }
-.week th[scope="row"] { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink); background: none; }
+.week th[scope="row"] { font-size: 13px; color: var(--ink); background: none; }
 form > .table { margin-bottom: 12px; }
+.bare { background: var(--wash); }
+.bare-bar { padding: 20px 24px; }
+.bare-main { display: grid; place-items: start center; padding: 8vh 16px 64px; }
+.sign-in { width: 100%; max-width: 400px; padding: 28px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); box-shadow: var(--shadow); display: grid; gap: 12px; }
+.sign-in h1 { font-size: 20px; }
+.sign-in p { margin: 0; }
+.stack { display: grid; gap: 20px; align-content: start; min-width: 0; }
+.grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 12px; align-items: end; }
+.cell { display: grid; justify-items: start; gap: 2px; }
+.unit-input { display: flex; align-items: center; gap: 8px; }
+.unit-input input { width: 100%; }
+.unit-input span { color: var(--ink-3); white-space: nowrap; }
+form .choice { margin: 4px 0 10px; }
+.types { margin: 12px 0; }
+.types summary { cursor: pointer; color: var(--ink-2); font-size: 13px; }
+.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 16px; margin-top: 10px; }
+.checks .choice { font-size: 13px; margin: 0; }
+td .meta { display: block; margin-top: 2px; }
+td[data-label] > .pill { justify-self: start; }
+td.wrap, .wrap { white-space: normal; overflow-wrap: anywhere; }
+form.inline { display: inline; margin: 0; }
+form > label { margin-bottom: 4px; }
 .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
-@media (max-width: 720px) {
-  .bar { padding: 12px 16px; }
-  main { padding: 24px 16px 48px; }
+@media (max-width: 1000px) {
+  .split { grid-template-columns: minmax(0, 1fr); }
+}
+@media (max-width: 760px) {
+  .app { grid-template-columns: minmax(0, 1fr); background: var(--paper); }
+  .side { position: sticky; z-index: 3; height: auto; background: var(--side); border-bottom: 1px solid var(--line); flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 10px 16px 0; border-right: 0; }
+  .side-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0; flex: 1 1 100%; min-width: 0; }
+  .workspace { max-width: 60%; }
+  .nav { display: flex; gap: 2px; overflow-x: auto; flex: 1 1 auto; margin: 0 -4px; padding-bottom: 8px; scrollbar-width: none; }
+  .nav a { flex: none; padding: 6px 10px; }
+  .me { margin: 0 0 8px; padding: 0; border: 0; flex: none; }
+  .me .login { display: none; }
+  .page { padding: 20px 16px 48px; gap: 16px; }
+  .panel, .card { padding: 16px; }
+  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .stat-value { font-size: 20px; }
   thead { display: none; }
   table, tbody, tr, td { display: block; }
   tr { border-bottom: 1px solid var(--line); padding: 8px 0; }
-  td { border: 0; padding: 3px 12px; }
-  td[data-label] { display: grid; grid-template-columns: 88px 1fr; gap: 8px; }
-  td[data-label]::before { content: attr(data-label); font-size: 12px; color: var(--ink-3); padding-top: 2px; }
+  tr:last-child { border-bottom: 0; }
+  td { border: 0; padding: 3px 14px; white-space: normal; }
+  td[data-label] { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; }
+  td[data-label]::before { content: attr(data-label); font-size: 12px; color: var(--ink-3); }
+  .actions { text-align: left; }
+  .act { margin: 4px 12px 0 0; }
+  .pop { left: 0; right: auto; }
 }
 `;
 const ASSET_VERSIONS = Object.freeze({