@skillcdn/console 0.4.1 → 0.4.2

package/src/plugin.ts

@@ -0,0 +1,126 @@
+// The contract between a console and a plugin's server module (docs/specs/plugins.md): the
+// manifest's schema and words, `definePlugin` and its definers, the arguments, the types of `ctx`,
+// the capabilities and the bounds, and `z`, the schema library a plugin writes its records with.
+// A plugin bundles this into its server module; nothing of it is imported at runtime by the
+// console, which reads the description the module yields.
+
+export * as z from "zod";
+export {
+  ARG_TYPES,
+  type ArgDefinition,
+  type ArgDefinitions,
+  type ArgDescription,
+  type ArgsOf,
+  type ArgType,
+  type ArgValue,
+  arg,
+  argProblem,
+  argsProblem,
+  argUsage,
+  argValueFromWord,
+  type ParsedArgv,
+  type PluginFileHandle,
+  type PluginPersonRef,
+  type PluginProjectRef,
+  parseArgv,
+} from "./plugin/args.js";
+export {
+  CAPABILITY_WORDS,
+  type CapabilityWords,
+  capabilityWords,
+  isPluginCapability,
+  outboundAllows,
+  PLUGIN_CAPABILITIES,
+  PLUGIN_CAPABILITY_PREFIXES,
+  type PluginCapability,
+} from "./plugin/capabilities.js";
+export type * from "./plugin/context.js";
+export {
+  type ApiDefinition,
+  type CollectionDescription,
+  type CollectionInput,
+  type CommandDefinition,
+  type CommandInput,
+  type CommandResult,
+  defineCollection,
+  defineCommand,
+  defineEndpoint,
+  definePlugin,
+  defineQuery,
+  describePlugin,
+  descriptionProblems,
+  durationMs,
+  type EndpointAuth,
+  type EndpointDefinition,
+  type EndpointDescription,
+  type EndpointInput,
+  type HookHandler,
+  isPluginDefinition,
+  isQueryFile,
+  type JobDefinition,
+  type Lifecycle,
+  type OperationDescription,
+  type PluginDefinition,
+  type PluginDescription,
+  type PluginParts,
+  type QueryDefinition,
+  type QueryFile,
+  type QueryInput,
+  type UpgradeDefinition,
+} from "./plugin/define.js";
+export { PluginDefinitionError } from "./plugin/definition-error.js";
+export * from "./plugin/limits.js";
+export {
+  CURRENT_PLUGIN_API,
+  isPluginKey,
+  type Localized,
+  localizedText,
+  type ManifestParse,
+  PLUGIN_API_MAJORS,
+  PLUGIN_BOARD_NEEDS,
+  PLUGIN_KEY_PATTERN,
+  PLUGIN_MENU_GROUPS,
+  PLUGIN_PAGE_LEVELS,
+  PLUGIN_SETTING_TYPES,
+  PLUGIN_WIDGET_PLACES,
+  PLUGIN_WIDGET_SIZES,
+  type PluginBoard,
+  type PluginBoardNeeds,
+  type PluginManifest,
+  type PluginMenu,
+  type PluginMenuGroup,
+  type PluginPage,
+  type PluginPageLevel,
+  type PluginRole,
+  type PluginSetting,
+  type PluginSettingType,
+  type PluginWidget,
+  type PluginWidgetPlace,
+  type PluginWidgetSize,
+  parsePluginManifest,
+  pluginManifestSchema,
+  RESERVED_COMMAND_NAMES,
+  RESERVED_PAGE_KEYS,
+  RESERVED_PLUGIN_KEYS,
+  SETTING_KEY_PATTERN,
+} from "./plugin/manifest.js";
+export {
+  isPluginError,
+  isPluginRefusal,
+  ownRefusalCode,
+  PLUGIN_OWN_REFUSAL_STATUS,
+  PLUGIN_REFUSALS,
+  PluginError,
+  PluginRefusal,
+  type PluginRefusalCode,
+} from "./plugin/refusals.js";
+export {
+  FORBIDDEN_BUILTINS,
+  forbiddenImportsIn,
+  forbiddingResolve,
+  type HardenedThread,
+  hardenThread,
+  isForbiddenBuiltin,
+  REMOVED_GLOBALS,
+  removedGlobalsIn,
+} from "./plugin/sandbox.js";

