@k2b/cloud 0.25.0 → 0.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k2b/cloud",
-  "version": "0.25.0",
+  "version": "0.27.0",
   "description": "Application platform library for independently deployed Hono and SolidJS services behind a dynamic gateway.",
   "license": "AGPL-3.0-or-later",
   "repository": {
@@ -98,9 +98,9 @@
     "@simplewebauthn/server": "14.0.3",
     "@tabler/icons": "3.48.0",
     "@tailwindcss/typography": "0.5.20",
-    "@k2b/nessi": "0.12.1",
+    "@k2b/nessi": "0.15.0",
     "@k2b/ssr": "0.14.0",
-    "@k2b/ui": "0.15.0",
+    "@k2b/ui": "0.17.0",
     "@k2b/stdlib": "0.27.0",
     "@k2b/sync": "7.0.0",
     "@nats-io/jetstream": "3.4.0",

package/src/_internal/capabilities.ts

@@ -786,6 +786,18 @@ const presentationOverlays = (catalog: CapabilityPresentationCatalog, requestedL
     });
 };
 
+/** The display title of one Query or Action in the requested locale, without rebuilding the manifest. */
+export const resolveCapabilityOperationTitle = (
+  operation: Pick<CapabilityQueryManifest, "localId" | "title">,
+  group: "queries" | "actions",
+  catalog: CapabilityPresentationCatalog | undefined,
+  requestedLocale: string,
+): string =>
+  (catalog ? presentationOverlays(catalog, requestedLocale) : []).reduce(
+    (title, translation) => translation[group]?.[operation.localId]?.title ?? title,
+    operation.title,
+  );
+
 /** Resolve only human presentation; stable IDs, flags, tags, aliases, and data shapes stay untouched. */
 export const resolveCapabilityManifestPresentation = (
   manifest: CapabilityManifest,

package/src/_internal/define-app.ts

@@ -40,6 +40,7 @@ import {
   CapabilityOriginSchema,
 } from "../contracts/capabilities";
 import { type BoundNotificationMap, bindNotificationDefinitions, type NotificationDefinitionMap } from "../contracts/notification-types";
+import { type PlatformPermission, PlatformPermissionSchema } from "../contracts/outgoing-mail";
 import { isPwaPartId, PWA_AUTH_PATH, PWA_CANVAS_COLORS, PWA_MANIFEST_PATH, PWA_SHELL_APP_ID } from "../contracts/pwa";
 import type { AppRegistryEntry } from "../contracts/registry";
 import type { AppSettingsMap, KindToType } from "../contracts/settings-types";
@@ -201,6 +202,8 @@ export type AppOptions<S extends AppSettingsMap = {}, N extends NotificationDefi
    * prefix-trie from these strings.
    */
   routes: readonly string[];
+  /** Platform services requested by this application, visible to administrators. */
+  platformPermissions?: readonly PlatformPermission[];
   /**
    * Gateway-relative URL at which this app's OpenAPI 3.x JSON spec is
    * served, e.g. `"/api/notebooks/openapi.json"`. Opt-in: only set this
@@ -471,6 +474,9 @@ export const defineApp = <
   // ── 2. Meta ───────────────────────────────────────────────────────────
   const baseMeta: AppMeta = {
     id: opts.id,
+    platformPermissions: opts.platformPermissions
+      ? opts.platformPermissions.map((permission) => PlatformPermissionSchema.parse(permission))
+      : undefined,
     name: opts.name,
     icon: opts.icon,
     description: opts.description,
@@ -528,7 +534,7 @@ export const defineApp = <
         }
       })());
     try {
-      bindProcessApplicationId(meta.id);
+      bindProcessApplicationId(meta.id, meta.platformPermissions);
       cleanup.unshift(clearProcessApplicationId);
       const startedAt = Date.now();
 
@@ -587,6 +593,7 @@ export const defineApp = <
           ? { href: meta.pwa.href, requiresRoles: meta.pwa.requiresRoles ? [...meta.pwa.requiresRoles] : undefined }
           : undefined,
         widgets: meta.widgets ? meta.widgets.map((w) => ({ ...w })) : undefined,
+        platformPermissions: meta.platformPermissions ? [...meta.platformPermissions] : undefined,
         settingKeys: meta.settingKeys ? [...meta.settingKeys] : undefined,
         openapi: advertiseOpenapi ? opts.openapi : undefined,
         cliModules: cliModules.length > 0 ? cliModules : undefined,

package/src/_internal/process-identity.ts

@@ -1,15 +1,21 @@
+import type { PlatformPermission } from "../contracts/outgoing-mail";
+
 /** Identity of the application started in this process, derived from its declaration. */
 let applicationId: string | undefined;
+let platformPermissions: readonly PlatformPermission[] = [];
+export const getProcessPlatformPermissions = (): readonly PlatformPermission[] => platformPermissions;
 
 export const getProcessApplicationId = (): string | undefined => applicationId;
 
-export const bindProcessApplicationId = (id: string): void => {
+export const bindProcessApplicationId = (id: string, permissions: readonly PlatformPermission[] = []): void => {
   if (applicationId !== undefined && applicationId !== id) {
     throw new Error(`This process already hosts application "${applicationId}"`);
   }
   applicationId = id;
+  platformPermissions = [...permissions];
 };
 
 export const clearProcessApplicationId = (): void => {
   applicationId = undefined;
+  platformPermissions = [];
 };

package/src/_internal/registry-validation.ts

@@ -1,4 +1,5 @@
 import { CLOUD_CLI_MODULE_NAME } from "../cli/plugin";
+import { PlatformPermissionSchema } from "../contracts/outgoing-mail";
 import type { AppRegistryEntry } from "../contracts/registry";
 
 const isRecord = (value: unknown): value is Record<string, unknown> => typeof value === "object" && value !== null && !Array.isArray(value);
@@ -118,6 +119,8 @@ export const validateAppRegistryEntry = (value: unknown): string | null => {
       return invalid("widgets", "an array of valid widgets");
     }
   }
+  if (value.platformPermissions !== undefined && !PlatformPermissionSchema.array().safeParse(value.platformPermissions).success)
+    return invalid("platformPermissions", "an array of platform permissions");
   if (value.settingKeys !== undefined && !isStringArray(value.settingKeys)) return invalid("settingKeys", "an array of strings");
   if (
     value.cliModules !== undefined &&

package/src/_internal/registry.ts

@@ -276,6 +276,7 @@ export const resolveLiveCapabilityRegistryEntry = (
       endpoint,
       manifest,
       presentation,
+      ...(app.presentation ? { appPresentation: app.presentation } : {}),
     };
   } catch {
     return null;

package/src/_internal/runtime-context.ts

@@ -15,6 +15,7 @@ export const buildRuntimeFromRegistry = (entries: AppRegistryEntry[], capabiliti
     const searchTags = searchQueries?.flatMap((query) => query.universalSearch!.tags.flatMap((tag) => [tag.tag, ...(tag.aliases ?? [])]));
     return {
       id: e.id,
+      platformPermissions: e.platformPermissions ? [...e.platformPermissions] : undefined,
       name: e.name,
       icon: e.icon,
       description: e.description,

package/src/access/GroupCoverage.tsx

@@ -0,0 +1,175 @@
+import { query } from "@k2b/stdlib/solid";
+import { Button, InlineGuidance, useLocale } from "@k2b/ui";
+import { createSignal, createUniqueId, For, Show } from "solid-js";
+import { CloudAvatar } from "../account/Avatar";
+import type { BaseUser, EntityListItem, PaginationResponse } from "../contracts/shared";
+import { accessMessages } from "./messages";
+
+/** Members per request. Further pages load only when the viewer asks for them. */
+const PAGE_SIZE = 20;
+
+type MembersPage =
+  /** The directory withholds group members from this viewer (guest accounts). */
+  | { visible: false; directoryGroup: boolean }
+  | { visible: true; directoryGroup: boolean; members: BaseUser[]; total: number; page: number; hasNext: boolean };
+
+/** Reads the Accounts directory with the viewer's own visibility: `null` when it is withheld. */
+const listEntities = async (params: Record<string, string>, signal: AbortSignal) => {
+  const url = new URL("/api/accounts/entities", window.location.origin);
+  for (const [key, value] of Object.entries(params)) url.searchParams.set(key, value);
+  const response = await fetch(url, { signal, credentials: "same-origin" });
+  if (response.status === 403) return null;
+  if (!response.ok) throw new Error(response.statusText || `HTTP ${response.status}`);
+  const data: { items: EntityListItem[]; pagination: PaginationResponse } = await response.json();
+  return data;
+};
+
+/**
+ * Who currently receives access through a group grant: direct members and
+ * members of nested groups, as access resolution counts them. Loading starts
+ * when the row mounts in the browser, so the list usually opens complete
+ * instead of growing after the viewer expands it.
+ */
+export const createGroupCoverage = (groupId: string) => {
+  const [open, setOpen] = createSignal(false);
+  const members = query.createInfinite<string, MembersPage, number>({
+    source: () => groupId,
+    loadPage: async (id, { cursor, abortSignal }) => {
+      const page = cursor ?? 1;
+      const [list, group] = await Promise.all([
+        listEntities(
+          { kinds: "user", member_of_group_id: id, recursive: "true", page: String(page), per_page: String(PAGE_SIZE) },
+          abortSignal,
+        ),
+        // Only the first page needs the group itself, for the directory hint.
+        page === 1 ? listEntities({ kinds: "group", group_ids: id, per_page: "1" }, abortSignal) : null,
+      ]);
+      const directoryGroup = group?.items.some((item) => item.kind === "group" && item.group.provider === "ipa") ?? false;
+      if (!list) return { visible: false, directoryGroup };
+      return {
+        visible: true,
+        directoryGroup,
+        members: list.items.flatMap((item) => (item.kind === "user" ? [item.user] : [])),
+        total: list.pagination.total,
+        page,
+        hasNext: list.pagination.has_next,
+      };
+    },
+    getNextCursor: (page) => (page.visible && page.hasNext ? page.page + 1 : null),
+  });
+  return { open, setOpen, panelId: createUniqueId(), members };
+};
+
+export type GroupCoverage = ReturnType<typeof createGroupCoverage>;
+
+const firstPage = (coverage: GroupCoverage) => coverage.members.pages()[0];
+
+/**
+ * The members toggle beside the group name. Its label never changes, so
+ * loading the members moves nothing in the row; the count leads the list.
+ */
+export function GroupCoverageToggle(props: { coverage: GroupCoverage; groupName: string }) {
+  const locale = useLocale();
+  const t = () => accessMessages.resolve([locale()]).t;
+  return (
+    <button
+      type="button"
+      aria-expanded={props.coverage.open()}
+      aria-controls={props.coverage.panelId}
+      // The group name tells several group rows apart.
+      aria-label={t().groupMembersOf({ name: props.groupName })}
+      onClick={() => props.coverage.setOpen(!props.coverage.open())}
+      // The size sits on the children: the scoped button normalization resets the button's own font.
+      class="focus-ui flex items-center gap-0.5 self-center rounded text-dimmed transition-colors hover:text-secondary"
+    >
+      <span class="text-xs">{t().groupMembers}</span>
+      <i
+        class="ti ti-chevron-down shrink-0 text-[10px] transition-transform motion-reduce:transition-none"
+        classList={{ "rotate-180": props.coverage.open() }}
+        aria-hidden="true"
+      />
+    </button>
+  );
+}
+
+/** The expanded member list. It stays in the document while collapsed so `aria-controls` always resolves. */
+export function GroupCoveragePanel(props: { coverage: GroupCoverage; groupName: string }) {
+  const locale = useLocale();
+  const t = () => accessMessages.resolve([locale()]).t;
+  const members = () => props.coverage.members;
+  const shown = () =>
+    members()
+      .pages()
+      .flatMap((page) => (page.visible ? page.members : []));
+  const total = () => {
+    const page = firstPage(props.coverage);
+    return page?.visible ? page.total : null;
+  };
+  const remaining = () => Math.max((total() ?? 0) - shown().length, 0);
+  let panel: HTMLDivElement | undefined;
+  let list: HTMLUListElement | undefined;
+  let more: HTMLButtonElement | undefined;
+  let retry: HTMLButtonElement | undefined;
+  // A loading button is disabled, which drops keyboard focus, and the buttons leave on a failure or once
+  // everything is shown. Unless the viewer has moved on, focus continues where they can act next.
+  const settleFocus = () => {
+    const active = document.activeElement;
+    if (active && active !== document.body && active.isConnected && !panel?.contains(active)) return;
+    const next = members().error() ? retry : members().hasMore() ? more : list;
+    if (next?.isConnected) next.focus();
+  };
+  const showMore = async () => {
+    await members().loadMore();
+    settleFocus();
+  };
+  const tryAgain = async () => {
+    await members().refresh();
+    settleFocus();
+  };
+
+  return (
+    // Indented to the name column: avatar (1.75rem) plus the row gap (0.5rem).
+    <div ref={panel} id={props.coverage.panelId} hidden={!props.coverage.open()} class="flex flex-col gap-2 pb-2 pl-9">
+      <Show when={members().pages().length === 0 && !members().error()}>
+        <InlineGuidance loading>{t().groupMembersLoading}</InlineGuidance>
+      </Show>
+      <Show when={firstPage(props.coverage)?.visible === false}>
+        <InlineGuidance icon="ti ti-eye-off">{t().groupMembersHidden}</InlineGuidance>
+      </Show>
+      <Show when={total() !== null}>
+        <p class="text-sm text-dimmed">{t().groupMemberCount({ count: total() ?? 0 })}</p>
+      </Show>
+      <Show when={firstPage(props.coverage)?.directoryGroup}>
+        <InlineGuidance icon="ti ti-info-circle">{t().directoryGroupHint}</InlineGuidance>
+      </Show>
+      <Show when={shown().length > 0}>
+        <ul ref={list} tabindex="-1" aria-label={t().groupMembersOf({ name: props.groupName })} class="flex flex-col gap-1 outline-none">
+          <For each={shown()}>
+            {(user) => {
+              const name = user.displayName || user.mail || user.uid;
+              return (
+                <li class="flex min-w-0 items-center gap-2 text-sm">
+                  <CloudAvatar username={name} userId={user.id} avatarHash={user.avatarHash} size="xs" class="h-6 w-6 shrink-0" />
+                  <span class="truncate">{name}</span>
+                </li>
+              );
+            }}
+          </For>
+        </ul>
+      </Show>
+      <Show when={members().error()}>
+        <InlineGuidance tone="danger" icon="ti ti-alert-circle" role="alert">
+          <span>{t().groupMembersFailed}</span>{" "}
+          <Button ref={retry} variant="text" size="xs" onClick={() => void tryAgain()}>
+            {t().retry}
+          </Button>
+        </InlineGuidance>
+      </Show>
+      <Show when={members().hasMore() && !members().error()}>
+        <Button ref={more} variant="text" size="xs" class="self-start" loading={members().loadingMore()} onClick={() => void showMore()}>
+          {t().showMoreMembers({ count: Math.min(remaining(), PAGE_SIZE) })}
+        </Button>
+      </Show>
+    </div>
+  );
+}

package/src/access/PermissionEditor.tsx

@@ -1,9 +1,11 @@
 import { mutation } from "@k2b/stdlib/solid";
 import { IconButton, Placeholder, prompts, SelectChip, Tooltip, useLocale } from "@k2b/ui";
-import { createSignal, For, Show } from "solid-js";
+import { For, Show } from "solid-js";
+import { createStore } from "solid-js/store";
 import { CloudAvatar } from "../account/Avatar";
 import type { AccessEntry, PermissionLevel, Principal, ServiceAccountKind } from "../contracts/shared";
 import { groupDisplayName } from "../shared/account-display";
+import { createGroupCoverage, type GroupCoverage, GroupCoveragePanel, GroupCoverageToggle } from "./GroupCoverage";
 import { isManagerEntry } from "./managers";
 import { accessMessages } from "./messages";
 import PrincipalPicker from "./PrincipalPicker";
@@ -154,7 +156,9 @@ const getPrincipalIcon = (entry: AccessEntry, t: ReturnType<typeof accessMessage
 export default function PermissionEditor(props: PermissionEditorProps) {
   const locale = useLocale();
   const t = () => accessMessages.resolve([locale()]).t;
-  const [entries, setEntries] = createSignal<AccessEntry[]>([...props.initialEntries]);
+  // A store keeps each row's identity across level changes, so an expanded member list stays open. It holds
+  // copies: store writes go into the objects themselves, and the caller's entries are not the editor's to change.
+  const [entries, setEntries] = createStore<AccessEntry[]>(props.initialEntries.map((entry) => ({ ...entry })));
   const canEdit = () => props.canEdit !== false;
   const allowPublic = () => props.allowPublic === true;
   const allowAuthenticated = () => props.allowAuthenticated !== false;
@@ -178,7 +182,7 @@ export default function PermissionEditor(props: PermissionEditorProps) {
       display: { displayName: string; serviceAccountKind?: ServiceAccountKind };
     }) => props.grantAccess(data.principal, data.permission, data.display),
     onSuccess: (newEntry) => {
-      setEntries([...entries(), newEntry as AccessEntry]);
+      setEntries(entries.length, { ...newEntry });
     },
     onError: (err) => prompts.error(err.message),
   });
@@ -190,7 +194,7 @@ export default function PermissionEditor(props: PermissionEditorProps) {
     },
     onSuccess: (result) => {
       if (result) {
-        setEntries(entries().map((e) => (e.id === result.accessId ? { ...e, permission: result.permission } : e)));
+        setEntries((entry) => entry.id === result.accessId, "permission", result.permission);
       }
     },
     onError: (err) => prompts.error(err.message),
@@ -208,14 +212,14 @@ export default function PermissionEditor(props: PermissionEditorProps) {
       return entry.id;
     },
     onSuccess: (accessId) => {
-      if (accessId) setEntries(entries().filter((entry) => entry.id !== accessId));
+      if (accessId) setEntries((current) => current.filter((entry) => entry.id !== accessId));
     },
     onError: (err) => prompts.error(err.message),
   });
   const busy = () => grantMut.loading() || updateMut.loading() || revokeMut.loading();
   // The service refuses to remove the last manager; the row says so up front.
   const lastManagerId = () => {
-    const managers = entries().filter(isManagerEntry);
+    const managers = entries.filter(isManagerEntry);
     return managers.length === 1 ? managers[0]!.id : null;
   };
 
@@ -223,25 +227,30 @@ export default function PermissionEditor(props: PermissionEditorProps) {
     <div class="flex flex-col gap-3">
       {/* Existing entries */}
       <div class="flex flex-col gap-1">
-        <For each={entries()}>
-          {(entry) => (
-            <AccessEntryRow
-              entry={entry}
-              canEdit={canEdit()}
-              disabled={busy()}
-              lastManager={entry.id === lastManagerId()}
-              allowed={allowed(entry.principal)}
-              singlePicker={allowed(entry.principal).length === 1}
-              onUpdatePermission={(permission) => {
-                if (!busy()) void updateMut.mutate({ accessId: entry.id, permission });
-              }}
-              onRevoke={() => {
-                if (!busy()) void revokeMut.mutate(entry);
-              }}
-            />
-          )}
+        <For each={entries}>
+          {(entry) => {
+            // A row keeps its principal, so its group coverage is created once per row.
+            const coverage = entry.principal.type === "group" ? createGroupCoverage(entry.principal.groupId) : undefined;
+            return (
+              <AccessEntryRow
+                entry={entry}
+                coverage={coverage}
+                canEdit={canEdit()}
+                disabled={busy()}
+                lastManager={entry.id === lastManagerId()}
+                allowed={allowed(entry.principal)}
+                singlePicker={allowed(entry.principal).length === 1}
+                onUpdatePermission={(permission) => {
+                  if (!busy()) void updateMut.mutate({ accessId: entry.id, permission });
+                }}
+                onRevoke={() => {
+                  if (!busy()) void revokeMut.mutate(entry);
+                }}
+              />
+            );
+          }}
         </For>
-        <Show when={entries().length === 0}>
+        <Show when={entries.length === 0}>
           <Placeholder align="left" class="px-1 py-2" description={t().noDirectGrants} />
         </Show>
       </div>
@@ -251,7 +260,7 @@ export default function PermissionEditor(props: PermissionEditorProps) {
           a higher level. KISS: one decision per step. */}
       <Show when={canEdit()}>
         <PrincipalPicker
-          existing={entries().map((e) => e.principal)}
+          existing={entries.map((e) => e.principal)}
           allowPublic={allowPublic()}
           allowAuthenticated={allowAuthenticated()}
           allowServiceAccounts={props.allowServiceAccounts}
@@ -280,6 +289,8 @@ function AccessEntryRow(props: {
   /** When true the per-row picker collapses to a non-interactive badge
    *  (single-level mode — there's nothing to switch to). */
   singlePicker: boolean;
+  /** Present for group grants: who currently receives access through the group. */
+  coverage?: GroupCoverage;
   onUpdatePermission: (permission: GrantableLevel) => void;
   onRevoke: () => void;
 }) {
@@ -306,89 +317,98 @@ function AccessEntryRow(props: {
   );
 
   return (
-    <div class="group/access-row flex items-center gap-2 py-1.5">
-      <Show
-        when={props.entry.principal.type === "user"}
-        fallback={
-          <div class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-zinc-200 text-zinc-600 dark:bg-zinc-700 dark:text-zinc-300">
-            <i class={`ti ${getPrincipalIcon(props.entry, t())} text-sm`} />
-          </div>
-        }
-      >
-        <CloudAvatar
-          username={displayName()}
-          userId={props.entry.principal.type === "user" ? props.entry.principal.userId : undefined}
-          avatarHash={props.entry.avatarHash}
-          size="xs"
-          class="h-7 w-7"
-        />
-      </Show>
-
-      {/* Display name. Name and label share one line so every row keeps its height on phones:
-          when both do not fit, each gets an equal share and the shorter one stays whole. */}
-      <div class="grid min-w-0 flex-1 auto-cols-[minmax(0,max-content)] grid-flow-col items-baseline gap-1">
-        <span class="truncate text-sm">{displayName()}</span>
-        <Show when={props.entry.principal.type === "public"}>
-          <span class="truncate text-xs text-dimmed">({t().anyoneWithLink})</span>
-        </Show>
+    <div>
+      <div class="group/access-row flex items-center gap-2 py-1.5">
         <Show
-          when={
-            props.entry.principal.type === "service_account" &&
-            props.entry.serviceAccountKind &&
-            serviceAccountKindDisplay(props.entry.serviceAccountKind, t()).label
+          when={props.entry.principal.type === "user"}
+          fallback={
+            <div class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-zinc-200 text-zinc-600 dark:bg-zinc-700 dark:text-zinc-300">
+              <i class={`ti ${getPrincipalIcon(props.entry, t())} text-sm`} />
+            </div>
           }
         >
-          {(label) => <span class="truncate text-xs text-dimmed">({label()})</span>}
+          <CloudAvatar
+            username={displayName()}
+            userId={props.entry.principal.type === "user" ? props.entry.principal.userId : undefined}
+            avatarHash={props.entry.avatarHash}
+            size="xs"
+            class="h-7 w-7"
+          />
         </Show>
-      </div>
 
-      {/* Permission badge — interactive single-value picker when editable,
+        {/* Display name. Name and label share one line so every row keeps its height on phones:
+          when both do not fit, each gets an equal share and the shorter one stays whole. A group's
+          members toggle always stays whole; the name takes the rest. */}
+        <div
+          class="grid min-w-0 flex-1 auto-cols-[minmax(0,max-content)] grid-flow-col items-baseline gap-1"
+          classList={{ "grid-cols-[minmax(0,max-content)_max-content]": props.coverage !== undefined }}
+        >
+          <span class="truncate text-sm">{displayName()}</span>
+          <Show when={props.entry.principal.type === "public"}>
+            <span class="truncate text-xs text-dimmed">({t().anyoneWithLink})</span>
+          </Show>
+          <Show
+            when={
+              props.entry.principal.type === "service_account" &&
+              props.entry.serviceAccountKind &&
+              serviceAccountKindDisplay(props.entry.serviceAccountKind, t()).label
+            }
+          >
+            {(label) => <span class="truncate text-xs text-dimmed">({label()})</span>}
+          </Show>
+          <Show when={props.coverage}>{(coverage) => <GroupCoverageToggle coverage={coverage()} groupName={displayName()} />}</Show>
+        </div>
+
+        {/* Permission badge — interactive single-value picker when editable,
           plain span otherwise. */}
-      <Show when={isInteractive()} fallback={<span class={`${badgeClass} cursor-default`}>{badgeContent}</span>}>
-        <SelectChip
-          aria-label={t().permissionFor({ name: displayName() })}
-          value={() => props.entry.permission as GrantableLevel}
-          options={props.allowed.map((option) => {
-            const locked = props.lastManager && option.level !== "admin";
-            return {
-              value: option.level,
-              label: option.label,
-              icon: `ti ${option.icon}`,
-              disabled: locked,
-              description: locked ? t().lastManagerOption({ level: manageLabel() }) : undefined,
-            };
-          })}
-          icon={`ti ${display().icon}`}
-          position="bottom-left"
-          onValueChange={(permission) => {
-            if (permission !== props.entry.permission) props.onUpdatePermission(permission);
-          }}
-        />
-      </Show>
+        <Show when={isInteractive()} fallback={<span class={`${badgeClass} cursor-default`}>{badgeContent}</span>}>
+          <SelectChip
+            aria-label={t().permissionFor({ name: displayName() })}
+            value={() => props.entry.permission as GrantableLevel}
+            options={props.allowed.map((option) => {
+              const locked = props.lastManager && option.level !== "admin";
+              return {
+                value: option.level,
+                label: option.label,
+                icon: `ti ${option.icon}`,
+                disabled: locked,
+                description: locked ? t().lastManagerOption({ level: manageLabel() }) : undefined,
+              };
+            })}
+            icon={`ti ${display().icon}`}
+            position="bottom-left"
+            onValueChange={(permission) => {
+              if (permission !== props.entry.permission) props.onUpdatePermission(permission);
+            }}
+          />
+        </Show>
 
-      {/* Destructive row actions stay quiet until the row is engaged. They
+        {/* Destructive row actions stay quiet until the row is engaged. They
           remain keyboard reachable and stay visible on touch-sized layouts. */}
-      <Show when={props.canEdit}>
-        <Tooltip.Anchor
-          content={removeLabel()}
-          class="shrink-0 opacity-100 transition-opacity sm:opacity-0 sm:group-hover/access-row:opacity-100 sm:group-focus-within/access-row:opacity-100"
-        >
-          <IconButton
-            type="button"
-            label={t().remove({ name: displayName() })}
-            variant="ghost"
-            size="xs"
-            onClick={props.onRevoke}
-            disabled={props.disabled || props.lastManager}
-            aria-label={t().remove({ name: displayName() })}
-            // A disabled button takes no focus and touch has no hover, so the reason also reaches assistive technology.
-            aria-description={props.lastManager ? removeLabel() : undefined}
-            class="focus-ui flex h-7 w-7 items-center justify-center rounded text-zinc-400 transition-colors focus:opacity-100 enabled:hover:bg-red-500/[0.08] enabled:hover:text-red-600 dark:enabled:hover:text-red-400"
+        <Show when={props.canEdit}>
+          <Tooltip.Anchor
+            content={removeLabel()}
+            class="shrink-0 opacity-100 transition-opacity sm:opacity-0 sm:group-hover/access-row:opacity-100 sm:group-focus-within/access-row:opacity-100"
           >
-            <i class="ti ti-x text-sm" />
-          </IconButton>
-        </Tooltip.Anchor>
-      </Show>
+            <IconButton
+              type="button"
+              label={t().remove({ name: displayName() })}
+              variant="ghost"
+              size="xs"
+              onClick={props.onRevoke}
+              disabled={props.disabled || props.lastManager}
+              aria-label={t().remove({ name: displayName() })}
+              // A disabled button takes no focus and touch has no hover, so the reason also reaches assistive technology.
+              aria-description={props.lastManager ? removeLabel() : undefined}
+              class="focus-ui flex h-7 w-7 items-center justify-center rounded text-zinc-400 transition-colors focus:opacity-100 enabled:hover:bg-red-500/[0.08] enabled:hover:text-red-600 dark:enabled:hover:text-red-400"
+            >
+              <i class="ti ti-x text-sm" />
+            </IconButton>
+          </Tooltip.Anchor>
+        </Show>
+      </div>
+      {/* Expanding pushes the rows below down, only on the viewer's own request. */}
+      <Show when={props.coverage}>{(coverage) => <GroupCoveragePanel coverage={coverage()} groupName={displayName()} />}</Show>
     </div>
   );
 }