@skillcdn/console 0.4.3 → 0.4.5

package/dist/components/plugin-settings.js

@@ -2,9 +2,12 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { useEffect, useId, useMemo, useState } from "react";
 import { useWords } from "../i18n/index.js";
 import { PLUGIN_CAPABILITIES } from "../plugin/capabilities.js";
+import { settingsHref } from "../router.js";
 import { useAction } from "../use-action.js";
 import { EventFeed } from "./event-feed.js";
-import { Badge, Button, Callout, EmptyState, formatInstant, LinkButton, personName, Spinner, } from "./ui.js";
+import { Picker } from "./picker.js";
+import { listSearch, peopleSearch, projectsSearch } from "./searches.js";
+import { Badge, Button, Callout, Chip, cx, EmptyState, formatInstant, LinkButton, personName, Spinner, } from "./ui.js";
 // The plugins' settings (docs/specs/plugins.md, "The settings pages"): what is installed and how
 // each stands; and one plugin, read at a glance: its state in the head with the way to disable
 // it, what it is on and holds a row each, the form that enables it (the capabilities to consent
@@ -56,7 +59,7 @@ export function PluginSettingsList(props) {
     if (props.plugins.length === 0) {
         return _jsx(EmptyState, { title: settings.empty.title, body: settings.empty.body });
     }
-    return (_jsx("ul", { className: "sc-task-rows", "aria-label": settings.title, children: props.plugins.map((plugin) => (_jsxs("li", { className: "sc-task-row", children: [_jsxs("a", { className: "sc-task-row-title", href: props.href(plugin), children: [pluginWord(plugin.name, props.language), " ", _jsxs("span", { className: "sc-muted", children: [plugin.key, " ", plugin.version] })] }), _jsx("span", { className: "sc-task-row-meta", children: _jsx(Badge, { tone: STATE_TONES[plugin.state], children: words.vocabulary.pluginState[plugin.state] ?? plugin.state }) })] }, plugin.key))) }));
+    return (_jsx("ul", { className: "sc-task-rows", "aria-label": settings.title, children: props.plugins.map((plugin) => (_jsxs("li", { className: "sc-task-row", children: [_jsxs("a", { className: "sc-task-row-title", href: props.href(plugin), children: [pluginWord(plugin.name, props.language), " ", _jsxs("span", { className: "sc-muted", children: [plugin.key, " ", plugin.version, plugin.console !== null && plugin.console !== undefined && (_jsxs(_Fragment, { children: [" \u00B7 ", settings.consoleRange(plugin.console)] }))] })] }), _jsx("span", { className: "sc-task-row-meta", children: _jsx(Badge, { tone: STATE_TONES[plugin.state], children: words.vocabulary.pluginState[plugin.state] ?? plugin.state }) })] }, plugin.key))) }));
 }
 /** A set with a value put in or taken out. */
 function toggled(set, value, on) {
@@ -71,7 +74,7 @@ function toggled(set, value, on) {
 }
 /** A row of a list to tick: the box, a name, a word under it. */
 function TickRow(props) {
-    return (_jsx("li", { children: _jsxs("label", { className: "sc-plugin-tick", children: [_jsx("input", { type: "checkbox", checked: props.checked, onChange: (event) => props.onChange(event.target.checked) }), _jsxs("span", { className: "sc-plugin-tick-words", children: [_jsx("span", { className: "sc-plugin-tick-name", children: props.name }), props.under !== undefined && props.under !== "" && (_jsx("span", { className: "sc-plugin-tick-under", children: props.under }))] })] }) }));
+    return (_jsx("li", { children: _jsxs("label", { className: cx("sc-plugin-tick", props.locked === true && "sc-plugin-tick-locked"), children: [_jsx("input", { type: "checkbox", checked: props.checked, disabled: props.locked === true, onChange: (event) => props.onChange?.(event.target.checked) }), _jsxs("span", { className: "sc-plugin-tick-words", children: [_jsxs("span", { className: "sc-plugin-tick-name", children: [props.name, props.tag !== undefined && _jsx(Badge, { tone: "warning", children: props.tag })] }), props.under !== undefined && props.under !== "" && (_jsx("span", { className: "sc-plugin-tick-under", children: props.under }))] })] }) }));
 }
 /** What the plugin is on and holds, a row each; nothing where there is nothing to say yet. */
 function Overview(props) {
@@ -80,6 +83,9 @@ function Overview(props) {
     const { detail, language } = props;
     const enabled = detail.state === "enabled";
     const rows = [];
+    if (detail.console !== null && detail.console !== undefined) {
+        rows.push({ key: "console", name: settings.console, value: _jsx("code", { children: detail.console }) });
+    }
     if (detail.board !== null) {
         rows.push({
             key: "board",
@@ -90,6 +96,13 @@ function Overview(props) {
     else if (enabled && detail.boardNeeds !== "none") {
         rows.push({ key: "board", name: settings.board, value: settings.nothing });
     }
+    if (detail.keeps !== undefined && detail.keeps.length > 0) {
+        rows.push({
+            key: "keeps",
+            name: settings.keeps,
+            value: detail.keeps.map((kept) => settings.keepsFor(kept.collection, kept.days)).join(", "),
+        });
+    }
     if (enabled && detail.projects !== null) {
         const names = detail.projects;
         rows.push({
@@ -106,13 +119,20 @@ function Overview(props) {
     }
     if (enabled && detail.consent !== null) {
         const consent = detail.consent;
+        const optional = detail.optionalCapabilities ?? [];
+        const required = consent.filter((capability) => !optional.includes(capability));
         rows.push({
             key: "capabilities",
             name: settings.capabilities,
-            value: consent.length === 0 ? (settings.nothing) : (_jsx("ul", { className: "sc-plugin-held", children: consent.map((capability) => {
-                    const text = capabilityText(words, capability);
-                    return (_jsxs("li", { children: [_jsx("span", { className: "sc-plugin-tick-name", children: text.name }), text.opens !== "" && _jsxs("span", { className: "sc-plugin-tick-under", children: [" ", text.opens] })] }, capability));
-                }) })),
+            value: consent.length === 0 && optional.length === 0 ? (settings.nothing) : (_jsxs(_Fragment, { children: [required.length > 0 && (_jsx("ul", { className: "sc-plugin-held", children: required.map((capability) => {
+                            const text = capabilityText(words, capability);
+                            return (_jsxs("li", { children: [_jsx("span", { className: "sc-plugin-tick-name", children: text.name }), text.opens !== "" && (_jsxs("span", { className: "sc-plugin-tick-under", children: [" ", text.opens] }))] }, capability));
+                        }) })), optional.length > 0 && (_jsxs("div", { className: "sc-plugin-optional", children: [_jsx("span", { className: "sc-field-label", children: settings.optional }), _jsx("ul", { className: "sc-plugin-held", children: optional.map((capability) => {
+                                    const text = capabilityText(words, capability);
+                                    return (_jsx("li", { children: _jsxs("label", { className: "sc-check", children: [_jsx("input", { type: "checkbox", checked: consent.includes(capability), disabled: props.busy, onChange: (event) => props.onConsent(event.target.checked
+                                                        ? [...consent, capability]
+                                                        : consent.filter((held) => held !== capability)) }), _jsxs("span", { children: [_jsx("span", { className: "sc-plugin-tick-name", children: text.name }), text.opens !== "" && (_jsxs("span", { className: "sc-plugin-tick-under", children: [" ", text.opens] }))] })] }) }, capability));
+                                }) })] }))] })),
         });
     }
     if (detail.operations.length > 0) {
@@ -134,22 +154,120 @@ function Overview(props) {
     }
     return (_jsx("section", { className: "sc-panel", "aria-label": settings.about, children: _jsx("dl", { className: "sc-settings-list", children: rows.map((row) => (_jsxs("div", { className: "sc-settings-item", children: [_jsx("dt", { children: row.name }), _jsx("dd", { children: row.value })] }, row.key))) }) }));
 }
+/** How many choices a list of an enum shows as pills before it becomes a column of boxes. */
+const PILLS_AT_MOST = 8;
+/** The control of one item of a list, as a text field: a number, a day, a time or words. */
+function itemInputType(of) {
+    switch (of) {
+        case "number":
+            return "number";
+        case "day":
+            return "date";
+        case "time":
+            return "time";
+        default:
+            return "text";
+    }
+}
+/** The items of a list setting as the form holds them. */
+function itemsOf(value) {
+    return Array.isArray(value)
+        ? value.filter((item) => typeof item === "string" || typeof item === "number")
+        : [];
+}
+/**
+ * A list of an enum: a pill per choice while they are few, lit while chosen, else a column of
+ * boxes; either way the value is the chosen values, in the options' order.
+ */
+function EnumListControl(props) {
+    const options = props.setting.options ?? [];
+    const chosen = new Set(itemsOf(props.value).map(String));
+    const toggle = (option, on) => {
+        const next = options
+            .map((candidate) => candidate.value)
+            .filter((candidate) => (candidate === option ? on : chosen.has(candidate)));
+        props.onChange(next.length === 0 ? null : next);
+    };
+    const pills = options.length <= PILLS_AT_MOST;
+    const name = pluginWord(props.setting.name, props.language);
+    const choices = options.map((option) => (_jsxs("label", { className: pills ? "sc-toggle-chip" : "sc-check", children: [_jsx("input", { type: "checkbox", checked: chosen.has(option.value), onChange: (event) => toggle(option.value, event.target.checked) }), pluginWord(option.name, props.language)] }, option.value)));
+    return pills ? (_jsx("fieldset", { className: "sc-toggle-chips", "aria-label": name, children: choices })) : (_jsx("ul", { className: "sc-check-list", "aria-label": name, children: choices.map((choice) => (_jsx("li", { children: choice }, choice.key))) }));
+}
+/**
+ * A list of people or of projects: each chosen one a chip with the way to take it out, and one
+ * choice to add another among those not chosen yet; the value is their ids.
+ */
+function RefListControl(props) {
+    const words = useWords();
+    const chosen = itemsOf(props.value).map(String);
+    const candidates = props.setting.of === "person"
+        ? props.people
+            .filter((person) => person.status === "active" || chosen.includes(person.id))
+            .map((person) => ({ id: person.id, label: personChoice(person) }))
+        : props.projects.map((project) => ({
+            id: project.id,
+            label: `${project.name} (${project.key})`,
+        }));
+    const labelOf = (id) => candidates.find((candidate) => candidate.id === id)?.label ?? id;
+    const set = (next) => props.onChange(next.length === 0 ? null : next);
+    const full = props.setting.max !== null && chosen.length >= props.setting.max;
+    return (_jsxs("div", { className: "sc-chips", children: [chosen.map((id) => (_jsx(Chip, { onRemove: () => set(chosen.filter((kept) => kept !== id)), removeLabel: `${words.common.remove}: ${labelOf(id)}`, children: labelOf(id) }, id))), !full && (_jsx(Picker, { id: props.id, className: "sc-picker-add", value: undefined, search: listSearch(candidates.filter((candidate) => !chosen.includes(candidate.id)), (candidate, typed) => candidate.label.toLowerCase().includes(typed)), keyOf: (candidate) => candidate.id, render: (candidate) => candidate.label, label: pluginWord(props.setting.name, props.language), placeholder: words.plugins.settings.addOne, onChange: (candidate) => {
+                    if (candidate !== undefined) {
+                        set([...chosen, candidate.id]);
+                    }
+                } }))] }));
+}
+/**
+ * A list of texts, numbers, days or times: each item a chip with the way to take it out, and a
+ * field that adds one on Enter or with the button; `min` and `max` bound how many.
+ */
+function ItemListControl(props) {
+    const words = useWords();
+    const [draft, setDraft] = useState("");
+    const items = itemsOf(props.value);
+    const set = (next) => props.onChange(next.length === 0 ? null : next);
+    const full = props.setting.max !== null && items.length >= props.setting.max;
+    const add = () => {
+        const word = draft.trim();
+        if (word.length === 0 || full) {
+            return;
+        }
+        const item = props.setting.of === "number" ? Number(word) : word;
+        if (typeof item === "number" && !Number.isFinite(item)) {
+            return;
+        }
+        set([...items, item]);
+        setDraft("");
+    };
+    return (_jsxs("div", { className: "sc-chips", children: [items.map((item, index) => (_jsx(Chip
+            // biome-ignore lint/suspicious/noArrayIndexKey: an item may be typed twice
+            , { onRemove: () => set(items.filter((_, at) => at !== index)), removeLabel: `${words.common.remove}: ${String(item)}`, children: String(item) }, `${index}-${String(item)}`))), !full && (_jsxs("div", { className: "sc-chip-input", children: [_jsx("input", { id: props.id, className: "sc-input", type: itemInputType(props.setting.of), value: draft, placeholder: words.plugins.settings.itemPlaceholder, onChange: (event) => setDraft(event.target.value), onKeyDown: (event) => {
+                            if (event.key === "Enter") {
+                                event.preventDefault();
+                                add();
+                            }
+                        } }), _jsx(Button, { type: "button", size: "sm", disabled: draft.trim().length === 0, onClick: add, children: words.plugins.settings.addItem })] }))] }));
+}
 /**
  * A setting's control, by its type: a person or a project is chosen among the workspace's, by
- * name, and held as its id; a secret has a row of its own below.
+ * name, and held as its id; a time of day is read in the workspace's time zone; a list has a
+ * control per kind of item; a secret has a row of its own below.
  */
 function SettingControl(props) {
+    const words = useWords();
     const { setting, value, onChange, id } = props;
     const chosen = typeof value === "string" ? value : "";
-    const choose = (event) => onChange(event.target.value === "" ? null : event.target.value);
     switch (setting.type) {
         case "person": {
             // The people in; the one chosen stays listed when they have left, so that the value shows.
             const people = props.people.filter((person) => person.status === "active" || person.id === chosen);
-            return (_jsxs("select", { id: id, className: "sc-input", value: chosen, onChange: choose, children: [_jsx("option", { value: "", children: "\u2014" }), people.map((person) => (_jsx("option", { value: person.id, children: personChoice(person) }, person.id))), chosen !== "" && !people.some((person) => person.id === chosen) && (_jsx("option", { value: chosen, children: chosen }))] }));
+            const current = people.find((person) => person.id === chosen);
+            return (_jsx(Picker, { id: id, value: current, held: chosen !== "" && current === undefined ? chosen : undefined, search: peopleSearch(people), keyOf: (person) => person.id, render: personChoice, label: pluginWord(setting.name, props.language), placeholder: words.plugins.settings.choose, onChange: (person) => onChange(person?.id ?? null) }));
+        }
+        case "project": {
+            const current = props.projects.find((project) => project.id === chosen);
+            return (_jsx(Picker, { id: id, value: current, held: chosen !== "" && current === undefined ? chosen : undefined, search: projectsSearch(props.projects), keyOf: (project) => project.id, render: (project) => `${project.name} (${project.key})`, label: pluginWord(setting.name, props.language), placeholder: words.plugins.settings.choose, onChange: (project) => onChange(project?.id ?? null) }));
         }
-        case "project":
-            return (_jsxs("select", { id: id, className: "sc-input", value: chosen, onChange: choose, children: [_jsx("option", { value: "", children: "\u2014" }), props.projects.map((project) => (_jsxs("option", { value: project.id, children: [project.name, " (", project.key, ")"] }, project.id))), chosen !== "" && !props.projects.some((project) => project.id === chosen) && (_jsx("option", { value: chosen, children: chosen }))] }));
         case "boolean":
             return (_jsx("input", { id: id, type: "checkbox", checked: value === true, onChange: (event) => onChange(event.target.checked) }));
         case "number":
@@ -158,14 +276,16 @@ function SettingControl(props) {
             return (_jsxs("select", { id: id, className: "sc-input", value: typeof value === "string" ? value : "", onChange: (event) => onChange(event.target.value === "" ? null : event.target.value), children: [_jsx("option", { value: "", children: "\u2014" }), (setting.options ?? []).map((option) => (_jsx("option", { value: option.value, children: pluginWord(option.name, props.language) }, option.value)))] }));
         case "markdown":
             return (_jsx("textarea", { id: id, className: "sc-input", rows: 4, value: typeof value === "string" ? value : "", onChange: (event) => onChange(event.target.value === "" ? null : event.target.value) }));
+        case "time":
+            return (_jsxs(_Fragment, { children: [_jsx("input", { id: id, className: "sc-input", type: "time", value: typeof value === "string" ? value : "", onChange: (event) => onChange(event.target.value === "" ? null : event.target.value) }), _jsx("p", { className: "sc-settings-hint", children: words.plugins.settings.timeZoneHint })] }));
         case "list":
-            return (_jsx("input", { id: id, className: "sc-input", value: Array.isArray(value) ? value.join(", ") : "", onChange: (event) => onChange(event.target.value.trim() === ""
-                    ? null
-                    : event.target.value
-                        .split(",")
-                        .map((item) => item.trim())
-                        .filter((item) => item.length > 0)
-                        .map((item) => (setting.of === "number" ? Number(item) : item))) }));
+            if (setting.of === "enum") {
+                return (_jsx(EnumListControl, { setting: setting, value: value, onChange: onChange, language: props.language }));
+            }
+            if (setting.of === "person" || setting.of === "project") {
+                return (_jsx(RefListControl, { language: props.language, setting: setting, value: value, onChange: onChange, id: id, people: props.people, projects: props.projects }));
+            }
+            return _jsx(ItemListControl, { setting: setting, value: value, onChange: onChange, id: id });
         default:
             return (_jsx("input", { id: id, className: "sc-input", type: setting.type === "day" ? "date" : "text", value: typeof value === "string" ? value : "", maxLength: setting.max ?? undefined, onChange: (event) => onChange(event.target.value === "" ? null : event.target.value) }));
     }
@@ -183,7 +303,32 @@ function SettingsForm(props) {
         event.preventDefault();
         props.onSave(values);
     };
-    return (_jsxs("form", { className: "sc-form sc-settings-form", onSubmit: submit, "aria-label": words.plugins.settings.settingsForm, children: [settings.map((setting) => (_jsxs("div", { className: "sc-settings-row", children: [_jsxs("div", { className: "sc-settings-words", children: [_jsxs("label", { className: "sc-settings-label", htmlFor: `${prefix}-${setting.key}`, children: [pluginWord(setting.name, props.language), setting.required && " *"] }), setting.description !== null && (_jsx("p", { className: "sc-settings-hint", children: pluginWord(setting.description, props.language) }))] }), _jsx("div", { className: "sc-settings-control", children: _jsx(SettingControl, { setting: setting, value: values[setting.key], id: `${prefix}-${setting.key}`, language: props.language, people: props.people, projects: props.projects, onChange: (value) => setValues((current) => ({ ...current, [setting.key]: value })) }) })] }, setting.key))), _jsx("div", { className: "sc-form-actions", children: _jsx(Button, { type: "submit", variant: "primary", disabled: props.busy, children: words.common.save }) })] }));
+    /** A row per setting: the name and the hint on the left, the control on the right. */
+    const rows = (shown) => shown.map((setting) => (_jsxs("div", { className: "sc-settings-row", children: [_jsxs("div", { className: "sc-settings-words", children: [_jsxs("label", { className: "sc-settings-label", htmlFor: `${prefix}-${setting.key}`, children: [pluginWord(setting.name, props.language), setting.required && " *"] }), setting.description !== null && (_jsx("p", { className: "sc-settings-hint", children: pluginWord(setting.description, props.language) }))] }), _jsx("div", { className: "sc-settings-control", children: _jsx(SettingControl, { setting: setting, value: values[setting.key], id: `${prefix}-${setting.key}`, language: props.language, people: props.people, projects: props.projects, onChange: (value) => setValues((current) => ({ ...current, [setting.key]: value })) }) })] }, setting.key)));
+    return (_jsxs("form", { className: "sc-form sc-settings-form", onSubmit: submit, "aria-label": words.plugins.settings.settingsForm, children: [rows(settings.filter((setting) => setting.group === null || setting.group === undefined)), (props.detail.settingGroups ?? []).map((group) => {
+                const grouped = settings.filter((setting) => setting.group === group.key);
+                if (grouped.length === 0) {
+                    return null;
+                }
+                const description = pluginWord(group.description, props.language);
+                return (_jsxs("section", { className: "sc-settings-group", "aria-label": pluginWord(group.name, props.language), children: [_jsx("h3", { className: "sc-settings-group-title", children: pluginWord(group.name, props.language) }), description !== "" && _jsx("p", { className: "sc-settings-hint", children: description }), rows(grouped)] }, group.key));
+            }), _jsx("div", { className: "sc-form-actions", children: _jsx(Button, { type: "submit", variant: "primary", disabled: props.busy, children: words.common.save }) })] }));
+}
+/**
+ * How a secret stands, in a line (ADR-0070): set by an administrator, or sealed from an answer
+ * of a host, when; and when it expires, or that it has.
+ */
+function secretStanding(settings, setting, language) {
+    const when = formatInstant(setting.setAt ?? "", language);
+    const source = setting.source ?? "administrator";
+    const set = source === "administrator" ? settings.secretSet(when) : settings.secretSealedFrom(source, when);
+    if (setting.expiresAt === null || setting.expiresAt === undefined) {
+        return set;
+    }
+    const expires = formatInstant(setting.expiresAt, language);
+    return `${set} · ${Date.parse(setting.expiresAt) <= Date.now()
+        ? settings.secretExpired(expires)
+        : settings.secretExpires(expires)}`;
 }
 /** One secret: whether and when it is set, a field to set it anew with its buttons on the line. */
 function SecretRow(props) {
@@ -193,21 +338,30 @@ function SecretRow(props) {
     const id = useId();
     const { setting } = props;
     return (_jsxs("div", { className: "sc-settings-row", children: [_jsxs("div", { className: "sc-settings-words", children: [_jsxs("label", { className: "sc-settings-label", htmlFor: id, children: [pluginWord(setting.name, props.language), setting.required && " *"] }), _jsx("p", { className: "sc-settings-hint", children: setting.set && setting.setAt !== null
-                            ? settings.secretSet(formatInstant(setting.setAt, props.language))
-                            : settings.secretUnset }), setting.description !== null && (_jsx("p", { className: "sc-settings-hint", children: pluginWord(setting.description, props.language) }))] }), _jsx("div", { className: "sc-settings-control", children: _jsxs("div", { className: "sc-plugin-line", children: [_jsx("input", { id: id, className: "sc-input sc-plugin-line-input", type: "password", autoComplete: "off", placeholder: settings.secretNew, value: value, onChange: (event) => setValue(event.target.value) }), _jsx(Button, { disabled: props.busy || value.length === 0, onClick: () => {
+                            ? secretStanding(settings, setting, props.language)
+                            : settings.secretUnset }), setting.hosts !== null && setting.hosts !== undefined && setting.hosts.length > 0 && (_jsx("p", { className: "sc-settings-hint", children: settings.secretHosts(setting.hosts.join(", ")) })), setting.description !== null && (_jsx("p", { className: "sc-settings-hint", children: pluginWord(setting.description, props.language) }))] }), _jsx("div", { className: "sc-settings-control", children: _jsxs("div", { className: "sc-plugin-line", children: [_jsx("input", { id: id, className: "sc-input sc-plugin-line-input", type: "password", autoComplete: "off", placeholder: settings.secretNew, value: value, onChange: (event) => setValue(event.target.value) }), _jsx(Button, { disabled: props.busy || value.length === 0, onClick: () => {
                                 props.onSet(value);
                                 setValue("");
                             }, children: words.common.save }), setting.set && (_jsx(Button, { variant: "ghost", disabled: props.busy, onClick: props.onRemove, children: words.common.remove }))] }) })] }));
 }
 /**
- * Enabling: the capabilities to consent to, one by one, those consented to before ticked
- * already; the board project, the one it had chosen already; the projects, as they were.
+ * Enabling: the capabilities the plugin requires, on and not the administrator's to turn off, and
+ * those it can go without, off until chosen, those consented to before on already (ADR-0060); the
+ * board project, the one it had chosen already; the projects, as they were.
  */
 function EnableForm(props) {
     const words = useWords();
     const settings = words.plugins.settings;
     const { detail, language } = props;
-    const [consented, setConsented] = useState(() => new Set((detail.consent ?? []).filter((capability) => detail.capabilities.includes(capability))));
+    const optional = detail.optionalCapabilities ?? [];
+    // The roles the plugin asks of other plugins (ADR-0072): granted on the way where ticked.
+    const asks = (detail.asks ?? []).filter((ask) => ask.state !== "granted");
+    const [askedNow, setAskedNow] = useState(() => new Set());
+    const [consented, setConsented] = useState(() => new Set((detail.consent ?? []).filter((capability) => optional.includes(capability))));
+    /** A capability a new version asks and nobody has consented to yet is said to be new. */
+    const tagOf = (capability) => detail.state === "needs_consent" && !(detail.consent ?? []).includes(capability)
+        ? settings.newCapability
+        : undefined;
     const needsBoard = detail.boardNeeds !== "none";
     const [boardMode, setBoardMode] = useState(detail.boardNeeds === "none"
         ? "none"
@@ -222,7 +376,6 @@ function EnableForm(props) {
     const [allProjects, setAllProjects] = useState(!Array.isArray(before) || before.length === 0);
     const [onProjects, setOnProjects] = useState(() => new Set(Array.isArray(before) ? before : []));
     const ids = { key: useId(), name: useId(), description: useId(), choose: useId() };
-    const everyCapability = detail.capabilities.every((capability) => consented.has(capability));
     const boardReady = boardMode === "none"
         ? detail.boardNeeds !== "required"
         : boardMode === "create"
@@ -231,19 +384,40 @@ function EnableForm(props) {
     const submit = (event) => {
         event.preventDefault();
         props.onEnable({
-            consent: [...consented],
+            consent: [...detail.capabilities, ...consented],
             board: boardMode === "none"
                 ? null
                 : boardMode === "create"
                     ? { create: { key: boardKey, name: boardName, description: boardDescription } }
                     : { project: chosen },
             projects: allProjects ? "all" : [...onProjects],
-        });
+        }, asks
+            .filter((ask) => ask.state === "ungranted" && askedNow.has(`${ask.plugin}:${ask.role}`))
+            .map((ask) => ({ plugin: ask.plugin, role: ask.role })));
     };
-    return (_jsxs("form", { className: "sc-form sc-plugin-enable", onSubmit: submit, "aria-label": settings.enable, children: [detail.capabilities.length > 0 && (_jsxs("div", { className: "sc-plugin-group", children: [_jsx("h3", { className: "sc-plugin-group-title", children: settings.capabilities }), _jsx("ul", { className: "sc-plugin-ticks", children: detail.capabilities.map((capability) => {
-                            const text = capabilityText(words, capability);
-                            return (_jsx(TickRow, { checked: consented.has(capability), onChange: (on) => setConsented((current) => toggled(current, capability, on)), name: text.name, under: text.opens }, capability));
-                        }) })] })), needsBoard && (_jsxs("div", { className: "sc-plugin-group", children: [_jsx("h3", { className: "sc-plugin-group-title", children: settings.board }), _jsx("p", { className: "sc-settings-hint", children: settings.boardHint }), _jsxs("div", { className: "sc-radio-row", children: [detail.boardNeeds === "optional" && (_jsxs("label", { className: "sc-check", children: [_jsx("input", { type: "radio", name: "board", checked: boardMode === "none", onChange: () => setBoardMode("none") }), settings.boardNone] })), _jsxs("label", { className: "sc-check", children: [_jsx("input", { type: "radio", name: "board", checked: boardMode === "create", onChange: () => setBoardMode("create") }), settings.boardCreate] }), _jsxs("label", { className: "sc-check", children: [_jsx("input", { type: "radio", name: "board", checked: boardMode === "choose", onChange: () => setBoardMode("choose") }), settings.boardChoose] })] }), boardMode === "create" && (_jsxs("div", { className: "sc-plugin-fields", children: [_jsxs("div", { className: "sc-field", children: [_jsx("label", { className: "sc-field-label", htmlFor: ids.key, children: settings.boardKey }), _jsx("input", { id: ids.key, className: "sc-input", value: boardKey, onChange: (event) => setBoardKey(event.target.value) })] }), _jsxs("div", { className: "sc-field", children: [_jsx("label", { className: "sc-field-label", htmlFor: ids.name, children: settings.boardName }), _jsx("input", { id: ids.name, className: "sc-input", value: boardName, onChange: (event) => setBoardName(event.target.value) })] }), _jsxs("div", { className: "sc-field", children: [_jsx("label", { className: "sc-field-label", htmlFor: ids.description, children: settings.boardDescription }), _jsx("input", { id: ids.description, className: "sc-input", value: boardDescription, onChange: (event) => setBoardDescription(event.target.value) })] })] })), boardMode === "choose" && (_jsx("div", { className: "sc-plugin-fields", children: _jsxs("div", { className: "sc-field", children: [_jsx("label", { className: "sc-field-label", htmlFor: ids.choose, children: settings.boardChoose }), _jsx("select", { id: ids.choose, className: "sc-input", value: chosen, onChange: (event) => setChosen(event.target.value), children: props.projects.map((project) => (_jsxs("option", { value: project.key, children: [project.name, " (", project.key, ")"] }, project.key))) })] }) }))] })), _jsxs("div", { className: "sc-plugin-group", children: [_jsx("h3", { className: "sc-plugin-group-title", children: settings.projects }), _jsxs("div", { className: "sc-radio-row", children: [_jsxs("label", { className: "sc-check", children: [_jsx("input", { type: "radio", name: "projects", checked: allProjects, onChange: () => setAllProjects(true) }), settings.projectsAll] }), _jsxs("label", { className: "sc-check", children: [_jsx("input", { type: "radio", name: "projects", checked: !allProjects, onChange: () => setAllProjects(false) }), settings.projectsSome] })] }), !allProjects && (_jsx("ul", { className: "sc-plugin-ticks", children: props.projects.map((project) => (_jsx(TickRow, { checked: onProjects.has(project.key), onChange: (on) => setOnProjects((current) => toggled(current, project.key, on)), name: project.name, under: project.key }, project.key))) }))] }), _jsx("div", { className: "sc-plugin-group", children: _jsx("div", { className: "sc-form-actions", children: _jsx(Button, { type: "submit", variant: "primary", disabled: props.busy || !everyCapability || !boardReady, children: settings.enable }) }) })] }));
+    return (_jsxs("form", { className: "sc-form sc-plugin-enable", onSubmit: submit, "aria-label": settings.enable, children: [detail.capabilities.length + optional.length > 0 && (_jsxs("div", { className: "sc-plugin-group", children: [_jsx("h3", { className: "sc-plugin-group-title", children: settings.capabilities }), detail.capabilities.length > 0 && (_jsxs("div", { className: "sc-plugin-capabilities", children: [_jsxs("p", { className: "sc-plugin-capabilities-head", children: [_jsx("span", { className: "sc-plugin-capabilities-name", children: settings.required }), _jsx("span", { className: "sc-settings-hint", children: settings.requiredHint })] }), _jsx("ul", { className: "sc-plugin-ticks", children: detail.capabilities.map((capability) => {
+                                    const text = capabilityText(words, capability);
+                                    return (_jsx(TickRow, { checked: true, locked: true, name: text.name, under: text.opens, tag: tagOf(capability) }, capability));
+                                }) })] })), optional.length > 0 && (_jsxs("div", { className: "sc-plugin-capabilities", children: [_jsxs("p", { className: "sc-plugin-capabilities-head", children: [_jsx("span", { className: "sc-plugin-capabilities-name", children: settings.optional }), _jsx("span", { className: "sc-settings-hint", children: settings.optionalHint })] }), _jsx("ul", { className: "sc-plugin-ticks", children: optional.map((capability) => {
+                                    const text = capabilityText(words, capability);
+                                    return (_jsx(TickRow, { checked: consented.has(capability), onChange: (on) => setConsented((current) => toggled(current, capability, on)), name: text.name, under: text.opens }, capability));
+                                }) })] }))] })), needsBoard && (_jsxs("div", { className: "sc-plugin-group", children: [_jsx("h3", { className: "sc-plugin-group-title", children: settings.board }), _jsx("p", { className: "sc-settings-hint", children: settings.boardHint }), _jsxs("div", { className: "sc-radio-row", children: [detail.boardNeeds === "optional" && (_jsxs("label", { className: "sc-check", children: [_jsx("input", { type: "radio", name: "board", checked: boardMode === "none", onChange: () => setBoardMode("none") }), settings.boardNone] })), _jsxs("label", { className: "sc-check", children: [_jsx("input", { type: "radio", name: "board", checked: boardMode === "create", onChange: () => setBoardMode("create") }), settings.boardCreate] }), _jsxs("label", { className: "sc-check", children: [_jsx("input", { type: "radio", name: "board", checked: boardMode === "choose", onChange: () => setBoardMode("choose") }), settings.boardChoose] })] }), boardMode === "create" && (_jsxs("div", { className: "sc-plugin-fields", children: [_jsxs("div", { className: "sc-field", children: [_jsx("label", { className: "sc-field-label", htmlFor: ids.key, children: settings.boardKey }), _jsx("input", { id: ids.key, className: "sc-input", value: boardKey, onChange: (event) => setBoardKey(event.target.value) })] }), _jsxs("div", { className: "sc-field", children: [_jsx("label", { className: "sc-field-label", htmlFor: ids.name, children: settings.boardName }), _jsx("input", { id: ids.name, className: "sc-input", value: boardName, onChange: (event) => setBoardName(event.target.value) })] }), _jsxs("div", { className: "sc-field", children: [_jsx("label", { className: "sc-field-label", htmlFor: ids.description, children: settings.boardDescription }), _jsx("input", { id: ids.description, className: "sc-input", value: boardDescription, onChange: (event) => setBoardDescription(event.target.value) })] })] })), boardMode === "choose" && (_jsx("div", { className: "sc-plugin-fields", children: _jsxs("div", { className: "sc-field", children: [_jsx("label", { className: "sc-field-label", htmlFor: ids.choose, children: settings.boardChoose }), _jsx(Picker, { id: ids.choose, value: props.projects.find((project) => project.key === chosen), search: projectsSearch(props.projects), keyOf: (project) => project.key, render: (project) => `${project.name} (${project.key})`, label: settings.boardChoose, placeholder: settings.boardChoose, onChange: (project) => setChosen(project?.key ?? "") })] }) }))] })), _jsxs("div", { className: "sc-plugin-group", children: [_jsx("h3", { className: "sc-plugin-group-title", children: settings.projects }), _jsxs("div", { className: "sc-radio-row", children: [_jsxs("label", { className: "sc-check", children: [_jsx("input", { type: "radio", name: "projects", checked: allProjects, onChange: () => setAllProjects(true) }), settings.projectsAll] }), _jsxs("label", { className: "sc-check", children: [_jsx("input", { type: "radio", name: "projects", checked: !allProjects, onChange: () => setAllProjects(false) }), settings.projectsSome] })] }), !allProjects && (_jsx("ul", { className: "sc-plugin-ticks", children: props.projects.map((project) => (_jsx(TickRow, { checked: onProjects.has(project.key), onChange: (on) => setOnProjects((current) => toggled(current, project.key, on)), name: project.name, under: project.key }, project.key))) }))] }), _jsxs("div", { className: "sc-plugin-group", children: [asks.length > 0 && (_jsxs("div", { className: "sc-plugin-group", children: [_jsx("h3", { className: "sc-plugin-group-title", children: settings.asks }), _jsx("p", { className: "sc-settings-hint", children: settings.asksHint }), _jsx("ul", { className: "sc-plugin-ticks", children: asks.map((ask) => {
+                                    const id = `${ask.plugin}:${ask.role}`;
+                                    return (_jsx(TickRow, { checked: ask.state === "ungranted" && askedNow.has(id), onChange: ask.state === "ungranted"
+                                            ? (checked) => setAskedNow((current) => {
+                                                const next = new Set(current);
+                                                if (checked) {
+                                                    next.add(id);
+                                                }
+                                                else {
+                                                    next.delete(id);
+                                                }
+                                                return next;
+                                            })
+                                            : undefined, locked: ask.state === "unavailable", name: `${ask.role} (${ask.plugin})`, under: ask.state === "unavailable"
+                                            ? settings.askUnavailable(ask.plugin)
+                                            : pluginWord(ask.why, language) }, id));
+                                }) })] })), _jsx("div", { className: "sc-form-actions", children: _jsx(Button, { type: "submit", variant: "primary", disabled: props.busy || !boardReady, children: settings.enable }) })] })] }));
 }
 /** Who a grant is to, as the chip says it. */
 function holderOf(grant, words) {
@@ -253,6 +427,12 @@ function holderOf(grant, words) {
     if (grant.project !== null) {
         return words.grantMembersOf(grant.project.name);
     }
+    if (grant.plugin !== null && grant.plugin !== undefined) {
+        return words.grantPlugin(grant.plugin);
+    }
+    if (grant.team !== null && grant.team !== undefined) {
+        return words.grantTeam(grant.team.name);
+    }
     if (grant.person !== null) {
         return personName(grant.person);
     }
@@ -270,39 +450,92 @@ function personChoice(person) {
  */
 function RoleRow(props) {
     const settings = useWords().plugins.settings;
-    const [whom, setWhom] = useState("");
+    const [whom, setWhom] = useState(undefined);
     const id = useId();
     const { role, grants } = props;
     const everyoneHas = grants.some((grant) => grant.everyone);
     const projectsWith = new Set(grants.flatMap((grant) => (grant.project === null ? [] : [grant.project.key])));
     const peopleWith = new Set(grants.flatMap((grant) => (grant.person === null ? [] : [grant.person.id])));
+    const pluginsWith = new Set(grants.flatMap((grant) => grant.plugin === null || grant.plugin === undefined ? [] : [grant.plugin]));
+    const plugins = props.plugins.filter((plugin) => !pluginsWith.has(plugin.key));
+    const teamsWith = new Set(grants.flatMap((grant) => grant.team === null || grant.team === undefined ? [] : [grant.team.key]));
+    const teams = props.teams.filter((team) => !teamsWith.has(team.key));
     const projects = props.projects.filter((project) => !projectsWith.has(project.key));
     const people = props.people.filter((person) => person.status === "active" && !peopleWith.has(person.id));
     const description = pluginWord(role.description, props.language);
+    // Whom the role may go to, searched for as one list (ADR-0037): everyone where it may, then
+    // the projects, the people and the plugins without it.
+    const choices = [
+        ...(!props.isDefault && !everyoneHas ? [{ kind: "everyone" }] : []),
+        ...projects.map((project) => ({ kind: "project", project })),
+        ...people.map((person) => ({ kind: "person", person })),
+        ...plugins.map((plugin) => ({ kind: "plugin", plugin })),
+        ...teams.map((team) => ({ kind: "team", team })),
+    ];
+    const choiceWords = (choice) => {
+        switch (choice.kind) {
+            case "everyone":
+                return settings.grantEveryone;
+            case "project":
+                return settings.grantMembersOf(choice.project.name);
+            case "person":
+                return personChoice(choice.person);
+            case "team":
+                return settings.grantTeam(choice.team.name);
+            case "plugin":
+                return `${settings.grantPlugin(choice.plugin.key)} · ${pluginWord(choice.plugin.name, props.language)}`;
+        }
+    };
+    const findWhom = listSearch(choices, (choice, typed) => choiceWords(choice).toLowerCase().includes(typed));
+    const keyOfChoice = (choice) => choice.kind === "everyone"
+        ? "everyone"
+        : choice.kind === "project"
+            ? `project:${choice.project.key}`
+            : choice.kind === "person"
+                ? `person:${choice.person.id}`
+                : choice.kind === "team"
+                    ? `team:${choice.team.key}`
+                    : `plugin:${choice.plugin.key}`;
     const submit = (event) => {
         event.preventDefault();
-        if (whom === "everyone") {
+        if (whom === undefined) {
+            return;
+        }
+        if (whom.kind === "everyone") {
             props.onGrant({ role: role.key, everyone: true });
         }
-        else if (whom.startsWith("project:")) {
-            props.onGrant({ role: role.key, project: whom.slice("project:".length) });
+        else if (whom.kind === "project") {
+            props.onGrant({ role: role.key, project: whom.project.key });
+        }
+        else if (whom.kind === "person") {
+            props.onGrant({ role: role.key, person: whom.person.id });
         }
-        else if (whom.startsWith("person:")) {
-            props.onGrant({ role: role.key, person: whom.slice("person:".length) });
+        else if (whom.kind === "team") {
+            props.onGrant({ role: role.key, team: whom.team.key });
         }
-        setWhom("");
+        else {
+            props.onGrant({ role: role.key, plugin: whom.plugin.key });
+        }
+        setWhom(undefined);
     };
-    return (_jsxs("li", { className: "sc-plugin-role", children: [_jsxs("div", { children: [_jsxs("p", { className: "sc-plugin-role-name", children: [pluginWord(role.name, props.language), _jsx("code", { className: "sc-plugin-role-key", children: role.key }), props.isDefault && _jsx(Badge, { tone: "accent", children: settings.roleDefault })] }), description !== "" && _jsx("p", { className: "sc-settings-hint", children: description })] }), _jsxs("div", { children: [_jsxs("div", { className: "sc-plugin-holders", children: [props.isDefault && (_jsx("span", { className: "sc-plugin-holder sc-plugin-holder-fixed", children: settings.everyMember })), grants.map((grant) => {
+    return (_jsxs("li", { className: "sc-plugin-role", children: [_jsxs("div", { children: [_jsxs("p", { className: "sc-plugin-role-name", children: [pluginWord(role.name, props.language), _jsx("code", { className: "sc-plugin-role-key", children: role.key }), props.isDefault && _jsx(Badge, { tone: "accent", children: settings.roleDefault }), role.follows === "reports" && _jsx(Badge, { tone: "accent", children: settings.roleManagers })] }), description !== "" && _jsx("p", { className: "sc-settings-hint", children: description })] }), _jsxs("div", { children: [_jsxs("div", { className: "sc-chips sc-plugin-holders", children: [props.isDefault && _jsx(Chip, { className: "sc-plugin-holder", children: settings.everyMember }), role.follows === "reports" && (_jsx(Chip, { className: "sc-plugin-holder", children: settings.whoeverManages })), grants.map((grant) => {
                                 const holder = holderOf(grant, settings);
-                                return (_jsxs("span", { className: "sc-plugin-holder", children: [holder, _jsx(Button, { size: "sm", variant: "ghost", disabled: props.busy, onClick: () => props.onRevoke(grant.id), "aria-label": `${settings.revoke}: ${holder}`, title: settings.revoke, children: "\u00D7" })] }, grant.id));
-                            })] }), _jsxs("form", { className: "sc-plugin-grant", onSubmit: submit, children: [_jsx("label", { htmlFor: id, className: "sc-visually-hidden", children: settings.grantWhom }), _jsxs("select", { id: id, className: "sc-input sc-plugin-grant-input", value: whom, onChange: (event) => setWhom(event.target.value), children: [_jsx("option", { value: "", children: settings.grantWhom }), !props.isDefault && !everyoneHas && (_jsx("option", { value: "everyone", children: settings.grantEveryone })), projects.length > 0 && (_jsx("optgroup", { label: settings.grantProjects, children: projects.map((project) => (_jsx("option", { value: `project:${project.key}`, children: project.name }, project.key))) })), people.length > 0 && (_jsx("optgroup", { label: settings.grantPeople, children: people.map((person) => (_jsx("option", { value: `person:${person.id}`, children: personChoice(person) }, person.id))) }))] }), _jsx(Button, { type: "submit", disabled: props.busy || whom === "", children: settings.grant })] })] })] }));
+                                return (_jsx(Chip, { className: "sc-plugin-holder", onRemove: () => props.onRevoke(grant.id), removeLabel: `${settings.revoke}: ${holder}`, disabled: props.busy, children: holder }, grant.id));
+                            })] }), _jsxs("form", { className: "sc-plugin-grant", onSubmit: submit, children: [_jsx("label", { htmlFor: id, className: "sc-visually-hidden", children: settings.grantWhom }), _jsx(Picker, { id: id, value: whom, search: findWhom, keyOf: keyOfChoice, render: choiceWords, label: settings.grantWhom, placeholder: settings.grantWhom, disabled: props.busy, onChange: setWhom }), _jsx(Button, { type: "submit", disabled: props.busy || whom === undefined, children: settings.grant })] })] })] }));
+}
+/** Another plugin by the name it gives itself in the person's language, or its key where the page does not know it. */
+function pluginNameOf(plugins, key, language) {
+    const found = plugins.find((plugin) => plugin.key === key);
+    return found === undefined ? key : pluginWord(found.name, language);
 }
 /** The roles the plugin declares, each with who holds it; a plugin without roles is every member's. */
 function RolesSection(props) {
     const settings = useWords().plugins.settings;
     const { detail } = props;
     const grants = detail.grants ?? [];
-    return (_jsxs("section", { className: "sc-panel", "aria-label": settings.roles, children: [_jsx("h2", { className: "sc-section-title", children: settings.roles }), detail.declaredRoles.length === 0 ? (_jsx("p", { className: "sc-settings-hint", children: settings.rolesNone })) : (_jsx("ul", { className: "sc-plugin-roles", children: detail.declaredRoles.map((role) => (_jsx(RoleRow, { role: role, isDefault: detail.defaultRole === role.key, grants: grants.filter((grant) => grant.role === role.key), projects: props.projects, people: props.people, language: props.language, busy: props.busy, onGrant: props.onGrant, onRevoke: props.onRevoke }, role.key))) }))] }));
+    const others = props.plugins.filter((plugin) => plugin.state === "enabled" && plugin.key !== detail.key);
+    const asks = detail.asks ?? [];
+    return (_jsxs("section", { className: "sc-panel", "aria-label": settings.roles, children: [_jsx("h2", { className: "sc-section-title", children: settings.roles }), detail.declaredRoles.length === 0 ? (_jsx("p", { className: "sc-settings-hint", children: settings.rolesNone })) : (_jsx("ul", { className: "sc-plugin-roles", children: detail.declaredRoles.map((role) => (_jsx(RoleRow, { role: role, isDefault: detail.defaultRole === role.key, grants: grants.filter((grant) => grant.role === role.key), projects: props.projects, people: props.people, plugins: others, teams: props.teams, language: props.language, busy: props.busy, onGrant: props.onGrant, onRevoke: props.onRevoke }, role.key))) })), asks.length > 0 && (_jsxs("div", { className: "sc-plugin-group", children: [_jsx("h3", { className: "sc-plugin-group-title", children: settings.asks }), _jsx("p", { className: "sc-settings-hint", children: settings.asksHint }), _jsx("ul", { className: "sc-plugin-roles", children: asks.map((ask) => (_jsxs("li", { className: "sc-plugin-role", children: [_jsxs("div", { children: [_jsxs("p", { className: "sc-plugin-role-name", children: [pluginNameOf(props.plugins, ask.plugin, props.language), _jsx("code", { className: "sc-plugin-role-key", children: ask.role }), ask.state === "granted" && _jsx(Badge, { tone: "accent", children: settings.askGranted })] }), _jsx("p", { className: "sc-settings-hint", children: pluginWord(ask.why, props.language) })] }), _jsx("div", { children: ask.state === "unavailable" ? (_jsx("span", { className: "sc-settings-hint", children: settings.askUnavailable(ask.plugin) })) : ask.state === "ungranted" ? (_jsx(Button, { size: "sm", disabled: props.busy, onClick: () => props.onGrantAsked(ask.plugin, ask.role), children: settings.askGrantNow })) : null })] }, `${ask.plugin}:${ask.role}`))) })] }))] }));
 }
 /** One plugin, whole, for an administrator. */
 export function PluginSettingsView(props) {
@@ -334,9 +567,14 @@ export function PluginSettingsView(props) {
     });
     const enabled = detail.state === "enabled";
     const canEnable = detail.state === "installed" || detail.state === "disabled" || detail.state === "needs_consent";
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "sc-page-head", children: [_jsxs("div", { className: "sc-page-heading", children: [_jsx("h1", { className: "sc-page-title", children: pluginWord(detail.name, language) }), _jsx(Badge, { tone: STATE_TONES[detail.state], children: words.vocabulary.pluginState[detail.state] ?? detail.state }), _jsxs("span", { className: "sc-muted", children: [_jsx("code", { children: detail.key }), " ", detail.version] })] }), enabled && (_jsx("div", { className: "sc-page-actions", children: _jsx(Button, { size: "sm", disabled: busy, onClick: () => change(() => plugin.disable()), children: settings.disable }) }))] }), _jsx("p", { className: "sc-lead", children: pluginWord(detail.description, language) }), error !== undefined && _jsx(Callout, { tone: "danger", children: error }), detail.problems.length > 0 && (_jsx(Callout, { tone: "danger", title: settings.problems, children: _jsx("ul", { className: "sc-plugin-problems", children: detail.problems.map((problem) => (_jsx("li", { children: problem }, problem))) }) })), _jsx(Overview, { detail: detail, projects: props.projects, language: language }), canEnable && (_jsxs("section", { className: "sc-panel sc-panel-form", "aria-label": settings.enable, children: [_jsx("h2", { className: "sc-section-title", children: settings.enable }), _jsx(EnableForm, { detail: detail, projects: props.projects, language: language, busy: busy, onEnable: (input) => change(() => plugin.enable(input)) })] })), enabled && detail.settings.length > 0 && (_jsxs("section", { className: "sc-panel sc-panel-form", "aria-label": settings.settingsForm, children: [_jsx("h2", { className: "sc-section-title", children: settings.settingsForm }), _jsxs("div", { children: [_jsx(SettingsForm, { detail: detail, language: language, busy: busy, people: props.people, projects: props.projects, onSave: (values) => change(() => plugin.updateSettings({ values })) }), detail.settings
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "sc-page-head", children: [_jsxs("div", { className: "sc-page-heading", children: [_jsx("h1", { className: "sc-page-title", children: pluginWord(detail.name, language) }), _jsx(Badge, { tone: STATE_TONES[detail.state], children: words.vocabulary.pluginState[detail.state] ?? detail.state }), _jsxs("span", { className: "sc-muted", children: [_jsx("code", { children: detail.key }), " ", detail.version] })] }), enabled && (_jsx("div", { className: "sc-page-actions", children: _jsx(Button, { size: "sm", disabled: busy, onClick: () => change(() => plugin.disable()), children: settings.disable }) }))] }), _jsx("p", { className: "sc-lead", children: pluginWord(detail.description, language) }), error !== undefined && _jsx(Callout, { tone: "danger", children: error }), detail.problems.length > 0 && (_jsx(Callout, { tone: "danger", title: settings.problems, children: _jsx("ul", { className: "sc-plugin-problems", children: detail.problems.map((problem) => (_jsx("li", { children: problem }, problem))) }) })), detail.needsTimeZone === true && (_jsx(Callout, { tone: "warning", action: _jsx(LinkButton, { href: settingsHref("workspace"), children: settings.setTimeZone }), children: settings.needsTimeZone })), _jsx(Overview, { detail: detail, projects: props.projects, language: language, busy: busy, onConsent: (consent) => change(() => plugin.updateConsent(consent)) }), canEnable && (_jsxs("section", { className: "sc-panel sc-panel-form", "aria-label": settings.enable, children: [_jsx("h2", { className: "sc-section-title", children: settings.enable }), _jsx(EnableForm, { detail: detail, projects: props.projects, language: language, busy: busy, onEnable: (input, grants) => change(async () => {
+                            await plugin.enable(input);
+                            for (const grant of grants) {
+                                await client.plugin(grant.plugin).grant({ role: grant.role, plugin: detail.key });
+                            }
+                        }) })] })), enabled && detail.settings.length > 0 && (_jsxs("section", { className: "sc-panel sc-panel-form", "aria-label": settings.settingsForm, children: [_jsx("h2", { className: "sc-section-title", children: settings.settingsForm }), _jsxs("div", { children: [_jsx(SettingsForm, { detail: detail, language: language, busy: busy, people: props.people, projects: props.projects, onSave: (values) => change(() => plugin.updateSettings({ values })) }), detail.settings
                                 .filter((setting) => setting.type === "secret")
-                                .map((setting) => (_jsx(SecretRow, { setting: setting, language: language, busy: busy, onSet: (value) => change(() => plugin.setSecret(setting.key, value)), onRemove: () => change(() => plugin.removeSecret(setting.key)) }, setting.key)))] })] })), detail.grants !== null && (_jsx(RolesSection, { detail: detail, projects: props.projects, people: props.people, language: language, busy: busy, onGrant: (input) => change(() => plugin.grant(input)), onRevoke: (id) => change(() => plugin.revoke(id)) })), _jsxs("section", { className: "sc-panel", "aria-label": settings.events, children: [_jsx("h2", { className: "sc-section-title", children: settings.events }), events === undefined ? (_jsx(Spinner, { label: words.common.loading })) : (_jsx(EventFeed, { events: events, empty: _jsx("p", { className: "sc-muted", children: settings.noEvents }) }))] }), _jsxs("section", { className: "sc-panel sc-panel-form", "aria-label": settings.data, children: [_jsx("h2", { className: "sc-section-title", children: settings.data }), _jsxs("div", { children: [_jsxs("div", { className: "sc-settings-row", children: [_jsxs("div", { className: "sc-settings-words", children: [_jsx("p", { className: "sc-settings-label", children: settings.export }), _jsx("p", { className: "sc-settings-hint", children: settings.exportHint })] }), _jsx("div", { className: "sc-settings-control", children: _jsx(LinkButton, { href: `/api/v1/plugins/${detail.key}/export`, children: settings.exportLink }) })] }), _jsxs("div", { className: "sc-settings-row", children: [_jsxs("div", { className: "sc-settings-words", children: [_jsx("p", { className: "sc-settings-label", children: settings.purge }), _jsx("p", { className: "sc-settings-hint", children: settings.purgeHint })] }), _jsx("div", { className: "sc-settings-control", children: purged ? (_jsx("p", { className: "sc-settings-hint", children: settings.purged })) : enabled ? (_jsx("p", { className: "sc-settings-hint", children: settings.purgeDisabledFirst })) : (_jsxs("form", { className: "sc-plugin-line", onSubmit: (event) => {
+                                .map((setting) => (_jsx(SecretRow, { setting: setting, language: language, busy: busy, onSet: (value) => change(() => plugin.setSecret(setting.key, value)), onRemove: () => change(() => plugin.removeSecret(setting.key)) }, setting.key)))] })] })), detail.grants !== null && (_jsx(RolesSection, { detail: detail, plugins: props.plugins ?? [], teams: props.teams ?? [], onGrantAsked: (other, role) => change(() => client.plugin(other).grant({ role, plugin: detail.key })), projects: props.projects, people: props.people, language: language, busy: busy, onGrant: (input) => change(() => plugin.grant(input)), onRevoke: (id) => change(() => plugin.revoke(id)) })), _jsxs("section", { className: "sc-panel", "aria-label": settings.events, children: [_jsx("h2", { className: "sc-section-title", children: settings.events }), events === undefined ? (_jsx(Spinner, { label: words.common.loading })) : (_jsx(EventFeed, { events: events, empty: _jsx("p", { className: "sc-muted", children: settings.noEvents }) }))] }), _jsxs("section", { className: "sc-panel sc-panel-form", "aria-label": settings.data, children: [_jsx("h2", { className: "sc-section-title", children: settings.data }), _jsxs("div", { children: [_jsxs("div", { className: "sc-settings-row", children: [_jsxs("div", { className: "sc-settings-words", children: [_jsx("p", { className: "sc-settings-label", children: settings.export }), _jsx("p", { className: "sc-settings-hint", children: settings.exportHint })] }), _jsx("div", { className: "sc-settings-control", children: _jsx(LinkButton, { href: `/api/v1/plugins/${detail.key}/export`, children: settings.exportLink }) })] }), _jsxs("div", { className: "sc-settings-row", children: [_jsxs("div", { className: "sc-settings-words", children: [_jsx("p", { className: "sc-settings-label", children: settings.purge }), _jsx("p", { className: "sc-settings-hint", children: settings.purgeHint })] }), _jsx("div", { className: "sc-settings-control", children: purged ? (_jsx("p", { className: "sc-settings-hint", children: settings.purged })) : enabled ? (_jsx("p", { className: "sc-settings-hint", children: settings.purgeDisabledFirst })) : (_jsxs("form", { className: "sc-plugin-line", onSubmit: (event) => {
                                                 event.preventDefault();
                                                 void act(async () => {
                                                     await plugin.purge(confirm);