package/src/router.ts

@@ -121,6 +121,24 @@ export type Route =
       readonly project: string;
       readonly page: string;
     }
+  /** A plugin's page (docs/specs/plugins.md, "Tabs, sub-tabs and addresses"): the first when the address names none; `rest` is what follows the page, handed to the frame. */
+  | {
+      readonly name: "plugin";
+      readonly level: "workspace";
+      readonly plugin: string;
+      readonly page: string | undefined;
+      readonly rest: string;
+    }
+  | {
+      readonly name: "plugin";
+      readonly level: "project";
+      readonly project: string;
+      readonly plugin: string;
+      readonly page: string | undefined;
+      readonly rest: string;
+    }
+  /** The plugins' settings, for an administrator: the list, or one plugin by its key. */
+  | { readonly name: "plugins-settings"; readonly plugin: string | undefined }
   | { readonly name: "not-found" };
 
 /** The pages of a project, after its key. */
@@ -158,12 +176,34 @@ export const PATHS = {
   settings: "/settings",
   /** Where the pages a console adds of its own are: `/pages/<key>`, and `/projects/<key>/pages/<page>` on a project. */
   pages: "/pages",
+  /** Where the plugins' pages are: `/plugins/<key>[/<page>[/<rest>]]`, and `/projects/<key>/plugins/<key>...` on a project (ADR-0054). */
+  plugins: "/plugins",
+  /** The plugins' settings, for an administrator: the list, and `/settings/plugins/<key>` for one. */
+  pluginSettings: "/settings/plugins",
   /** Where an agent's connection is approved (ADR-0011): `/connect/<code>`, or the code typed. */
   connect: "/connect",
 } as const;
 
 const UUID = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
 const PROJECT_KEY = /^[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/;
+/** A plugin's key, and a page's: as the manifest spells them. */
+const PLUGIN_KEY = /^[a-z][a-z0-9-]{1,31}$/;
+
+/** A plugin's address after its key: the page, if any, and what follows it for the frame. */
+function pluginRouteOf(
+  segments: readonly string[],
+):
+  | { readonly plugin: string; readonly page: string | undefined; readonly rest: string }
+  | undefined {
+  const [plugin, page, ...rest] = segments;
+  if (plugin === undefined || !PLUGIN_KEY.test(plugin)) {
+    return undefined;
+  }
+  if (page !== undefined && !PLUGIN_KEY.test(page)) {
+    return undefined;
+  }
+  return { plugin, page, rest: rest.length === 0 ? "" : `/${rest.join("/")}` };
+}
 const NUMBER = /^[1-9][0-9]{0,8}$/;
 /** A code as it may be typed into an address: checked for what it is by the page. */
 const CODE_TEXT = /^[A-Za-z0-9-]{1,16}$/;
@@ -268,6 +308,15 @@ export function matchRoute(pathname: string, search = ""): Route {
   if (path === PATHS.categories) {
     return { name: "categories" };
   }
+  if (path === PATHS.pluginSettings) {
+    return { name: "plugins-settings", plugin: undefined };
+  }
+  if (path.startsWith(`${PATHS.pluginSettings}/`)) {
+    const [plugin, ...more] = path.slice(PATHS.pluginSettings.length + 1).split("/");
+    return plugin !== undefined && PLUGIN_KEY.test(plugin) && more.length === 0
+      ? { name: "plugins-settings", plugin }
+      : NOT_FOUND;
+  }
   if (path === PATHS.settings) {
     return {
       name: "workspace-settings",
@@ -307,6 +356,10 @@ export function matchRoute(pathname: string, search = ""): Route {
       ? { name: "custom", level: "workspace", page }
       : NOT_FOUND;
   }
+  if (path.startsWith(`${PATHS.plugins}/`)) {
+    const found = pluginRouteOf(path.slice(PATHS.plugins.length + 1).split("/"));
+    return found === undefined ? NOT_FOUND : { name: "plugin", level: "workspace", ...found };
+  }
   if (!path.startsWith(`${PATHS.project}/`)) {
     return NOT_FOUND;
   }
@@ -331,6 +384,12 @@ export function matchRoute(pathname: string, search = ""): Route {
       ? { name: "custom", level: "project", project, page: third }
       : NOT_FOUND;
   }
+  if (page === "plugins") {
+    const found = pluginRouteOf([third, ...rest].filter((segment) => segment !== undefined));
+    return found === undefined
+      ? NOT_FOUND
+      : { name: "plugin", level: "project", project, ...found };
+  }
   if (rest.length > 0) {
     return NOT_FOUND;
   }
@@ -526,6 +585,20 @@ export function customPageHref(page: string, project?: string): string {
   return project === undefined ? `${PATHS.pages}/${page}` : `${projectHref(project)}/pages/${page}`;
 }
 
+/** Where a plugin's page is (ADR-0054): its first page, or the one named, with what follows it; on a project when its key is given. */
+export function pluginHref(plugin: string, page?: string, project?: string, rest = ""): string {
+  const base =
+    project === undefined
+      ? `${PATHS.plugins}/${plugin}`
+      : `${projectHref(project)}/plugins/${plugin}`;
+  return page === undefined ? base : `${base}/${page}${rest}`;
+}
+
+/** Where the plugins' settings are, or one plugin's. */
+export function pluginSettingsHref(plugin?: string): string {
+  return plugin === undefined ? PATHS.pluginSettings : `${PATHS.pluginSettings}/${plugin}`;
+}
+
 /** Where a goal is set: the form. */
 /** Where a project's roadmap is, from a month on, or from this one when none is named. */
 export function roadmapHref(key: string, from?: string): string {

package/src/routes.ts

@@ -35,8 +35,15 @@ export const REST_ROUTES = {
   decisions: "/api/v1/decisions",
   /** The rules of the board (ADR-0023): the console's own until an administrator writes the organization's. */
   rules: "/api/v1/rules",
+  /** The plugins (ADR-0049): the ones a member may know of, and under each key the plugin's own routes. */
+  plugins: "/api/v1/plugins",
 } as const;
 
+/** The REST path of one plugin, by its key, and of what is under it. */
+export function pluginPath(key: string, ...parts: readonly string[]): string {
+  return [REST_ROUTES.plugins, encodeURIComponent(key), ...parts.map(encodeURIComponent)].join("/");
+}
+
 /** The REST path of the workspace's rules put away, or of their versions. */
 export function rulesPath(part?: "archive" | "versions"): string {
   return part === undefined ? REST_ROUTES.rules : `${REST_ROUTES.rules}/${part}`;

package/src/schemas.ts

@@ -55,6 +55,7 @@ import {
   PEOPLE_VISIBILITIES,
   PERSON_ROLES,
   PERSON_STATUSES,
+  PLUGIN_COMMAND_OUTCOMES,
   PROJECT_ICON_TYPES,
   PROJECT_ROLES,
   PROJECT_VISIBILITIES,
@@ -495,6 +496,8 @@ export const restTaskSchema = z.object({
   priority: z.enum(TASK_PRIORITIES),
   /** Whose task it is: one person, whoever wrote it. */
   owner: restPersonSchema,
+  /** The plugin that made it, by key (ADR-0052), or `null`; left out by a console older than the plugins. */
+  plugin: z.optional(z.nullable(z.string())),
   /** The people at work on it (ADR-0037), in the order they came to it; `[]` while nobody is. */
   workers: z.array(restPersonSchema),
   /** The task this one is part of, or `null`. */
@@ -668,6 +671,8 @@ export const restDecisionSchema = z.object({
   decider: restPersonSchema,
   /** The run that raised it, as the agent asked, or `null` when a person did. */
   run: z.nullable(z.object({ id: uuid, agent: z.string() })),
+  /** The plugin that raised it, by key (ADR-0052), or `null`; left out by a console older than the plugins. */
+  plugin: z.optional(z.nullable(z.string())),
   /** The answer, with who gave it and when; `null` while the decision waits. */
   answer: z.nullable(
     z.object({
@@ -815,6 +820,18 @@ export const restEventDataSchema = z.object({
   excerpt: z.optional(z.string()),
   /** For `task.commented`: how many files came with it. */
   files: z.optional(z.int()),
+  /** For `plugin.command`: the command, how it ended, the refusal's code where it was refused, how long it ran, and the arguments, a secret one as `[hidden]`. */
+  command: z.optional(z.string()),
+  outcome: z.optional(z.enum(PLUGIN_COMMAND_OUTCOMES)),
+  code: z.optional(z.string()),
+  durationMs: z.optional(z.int()),
+  args: z.optional(z.record(z.string(), z.unknown())),
+  /** For `plugin.enabled` and `plugin.configured`: the capabilities consented to. */
+  capabilities: z.optional(z.array(z.string())),
+  /** For `plugin.granted` and `plugin.revoked`: whether the role went to everyone. */
+  everyone: z.optional(z.boolean()),
+  /** For `plugin.failed`: what went wrong, in words for a person. */
+  problem: z.optional(z.string()),
 });
 export type RestEventData = z.infer<typeof restEventDataSchema>;
 
@@ -835,6 +852,8 @@ export const restEventSchema = z.object({
   documentId: z.nullable(uuid),
   /** The goal it is about, or `null`. */
   goalId: z.nullable(uuid),
+  /** The plugin that caused it, by key, or `null` (ADR-0052). */
+  plugin: z.nullable(z.string()),
   data: restEventDataSchema,
   createdAt: instant,
 });
@@ -1193,6 +1212,8 @@ export const restDocumentSummarySchema = z.object({
   /** Who wrote the latest version, and the agent they wrote it through, or `null`. */
   updatedBy: restPersonSchema,
   agent: z.nullable(z.string()),
+  /** The plugin that wrote it, by key (ADR-0052), or `null`; left out by a console older than the plugins. */
+  plugin: z.optional(z.nullable(z.string())),
   /** When the document was archived, or `null` while it is current. */
   archivedAt: z.nullable(instant),
   createdAt: instant,
@@ -1265,6 +1286,21 @@ export const restDocumentInputSchema = z.object({
 });
 export type RestDocumentInput = z.infer<typeof restDocumentInputSchema>;
 
+/**
+ * A plugin named after the rules (docs/specs/plugins.md, "The command"): one the asker may use,
+ * bound to the project where the rules are a project's; what agents are told of it, in the
+ * manifest's languages, and the asker's roles in it.
+ */
+export const restRulesPluginSchema = z.object({
+  key: z.string(),
+  name: z.record(z.string(), z.string()),
+  /** The sentence agents read, by language; `null` for the description. */
+  agentNote: z.nullable(z.record(z.string(), z.string())),
+  description: z.record(z.string(), z.string()),
+  roles: z.array(z.string()),
+});
+export type RestRulesPlugin = z.infer<typeof restRulesPluginSchema>;
+
 /**
  * `GET /api/v1/rules`, and each half of a project's (ADR-0023): the rules that hold, and where
  * they come from. `reference`: the console's own, since the organization wrote none;
@@ -1276,6 +1312,8 @@ export const restRulesSchema = z.object({
   body: z.nullable(z.string()),
   /** The page they are written on, or `null` for the console's own and for none. */
   page: z.nullable(restDocumentSummarySchema),
+  /** At the workspace: every plugin the asker may use, by key; left out in the halves of a project's answer. */
+  plugins: z.optional(z.array(restRulesPluginSchema)),
 });
 export type RestRules = z.infer<typeof restRulesSchema>;
 
@@ -1283,6 +1321,8 @@ export type RestRules = z.infer<typeof restRulesSchema>;
 export const restProjectRulesSchema = z.object({
   workspace: restRulesSchema,
   project: restRulesSchema,
+  /** The plugins bound to the project, as its board project or on it, that the asker holds a role in. */
+  plugins: z.optional(z.array(restRulesPluginSchema)),
 });
 export type RestProjectRules = z.infer<typeof restProjectRulesSchema>;
 
@@ -1390,3 +1430,6 @@ export const restRunEndInputSchema = z.object({
   summary: z.optional(summary),
 });
 export type RestRunEndInput = z.infer<typeof restRunEndInputSchema>;
+
+// The plugins' routes (docs/specs/plugins.md, "REST"), beside the board's.
+export * from "./plugin/rest-schemas.js";

package/src/styles/console.css

@@ -41,6 +41,18 @@
   --sc-color-warning-subtle: #fff4cc;
   --sc-color-danger: #b0273a;
   --sc-color-danger-subtle: #fadadf;
+  /* For the plugins' pages (ADR-0054): a state that informs, one neither good nor bad, a palette for figures, tabular numerals. */
+  --sc-color-info: #1d4ed8;
+  --sc-color-info-subtle: #dbe6ff;
+  --sc-color-neutral: #4b5563;
+  --sc-color-neutral-subtle: #e7eaf0;
+  --sc-series-1: #2c5bc4;
+  --sc-series-2: #c2410c;
+  --sc-series-3: #146b44;
+  --sc-series-4: #8f6100;
+  --sc-series-5: #7c3aed;
+  --sc-series-6: #0e7490;
+  --sc-numeric: "tnum" 1, "lnum" 1;
 
   /* The ground: a pale field, one gradient from the top. The default UI provides the field's
      face (the shell); a custom console may paint its own. */
@@ -473,6 +485,108 @@ table {
   color: var(--sc-color-text);
 }
 
+/* A tab that opens a list of pages: a group of several plugins (ADR-0054). */
+
+.sc-tab-group {
+  position: relative;
+}
+
+.sc-tab-summary {
+  list-style: none;
+  cursor: pointer;
+}
+
+.sc-tab-summary::-webkit-details-marker {
+  display: none;
+}
+
+.sc-tab-group-panel {
+  right: auto;
+  left: 0;
+  top: 100%;
+}
+
+/* The sub-tabs of a plugin with several pages, above its frame. */
+
+.sc-subtabs {
+  display: flex;
+  gap: var(--sc-space-4);
+  margin-bottom: var(--sc-space-4);
+  border-bottom: var(--sc-border);
+  overflow: auto hidden;
+}
+
+/* A plugin's frame: the width of the page, as tall as the frame says. */
+
+.sc-plugin-frame {
+  display: block;
+  width: 100%;
+  min-height: 2.5rem;
+  border: 0;
+  border-radius: var(--sc-radius-lg);
+  background: transparent;
+}
+
+/* A plugin's frame document, which the console serves marked with data-console: it paints no
+   background and is as tall as its content, so that the box the console draws shows through and
+   the frame shrinks as well as grows; no room is kept for a scrollbar it never shows. */
+
+html[data-console] {
+  scrollbar-gutter: auto;
+  scroll-padding-top: 0;
+}
+
+html[data-console] body {
+  min-height: 0;
+  background: transparent;
+}
+
+/* The widgets of the front page: a grid of six columns, above or below the projects. The page's
+   head keeps its own distance above the top ones. */
+
+.sc-widgets {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: var(--sc-space-4);
+}
+
+.sc-widgets-top {
+  margin: 0 0 var(--sc-space-5);
+}
+
+.sc-widgets-bottom {
+  margin: var(--sc-space-5) 0 0;
+}
+
+.sc-widget {
+  grid-column: span 6;
+  padding: var(--sc-space-3) var(--sc-space-4);
+  border: var(--sc-border);
+  border-radius: var(--sc-radius-lg);
+  background: var(--sc-color-bg-raised);
+}
+
+.sc-widget-title {
+  margin: 0 0 var(--sc-space-2);
+  font-size: var(--sc-text-sm);
+  font-weight: var(--sc-weight-medium);
+  color: var(--sc-color-text-muted);
+}
+
+@media (min-width: 48rem) {
+  .sc-widget-third {
+    grid-column: span 2;
+  }
+
+  .sc-widget-half {
+    grid-column: span 3;
+  }
+
+  .sc-widget-full {
+    grid-column: span 6;
+  }
+}
+
 /* What waits, beside a tab's name: a count in the point colour, so it reads before the words. */
 .sc-nav-count {
   display: inline-flex;
@@ -5699,3 +5813,216 @@ select.sc-input {
   padding-inline: var(--sc-space-4);
   font-size: var(--sc-text-sm);
 }
+
+/* The plugins' settings (docs/specs/plugins.md, "The settings pages"): one plugin's page. */
+
+/* A choice with its box or its dot, on one line with its word. */
+.sc-check {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sc-space-2);
+  padding-block: var(--sc-space-1);
+}
+
+.sc-radio-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sc-space-4);
+}
+
+/* The form that enables a plugin: its parts one under the other, a hairline between. */
+.sc-plugin-enable {
+  gap: 0;
+}
+
+.sc-plugin-group {
+  display: grid;
+  gap: var(--sc-space-2);
+  padding-block: var(--sc-space-4);
+  border-top: var(--sc-hairline);
+}
+
+.sc-plugin-group:first-child {
+  padding-top: 0;
+  border-top: 0;
+}
+
+.sc-plugin-group:last-child {
+  padding-bottom: 0;
+}
+
+.sc-plugin-group-title {
+  margin: 0;
+  font-size: var(--sc-text-md);
+  font-weight: var(--sc-weight-medium);
+}
+
+.sc-plugin-group > .sc-settings-hint {
+  margin-top: calc(-1 * var(--sc-space-1));
+}
+
+/* The fields of the board project to make: as wide as a form is comfortable, no wider. */
+.sc-plugin-fields {
+  display: grid;
+  gap: var(--sc-space-3);
+  max-width: 32rem;
+}
+
+/* A list to tick: each row a sheet with its box, a name and a word under the name. */
+.sc-plugin-ticks {
+  display: grid;
+  gap: var(--sc-space-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.sc-plugin-tick {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: var(--sc-space-3);
+  align-items: start;
+  padding: var(--sc-space-3) var(--sc-space-4);
+  border: var(--sc-border);
+  border-radius: var(--sc-radius-md);
+  background: var(--sc-color-sheet);
+  cursor: pointer;
+}
+
+.sc-plugin-tick input {
+  margin-top: 0.25em;
+}
+
+.sc-plugin-tick-words {
+  display: grid;
+  gap: 2px;
+}
+
+.sc-plugin-tick-name {
+  font-weight: var(--sc-weight-medium);
+}
+
+.sc-plugin-tick-under {
+  color: var(--sc-color-text-muted);
+  font-size: var(--sc-text-sm);
+}
+
+/* The capabilities an enabled plugin holds, one a line; its commands as words side by side. */
+.sc-plugin-held {
+  display: grid;
+  gap: var(--sc-space-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.sc-plugin-codes {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: var(--sc-space-2);
+}
+
+/* A field with its buttons on one line: a secret to set, the key to type before a purge. */
+.sc-plugin-line {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sc-space-2);
+  width: 100%;
+}
+
+.sc-plugin-line-input {
+  flex: 1 1 8rem;
+  width: auto;
+}
+
+/* The roles: one a row, its name and what it is for beside who holds it and the way to grant it. */
+.sc-plugin-roles {
+  display: grid;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.sc-plugin-role {
+  display: grid;
+  grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr);
+  gap: var(--sc-space-2) var(--sc-space-5);
+  padding: var(--sc-space-4) 0;
+  border-top: var(--sc-hairline);
+}
+
+.sc-plugin-role:first-child {
+  padding-top: 0;
+  border-top: 0;
+}
+
+.sc-plugin-role:last-child {
+  padding-bottom: 0;
+}
+
+.sc-plugin-role-name {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--sc-space-2);
+  font-weight: var(--sc-weight-medium);
+}
+
+.sc-plugin-role-key {
+  color: var(--sc-color-text-muted);
+  font-weight: normal;
+}
+
+.sc-plugin-holders {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--sc-space-2);
+}
+
+/* Who holds a role, a chip each, with the way to revoke a grant in it. */
+.sc-plugin-holder {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sc-space-1);
+  min-height: 2rem;
+  padding-inline: var(--sc-space-3) var(--sc-space-1);
+  border: var(--sc-border);
+  border-radius: var(--sc-radius-full);
+  background: var(--sc-color-sheet);
+  font-size: var(--sc-text-sm);
+}
+
+.sc-plugin-holder-fixed {
+  padding-inline-end: var(--sc-space-3);
+}
+
+.sc-plugin-holder .sc-button {
+  min-height: 1.5rem;
+  padding-inline: var(--sc-space-2);
+  font-size: var(--sc-text-md);
+  line-height: 1;
+}
+
+.sc-plugin-grant {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sc-space-2);
+  margin-top: var(--sc-space-3);
+}
+
+.sc-plugin-grant-input {
+  flex: 0 1 20rem;
+  width: auto;
+}
+
+.sc-plugin-problems {
+  margin: 0;
+  padding-left: var(--sc-space-5);
+}
+
+@media (max-width: 40rem) {
+  .sc-plugin-role {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}